<template>
  <div>
    <search-table ref="table"
                  :searchItems="searchItems"
                  :tableTitle="'公共字典分类'"
                  :tableRowKey="'typeId'"
                  :tableColumns="columns"
                  :tableRemoteUrl="remoteUrl"
                  :tableRemoteParams="remoteParams"
                  :tableExtraBtns="tableEtraBtns"
                  :tableOperators="tableOperators"
                  :scrollY="scrollY"
                  @changeShow="changeShow">
      <template v-slot:isEnable="{ record }">
        <SwitchValue :value="record.isEnable" @change="checkedChange($event, record)" />
      </template>
    </search-table>
    <a-modal :title="$lang('字典分类')"
             v-model="isShowModal"
             :confirm-loading="confirmLoading"
             @ok="handleOk"
             @cancel="handleCancel">
      <p-grid-form ref="editorForm" :span="24" :items="formItems" />
      <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 { dictTypeSearchItems } from './config/searchItems'
import { columns } from './config/columns'
import { dictTypeFormItems } from './config/formItems'
import { api as dicTypeApi, addItem, uploadItem, deleteList } from './api/dictionaries-type'
import { sorter } from '../../utils/sort'
import calcHeight from '@/views/kzyWMS/modules/calcHeight'

export default {
  mixins:[calcHeight],
  components: {
    'search-table': SearchTable
  },

  data() {
    return {
      searchItems: dictTypeSearchItems,
      columns: null,

      remoteUrl: dicTypeApi.queryList,
      remoteParams: {},

      isShowModal: false,
      selectedItem: null,
      formItems: dictTypeFormItems,
      confirmLoading: false,
      error: '',

      tableEtraBtns: [
        {
          label: '新增',
          click: () => {
            this.showModal()
          }
        },
        {
          label: '批量删除',
          click: () => {
            this.deleteList()
          }
        },
        // { label: '导出', click: () => { } },
        // { label: '导入', click: () => { } },
        // { label: '下载模板', click: () => { } }
      ],
      tableOperators: [
        {
          label: '明细',
          click: record => {
            this.enterdetail(record)
          }
        },
        {
          label: '修改',
          click: record => {
            this.uploadItem(record)
          }
        },
        {
          label: '删除',
          click: record => {
            this.deleteItem(record)
          }
        }
      ]
    }
  },

  created() {
    this.columns = sorter(columns)
  },
  methods: {
    checkedChange(checked, item) {
      let p = {}
      item.isEnable = checked
      this.formItems.forEach(t => {
        Reflect.has(item, t.name) ? (p[t.name] = item[t.name]) : null
      })
      p.typeId = item.typeId
      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.typeId)
        }
      })
    },

    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.typeId))
      this.$confirm({
        content: this.$lang('是否删除选中项?'),
        onOk: () => {
          return this.handleDelete(ids.join(','))
        }
      })
    },

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

    showModal() {
      this.isShowModal = true;
      this.$nextTick(() => {
        this.$refs.editorForm.form.enableItem('typeCode')
      })
    },

    handleOk() {
      this.$refs.editorForm.form.validateFields((errs, vals) => {
        if (errs) {
          return
        }
        if (this.selectedItem) {
          vals.typeId = this.selectedItem.typeId
          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>
