<template>
  <div class="app-container">

    <div class="input">
      <span class="title">客户单号/物流单号/SKU：</span>
      <input
        v-model="inputNumber"
        type="text"
        class="inputbox"
        @keyup.enter="inputComplete"
      >
    </div>
    <div class="control-bar">
      <el-button type="success" @click="submitReceive">提交收货</el-button>
    </div>
    <div v-loading="loadingDeliveries">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="待收货" name="uncomplete" />
        <el-tab-pane label="已完结" name="completed" />
        <el-tab-pane label="全部" name="all" />
      </el-tabs>

      <el-table :data="tabDeliverys" style="width: 100%">
        <el-table-column prop="SkuId" label="序号" width="50" />
        <el-table-column prop="SkuNo" label="SKU" />
        <el-table-column prop="Title" label="采购标题" width="200" />
        <el-table-column label="图片">
          <template slot-scope="scope">
            <el-image
              :src="scope.row.ThumbnailsUrl+'?x-oss-process=image/resize,m_lfit,h_120,w_120'"
              :preview-src-list="scope.row.ImageUrlList"
              style="border-radius:5px;"
            />
          </template>
        </el-table-column>
        <el-table-column prop="CustomOrderNumber" label="客户单号" width="180" />
        <el-table-column prop="Color" label="颜色" />
        <el-table-column prop="Size" label="尺寸" />
        <el-table-column prop="ReceiveCount" label="收货数量" width="150">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.ReceivingCount"
              :disabled="isCompleted(scope.row)"
              type="number"
            />
          </template>
        </el-table-column>
        <el-table-column prop="ReceiveCount" label="已收数量">
          <template slot-scope="scope">
            <span>{{ scope.row.ReceiveCount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="DeliveryCount" label="采购数量" />
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-tag v-if="isCompleted(scope.row)" type="success">已完结</el-tag>
            <el-tag v-else type="primary">待收货</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-printer"
              type="primary"
              plain
              @click="printSKULabel(scope.row)"
            >打印标签</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

</template>

<script>
import receiveItem from '../components/receiveItem'
import { loadDeliveries } from '@/api/ds/purchase/delivery'
import { Receive } from '@/api/ds/receive/receive'
import { initClodop } from '@/utils/print'
export default {
  name: 'OperationReceive',
  components: {
    receiveItem
  },
  data() {
    return {
      activeName: 'uncomplete',
      loadingDeliveries: false,
      inputNumber: null,
      oldNumber: '',
      deliverys: []
    }
  },
  computed: {
    tabDeliverys: function() {
      if (this.activeName == 'uncomplete') {
        return this.deliverys.filter((i) => i.ReceiveCount < i.DeliveryCount)
      } else if (this.activeName == 'completed') {
        return this.deliverys.filter((i) => i.ReceiveCount >= i.DeliveryCount)
      } else if (this.activeName == 'all') {
        return this.deliverys
      }
    }
  },
  methods: {
    isCompleted(delivery) {
      return delivery.ReceiveCount >= delivery.DeliveryCount
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    inputComplete(e) {
      this.loadingDeliveries = true
      this.oldNumber = this.inputNumber
      loadDeliveries(this.inputNumber)
        .then((resp) => {
          this.deliverys = resp
        })
        .finally(() => {
          this.inputNumber = ''
          this.loadingDeliveries = false
        })
    },
    printSKULabel(r) {
      initClodop()
      var url = 'http://120.24.149.148:9501/api/BarCode/GetBarCodesAsOne?SkuId=' + r.SkuId + '&qty=' + r.ReceivingCount
      WLODOP.ADD_PRINT_PDF(0, 0, '8cm', '4cm', url)
      WLODOP.PRINT()
    },
    submitReceive() {
      const data = []
      this.deliverys.forEach((d) => {
        const SkuId = d.SkuId
        const ReceiveCount = d.ReceivingCount
        const DeliveryId = d.Id
        const item = { SkuId, ReceiveCount, DeliveryId }
        data.push(item)
      })
      Receive(data)
        .then((res) => {
          this.$message('收货完成')
          loadDeliveries(this.oldNumber).then((resp) => {
            this.deliverys = resp
          })
        })
        .catch((res) => {})
        .finally(() => {})
    },
    closePreview() {
      this.$nextTick(() => {
        // 获取遮罩层dom
        const domImageMask = document.querySelector('.el-image-viewer__mask')
        if (!domImageMask) {
          return
        }
        domImageMask.addEventListener('click', () => {
          // 点击遮罩层时调用关闭按钮的 click 事件
          document.querySelector('.el-image-viewer__close').click()
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.input {
  display: flex;
  align-items: center;
  font-size: 30px;

  .inputbox {
    border: 1px solid #dcdfe6;
    border-radius: 5px;
    width: calc(100% - 13em);
    color: gray;
    height: 60px;
  }
  .inputbox:focus {
    outline: none;
    border-color: #84baec;
  }
  .title {
    color: grey;
    width: 13em;
  }
}

.control-bar {
  margin: 20px 0px;
}
</style>
