<template>
  <div class="collection">
    <p-spin size="small"
            :spinning="spinning">
      <p-html ref="phtml"
              :items="items"
              :formTable="formTable"
              :pagination="pagination"
              :columns="columns"
              :keys="keys"
              :remoteDatas="[]"
              :dataSource="dataSource"
              :resetData="resetData"
              @selectChange="selectChange"
              @changePagination="changePagination"
              @changeClick="changeClick"
              @delClick="delClick"
              @hanlderSubmit="hanlderSubmit"
              @delAll="delAll"
              @queryName="addItem"></p-html>
    </p-spin>
    <p-modal :title="title"
             :visible="visible"
             :enlargeable="true"
             :draggable="true"
             :confirm-loading="confirmLoading"
             @ok="handleOk"
             @cancel="handleCancel"
             width="80%"
             :destroyOnClose="true"
             :maskClosable="false">
      <h3>主要信息</h3>
      <p-grid-form :span="8"
                   ref="forms"
                   :label-col="{ span: 10 }"
                   :items="addItems">
        <template slot="diy"
                  slot-scope="value, form">
          <p-cascader-zone-wms :paramValue="fields"
                               @change="
              (...args) => {
                handerChange(...args, form)
              }
            "
                               @popupVisibleChange="
              (open, value) => {
                popupVisibleChange(open, form)
              }
            " />
        </template>
      </p-grid-form>
      <!-- <p-card title="扩展字段"> -->
      <a-divider />
      <h3>扩展字段</h3>
      <!-- <a-divider /> -->
      <p-grid-form :span="8"
                   ref="forms1"
                   :label-col="{ span: 10 }"
                   :items="addItems1">
        <template slot="diy"
                  slot-scope="value, form">
          <p-cascader-zone-wms :paramValue="fields"
                               @change="
              (...args) => {
                handerChange1(...args, form)
              }
            "
                               @popupVisibleChange="
              (open, value) => {
                popupVisibleChange1(open, form)
              }
            " />
        </template>
      </p-grid-form>
      <!-- </p-card> -->
    </p-modal>
  </div>
</template>

<script>
import pHtml from './components/commonHtml.vue'
import { addItems, addItems1, columns, items } from './config/workCenter.js'
import { wmsdcPage, wmsdcAdd, wmsdcDelete, wmsdcUpdate } from './api/api.js'
import pCascaderZoneWms from '@/blocks/CascaderZone/wms.index.js'
import { sorter } from '../../utils/sort'

export default {
  name: 'Collection',
  data() {
    return {
      columns:null,
      addItems,
      addItems1,
      confirmLoading: false,
      visible: false,
      keys: 'dcId',
      title: '新增仓配中心',
      dcCode: '', // 编码
      dcName: '', // 名称
      resetData: {},
      fields: ['湖北省', '武汉市', '硚口区'],
      spinning: false,
      selectedRowKeys: [],
      dataSource: [], // 表格数据
      items: items,
      formTable: {
        // 表格头部按钮
        title: '仓配中心',
        options: [
          // button
          {
            name: '新增',
            icon: 'plus',
            action: 'queryName'
          },
          {
            name: '批量删除',
            icon: 'delete',
            action: 'delAll'
          }
        ]
      },
      pagination: {
        total: 0,
        pageSize: 10, //每页中显示10条数据
        current: 1,
        showSizeChanger: true,
        pageSizeOptions: ['10', '15', '20'], //每页中显示的数据
        showTotal: total => `共有 ${total} 条数据` //分页中显示总的数据
      }
    }
  },
  components: {
    pHtml,
    pCascaderZoneWms
  },
  created() {
    this.getQueryData()
    this.columns = sorter(columns)
  },
  methods: {
    handerChange(...args) {
      this.fields = args[0][0]
      // this.$refs.forms.form.setFieldsValue({ province1: args[0][0] })
    },
    popupVisibleChange(open, form) { },
    getQueryData() {
      // 查询
      let params = {
        dcName: this.dcName, // 名称
        dcCode: this.dcCode, // 编码
        pageNum: this.pagination.current, // 当前页码
        pageSize: this.pagination.pageSize // 每页数量
      }
      this.spinning = true
      wmsdcPage(params).then(res => {
        this.spinning = false
        if (res.success) {
          this.dataSource = res.data.list
          this.pagination.total = Number(res.data.totalCount)
        } else {
          this.$exception(res)
        }
      })
    },
    selectChange(selectedRowKeys, selectedRows) {
      // 勾选框
      this.selectedRowKeys = selectedRowKeys
    },
    changeClick(values) {
      // 修改
      this.visible = true
      this.title = '修改仓配中心'
      this.resetData = values
      this.fields = [
        values.province ? values.province : '',
        values.city ? values.city : '',
        values.area ? values.area : ''
      ]
      this.$nextTick(() => {
        this.$refs.forms.form.resetFields()
        this.$refs.forms.form.setFieldsValue({
          dcCode: values.dcCode,
          dcName: values.dcName,
          // dcType: values.dcType,
          isEnable: values.isEnable == '1' ? true : false,
          // billLines: values.billLines ? values.billLines : '',
          gpsX: values.gpsX ? values.gpsX : '',
          gpsY: values.gpsY ? values.gpsY : '',
          inDayMaxQuantity: values.inDayMaxQuantity ? values.inDayMaxQuantity : '',
          outDayMaxQuantity: values.outDayMaxQuantity ? values.outDayMaxQuantity : '',
          // pickItemRule: values.pickItemRule ? values.pickItemRule : '',
          province1: [
            values.province ? values.province : '',
            values.city ? values.city : '',
            values.area ? values.area : ''
          ],
          // province: values.province ? values.province : '',
          // city: values.city ? values.city : '',values.area ? values.area : ''
          // area: values.area ? values.area : '',
          addrs: values.addrs ? values.addrs : '',
          attribute1: values.attribute1 ? values.attribute1 : '',
          attribute2: values.attribute2 ? values.attribute2 : '',
          attribute3: values.attribute3 ? values.attribute3 : '',
          attribute4: values.attribute4 ? values.attribute4 : '',
          attribute5: values.attribute5 ? values.attribute5 : ''
        })
      })
    },
    delAll() {
      // 批量删除
      let that = this
      if (this.selectedRowKeys.length < 1) return this.$message.warn('请选择仓配中心！')
      this.$confirm({
        title: '是否删除?',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          that.delAllAjax(that.selectedRowKeys.join(','))
        }
      })
    },
    delClick(record) {
      let that = this
      this.$confirm({
        title: '是否删除?',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          that.delAllAjax(record.dcId)
        }
      })
    },
    delAllAjax(val) {
      // 批量删除
      let params = {
        ids: val // 每页数量
      }
      wmsdcDelete(params).then(res => {
        if (res.success) {
          this.$message.success('删除成功！')
          this.getQueryData()
        } else {
          //   this.$exception(res)
          this.$exception(res)
        }
      })
    },
    hanlderSubmit(event, form) {
      // 查询按钮
      form.validateFields((error, values) => {
        if (!error) {
          this.dcName = values.dcName
          this.dcCode = values.dcCode
          this.getQueryData()
        }
      })
    },
    handleOk(e) {
      this.$refs.forms.form.validateFields((error, values) => {
        if (!error) {
          if (this.title == '修改仓配中心') {
            // 修改
            this.changeAjax(values)
          } else {
            // 新增
            this.addAjax(values)
          }
        }
      })
    },
    changeAjax(values) {
      // 修改
      let params = {
        dcId: this.resetData.dcId,
        dcCode: values.dcCode,
        dcName: values.dcName,
        dcType: '1',
        isEnable: values.isEnable ? '1' : '0',
        // billLines: values.billLines,
        gpsX: values.gpsX,
        gpsY: values.gpsY,
        inDayMaxQuantity: values.inDayMaxQuantity,
        outDayMaxQuantity: values.outDayMaxQuantity,
        // pickItemRule: values.pickItemRule,
        province: this.fields[0],
        city: this.fields[1],
        area: this.fields[2],
        addrs: values.addrs,
        attribute1: values.attribute1,
        attribute2: values.attribute2,
        attribute3: values.attribute3,
        attribute4: values.attribute4,
        attribute5: values.attribute5
      }
      this.confirmLoading = true
      wmsdcUpdate(params).then(res => {
        this.confirmLoading = false
        if (res.success) {
          this.visible = false
          this.getQueryData()
        } else {
          this.$exception(res)
        }
      })
    },
    addAjax(values) {
      // 新增
      let params = {
        dcCode: values.dcCode,
        dcName: values.dcName,
        dcType: '1',
        isEnable: values.isEnable ? '1' : '0',
        gpsX: values.gpsX,
        gpsY: values.gpsY,
        inDayMaxQuantity: values.inDayMaxQuantity,
        outDayMaxQuantity: values.outDayMaxQuantity,
        province: this.fields[0],
        city: this.fields[1],
        area: this.fields[2],
        addrs: values.addrs,
        attribute1: values.attribute1,
        attribute2: values.attribute2,
        attribute3: values.attribute3,
        attribute4: values.attribute4,
        attribute5: values.attribute5
      }
      this.confirmLoading = true
      wmsdcAdd(params).then(res => {
        this.confirmLoading = false
        if (res.success) {
          this.visible = false
          this.getQueryData()
        } else {
          this.$exception(res)
        }
      })
    },
    handleCancel(e) {
      this.visible = false
    },
    addItem() {
      // 新增
      this.visible = true
      this.title = '新增仓配中心'
    },
    changePagination(pagination, filters, sorter) {
      // 分页变化
      this.pagination = pagination
      this.getQueryData()
    }
  }
}
</script>

<style lang="less" scoped>
.detialModal {
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 20px;
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  line-height: 22px;
  padding: 18px 12px;
}
</style>
