<template>
  <div class="commonHtml">
    <p-card :title="formTable.title">
      <!-- <a slot="extra" href="#">more</a> -->
      <span slot="extra">
        <template v-for="(item, index) in formTable.options">
          <p-button type="primary" style="margin-right: 10px" :icon="item.icon" @click="clickBtn(item)" :key="index">{{
            item.name
          }}</p-button>
        </template>
      </span>
      <div class="gridFroms">
        <p-grid-form ref="gridform" :items="formItems" @submit="hanlderSubmit" />
      </div>
      <p-table
        dragle
        autoWidth
        rowSelectFixed
        :columns="columns"
        :data-source="data"
        bordered
        :hasRowCount="true"
        :pagination="pagination"
        :scroll="{ x: true }"
        @selectChange="selectChange"
        @change="changePagination"
        :row-key="keys"
      >
        <span slot="isEnable" slot-scope="text">
          {{ text == '1' ? '启用' : '停用' }}
          <!-- <p-switch checked-children="启用"
                      un-checked-children="停用"
                      :key='text'
                      :default-checked='text=="1"? true: false' /> -->
        </span>
        <span slot="warehouseAttr" slot-scope="text">
          <span>{{ text == 'P' ? '物理仓' : '逻辑仓' }}</span>
        </span>
        <span slot="distributionDirection" slot-scope="text">
          <span>{{ remoteDataFun1(text) }}</span>
        </span>
        <span slot="warehouseType" slot-scope="text">
          <span>{{ remoteDataFun(text) }}</span>
        </span>
        <span slot="isPickingEnabled" slot-scope="text">
          <span>{{ text == '1' ? '启用' : '停用' }}</span>
        </span>
        <span slot="action" slot-scope="text, record">
          <a @click="changeClick(record)" href="javascript:;">修改</a>
          <a-divider type="vertical" />
          <a @click="delClick(record)" style="margin-right: 10px" href="javascript:;">删除</a>
        </span>
      </p-table>
    </p-card>
  </div>
</template>

<script>
import { dict_listbytype } from '../api/api_warehouse.js'
export default {
  name: 'Collection',
  data() {
    return {
      name: '',
      item: [],
      dataType: [],
      dataType1: [],
      data: [],
      formItems: [],
      paginations: {},
      itemOption: {
        span: 6,
        lableCol: { span: 6 },
        style: { textAlign: 'center' },
        type: 'buttonGroup',
        options: [
          {
            value: '查询',
            icon: 'search',
            btnType: 'primary',
            style: 'margin-right:15px;',
            htmlType: 'submit',
          },
          {
            value: '重置',
            name: 'ccz',
            icon: 'redo',
            on: {
              click(event, form) {
                form.resetFields()
              },
            },
          },
        ],
      },
    }
  },
  props: {
    items: {
      type: Array,
      default: [],
    },
    remoteDatas: {
      type: Array,
      default: [],
    },
    keys: {
      type: String,
      default: '',
    },
    resetData: {
      // 修改初始数据
      type: Object,
      default: {},
    },
    columns: {
      type: Array,
      default: [],
    },
    formTable: {
      type: Object,
      default: {},
    },
    dataSource: {
      type: Array,
      default: [],
    },
    pagination: {
      type: Object,
      default: {},
    },
  },
  watch: {
    pagination(newVal) {
      this.paginations = newVal
    },
    dataSource(newVal) {
      this.data = newVal
    },
    remoteDatas(newVal) {
      this.dataType1 = newVal
    },
  },
  methods: {
    dict_WH_TYPE() {
      dict_listbytype({ dicttypeCodes: 'WH_TYPE' }).then((res) => {
        if (res.success) {
          this.dataType = res.data
        }
      })
    },
    remoteDataFun(text) {
      let temp = this.dataType.find((v) => v.dictId == text)
      return temp ? temp.dictName : text
    },
    remoteDataFun1(text) {
      let temp = this.dataType1.find((v) => v.dictCode == text)
      console.log(text, temp, this.dataType1, 'temptemptemp')
      return temp ? temp.dictName : text
    },
    hanlderSubmit(event, form) {
      event.preventDefault()
      this.$emit('hanlderSubmit', event, form)
    },
    clickBtn(item) {
      // 按钮
      this.$emit(item.action, true)
    },
    changeClick(record) {
      this.$emit('changeClick', record)
    },
    delClick(record) {
      this.$emit('delClick', record)
    },
    selectChange(selectedRowKeys, selectedRows) {
      //
      this.$emit('selectChange', selectedRowKeys, selectedRows)
    },
    changePagination(pagination, filters, sorter) {
      // 分页变化
      this.$emit('changePagination', pagination, filters, sorter)
      // this.pagination = pagination
      // this.pagination.pageNum = pagination.current
      // this.getlistCompanyByAuthId()
    },
  }, //methods
  created() {
    this.dict_WH_TYPE() //数据字典 仓库类型
    // this.dataType = this.remoteDatas
    let nItem = { ...this.itemOption }
    /*   2021.05.24修改
	if (this.items.filter(t => !t.hidden).length % 3 == 0) {
      nItem.span = 24
      nItem.style = { textAlign: 'right' }
    } */
    // this.items.push(nItem)
    this.formItems = [...this.items, ...[nItem]]
    this.item = this.items //仓库首页搜索字段接收父组件items
    this.paginations = this.pagination
    this.data = this.dataSource
  },
}
</script>

<style lang="less" scoped>
/deep/ .ant-table-scroll {
  overflow-x: auto;
}
.gridFroms {
  background: #fff;
  // padding: 20px 0;
  padding-bottom: 16px;
}
.titleDiv {
  display: inline-block;
  float: left;
}
.btnDiv {
  height: 45px;
  line-height: 35px;
  padding-left: 20px;
  padding-bottom: 10px;
  overflow: hidden;
  border-bottom: 1px solid #e8e8e8;
}
.tableDiv {
  // padding: 10px 20px 20px 20px;
  padding-top: 10px;
  background: #fff;
  margin-top: 10px;
}
.tabDiv {
  padding: 20px;
}
.btnRig {
  float: right;
  display: inline-block;
}
</style>
