<template>
  <div>
    <!-- <div class="box-p20-bg">
      <p-grid-form :span="6" :label-col="{ span: 9 }" :items="searchItems" />
    </div> -->

    <a-card :bodyStyle="{ border: 'none' }" :title="tableTitle">
      <template v-slot:extra>
        <template v-for="(item, i) of tableEtraBtns">
          <a-divider v-if="i > 0" :key="item.label" type="vertical" />
          <p-button :key="i" type="primary" @click="item.click">{{ $lang(item.label) }}</p-button>
        </template>
      </template>
      <p-grid-form ref="form" :span="6" :label-col="{ span: 5 }" :wrapperCol="{ span: 19 }" :items="searchItems" />
      <!-- <a-divider /> -->
      <p-table
        style="margin-top:12px"
        ref="table"
        :row-key="'drId'"
        :bordered="true"
        :filterDropdownColum="false"
        :colorTransformRow="false"
        :columns="columns"
        :data-source.sync="data"
        :selectedRowKeys.sync="selectedRowKeys"
        :remoteUrl="remoteUrl"
        :remoteData="remoteParams"
        :remoteParams="remoteParams"
      >
        <!-- <template slot="operation" slot-scope="text, record">
          <a-divider type="vertical" />
          <span class="table-operator" @click="detailpage(record)">详情</span>
          <a-divider type="vertical" />
          <span class="table-operator" @click="deleteItem(record)">删除</span>
        </template> -->
      </p-table>
    </a-card>

    <a-modal :title="$lang('仓客户详情')" v-model="isShowModal" :width="800" :footer="false" @ok="handleOk">
      <a-descriptions v-if="detailData">
        <a-descriptions-item
          v-for="item of columns.filter(t => !t.hidden && t.key != 'operation' && t.dataIndex != '_row_count')"
          :key="item.key"
          :label="item.title"
        >
          {{ detailData[item.key] }}
        </a-descriptions-item>
      </a-descriptions>
    </a-modal>
  </div>
</template>

<script>
import SearchTable from '../../components/search-table'
import { dictTypeFormItems } from './config/formItems'
import columns from './config/columns'
import searchItems from './config/searchItems'
import API from './api/api'
// import API from './api/cargoowner'
columns.forEach(item => {
  item.ellipsis = true
})
import { sorter } from '../../utils/sort'
import { setCargoOwner } from '@/views/kzyWMS/utils/setCargoOwner'
// console.log(columns, '1212')
export default {
  components: {
    'search-table': SearchTable
  },
  mixins: [setCargoOwner],
  data() {
    return {
      detailData: {},
      tableTitle: '客户与仓库关系列表',
      cargoOwner: {},
      warehouse: {},
      searchItems: searchItems(this),
      columns: null,
      data: null,
      selectedRowKeys: [],
      remoteUrl: API.datarelationWhCustomer,
      remoteParams: {},
      isShowModal: false,
      selectedItem: null,
      dictTypeFormItems: dictTypeFormItems,
      confirmLoading: false,
      error: '',
      tableEtraBtns: [
        // {
        //   label: '新增',
        //   click: () => {
        //     // console.log(this.$refs.table.$children[0].form.getForm().getFieldsValue())
        //     // console.log(this.cargoOwner, this.warehouse)
        //     let l = {}
        //     l.cargoOwner = this.cargoOwner
        //     l.warehouse = this.warehouse
        //     console.log(l)
        //     this.$emit('changeStep', { step: 2, item: l })
        //     // l = {}
        //   }
        // },
        // {
        //   label: '批量删除',
        //   click: () => {
        //     // console.log(this.$refs)
        //     // let list = this.$refs.table.getSelectedItem()
        //     // console.log(this.selectedRowKeys)
        //     let list = this.selectedRowKeys
        //     // list = list.map(item => {
        //     //   return item.cargoOwnerId
        //     // })
        //     // console.log(list)
        //     if (list.length > 0) {
        //       this.$confirm({
        //         content: '是否删除选中项?',
        //         onOk: () => {
        //           this.handleDelete(list.join(','))
        //         }
        //       })
        //     } else {
        //       this.$message.warning('请先勾选数据')
        //     }
        //   }
        // }
        // { label: '导出', click: () => {} },
        // { label: '导入', click: () => {} },
        // { label: '下载模板', click: () => {} }
      ],
      tableOperators: [
        {
          label: '详情',
          click: record => {
            this.detailpage(record)
          }
        },
        // {
        //   label: '修改',
        //   click: record => {
        //     this.uploadItem(record)
        //   }
        // },
        {
          label: '删除',
          click: record => {
            console.log(record)
            this.deleteItem(record)
          }
        }
      ]
    }
  },

  created() {
    this.columns = sorter(columns)
  },

  methods: {
    checkedChange(checked, item) {
      console.log(checked, item)
      // item.isEnable = checked ? 1 : 0;
      // uploadItem(item).then(res => {
      //   if (!res.success) {
      //     this.$message.error(res.message);
      //     return;
      //   }
      //   this.$refs.table.reload();
      // });
    },
    detailpage(item) {
      let columns = this.columns
      columns = columns.slice(1, this.columns.length - 1)
      // console.log(columns)
      let a = {}
      Object.keys(item).forEach(item1 => {
        // console.log(item1)
        a[item1] = item[item1]
      })
      //   console.log(a)
      // this.$emit('changeStep', { step: 3, item: a })
      this.getdetail(item)
    },
    uploadItem(item) {
      console.log(item)
      let columns = this.columns
      columns = columns.slice(1, this.columns.length - 1)
      // console.log(columns)
      let a = {}
      Object.keys(item).forEach(item1 => {
        // console.log(item1)
        a[item1] = item[item1]
      })
      console.log(a)
      this.$emit('changeStep', { step: 2, item: a })
    },

    deleteItem(item) {
      console.log(item)
      this.$confirm({
        content: '是否删除选中项?',
        onOk: () => {
          this.handleDelete(item.drId)
        }
      })
    },
    enterdetail(item) {
      this.$emit('changeStep', { step: 2, item: item })
    },
    handleOk() {
      this.$refs.editorForm.form.validateFields((errs, vals) => {
        console.log(errs, vals)
        if (errs) {
          return
        }
        // vals.isEnable = vals.isEnable ? 1 : 0;
        if (this.selectedItem) {
          vals.typeId = this.selectedItem.typeId
          this.handleUploadItem(vals)
        } else {
          this.handleAddItem(vals)
        }
      })
    },

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

    handleAddItem(params) {
      addItem(params).then(res => {
        if (!res.success) {
          this.$message.error(res.message)
          return
        }
        this.$refs.table.reload()
        this.$message.success('新增成功')
        this.handleCancel()
      })
    },

    handleUploadItem(params) {
      uploadItem(params).then(res => {
        if (!res.success) {
          this.$message.error(res.message)
          return
        }
        this.$refs.table.reload()
        this.$message.success('修改成功')
        this.handleCancel()
      })
    },
    async getdetail(item) {
      console.log(item, '===')
      let that = this
      let data = {
        id: item.drId
      }
      let res = await API.infos(data)
      console.log(res)
      if (res.success) {
        res.data.cargoOwnerName = item.cargoOwnerName
        this.isShowModal = true
      }
      this.detailData = res.data
    },

    async handleDelete(id) {
      console.log(id)
      let res = await API.delete({ ids: id })
      if (res.success) {
        this.$refs.table.reload()
        this.$message.success('删除成功')
      } else {
        this.$message.error(res.message)
        return
      }
    }
  }
}
</script>

<style>
.box-p20-bg {
  padding: 20px;
  margin-bottom: 20px;
  background: #fff;
}
.table-operator {
  color: #2b80ff;
  cursor: pointer;
}
.table-operator:hover {
  text-decoration: underline;
}
</style>
