<template>
  <div>
    <search-table
      ref="table"
      :searchItems="searchItems"
      :tableTitle="'区域方向资料'"
      :tableRowKey="'id'"
      :tableColumns="columns"
      :tableRemoteUrl="remoteUrl"
      :tableRemoteParams="remoteParams"
      :tableExtraBtns="tableEtraBtns"
      :tableOperators="tableOperators"
    >
    </search-table>

    <a-modal
      :title="$lang('区域方向配置')"
      v-model="isShowModal"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <p-grid-form :label-col="{ span: 8 }" ref="editorForm" :span="24" :items="modelitems" />
      <div v-show="error" style="margin-top: 20px; color: red">
        <p>{{ error }}</p>
      </div>
    </a-modal>

    <p-modal
      width="80%"
      :title="$lang('选择区域')"
      v-model="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOkModel"
      @cancel="handleCancel"
    >
      <div class="modelinfo">
        <div style="width: 50%">
          <p-grid-form
            :label-col="{ span: 8 }"
            :span="8"
            :wrapperCol="{ span: 8, offset: 2 }"
            :items="config.model.items"
            @submit="hanlderSubmit"
          />
          <p-table
            ref="table"
            row-key="areaNo"
            bordered
            :selectedRowKeys.sync="ModelselectedRowKeys"
            :columns="config.model.columns"
            :remoteUrl="config.model.remoteUrl"
            :remoteParams="remoteParamsModel"
            :rowSelectType="2"
            :data-source="dataList"
          >
          </p-table>
        </div>
        <div style="width: 50%">
          <p-grid-form
            ref="itemsInfo"
            :label-col="{ span: 8 }"
            :span="8"
            :wrapperCol="{ span: 8, offset: 2 }"
            :items="config.model.itemsInfo"
          />
        </div>
      </div>
    </p-modal>
  </div>
</template>

<script>
import SearchTable from '../../components/search-table'
import config from './config.js'
import { addAreaDirection, updateAreaDirection, delAreaDirection, toConfigure, getAllStoreArea } from './api'

export default {
  components: {
    'search-table': SearchTable,
  },

  data() {
    return {
      ModelselectedRowKeys: [],
      config,
      dataList: [],
      visible: false,
      type: true,
      remoteParamsModel: {},
      remoteParams: {},
      searchItems: config.items,
      columns: config.columns,
      remoteUrl: config.remoteUrl,
      isShowModal: false,
      selectedItem: null,
      confirmLoading: false,
      error: '',
      modelitems: null,
      tableEtraBtns: [
        {
          label: '新增',
          click: () => {
            this.showModal()
          },
        },
        {
          label: '批量删除',
          click: () => {
            this.deleteList()
          },
        },
        {
          label: '批量配置',
          click: () => {
            this.batchconfig()
          },
        },
      ],
      tableOperators: [
        {
          label: '修改',
          click: (record) => {
            this.uploadItem(record)
          },
        },
        {
          label: '删除',
          click: (record) => {
            this.deleteItem(record)
          },
        },
      ],
    }
  },
  created() {
    getAllStoreArea().then((res) => {
      if (!res.success) {
        this.$exception(res)
        return
      }
      let optAreaNoList = res.data.list.map((item) => {
        return { label: item.areaNo, value: item.areaNo }
      })
      console.log(optAreaNoList)
      this.modelitems = [
        {
          span: 24,
          type: 'input',
          name: 'id',
          hidden: true,
          label: 'id',
          value: '',
        },
        {
          span: 24,
          type: 'select',
          name: 'sourceAreaNo',
          required: true,
          label: '起点区域',
          options: optAreaNoList,
        },
        {
          span: 24,
          type: 'select',
          name: 'targetAreaNo',
          required: true,
          label: '终点区域',
          options: optAreaNoList,
        },
        {
          span: 24,
          type: 'select',
          name: 'deviceSystem',
          label: '下游WCS系统',
          required: true,
          value: '',
          options: [
            { label: 'GCS', value: 'GCS' },
            { label: 'MCS', value: 'MCS' },
            { label: 'RCS', value: 'RCS' },
            { label: 'SPS', value: 'SPS' },
            { label: '华瑞德MCS', value: 'HRD_MCS' },
          ],
        },
        {
          span: 24,
          type: 'select',
          name: 'entranceDirection',
          label: '入口方向',
          required: true,
          value: '',
          options: [
            { label: '上', value: 1 },
            { label: '下', value: 2 },
            { label: '左', value: 3 },
            { label: '右', value: 4 },
          ],
        },
        {
          span: 24,
          type: 'input',
          required: true,
          name: 'deviceStyle',
          label: '参数类型字段',
          value: '',
        },
        {
          span: 24,
          type: 'input',
          name: 'distance',
          required: true,
          label: '区域间距离',
          value: '',
        },
        {
          span: 24,
          type: 'input',
          name: 'routePower',
          required: true,
          label: '路线权重',
          value: '',
        },
        {
          span: 24,
          type: 'input',
          name: 'maxHeight',
          required: true,
          label: '高度限制',
          value: '',
        },
        {
          span: 24,
          type: 'input',
          name: 'maxWeight',
          required: true,
          label: '重量限制',
          value: '',
        },
        {
          span: 24,
          type: 'input',
          name: 'extend1',
          required: false,
          label: '提升机编号',
          value: '',
        },
        {
          span: 24,
          type: 'radio',
          name: 'isAvoid',
          required: true,
          label: '是否避让',
          value: true,
          options: [
            { label: '是', value: 1 },
            { label: '否', value: 0 },
          ],
        },
        {
          span: 24,
          type: 'radio',
          name: 'isLock',
          required: true,
          label: '锁定',
          value: true,
          options: [
            { label: '是', value: 1 },
            { label: '否', value: 0 },
          ],
        },
        {
          span: 24,
          type: 'input',
          name: 'remark',
          required: false,
          label: '备注',
          value: '',
        },
        {
          span: 24,
          type: 'input',
          name: 'directionNo',
          required: false,
          label: '方向分组',
          value: '',
        },
        {
          span: 24,
          type: 'number',
          name: 'priority',
          required: false,
          label: '优先级',
          value: '',
        },
      ]
    })
    this.$nextTick(() => {
      //this.$refs.editorForm.form.enableItem('typeCode')
    })
  },
  methods: {
    //批量配置弹窗确认
    handleOkModel() {
      console.log(this.ModelselectedRowKeys)
      if (this.ModelselectedRowKeys.length < 1) {
        this.$message.warn('请先选择区域')
        return
      }
      this.$refs.itemsInfo.form.validateFields(async (errs, vals) => {
        if (errs) {
          return
        }
        let data = {
          direction: this.ModelselectedRowKeys,
          whAreaDirection: vals,
        }
        try {
          this.confirmLoading = true
          let res = await toConfigure(data)
          if (res.success) {
            this.confirmLoading = false
            this.visible = false
            this.$message.success(res.message)
            this.remoteParams = { ...this.remoteParams }
          } else {
            this.confirmLoading = false
            this.visible = false
            this.$exception(res)
          }
        } catch (error) {
          this.$exception(error)
          this.confirmLoading = false
          this.visible = false
        }
      })
    },
    //批量配置弹窗
    batchconfig() {
      this.visible = true
      this.$nextTick(() => {
        this.ModelselectedRowKeys
        this.$refs.itemsInfo.form.resetFields()
      })
    },
    hanlderSubmit(e, form) {
      e.preventDefault()
      form.validateFields((error, values) => {
        console.log(error, values, 'valuesvaluesvaluesvaluesvalues')
        if (!error) {
          this.remoteParamsModel = { ...this.remoteParamsModel, ...values }
        }
      })
    },
    checkedChange(checked, item) {
      let p = {}
      item.isEnable = checked
      this.modelitems.forEach((t) => {
        Reflect.has(item, t.name) ? (p[t.name] = item[t.name]) : null
      })
      p.id = item.id
      this.handleUploadItem(p)
    },

    uploadItem(item) {
      this.selectedItem = item
      if (!item.typeDesc) item.typeDesc = ''
      this.showModal(item)
      this.$nextTick(() => {
        // this.$refs.editorForm.form.disableItem('typeCode')
        this.$refs.editorForm.form.setFieldsValue(item)
      })
    },

    deleteItem(item) {
      this.$confirm({
        content: this.$lang('是否删除选中项?'),
        onOk: () => {
          this.handleDelete(item.id)
        },
      })
    },

    deleteList() {
      let list = this.$refs.table.getSelectedItem()
      if (list.length == 0) {
        this.$message.warning(this.$lang('请选择要删除的项'))
        return
      }
      let ids = []
      list.forEach((t) => ids.push(t.id))
      this.$confirm({
        content: this.$lang('是否删除选中项?'),
        onOk: () => {
          return this.handleDelete(ids.join(','))
        },
      })
    },

    enterdetail(item) {
      this.$emit('changeStep', { step: 2, item: item })
    },

    showModal(data) {
      this.isShowModal = true
      if (data) {
        this.type = true
      } else {
        this.type = false
        this.$refs.editorForm.form.resetFields()
        // console.log(this.$refs.editorForm.resetFields(), '新增')
      }
      console.log(this.type)
    },

    handleOk(e) {
      this.$refs.editorForm.form.validateFields((errs, vals) => {
        if (errs) {
          return
        }
        console.log(this.type, '================')
        if (this.type) {
          //   vals.id = this.selectedItem.id
          this.handleUploadItem(vals)
        } else {
          this.handleAddItem(vals)
        }
        this.isShowModal = false
      })
    },

    handleCancel(e) {
      console.log('Clicked cancel button')
      this.visible = false
      this.selectmodelvisible = false
    },

    handleAddItem(params) {
      this.confirmLoading = true
      return addAreaDirection(params).then((res) => {
        this.confirmLoading = false
        if (!res.success) {
          this.$exception(res)
          return
        }
        this.$refs.table.reload()
        this.$message.success(this.$lang('新增成功'))
        this.handleCancel()
      })
    },

    handleUploadItem(params) {
      this.confirmLoading = true
      return updateAreaDirection(params).then((res) => {
        this.confirmLoading = false
        if (!res.success) {
          this.$exception(res)
          return
        }
        this.$refs.table.reload()
        this.$message.success(this.$lang('修改成功'))
        this.handleCancel()
      })
    },

    handleDelete(ids) {
      return delAreaDirection({ id: ids }).then((res) => {
        if (!res.success) {
          this.$exception(res)
          return
        }
        this.$refs.table.reload()
        this.$message.success(this.$lang('删除成功'))
      })
    },
  },
}
</script>

<style scoped>
.modelinfo {
  display: flex;
}
</style>
>
