<!-- 供应商价格维护 -->
<template>
  <modal v-model="modal" width="800px" class-name="vertical-center-modal">
    <div class="footer" slot="footer">
      <Button @click="cfm" class="btn" type="primary">提交</Button>
      <Button @click="cancel" class="btn" >取消</Button>
    </div>
    <div class="container">
      <my-table
        :data="data"
        :columns="columns"
        :table-filter="tableFilter"
        :table-page="params"
        height="300"
        :multiple="true"
        @event-handle="eventHandle"
        @on-select="select"
        @on-change="changePage">
      </my-table>
    </div>
  </modal>
</template>

<script>
import { exportExcel } from '@/libs/util'
import { GetPurContractPageList } from '@/api/applyPurchase'
import MyTable from '_c/my-table/my-table'
export default {
  name: 'material_contract',
  components: {
    MyTable
  },
  props: {
    keyStr: {},
    value: {
      type: Boolean,
      default: false,
      require: true
    }
  },
  watch: {
    value: {
      handler (n) {
        this.modal = n
      },
      immediate: true
    },
    modal (n) {
      this.$emit('input', n)
      if (n) {
        this.getList()
      }
    }
  },
  data () {
    return {
      row: {},
      modal: false,
      data: [],
      columns: [
        {
          type: 'selection',
          width: 60
        },
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '合同编号',
          key: 'purchaseBillNo',
          minWidth: 200
        },
        {
          title: '交货日期',
          key: 'deliverTime',
          minWidth: 150
        },
        {
          title: '件号',
          key: 'materialCode',
          minWidth: 150
        },
        {
          title: '物料名称',
          key: 'materialName',
          minWidth: 150,
          sortable: true
        },
        {
          title: '规格',
          key: 'spec',
          minWidth: 150
        },
        {
          title: '供应商',
          key: 'supplierName',
          minWidth: 250,
          sortable: true
        },
        {
          title: '实时库存',
          key: 'stockNum',
          minWidth: 200
        },
        {
          title: '采购数量',
          key: 'purchaseQty',
          minWidth: 200
        },
        {
          title: '单价',
          key: 'price',
          minWidth: 200
        },
        {
          title: '小计',
          key: 'totalAmount',
          minWidth: 200
        },
        {
          title: '合同状态',
          key: 'contractApproveState',
          minWidth: 200
        }
      ],
      tableFilter: [
        {
          name: 'Input',
          value: 'key',
          placeholder: '请输入关键字'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '查询',
          e: 'search'
        }
      ],
      params: {
        pageIndex: 1,
        pageSize: 20,
        total: 0,
        purContractState: 1
      }
    }
  },
  methods: {
    cancel () {
      this.modal = false
      this.row = {}
    },
    select (section, row) {
      this.row = row
    },
    cfm () {
      if (!this.row.id) {
        return this.$Message.error('请选择合同！')
      }
      this.$emit('on-select', { ...this.row })
      this.modal = false
      this.row = {}
    },
    // 检索条件事件处理
    eventHandle (option) {
      switch (option._evnet) {
        case 'search':
          this.params.pageIndex = 1
          this.params.purchaseBillNo = option.key
          this.getList()
          break
        case 'export':
          GetPurContractPageList({
            ...this.params,
            pageIndex: 1,
            pageSize: 99999
          }).then(res => {
            if (res.code === 0) {
              let data = res.result.list
              if (data.length < 1) return this.$Message.error('数据为空！')
              exportExcel(this.columns, data, '价格维护')
            }
          })
          break
      }
    },
    changePage (pageIndex) {
      this.params.pageIndex = pageIndex
      this.getList()
    },
    getList () {
      GetPurContractPageList({
        ...this.params,
        key: this.keyStr
      }).then(res => {
        if (res.code === 0) {
          this.data = res.result.list
          this.params.total = res.result.totalCount
        }
      })
    }
  },
  mounted () {
  }
}
</script>

<style lang="less" scoped>
.container {
  padding: 10px;
  height: 100%;
  background: #FFFFFF;
}
/deep/ .ivu-modal-body {
  padding: 0;
  max-height: 80vh;
  overflow: auto;
}
/deep/ .ivu-modal-content {
  background: #FFFFFF !important;
}
</style>
