<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="form"  :span="8" :label-col="{ span: 9 }" :items="item" @submit="hanlderSubmit" />
      </div>
      <p-table
		auto-width
		:scroll="{x:true}"
        :columns="columns"
        :data-source="data"
        bordered
        :pagination="pagination"
        @selectChange="selectChange"
        @change="changePagination"
        :row-key="keys"
      >
        <span slot="isEnable" slot-scope="text">
          {{ text == '1' ? '启用' : '停用' }}
        </span>
        <span slot="action" slot-scope="text, record">
          <!-- <a @click="changeClick(record)" style="margin-right: 10px" href="javascript:;">修改</a> -->
          <a @click="delClick(record)" style="margin-right: 10px" href="javascript:;">删除</a>
        </span>
      </p-table>
    </p-card>
  </div>
</template>

<script>
import { setCargoOwner } from '@/views/kzyWMS/utils/setCargoOwner'
export default {
  name: 'Collection',
  data() {
    return {
      name: '',
      item: [],
      data: [],
      paginations: {},
      itemOption: {
        span: 6,
        type: 'buttonGroup',
        style: { textAlign: 'left' },
        options: [
          {
            value: '查询',
            icon: 'search',
            btnType: 'primary',
            style: 'margin-left:30px;margin-right:10px;',
            htmlType: 'submit'
          },
          {
            value: '重置',
            name: 'ccz',
            icon: 'redo',
            on: {
              click(event, form) {
                form.resetFields()
              }
            }
          }
        ]
      }
    }
  },
  props: {
    items: {
      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: {}
    }
  },
   mixins:[setCargoOwner],
  watch: {
    pagination(newVal) {
      this.paginations = newVal
    },
    dataSource(newVal) {
      console.log(newVal, 'newValnewValnewVal')
      this.data = newVal
    }
  },
  created() {
    this.items.push(this.itemOption)
    this.item = this.items
    this.paginations = this.pagination
    this.data = this.dataSource
  },
  methods: {
    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)
      // console.log(pagination, filters, sorter, '分页变化分页变化')
      // this.pagination = pagination
      // this.pagination.pageNum = pagination.current
      // this.getlistCompanyByAuthId()
    }
  }
}
</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>
