<!--
 * @Description: file content
 * @Version: 2.0
 * @Author: ljl
 * @Date: 2022-06-16 09:49:18
 * @LastEditors: ljl
 * @LastEditTime: 2022-12-12 15:19:53
 * @FilePath: \sui-shen-ban_alipay\src\views\drugTrace.vue
-->
<template>
  <div>
    <header></header>
    <div id="main" v-if="result">
      <div class="drugSource">
        <div class="name">{{(result.ypBusinessTraceVOList[0].wptpYpbSaleVO.ypName?result.ypBusinessTraceVOList[0].wptpYpbSaleVO.ypName:result.ypProcessVO.wptpYpSaleVO.ypName)?result.ypProcessVO.wptpYpSaleVO.ypName:result.medicineVOList[0].wptpMedicineSaleVO.medicineName}}</div>
        <div class="source" style="border: none">
          <div class="label">产品批号</div>
          <div class="value">{{result.ypProcessVO.secondYpProcessVO?result.ypProcessVO.secondYpProcessVO.productBatch:result.ypProcessVO.wptpYpProcessVO.productBatch}}</div>
        </div>
        <div class="source">
          <div class="label">产地</div>
          <div class="value">{{result.plantTraceVO.wptpBaseVO.ssq}}</div>
        </div>
        <div class="source">
          <div class="label">饮片生产企业</div>
          <div class="value">{{result.ypProcessVO.wptpYpSaleVO. entName}}</div>
        </div>
        <div class="source">
          <div class="label">饮片经营企业</div>
          <div class="value" v-if="result.ypBusinessTraceVOList[0].wptpYpbSaleVO.entName">{{result.ypBusinessTraceVOList[0].wptpYpbSaleVO.entName}}</div>
        </div>
      </div>
      <div class="record drugProduce" :style="imgShow?{backgroundSize: `100% 155vw`,height:`157vw`}:{backgroundSize: `100% 67vw`,height:`70vw`}">
        <div class="title" :style="imgShow?{paddingTop: `24vw`}:{paddingTop: `14vw`}">
          <span>药材生产</span>
        </div>
        <div class="content">
          <div class="contentItem contentItem1">
            <div class="label">种植时间</div>
            <div class="value">{{result.plantTraceVO.wptpCsInfoList[0].fileTime}}</div>
          </div>
          <div class="contentItem" style="width:40%">
            <div class="label">采收时间</div>
            <div class="value">{{result.plantTraceVO.wptpCsInfoList[0].csTime}}</div>
          </div>
        </div>
        <div class="drugImg" v-for="(item,index) in result.plantTraceVO.wptpPlantInfoVOList">
          <img :src="baseUrl+item.plantFileList[0].path" alt="" v-if="item.plantSatus=='移栽播种'"/>
          <img :src="baseUrl+item.plantFileList[0].path" alt="" v-if="item.plantSatus=='采收'"/>
        </div>
      </div>
      <div class="record" v-if="result.medicineVOList.length != 0" :style="{backgroundSize: `100% calc(${10*result.medicineVOList.length}vw + 57vw)`,height:`calc(${10*result.medicineVOList.length}vw + 60vw)`}">
        <div class="title">
          <span>药材流通</span>
        </div>
        <div class="content" v-for="(item,index) in result.medicineVOList" :key="index">
          <div class="contentItem contentItem1">
            <div class="label">药材流通企业</div>
            <div class="value">{{item.wptpMedicineSaleVO.entName}}</div>
          </div>
          <div class="contentItem contentItem2">
            <div class="label">验收结果</div>
            <div class="value">{{item.wptpMedicineInstockVO.checkResult}}</div>
          </div>
        </div>
      </div>
      <div class="record pieces">
        <div class="title">
          <span>饮片生产</span>
        </div>
        <div class="content">
          <div class="contentItem contentItem1">
            <div class="label">饮片生产企业</div>
            <div class="value">{{result.ypProcessVO.wptpYpSaleVO.entName}}</div>
          </div>
          <div class="contentItem contentItem2">
            <div class="label">原料检验结果</div>
            <div class="value">{{result.ypProcessVO.wptpYpInstockVO.checkResult}}</div>
          </div>
        </div>
        <div class="line"></div>
        <div class="content">
          <div class="contentItem contentItem1">
            <div class="label">成品检验结果</div>
            <div class="value">{{result.ypProcessVO.wptpYpProcessVO.checkResult}}</div>
          </div>
          <div class="contentItem contentItem2">
            <div class="label">成品批号</div>
            <div class="value">{{result.ypProcessVO.secondYpProcessVO?result.ypProcessVO.secondYpProcessVO.productBatch:result.ypProcessVO.wptpYpProcessVO.productBatch}}</div>
          </div>
        </div>
      </div>
      <div class="record pieces" v-if="result.ypBusinessTraceVOList.length != 0" :style="{backgroundSize: `100% calc(${40*result.ypBusinessTraceVOList.length}vw + 40vw)`,height:`calc(${40*result.ypBusinessTraceVOList.length}vw + 43vw)`}">
        <div class="title">
          <span>饮片流通</span>
        </div>
        <div v-for="(item,index) in result.ypBusinessTraceVOList" :key="index">
          <div class="content">
            <div class="contentItem contentItem1">
              <div class="label">饮片经营企业</div>
              <div class="value">{{item.wptpYpbSaleVO.entName}}</div>
            </div>
            <div class="contentItem contentItem2">
              <div class="label">产品批号</div>
              <div class="value">{{item.wptpYpbSaleVO.productBatch}}</div>
            </div>
          </div>
          <div class="line"></div>
          <div class="content">
            <div class="contentItem contentItem1">
              <div class="label">验收结果</div>
              <div class="value">{{item.wptpYpbInstockVO.checkResult}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <van-loading type="spinner" class="load" vertical>加载中...</van-loading>
    </div>
  </div>
</template>
  <script>
import Vue from "vue";
import { getDateTime } from "@/mixins/format";
import { setCookies } from "@/utils/auth";
import { setParamLog,getWechatService } from "@/api/index";
import { Loading } from "vant";
Vue.use(Loading);
export default {
  name: "DrugTrace",
  mixins: [getDateTime()],
  data() {
    return {
      result:'',
      baseUrl:ipConfig.baseURL,
      imgShow:false
    };
  },
  created() {
    setCookies("tabId",2)
    setParamLog({type:'alipay',service:'WX007'})
    getWechatService({ Service: "WX007", ...this.$route.query }).then((res) => {
      this.result = res.data.result
      if(this.result.plantTraceVO.wptpPlantInfoVOList && this.result.plantTraceVO.wptpPlantInfoVOList.length != 0){
        this.result.plantTraceVO.wptpPlantInfoVOList.forEach(item=>{
          if(item.plantSatus == "移栽播种" || item.plantSatus == "采收"){
            this.imgShow = true
          }else{
            this.imgShow = false
          }
        })
      }
    });
  },
  mounted() {},
  methods: {},
};
</script>
 <style lang="scss" scoped>
header {
  width: 100%;
  height: 56vw;
  background: url("../assets/images/drugHead.png") no-repeat;
  background-size: cover;
}
#main {
  position: absolute;
  top: 5vw;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  .drugSource {
    background: url("../assets/images/drugBack.png") no-repeat;
    background-size: 100% 85vw;
    padding: 0 8vw;
    height: 88vw;
    .name {
      font-family: "PingFang SC-Semibold";
      font-size: 6vw;
      color: #8b614d;
      letter-spacing: 0;
      text-align: center;
      font-weight: 600;
      padding: 14vw 0 4vw 0;
    }
    .source {
      border-top: 1px solid rgba(215, 208, 191, 1);
      display: flex;
      text-align: left;
      line-height: 5vw;
      padding: 3vw 0;
      color: #000000;
      font-weight: 400;
      font-family: "PingFang SC-Regular";
      .label {
        width: 28vw;
        opacity: 0.5;
        font-size: 3vw;
      }
      .value {
        width: calc(100% - 28vw);
        font-size: 4vw;
      }
    }
  }
  .title {
    font-family: "PingFang SC-Medium";
    font-size: 5vw;
    color: #8b614d;
    letter-spacing: 0;
    text-align: center;
    padding: 14vw 0 8vw 0;
    font-weight: 500;
    span {
      border-bottom: 1px solid #8b614d;
    }
  }
  .record {
    background: url("../assets/images/drugBack.png") no-repeat;
    padding: 0 8vw;
    background-size: 100% 67vw;
    height: 70vw;
  }
  .content {
    display: flex;
    margin-bottom: 3vw;
    .contentItem {
      color: #000000;
      font-weight: 400;
      font-family: "PingFang SC-Regular";
      text-align: left;
      line-height: 7vw;
      .label {
        opacity: 0.5;
        font-size: 3vw;
      }
      .value {
        font-size: 4vw;
      }
    }
    .contentItem1 {
      width: 60%;
    }
    .contentItem2 {
      width: calc(40% - 5vw);
      padding-left: 5vw;
    }
  }
  .line {
    width: 100%;
    border-bottom: 1px solid rgba(203, 203, 203, 1);
    margin: 3vw 0;
  }
  .drugProduce {
    background-size: 100% 155vw;
    height: 157vw;
    .title {
      padding-top: 24vw;
    }
    .drugImg {
      display: flex;
      flex-direction: column;
      img {
        width: 100%;
        margin: 5px 0;
      }
    }
  }
  .pieces {
    background-size: 100% 80vw;
    height: 83vw;
  }
}
.load{
  margin-top: 35px;
}
</style>
  