<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="remoteDatas"
        :dataSource="dataSource"
        :resetData="resetData"
        @selectChange="selectChange"
        @changePagination="changePagination"
        @changeClick="changeClick"
        @delClick="delClick"
        @hanlderSubmit="hanlderSubmit"
        @delAll="delAll"
        @addName="addItem"
      ></p-html>
    </p-spin>
    <p-modal
      :title="title"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      width="50%"
      :enlargeable="true"
      :draggable="true"
      :destroyOnClose="true"
      :maskClosable="false"
    >
      <div>
        <p-grid-form ref="forms1" :items="addItems"> </p-grid-form>
      </div>
    </p-modal>
  </div>
</template>

<script>
import pHtml from './components/commonHtml.vue'
import { querySorterAndChuteList, saveSorterAndChute, remoteData } from './api/api.js'
import { remote } from './config/remote'

let grid = {
  labelCol: { span: 6 },
  span: 8,
}
const addItems = function (that) {
  return [
    {
      type: 'select',
      name: 'distributionDirection',
      label: '配送方向',
      span: 24,
      labelCol: { span: 6 },
      required: true,
      ...remote('common_shiplineid'),
    },
    { type: 'input', required: true, name: 'chuteCode', span: 24, labelCol: { span: 6 }, label: '滑道号' },
  ]
}
export default {
  name: 'Collection',
  data() {
    return {
      columns: [
        {
          title: '配送方向',
          dataIndex: 'distributionDirection',
          scopedSlots: {
            customRender: 'distributionDirection',
          },
        },
        {
          title: '滑道号',
          dataIndex: 'chuteCode',
        },
        {
          title: '操作',
          width: 100,
          align: 'center',
          fixed: 'right',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      addItems: addItems(this),
      confirmLoading: false,
      visible: false,
      fields: [],
      keys: 'id',
      title: '新增分拣机滑道对应关系',
      remoteDatas: [],
      resetData: {},
      spinning: false,
      selectedRowKeys: [],
      selectedRows: [],
      dataSource: [], // 表格数据
      formVals: {},
      // 搜索字段, 传递给p-html子组件展示
      items: [
        {
          type: 'input',
          name: 'chuteCode',
          label: '滑道号',
          span: 8,
          labelCol: { span: 6 },
          value: '',
        },
        // {
        //   type: 'input',
        //   name: 'distributionDirection',
        //   label: '配送方向',
        //   span: 8,
        //   labelCol: { span: 6 },
        //   value: '',
        // },
        {
          type: 'select',
          name: 'distributionDirection',
          label: '配送方向',
          span: 8,
          labelCol: { span: 6 },
          ...remote('common_shiplineid'),
        },
      ],
      formTable: {
        // 表格头部按钮
        title: '分拣机滑道对应关系',
        options: [
          // button
          {
            name: '新增',
            icon: 'plus',
            action: 'addName',
          },
          {
            name: '批量删除',
            icon: 'delete',
            action: 'delAll',
          },
        ],
      },
      pagination: {
        total: 0,
        pageSize: 10, //每页中显示10条数据
        current: 1,
        showSizeChanger: true,
        pageSizeOptions: ['10', '15', '20'], //每页中显示的数据
        showTotal: (total) => `共有 ${total} 条数据`, //分页中显示总的数据
      },
    }
  },
  components: {
    pHtml,
  },
  created() {
    this.getQueryData()
    this.remoteData()
  },
  mounted() {},
  methods: {
    handerChange(...args) {
      this.fields = args[0][0]
    },
    remoteData() {
      // 字典
      let params = {
        type: 'common_shiplineid',
      }
      remoteData(params).then((res) => {
        if (res.success) {
          this.remoteDatas = res.data
        } else {
          this.$exception(res)
        }
      })
    },
    getQueryData() {
      // 查询
      let params = {
        ...this.formVals,
        pageNum: this.pagination.current, // 当前页码
        pageSize: this.pagination.pageSize, // 每页数量
      }
      this.spinning = true
      querySorterAndChuteList(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
      this.selectedRows = selectedRows
    },
    changeClick(values) {
      // 修改
      this.visible = true
      this.title = '修改分拣机滑道对应关系'
      this.resetData = values
      console.log(values, 'valuesvaluesvaluesvaluesvalues')
      this.$nextTick(() => {
        this.$refs.forms1.form.setFieldsValue({
          ...values,
        })
      })
    },
    delAll() {
      // 批量删除
      let that = this
      if (this.selectedRows.length < 1) return this.$message.warn('请选择数据！')
      this.$confirm({
        title: '是否删除?',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          that.delAllAjax(that.selectedRows, 'all')
        },
      })
    },
    delClick(record) {
      let that = this
      this.$confirm({
        title: '是否删除?',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          that.delAllAjax(record)
        },
      })
    },
    delAllAjax(val, type) {
      // 批量删除
      let arr = type ? val : [val]
      let params = {
        deleteItems: arr,
      }
      saveSorterAndChute(params).then((res) => {
        if (res.success) {
          this.$message.success('删除成功！')
          this.getQueryData()
        } else {
          this.$exception(res)
        }
      })
    },
    hanlderSubmit(event, form) {
      // 查询按钮
      form.validateFields((error, values) => {
        if (!error) {
          this.formVals = values
          this.getQueryData()
        }
      })
    },
    handleOk(e) {
      this.$refs.forms1.form.validateFields((error, values) => {
        if (!error) {
          if (this.title == '修改分拣机滑道对应关系') {
            // 修改
            this.changeAjax(values)
          } else {
            // 新增
            this.addAjax(values)
          }
        }
      })

      // Object.assign(target, source)
    },
    changeAjax(values) {
      // 修改
      values = { ...this.resetData, ...values }
      let params = {
        updateItems: [values],
      }
      this.confirmLoading = true
      saveSorterAndChute(params).then((res) => {
        this.confirmLoading = false
        if (res.success) {
          this.visible = false
          this.getQueryData()
        } else {
          this.$exception(res)
        }
      })
    },
    addAjax(values) {
      // 新增
      let params = {
        insertItems: [
          {
            ...values,
          },
        ],
      }
      this.confirmLoading = true
      saveSorterAndChute(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) {
      // 分页变化
      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>
