<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="carDirectionFormItems" />

      <div v-show="error" style="margin-top: 20px; color: red">
        <p>{{ error }}</p>
      </div>
    </a-modal>
  </div>
</template>

<script>
import SearchTable from '../../components/search-table'
import { carDirectionSearchItems } from './config/searchItems'
import { columns } from './config/columns'
import { api as cardirectionApi, addItem, uploadItem, deleteList, getAllStoreArea } from './api/cardirection'

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

  data() {
    return {
      searchItems: carDirectionSearchItems,
      columns: columns,
      remoteUrl: cardirectionApi.queryList,
      remoteParams: {},

      isShowModal: false,
      selectedItem: null,
      confirmLoading: false,
      error: '',
      carDirectionFormItems: null,
      tableEtraBtns: [
        {
          label: '新增',
          click: () => {
            this.showModal()
          }
        },
        {
          label: '批量删除',
          click: () => {
            this.deleteList()
          }
        }
      ],
      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.carDirectionFormItems = [
        {
          type: 'select',
          name: 'sourceAreaNo',
          label: '起始区域',
          required: true,
          labelCol: { span: 6 },
          options: optAreaNoList
        },
        {
          type: 'select',
          name: 'targetAreaNo',
          label: '终点区域',
          required: true,
          labelCol: { span: 6 },
          options: optAreaNoList
        },
        {
          type: 'input',
          name: 'hoistNo',
          label: '提升机编号',
          required: true,
          labelCol: { span: 6 }
        },
        {
          type: 'select',
          name: 'isDefault',
          label: '是否为默认跨层方向',
          labelCol: { span: 6 },
          value: '',
          options: [
            { label: '否', value: 0 },
            { label: '是', value: 1 }
          ]
        }
      ]
    })
    this.$nextTick(() => {
      //this.$refs.editorForm.form.enableItem('typeCode')
    })
  },
  methods: {
    checkedChange(checked, item) {
      let p = {}
      item.isEnable = checked
      this.carDirectionFormItems.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()
      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() {
      console.log('aaaaaaaaaaaa')

      this.isShowModal = true
    },
    created() {},

    handleOk() {
      this.$refs.editorForm.form.validateFields((errs, vals) => {
        if (errs) {
          return
        }
        if (this.selectedItem) {
          vals.id = this.selectedItem.id
          this.handleUploadItem(vals)
        } else {
          this.handleAddItem(vals)
        }
      })
    },

    handleCancel() {
      this.isShowModal = false
      this.selectedItem = null
      if (this.$refs.editorForm) this.$refs.editorForm.form.resetFields()
    },

    handleAddItem(params) {
      this.confirmLoading = true
      return addItem(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 uploadItem(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 deleteList({ ids: ids }).then(res => {
        if (!res.success) {
          this.$exception(res)
          return
        }
        this.$refs.table.reload()
        this.$message.success(this.$lang('删除成功'))
      })
    }
  }
}
</script>

<style></style>
