<script>
import {ipcRenderer} from "electron";

export default {
  mounted() {
    let that = this;
    ipcRenderer.on('getProductionNoInfo', (event, data) => {
      console.log(data, 99622)
      that.trackcodeInput(data)
    })
  },
  watch: {

  },
  data() {
    return {
      shipForm: {shipmentType: '1'},
      logistics: [],
      placeholderText: '',
      sendNum: 0,
      type: 1,
      isDownloadImage: false,
      isAutoSure: false,
      currentStatus: 'IN_PRODUCTION',
      detail: {
        imgList: []
      },
      dialogVisible: false,
      audios: {
        weight_warning: require(`../../../assets/audio/weight_warning.mp3`),
        weight_success: require(`../../../assets/audio/weight_success.mp3`),
        weight_repeat: require(`../../../assets/audio/weight_repeat.mp3`),
        weight_search_error: require(`../../../assets/audio/weight_search_error.mp3`),
        weight_search_success: require(`../../../assets/audio/weight_search_success.mp3`)
      },
      productInfo: {},
      TrackingNumber: ''
    }
  },
  methods: {
    changeStatus() {
      if (!this.detail || Object.keys(this.detail).length <= 1) {
        return this.$message.warning('请扫码生产单号')
      }
      this.$confirm(
          `确定${this.type === 1 ? '生产完成' : '确定发货'}？`,
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
      ).then(() => {
        this.setData()
      })
    },
    async setData() {
      if (this.detail && this.detail.id) {
        let url =
            this.currentStatus == 'IN_PRODUCTION'
                ? 'pod/podProductionInfo/completeDelivery'
                : 'pod/podProductionInfo/completeShipment'
        try {
          let data =
              this.currentStatus == 'IN_PRODUCTION'
                  ? {
                    id: this.detail.id
                  }
                  : {
                    list: [this.detail],
                    ...this.shipForm
                  }
          if (data.list) {
            data.list[0].note =
                data.list[0].note && typeof data.list[0].note === 'object'
                    ? JSON.stringify(data.list[0].note)
                    : null
          }
          await post(url, data)
          if (this.type === 2) {
            this.sendNum = this.sendNum + 1
          }
          this.playAudio('weight_success')
          this.detail = {imgList: []}
        } catch (e) {
          console.error(e)
          this.detail = {imgList: []}
          this.playAudio('weight_search_error')
        }
      }
    },
    downloadAllWe(data, designId) {
      if (!this.detail || Object.keys(this.detail).length <= 1) {
        return this.$message.warning('请扫码生产单号')
      }
      let params = {
        productionNo: this.detail.podProductionNo,
        method: 'POST'
      }
      if (data === 1) {
        params = {
          ...params,
          ...{
            designId
          }
        }
      } else if (data === 2) {
        params = {
          ...params,
          ...{
            negativeDesignId: designId
          }
        }
      }

      downloadFile('podDesignCenter/downloadByDesignId', params)
          .then((res) => {
            const {data, fileName} = res
            let url = window.URL.createObjectURL(data)
            // 生成一个a标签
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            // 生成时间戳
            link.download = fileName
            link.click()
            window.URL.revokeObjectURL(url)
          })
          .catch((err) => {
            console.log(err)
          })
    },
    playAudio(key, message) {
      let text = ''
      switch (key) {
        case 'weight_search_success':
          text = ''
          break
        case 'weight_search_error':
          text = '请录入生产单号'
          break
        case 'weight_success':
          text = ''
          break
        case 'weight_repeat':
          text = '称重复录入'
          break
        default:
          text = '请录入跟踪号或重量'
          break
      }
      if (message || text) this.$message.warning(message || text)
      let audio = document.createElement('audio')
      console.log(key)
      audio.src = this.audios[key]
      audio.play()
    },
    async trackcodeInput(data) {

      // if (this.type === 1) {
      //   if (this.isAutoSure) {
      //     await this.setData()
      //   }
      // } else {
      //   await this.setData()
      // }

      try {

        let d = JSON.parse(JSON.stringify(data))

        if (d.note) {
          d.note = JSON.parse(d.note)
        } else {
          d.note = []
        }
        let arr = []
        if (!d.imageAry) {
          arr = [
            {url: d.variantImage, title: '正面', id: d.designId},
            {url: d.negativeImage, title: '反面', id: d.negativeDesignId}
          ].filter((el) => el.url)
        } else {
          arr =
              typeof d.imageAry == 'string' ? JSON.parse(d.imageAry) : d.imageAry
          arr = arr.concat([
            {url: d.negativeImage, title: '反面', id: d.negativeDesignId}
          ])
        }
        const result = []
        console.log(arr)
        arr = arr.filter((el) => el.url)
        arr = arr.map((el) => {
          return {
            ...el,
            ...{
              url: el.url.includes('http')
                  ? el.url
                  : window.location.origin + '/upload/erp' + el.url
            }
          }
        })

        for (let i = 0; i < arr.length; i += 2) {
          result.push(arr.slice(i, i + 2))
        }
        d.imgList = result
        console.log(d.imgList, 'this.detail.imgList ')
        this.detail = d
        // 自动下载素材
        // if (this.isDownloadImage) {
        //   this.downloadAllWe()
        // }

        this.playAudio('weight_search_success')
        // this.$nextTick(() => {
        //   if (this.$refs.trackingNumberRef) {
        //     this.$refs.trackingNumberRef.focus()
        //   }
        // })

      } catch (e) {
        console.error(e)
        this.productInfo = {}
        this.playAudio('weight_search_error')
        this.$nextTick(() => {
          if (this.$refs.trackingNumberRef) {
            this.$refs.trackingNumberRef.focus()
          }
        })
      }
    }
  }
}
</script>

<template>
  <div class="page">
    <div class="sure-btn" v-if="type=== 2">
      <el-button @click="changeStatus" size="small" type="success">
        {{ type === 1 ? '生产完成' : '确定发货' }}
      </el-button>

    </div>
    <div class="detail-div">
      <div class="detail-content">
        <div class="left">
          <div class="left-images">
            <el-carousel
                v-if="detail.imgList.length > 0"
                style="height: 100%"
                :autoplay="false"
                indicator-position="none">
              <el-carousel-item
                  style="height: 100%"
                  :key="index"
                  v-for="(item, index) in detail.imgList">
                <el-row :gutter="10" style="width: 100%; height: 100%">
                  <el-col
                      style="height: 100%"
                      v-for="(it, i) in item"
                      :key="i"
                      :span="12">
                    <div class="left-image">
                      <b v-show="it.title && it.url">
                        {{ it.title }}
                        <span
                            style="
                            text-decoration: underline;
                            cursor: pointer;
                            color: blue;
                          "
                            @click="
                            downloadAllWe(
                              it.title && it.title === '正面' ? 1 : 2,
                              it.id
                            )
                          "
                            v-if="it.id">
                          （DID：{{ it.id }}）
                        </span>
                      </b>
                      <img :src="it.url" alt=""/>
                    </div>
                  </el-col>
                </el-row>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        <div class="right">
          <!--          <div-->
          <!--              class="input"-->
          <!--              v-if="!detailData || Object.keys(detailData).length === 0">-->
          <!--&lt;!&ndash;            <el-input&ndash;&gt;-->
          <!--&lt;!&ndash;                v-model="TrackingNumber"&ndash;&gt;-->
          <!--&lt;!&ndash;                :placeholder="placeholderText"&ndash;&gt;-->
          <!--&lt;!&ndash;                style="width: 660px; margin-right: 10px"&ndash;&gt;-->
          <!--&lt;!&ndash;                clearable&ndash;&gt;-->
          <!--&lt;!&ndash;                ref="trackingNumberRef"&ndash;&gt;-->
          <!--&lt;!&ndash;                size="medium"&ndash;&gt;-->
          <!--&lt;!&ndash;                @keyup.enter.native="trackcodeInput()"></el-input>&ndash;&gt;-->
          <!--            <el-button type="primary" size="medium" @click="trackcodeInput()">-->
          <!--              查询-->
          <!--            </el-button>-->
          <!--          </div>-->
          <div class="div-text">
            <b>生产单信息</b>
            <div class="div-content">
              <div :title="detail.podProductionNo" class="div-item">
                <span>生产单号</span>
                <p>{{ detail.podProductionNo }}</p>
                <p
                    style="margin-left: 5px"
                    v-if="detail.podProductionNo"
                    :style="{
                    color: detail.customizedQuantity > 1 ? 'red' : '#67C23A'
                  }">
                  {{ detail.customizedQuantity > 1 ? '多' : '单' }}
                </p>
              </div>
              <div :title="detail.podProcessName" class="div-item">
                <span>生产工艺</span>
                <p>{{ detail.podProcessName }}</p>
              </div>
              <div :title="detail.baseSku" class="div-item">
                <span>基版</span>
                <p>{{ detail.baseSku }}</p>
              </div>
              <div :title="detail.supplierItemNo" class="div-item">
                <span>货号</span>
                <p>{{ detail.supplierItemNo }}</p>
              </div>
              <div :title="detail.variantSku" class="div-item">
                <span>变体SKU</span>
                <p>{{ detail.variantSku }}</p>
              </div>
              <div :title="detail.categoryName" class="div-item">
                <span>类别</span>
                <p>{{ detail.categoryName }}</p>
              </div>
              <div :title="detail.color" class="div-item">
                <span>颜色</span>
                <p>{{ detail.color }}</p>
              </div>
              <div :title="detail.size" class="div-item">
                <span>尺寸</span>
                <p>{{ detail.size }}</p>
              </div>
              <div :title="detail.material" class="div-item">
                <span>材质</span>
                <p>{{ detail.material }}</p>
              </div>
              <div :title="detail.batchNo" class="div-item">
                <span>批次号</span>
                <p>{{ detail.batchNo }}</p>
              </div>
              <div
                  :title="detail.supplyMerchantCode"
                  v-if="currentStatus !== 'TO_BE_ASSIGN'"
                  class="div-item">
                <span>供应商编号</span>
                <p>{{ detail.supplyMerchantCode }}</p>
              </div>
              <div :title="detail.shopNumber" class="div-item">
                <span>店铺单号</span>
                <p>{{ detail.shopNumber }}</p>
              </div>
              <div :title="detail.shopShortName" class="div-item">
                <span>店铺简称</span>
                <p>{{ detail.shopShortName }}</p>
              </div>
              <div :title="detail.expectDeliveryTime" class="div-item">
                <span>期望交货时间</span>
                <p>{{ detail.expectDeliveryTime }}</p>
              </div>
              <div :title="detail.purchaseUserName" class="div-item">
                <span>采购员</span>
                <p>{{ detail.purchaseUserName }}</p>
              </div>
              <div :title="detail.productionConfirmTime" class="div-item">
                <span>生产确认时间</span>
                <p>{{ detail.productionConfirmTime }}</p>
              </div>
              <div :title="detail.followerName" class="div-item">
                <span>跟单员</span>
                <p>{{ detail.followerName }}</p>
              </div>
              <div :title="detail.actualDeliveryTime" class="div-item">
                <span>实际交货时间</span>
                <p>{{ detail.actualDeliveryTime }}</p>
              </div>
              <div :title="detail.storedName" class="div-item">
                <span>入库人</span>
                <p>{{ detail.storedName }}</p>
              </div>
              <div :title="detail.storedTime" class="div-item">
                <span>入库时间</span>
                <p>{{ detail.storedTime }}</p>
              </div>
              <div :title="detail.replenishmentNumber" class="div-item">
                <span>补胚数量</span>
                <p>{{ detail.replenishmentNumber }}</p>
              </div>
              <div
                  :title="detail.shipmentType == 1 ? '送货上门' : '快递'"
                  class="div-item">
                <span>发货方式</span>
                <p v-if="detail.shipmentType">
                  {{ detail.shipmentType == 1 ? '送货上门' : '快递' }}
                </p>
              </div>
            </div>
          </div>
          <div
              class="form"
              style="margin: 15px 0; background: #4168ff; border-radius: 5px"
              v-if="type === 2">
            <el-form
                :model="shipForm"
                ref="form"
                label-width="80px"
                :inline="false"
                size="small">
              <el-form-item style="margin-top: 10px" label="发货方式">
                <el-select
                    style="width: 384px"
                    v-model="shipForm.shipmentType"
                    value-key=""
                    placeholder="请选择">
                  <el-option label="送货上门" value="1"></el-option>
                  <el-option label="快递" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                  label="物流方式"
                  v-if="shipForm.shipmentType == '2'">
                <el-select
                    v-model="shipForm.shipmentWay"
                    style="width: 384px"
                    placeholder="请选择">
                  <el-option
                      v-for="(item, index) in logistics"
                      :key="index"
                      :label="item.name"
                      :value="item.name"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                  label="物流单号"
                  v-if="shipForm.shipmentType == '2'">
                <el-input
                    style="width: 384px"
                    v-model="shipForm.shipmentNumber"
                    placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item
                  label="物流费用"
                  v-if="shipForm.shipmentType == '2'">
                <el-input
                    style="width: 384px"
                    v-model="shipForm.shipmentFreight"
                    placeholder="请输入"></el-input>
              </el-form-item>
            </el-form>
          </div>
<!--          <div-->
<!--              class="btn"-->
<!--              v-if="type !== 2">-->
<!--            <div class="btn-sure">-->
<!--              <el-button style="width: 100%; height: 100%; font-size: 18px" size="large" @click="changeStatus"-->
<!--                         type="success">-->
<!--                {{ type === 1 ? '生产完成' : '确定发货' }}-->
<!--              </el-button>-->
<!--              &lt;!&ndash;              <div class="check">&ndash;&gt;-->
<!--              &lt;!&ndash;                <el-checkbox v-if="type===1" v-model="isAutoSure">自动完成上一单</el-checkbox>&ndash;&gt;-->
<!--              &lt;!&ndash;              </div>&ndash;&gt;-->

<!--            </div>-->
<!--            &lt;!&ndash;            <div class="btn-down">&ndash;&gt;-->
<!--            &lt;!&ndash;              <div class="check">&ndash;&gt;-->
<!--            &lt;!&ndash;                <el-checkbox size="large" v-model="isDownloadImage">扫码下载素材</el-checkbox>&ndash;&gt;-->
<!--            &lt;!&ndash;              </div>&ndash;&gt;-->
<!--            &lt;!&ndash;              <el-button&ndash;&gt;-->
<!--            &lt;!&ndash;                  size="medium"&ndash;&gt;-->
<!--            &lt;!&ndash;                  @click="downloadAllWe"&ndash;&gt;-->
<!--            &lt;!&ndash;                  style="width: 100%; height: 100%; font-size: 18px"&ndash;&gt;-->
<!--            &lt;!&ndash;                  type="primary">&ndash;&gt;-->
<!--            &lt;!&ndash;                下载素材&ndash;&gt;-->
<!--            &lt;!&ndash;              </el-button>&ndash;&gt;-->
<!--            &lt;!&ndash;            </div>&ndash;&gt;-->

<!--          </div>-->
          <div
              v-if="type !== 2"
              class="div-text"
              style="
              flex: 1;
              margin-top: 30px;
              flex-shrink: 0;
              display: flex;
              flex-direction: column;
            ">
            <div style="height: 100%" class="div-content" v-if="detail.note">
              <b style="position: absolute; top: -12px">客户留言信息</b>
              <div
                  v-for="(item, index) in detail.note"
                  :key="index"
                  class="div-item">
                <span>{{ item.prop }}:</span>
                <p>
                  {{ item.value }}
                </p>
              </div>
            </div>
          </div>
          <div
              v-if="type === 2"
              class="div-text"
              style="
              flex: 1;
              flex-shrink: 0;
              display: flex;
              flex-direction: column;
            ">
            <div style="height: 100%" class="div-content">
              <b style="position: absolute; top: -12px">本次发货数量</b>
              <div
                  class="div-item"
                  style="
                  display: flex;
                  align-items: center;
                  width: 100%;
                  height: 100%;
                  font-size: 40px;
                  justify-content: center;
                ">
                <h2 style="color: red; font-weight: bold">{{ sendNum }}</h2>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
          class="detail-images"
          v-if="detail && Object.keys(detail).length > 1">
        <div class="scroll-list">
          <div class="img-title">
            <b>商品信息</b>
            <div class="id">
              <img src="@/assets/id.png" alt=""/>
              <span>{{ detail.variantSku.split('_')[0] }}</span>
            </div>
          </div>
          <div class="scroll-content">
            <div
                class="scroll-item"
                v-for="(it, i) in detail.colorImageList"
                :key="i">
              <el-image
                  style="width: 100%; height: 100%"
                  :src="it"
                  :preview-src-list="[it]"></el-image>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<style scoped>
::v-deep .el-dialog__body {
  box-sizing: border-box;
  flex: 1;
  flex-shrink: 0;
  overflow: hidden;
}

::v-deep .el-dialog {
  display: flex;
  height: calc(100% - 50px);
  margin-top: 50px;
  flex-direction: column;
}

.sure-btn {
  position: absolute;
  right: 62px;
  top: 14px;
}

.detail-div {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
}

.detail-div .detail-images .scroll-list {
  background: #ececec;
  display: flex;
  height: 100px;
  width: 100%;
  padding: 5px;
}

.detail-div .detail-images .scroll-list .scroll-content {
  margin-left: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  display: flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.detail-div .detail-images .scroll-list .scroll-content .scroll-item {
  height: 100%;
  min-width: 100px;
  background: white;
  width: 80px;
  margin-right: 5px;
}

.detail-div .detail-images .scroll-list .img-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: white;
  padding: 10px;
}

.detail-div .detail-images .scroll-list .img-title b {
  text-align: center;
  color: black;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 15px;
}

.detail-div .detail-images .scroll-list .img-title .id {
  display: flex;
  align-items: center;
  padding: 3px 5px;
  background: #ececec;
  justify-content: center;
}

.detail-div .detail-images .scroll-list .img-title .id img {
  width: 15px;
  margin-right: 8px;
}

.detail-div .detail-content {
  display: flex;
  width: 100%;
  flex: 1;
  margin-bottom: 10px;
  flex-shrink: 0;
  justify-content: space-between;
}

.detail-div .right {
  width: 710px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.detail-div .right .btn {
  margin: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  width: 100%;
}

.detail-div .right .btn .btn-sure, .detail-div .right .btn .btn-down {
  width: 100%;
  position: relative;
}

.detail-div .right .btn .btn-sure .check, .detail-div .right .btn .btn-down .check {
  position: absolute;
  width: 144px;
  height: 100%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 0;
  top: 1px;
}

.detail-div .right .div-text .div-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  padding: 15px 10px;
  box-sizing: border-box;
}

.detail-div .right .div-text .div-content .div-item {
  width: 50%;
  margin-bottom: 10px;
  font-size: 15px;
  display: flex;
  align-items: center;
}

.detail-div .right .div-text .div-content .div-item p {
  font-weight: 400;
  color: black;
}

.detail-div .right .div-text .div-content .div-item span {
  display: inline-block;
  text-align: right;
  width: 100px;
}

.detail-div .right .div-text .div-content .div-item span::after {
  content: ':';
  margin: 0 3px;
}

.detail-div .right .div-text b {
  position: relative;
  background: white;
  top: 9px;
  left: 13px;
  padding: 0 10px;
  font-size: 18px;
  color: black;
  z-index: 3;
}

.detail-div .right .div-text .div-content {
  position: relative;
  border: 1px solid #ececec;
}

.detail-div .right .input {
  display: flex;
  align-items: center;
  margin: 30px 0;
}

.detail-div .left {
  flex: 1;
  flex-shrink: 0;
  margin-right: 20px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.detail-div .left .left-image {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
}

.detail-div .left .left-image img {
  height: auto;
  width: 100%;
  max-height: 90%;
}

.detail-div .left .left-image b {
  color: black;
  font-size: 18px;
  margin-bottom: 15px;
}

.detail-div .left .left-images {
  display: flex;
  width: 95%;
  height: 100%;
  flex-direction: column;
}

.detail-div .left .left-images b {
  color: black;
  text-align: center;
  margin-bottom: 15px;
}

::v-deep .el-carousel__container {
  height: 100%;
}

::v-deep .el-form-item__label {
  font-weight: bold;
  color: white;
}

::v-deep .el-dialog__title {
  font-weight: bold;
  font-size: 37px;
  color: black;
  position: relative;
  left: 47%;
  top: 13px;
}

.btn {
  position: relative;
}


.btn .check ::v-deep .el-checkbox__inner {
  background-color: transparent !important;
  border-color: white !important;
  width: 12px;
  height: 12px;
}

.btn .check ::v-deep .el-checkbox__inner::after {
  left: 3px;
}

.btn .check ::v-deep .el-checkbox__label {
  padding-left: 5px;
  font-size: 12px;
  color: white !important;
}
.page{
  width: 100%;
  height: 100%;
}
p{
  margin: 0 ;
}
</style>

