<template>
  <div>
    <my-modal v-model="show" :data="formData" @getlist="getPurBatchShip" @approval-handle="approvalHandle" v-bind="$attrs"></my-modal>
    <modal v-model="modal" class-name="vertical-center-modal" width="1000px">
      <div class="content">
        <div v-if="isSupplier">
          <div class="title">出货管理</div>
          <div class="row">
            <div class="col">
              <div class="label">件号：</div>
              <div class="value">{{ data.materialCode }}</div>
            </div>
            <div class="col">
              <div class="label">物料名称：</div>
              <div class="value">{{ data.materialName }}</div>
            </div>
            <div class="col">
              <div class="label">规格：</div>
              <div class="value">{{ data.spec }}</div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label">采购数量：</div>
              <div class="value">{{ data.purchaseQty }}</div>
            </div>
            <div class="col">
              <div class="label">单价：</div>
              <div class="value">{{ data.price }}</div>
            </div>
            <div class="col">
              <div class="label">合同金额：</div>
              <div class="value">{{ data.totalAmount }}</div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label">二维码个数：</div>
              <div class="value">{{ tableData.tagCount  }}</div>
            </div>
            <div class="col">
              <div class="label">生成总数量：</div>
              <div class="value">{{ tableData.totalQty  }}</div>
            </div>
            <div class="col"></div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label">已发货：</div>
              <div class="value">{{ tableData.hadShipQty }}</div>
            </div>
            <div class="col">
              <div class="label">未发货：</div>
              <div class="value">{{ tableData.unShipQty }}</div>
            </div>
            <div class="col"></div>
          </div>
        </div>
        <div v-else>
          <div class="title">批次管理</div>
          <div class="row">
            <div class="col">
              <div class="label">物料编码：</div>
              <div class="value">{{ data.materialCode }}</div>
            </div>
            <div class="col">
              <div class="label">物料名称：</div>
              <div class="value">{{ data.materialName }}</div>
            </div>
            <div class="col">
              <div class="label">规格：</div>
              <div class="value">{{ data.spec }}</div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label">采购数量：</div>
              <div class="value">{{ data.purchaseQty }}</div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label">二维码个数：</div>
              <div class="value">{{ tableData.tagCount  }}</div>
            </div>
            <div class="col">
              <div class="label">生成总数量：</div>
              <div class="value">{{ tableData.totalQty  }}</div>
            </div>
            <div class="col"></div>
          </div>
        </div>
        <div class="table">
          <my-table
            ref="table"
            :data="tableData.batchItems"
            :columns="columns"
            :table-filter="tableFilter"
            selectKey="id"
            :is-show-page="false"
            height="300"
            @event-handle="eventHandle"
            @on-select="getSelect"
            @on-change="changePage"
            >
          </my-table>
        </div>
      </div>
      <div class="footer" slot="footer">
        <Button @click="cancel" class="btn" type="primary">关闭</Button>
      </div>
    </modal>
  </div>

</template>

<script>
import {
  GetPurBatchShip, AddPurBatchShip, DeletePurBatchShip
} from '@/api/supplierShip'
import MyModal from './my-modal'
import MyTable from '_c/my-table/my-table'
export default {
  name: 'my-manage-modal',
  data () {
    return {
      formData: {},
      stockTagIds: [], // 表格勾选的id
      printList: [], // 打印数据
      tableData: [],
      show: false, // 合同信息
      modal: false,
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '批次号',
          key: 'batchNo',
          width: 150,
          align: 'center'
        },
        {
          title: '创建日期',
          key: 'createdTime',
          minWidth: 150
        },
        {
          title: '出货日期',
          key: 'shipTime',
          minWidth: 200
        },
        {
          title: '件数',
          key: 'tagCount',
          minWidth: 150
        },
        {
          title: '数量',
          key: 'purchaseQty',
          minWidth: 150
        },
        {
          title: '操作',
          minWidth: 120,
          fixed: 'right',
          align: 'center',
          render: (h, params) => {
            let _this = this
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary'
                },
                style: {
                  width: '80px'
                },
                on: {
                  click (e) {
                    e.stopPropagation()
                    _this.show = true
                    _this.formData = { ...params.row, ..._this.data }
                    // _this.formData = { ..._this.data }
                  }
                }
              }, '管理')
            ])
          }
        }
      ],
      tableFilter: [
        {
          name: 'Button',
          type: 'error',
          text: '删除批次',
          width: '100px',
          e: 'del',
          align: 'right'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '添加批次',
          width: '100px',
          e: 'add',
          align: 'right'
        }
      ],
      params: {
        pageIndex: 1,
        pageSize: 20,
        total: 0
      }
    }
  },
  components: {
    MyTable,
    MyModal
  },
  inject: ['isSupplier'],
  props: {
    data: {
      type: Object,
      default () {
        return {}
      }
    },
    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.tableFilter[0].disabled = !!this.data.hasApprovalingFlow
        this.tableFilter[1].disabled = !!this.data.hasApprovalingFlow
        this.getPurBatchShip()
      }
    }
  },
  methods: {
    approvalHandle () {
      this.$emit('approval-handle')
      this.cancel()
    },
    getSelect (data) {
      console.log('table----data')
      console.log(data)
      this.printList = []
      this.printList = [ ...data ]
    },
    changePage (pageIndex) {
      this.params.pageIndex = pageIndex
      this.getPurBatchShip()
    },
    // 检索条件事件处理
    eventHandle (option) {
      switch (option._evnet) {
        case 'add':
          this.addPurBatchShip()
          break
        case 'del':
          if (this.printList.length === 0) {
            return this.$Message.error('请选择数据！')
          }
          this.$MyModal.show({ text: '是否删除？' }).$on('confirm', () => {
            DeletePurBatchShip({
              batchItems: this.printList.map(item => item.id)
            }).then(res => {
              if (res.code === 0) {
                this.$Message.info(res.msg)
                this.printList = []
                this.$refs.table.clearTempList()
                this.getPurBatchShip()
              }
            })
          })
          break
      }
    },
    /* 新增批次号 */
    addPurBatchShip () {
      AddPurBatchShip({
        purchaseBillNo: this.data.purchaseBillNo
      }).then(res => {
        if (res.code === 0) {
          this.getPurBatchShip()
        }
      })
    },
    // 获取物料列表
    getPurBatchShip () {
      GetPurBatchShip({
        // ...this.params,
        purchaseBillNo: this.data.purchaseBillNo
      }).then(res => {
        if (res.code === 0) {
          this.tableData = []
          this.$refs.table.tempList = []
          this.tableData = res.result
          this.params.total = res.result.tagCount
        }
      })
    },
    cancel () {
      this.stockTagIds = []
      this.modal = false
    }
  },
  beforeUpdate () {

  }
}
</script>

<style lang="less" scoped>
.content {
  overflow: hidden;
  padding: 20px 40px;
  font-size: 14px;
  .title {
    padding-bottom: 20px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
  }
  .row {
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    .col {
      flex: 1;
      display: flex;
      align-items: flex-start;
      .label {
      }
      .value {
        flex: 1;
      }
    }
  }
  .text {
    padding: 10px 0;
  }
  .table {
    //height: ~"calc(100% - 100px)";
    overflow: auto;
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #dcdee2;
  }
}
.sub-content {
  padding: 0 20px;
  .title {
    padding: 10px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
  }
  .wrap {
    margin: 10px;
    padding: 10px 20px;
    border: 1px solid #dcdee2;
    border-radius: 5px;
  }
  .row {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    &:last-child {
      margin-bottom: 0;
    }
    .col {
      margin-right: 5px;
      flex: 1;
      display: flex;
      align-items: flex-start;
      .label {
        width: 70px;
      }
      .value {
        width: ~"calc(100% - 70px)";
      }
    }
  }
}
.print-wrap {
  width: 100vw;
  height: 100vh;
  display: none;
  img {
    width: 50%;
  }
}
/deep/ .ivu-modal-body {
  padding: 0;
  max-height: 80vh;
  overflow: auto;
  border-radius: 20px 20px 0 0;
}
/deep/ .ivu-upload-list {
  display: none;
}
/deep/ .tip-item {
  &:hover {
    background: #eeeeee;
  }
}
</style>
