<template>
  <div class="ScanoutStockReview">
    <span  @click="clickHelp">
      <span title="帮助中心">
        <i class='ark-icon ark-icon iconfont iconios-help-circle-outline' style="font-size: 26px;opacity: 0.7;color: var(--primary-color);margin-bottom: 10px;"></i>
      </span>
    </span>
    <div class="linkGoods">
        <foldPanel
          title="扫描项"
        >
            <div
            slot="content"
            class="block"
            >
            <div class='scanBoxForm' style='display: flex;margin-bottom: 24px;'>
              <span class='scanTitle' style='width: 70px;line-height:38px;'>物流单号</span>
              <Input
                ref='expressEnter'
                v-model.trim="formInline.expressCode"
                type="text"
                autofocus
                placeholder=""
                @on-enter="getOrderByExpressCode"
              />
            </div>
            </div>
        </foldPanel>
    </div>
    <!-- 订单信息 -->
      <div class="linkGoods">
        <foldPanel
          title="订单信息"
        >
          <div
            slot="content"
            class="block"
          >
            <Table
              :height="tableHeightOne"
              :columns="linkGoodsColumns"
              :data="linkGoodsData"
              class="getReturnTable"
              :class='addClass'
            />
            <div v-if="isErrorRecheck" class="errorTip">失败原因：{{ failReason }}</div>
          </div>
        </foldpanel>
      </div>
      <!-- 扫描物流单号 -->
      <audio
        id="audioscanExpress"
        preload="auto"
      >
        <source :src="urlscanExpress">
      </audio>
      <!-- 成功 -->
      <audio
        id="audiosuccess"
        preload="auto"
      >
        <source :src="urlsuccess">
      </audio>
      <!-- 失败 -->
      <audio
        id="audioerror"
        preload="auto"
      >
        <source :src="urlerror">
      </audio>
      <!-- 提示音 -->
      <audio
        id="audiosacnOk"
        preload="auto"
      >
        <source :src="urlsacnOk">
      </audio>
  </div>
</template>

<script>
const R3 = window.R3;
import foldPanel from '../customizedContent/FoldPanel.vue';
const { network, urlSearchParams, store } = R3;

export default {
    components: { foldPanel },
    data() {
      return {
        urlerror: '', // error:失败
        urlsacnOk: '', // sacnOk：单纯提示
        urlscanExpress: '', // scanExpress：扫描物流单
        urlsuccess: '', // success：成功
        audioType: '',
        formInline: {
            expressCode: ''
        },
        tableHeightOne: 100,
        linkGoodsColumns: [
          {
            title: '订单编号',
            key: 'order_id'
          },
          {
            title: '平台单号',
            key: 'tid'
          },
          {
            title: '店铺名称',
            key: 'shop_name'
          },
          {
            title: '订单状态',
            key: 'status'
          },
          {
            title: '是否揽收复核',
            key: 'isPickRecheck'
          },
          {
            title: '物流公司',
            key: 'logistics'
          },
          {
            title: '物流单号',
            key: 'logistics_no'
          },
          {
            title: '复核结果',
            key: 'recheck_result'
          },
        ], // 订单信息表格表头
        linkGoodsData: [], // 订单信息数据
        addClass: '',
        failReason: '', // 复核失败原因
        isErrorRecheck: false, // 是否复核失败
      }
    },
    created() {
      this.getOMSSOUNDSET();
    },
    methods: {
      clickHelp() {
        this.triggerAjax();
        window.open('https://burgeon.yuque.com/cgmq7t/cgv53l/nic0rm0ry0zb93hl?singleDoc#');
      },
      // 请求埋点
      triggerAjax() {
        const params = {
          MENUNAME: '包裹揽收复核',
          BUTTONNAME: '点击帮助',
        };
        network.post('/p/cs/button/clickCount', params);
      },
      getOMSSOUNDSET() {
          let virtual={
              range: 100,
              startindex: 0,
              table: 'T_OMSSOUNDSET',
              fkdrplist: {
                searchcols: ['TYPE_NAME', 'ID', 'SOUND_ID', 'URL']
              },
              isdroplistsearch: true,
          }
          network.post('/p/cs/list/query', virtual).then((res) => {
              res.data.rows.forEach(row => {
                  if(row.TYPE_NAME.val == '提示'){
                    this.urlsacnOk = row.URL.val
                  }else if(row.TYPE_NAME.val == '成功'){
                    this.urlsuccess = row.URL.val
                  }else if(row.TYPE_NAME.val == '失败'){
                    this.urlerror = row.URL.val
                  }else if(row.TYPE_NAME.val == '扫描商品'){
                    this.urlscanoutok = row.URL.val
                  }else if(row.TYPE_NAME.val == '扫描物流'){
                    this.urlscanExpress = row.URL.val
                  }
              })
          })
      },
      // 提示音
      aplayAudio(type) {
        let audio = '';
        if (type == 'sacnOk') { // 单纯提示
          audio = document.getElementById('audiosacnOk');
        } else if (type == 'scanExpress') { // 扫描物流单
          audio = document.getElementById('audioscanExpress');
        } else if (type == 'success') { // 成功
          audio = document.getElementById('audiosuccess');
        } else if (type == 'error') { // 失败
          audio = document.getElementById('audioerror');
        } else if (type == 'scanoutok') { // 扫描商品
          audio = document.getElementById('audioscanoutok');
        }
        // 从头播放
        audio.currentTime = 0;
        audio.load();
        audio.play();
      },
      sureClick(type) {
        this.aplayAudio(type);
      },
      getOrderByExpressCode() {
        this.sureClick('scanExpress');
        this.linkGoodsData = [];
        network.get('/p/cs/Recheck?logisticsNo='+this.formInline.expressCode).then((res) => {
          if(res.data.code == 0){
            let obj = res.data.data;
            if(res.data.data.recheck_result == 0){
              this.isErrorRecheck = true;
              this.sureClick('error');
              obj.recheck_result = '失败'
              this.addClass = 'errorTab'
            }else if(res.data.data.recheck_result == 1){
              this.isErrorRecheck = false;
              this.sureClick('success');
              obj.recheck_result = '成功'
              this.addClass = 'successTab'
            }
            if(res.data.data.status == 5){
              obj.status = '仓库发货'
            }else if(res.data.data.status == 6){
              obj.status = '平台发货'
            }
            if(res.data.data.isPickRecheck == 0){
              obj.isPickRecheck = '否'
            }else if(res.data.data.isPickRecheck == 1){
              obj.isPickRecheck = '是'
              this.$Message.info('请注意订单已复核过！');
              this.sureClick('sacnOk');
            }
            this.failReason = obj.failReason // 复核失败原因
            this.linkGoodsData.push(obj);
          }else {
            this.sureClick('sacnOk');
            this.$Message.error(res.data.message);
          }
        });
        this.formInline.expressCode = '';
        this.$refs.expressEnter.focus();
       }
    }
}
</script>
<style lang='less'>
    .ScanoutStockReview .scanBoxForm .ark-input {
        width: 260px;
        height: 38px;
        border: 1px solid #DADADA;
    }
    .errorTab.getReturnTable .ark-table td {
      background: red;
    }
    .successTab.getReturnTable .ark-table td  {
      background: #79d527;
    }
</style>

<style lang='less' scoped>
    .ScanoutStockReview {
        padding-top: 24px;
    }
    .scanBoxForm {
        margin-left: 16px;
    }
    .getReturnTable {
        margin-left: 16px;
    }
    .errorTip {
      margin-left: 16px;
      margin-top: 10px;
      color: red;
      font-size: 16px;
    }
</style>
