<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"
        @addName="addItem"
      ></p-html>
    </p-spin>
    <p-modal
      :title="title"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      width="80%"
      :enlargeable="true"
      :draggable="true"
      :destroyOnClose="true"
      :maskClosable="false"
    >
      <p-grid-form
        :disableItem="disabledItem"
        :span="12"
        ref="forms"
        :label-col="{ span: 4 }"
        :items="addItems"
      ></p-grid-form>
    </p-modal>
  </div>
</template>

<script>
import { setwarehouse } from './config/warehousemixin.js'
import pHtml from './components/commonHtml.vue'
import API from './api/default.js'
import { columns,items } from './config/platform.js'
import { remote } from './config/remote'
import { platformPage, platformAdd, delPlatform, platformUpdate, warehouseId } from './api/api.js'
import { grid } from "./config/common";
import { sorter } from '../../utils/sort'

const addItems = function(that) {
  return [
    {
      type: 'search',
      name: 'warehouseName',
      label: '仓库名称',
      title: '仓库',
	  rowKey: 'warehouseId',
	  targetClick: true,
	  targetValueKey: 'warehouseName',
	  ...grid,
      value: '',
      toolBar: {
        items: [
		  /* {name: 'warehouseId',label: '仓库id',hidden: true},
		  {name: 'warehouseCode',label: '仓库编码',hidden: true}, */
          {
            type: 'input',
            name: 'warehouseName',
            label: '仓库名称',
            span: 8,
            // placeholder: '请输入单位编号/单位名称/助记码',
            value: ''
          },
          {
            type: 'input',
            name: 'warehouseCode',
            label: '仓库编码',
            span: 8,
            // placeholder: '请输入单位编号/单位名称/助记码',
            value: ''
          },
        ]
      },
      tableConfig: {
        rowKey: 'warehouseName',
        rowSelectType: 1,
        hasRowSelectCheck: true,
        columns: [
          { dataIndex: 'warehouseId', title: '仓库ID', hidden: true },
            { dataIndex: 'warehouseName', title: '仓库名称' },
            { dataIndex: 'warehouseCode', title: '仓库编码' },
          { dataIndex: 'warehouseType', title: '仓库类型' },
          { dataIndex: 'dcName', title: '所属仓配中心' }
        ]
      },
      value: '',
      remoteUrl: API.warehouse,
      on: {
        ok(event, value, rowData, form) {
          that.warehouseRecord = rowData[0]
        }
      }
    },
    {
      type: 'input',
      name: 'platCode',
      label: '月台编码',
	  ...grid,
      required: true
    },
    {
      type: 'input',
      name: 'platName',
      label: '月台名称',
	  ...grid,
      required: true
    },

    {
      type: 'select',
      name: 'platType',
      label: '月台类型',
      required: true,
	  ...grid,
      ...remote('pub_platform_plattype')
    },
    {
      type: 'select',
      name: 'platStatus',
      label: '状态',
      value: '空闲',
	  ...grid,
      ...remote('pub_platform_status')
    },
    {
      type: 'switch',
      name: 'isEnable',
      value: true,
      required: true,
	  ...grid,
      label: '是否启用'
    },

    {
      span: 24,
      type: 'textarea',
      name: 'remark',
      label: '备注',
      labelCol: {span: 2},
	  wrapperCol:{span:21}
    }
  ]
}
export default {
  name: 'Collection',
  mixins: [setwarehouse],
  data() {
    return {
      columns:null,
      addItems: addItems(this),
      confirmLoading: false,
      visible: false,
      disabledItem: 'platStatus',
      keys: 'platId',
      title: '新增月台',
      platCode: '', // 编码
      warehouseRecord: {},
      platName: '', // 名称
      platType: '', // 类型
      resetData: {},
      warehouseNameQuery: '',
      spinning: false,
      selectedRowKeys: [],
      dataSource: [], // 表格数据
      items: items,
      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.columns = sorter(columns)
  },
  methods: {
    getQueryData(params) {
      // 查询
      params = {
        // platName: this.platName, // 名称
        // platCode: this.platCode, // 编码
        // platType: this.platType, // 类型
        pageNum: this.pagination.current, // 当前页码
        pageSize: this.pagination.pageSize ,// 每页数量
				...params
      }
      this.spinning = true
      platformPage(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) {
      let params = {
        id: values.warehouseId
      }
      warehouseId(params).then(res => {
        if (res.success) {
          this.warehouseNameQuery = res.data.warehouseName
          this.changeClicks(values)
        } else {
          this.$exception(res)
        }
      })
    },
    changeClicks(values) {
      // 修改
      this.visible = true
      this.disabledItem = false
      this.title = '修改月台'
      this.resetData = values
      this.warehouseRecord.dcId = values.dcId
      this.warehouseRecord.warehouseId = values.warehouseId
      this.$nextTick(() => {
        this.$refs.forms.form.resetFields()
        this.$refs.forms.form.setFieldsValue({
          platCode: values.platCode,
          platName: values.platName,
          platType: values.platType ? values.platType : '',
          dcId: values.dcId ? values.dcId : '',
          warehouseName: this.warehouseNameQuery ? this.warehouseNameQuery : '',
          isEnable: values.isEnable == '1' ? true : false,
          platStatus: values.platStatus ? values.platStatus : '',
          remark: values.remark ? values.remark : ''
        })
      })
    },
    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.platId)
        }
      })
    },
    delAllAjax(val) {
      // 批量删除
      let params = {
        ids: val // 每页数量
      }
      delPlatform(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.platName = values.platName
          this.platCode = values.platCode
          this.platType = values.platType
          this.getQueryData(values)
        }
      })
    },
    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 = {
        platCode: values.platCode,
        platName: values.platName,
        platType: values.platType,
        platId: this.resetData.platId,
        dcId: this.warehouseRecord.dcId,
        warehouseId: this.warehouseRecord.warehouseId,
        platStatus: values.platStatus,
        remark: values.remark,
        isEnable: values.isEnable ? '1' : '0'
      }
      this.confirmLoading = true
      platformUpdate(params).then(res => {
        this.confirmLoading = false
        if (res.success) {
          this.visible = false
          this.getQueryData()
        } else {
          this.$exception(res)
        }
      })
    },
    addAjax(values) {
      // 新增
      let params = {
        platCode: values.platCode,
        platName: values.platName,
        platType: values.platType,
        dcId: this.warehouseRecord.dcId,
        warehouseName: this.warehouseRecord.warehouseName,
        warehouseId: this.warehouseRecord.warehouseId,
        isEnable: values.isEnable ? '1' : '0',
        platStatus: values.platStatus,
        remark: values.remark
      }
      this.confirmLoading = true
      platformAdd(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.disabledItem = 'platStatus'
      this.title = '新增月台'
    },
    changePagination(pagination, filters, sorter) {
      // 分页变化
      this.pagination = pagination
      this.getQueryData()
    }
  }
}
</script>

<style lang="less" scoped></style>
