<!-- 供应商web 出货管理 -->
<template>
  <div class="container">
    <my-table :data="data" :columns="columns" :table-filter="tableFilter" :table-page="params" @event-handle="eventHandle" @on-change="changePage"></my-table>
    <modal-contract v-model="show" :data="formData"></modal-contract>
    <my-manege-modal
      v-model="showInfo"
      :data="formData"
      @approval-handle="approvalHandle"
    >
    </my-manege-modal>
    <my-manege-modal2 v-model="printShow" :data="formData"></my-manege-modal2>
    <ip-modal v-model="ipShow"></ip-modal>
  </div>
</template>

<script>
import { GetPurContractPageList, CompletePurchase } from '@/api/supplierShip'
import MyTable from '_c/my-table/my-table'
import ModalContract from '@/view/index/schedule/modal-contract'
import MyManegeModal from './my-manage-modal'
import MyManegeModal2 from './my-manage-modal2'
import IpModal from './ip-form'
export default {
  name: 'provider_shipment_manage',
  components: {
    MyTable,
    ModalContract,
    MyManegeModal,
    MyManegeModal2,
    IpModal
  },
  provide () {
    return {
      isSupplier: this.isSupplier
    }
  },
  data () {
    return {
      isSupplier: this.$store.state.user.access === 'supplier', // 供应商角色supplier额外处理
      printShow: false,
      showInfo: false,
      ipShow: false,
      formType: '',
      formData: {},
      show: false,
      data: [],
      columns: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '合同编号',
          key: 'purchaseBillNo',
          minWidth: 200,
          render: (h, params) => {
            let _this = this
            return h('a', {
              on: {
                click () {
                  _this.formData = { ...params.row }
                  _this.show = true
                }
              }
            }, params.row.purchaseBillNo)
          }
        },
        {
          title: '合同状态',
          key: 'supplierShipState',
          minWidth: 150
        },
        {
          title: '交货日期',
          key: 'deliverTime',
          minWidth: 150
        },
        {
          title: '件号',
          key: 'materialCode',
          minWidth: 150
        },
        {
          title: '物料名称',
          key: 'materialName',
          minWidth: 150
        },
        {
          title: '规格',
          key: 'spec',
          minWidth: 150
        },
        {
          title: '单位',
          key: 'unitName',
          minWidth: 150
        },
        {
          title: '采购数量',
          key: 'purchaseQty',
          minWidth: 150
        },
        {
          title: '单价',
          key: 'price',
          minWidth: 150
        },
        {
          title: '小计',
          key: 'totalAmount',
          minWidth: 150
        },
        {
          title: '已出货',
          key: 'shipQuantity',
          minWidth: 150
        },
        {
          title: '已出货金额',
          key: 'shipAmount',
          minWidth: 150
        },
        {
          title: '操作',
          key: 'takeState',
          minWidth: 180,
          align: 'center',
          fixed: 'right',
          render: (h, params) => {
            let _this = this
            if (params.row.supplierShipState !== '已完成' && !params.row.finishStockIn) {
              return h('div', [
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    style: {
                      marginRight: '10px'
                    },
                    on: {
                      click: () => {
                        _this.formData = { ...params.row }
                        _this.showInfo = true
                      }
                    }
                  },
                  _this.isSupplier ? '出货管理' : '标签管理'
                ),
                h(
                  'Button',
                  {
                    props: {
                      type: 'error',
                      size: 'small',
                      disabled: params.row.hasApprovalingFlow
                    },
                    on: {
                      click: () => {
                        _this.$MyModal.show({ text: '是否结束合同？' }).$on('confirm', () => {
                          CompletePurchase({
                            purchaseBillNo: params.row.purchaseBillNo
                          }).then(res => {
                            if (res.code === 0) {
                              _this.$Message.info('申请已提交，待客户确认后生效！')
                              _this.getList()
                            }
                          })
                        })
                      }
                    }
                  },
                  '结束合同'
                )
              ])
            } else {
              return h('div', [
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    style: {
                      marginRight: '10px'
                    },
                    on: {
                      click: () => {
                        _this.formData = { ...params.row }
                        _this.printShow = true
                      }
                    }
                  },
                  '查看详情'
                )
              ])
            }
          }
        }
      ],
      tableFilter: [
        {
          name: 'Input',
          value: 'key',
          placeholder: '请输入关键字'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '查询',
          e: 'search'
        },
        {
          name: 'RadioGroup',
          value: 'supplierShipState',
          list: [
            { label: '进行中', value: 0 },
            { label: '已完成', value: 1 }
          ]
        },
        {
          name: 'Button',
          type: 'primary',
          text: '码单模板下载',
          width: '120px',
          align: 'right',
          e: 'download'
        },
        {
          name: 'Button',
          type: 'default',
          text: '设备配置',
          width: '120px',
          align: 'right',
          e: 'ip'
        }
        // {
        //   name: 'Button',
        //   type: 'primary',
        //   text: '结束合同',
        //   align: 'center',
        //   e: 'over'
        // }
      ],
      params: {
        pageIndex: 1,
        pageSize: 20,
        total: 0,
        supplierShipState: 0
      }
    }
  },
  methods: {
    /* 点击删除 出货后触发审批流操作 */
    approvalHandle () {
      this.getList()
    },
    // 检索条件事件处理
    eventHandle (option) {
      switch (option._evnet) {
        case 'search':
          this.params.pageIndex = 1
          this.params.purchaseBillNo = option.key
          this.params.supplierShipState = option.supplierShipState
          this.getList()
          break
        case 'add':
          this.formType = 'add'
          this.show = true
          break
        case 'back':
          this.$router.go(-1)
          break
        case 'download':
          window.open('https://fzjx.oss-cn-hangzhou.aliyuncs.com/order/20211014/211014041759903892.xlsx')
          break
        case 'ip':
          this.ipShow = true
          break
      }
    },
    changePage (pageIndex) {
      this.params.pageIndex = pageIndex
      this.getList()
    },
    getList () {
      GetPurContractPageList(this.params).then(res => {
        if (res.code === 0) {
          this.data = res.result.list
          this.params.total = res.result.totalCount
        }
      })
    }
  },
  mounted () {
    this.getList()
  }
}
</script>

<style lang="less" scoped>
.container {
  height: 100%;
}
</style>
