<template>
  <div>
    <transition name="Fade" mode="out-in">
      <router-view></router-view>
    </transition>
    <!-- 订单展示 -->
    <div class="page" v-show="pageshow" v-loading="checkRealityWait" element-loading-text="正在检验..."
      element-loading-spinner="el-icon-loading">
      <div class="cardfrist">
        <div class="box1">
          <span class="sp1"></span><span class="sp2">订单信息</span>
        </div>
        <el-table :header-cell-style="{ background: '#E4E9F1' }" :cell-style="tableRowClassName" :data="orderData"
          style="width: 98%; margin-left: 1%; margin-top: 15px">
          <el-table-column prop="orderCode" label="订单编号" sortable width="180" align="center">
          </el-table-column>
          <el-table-column prop="orderSource" label="订单来源" sortable align="center">
          </el-table-column>
          <el-table-column prop="uploadDate" label="提交时间" sortable align="center">
          </el-table-column>
          <el-table-column prop="fileName" label="文件名" sortable align="center">
          </el-table-column>
          <el-table-column prop="fileSize" label="产品大小" sortable align="center">
          </el-table-column>
          <el-table-column prop="fileFormat" label="文件格式" sortable align="center">
          </el-table-column>
          <el-table-column label="元数据" align="center">
            <el-button type="primary" @click="changeshow">查看</el-button>
          </el-table-column>
        </el-table>
      </div>
      <!-- 元数据展示 -->
      <div class="cardsecond" v-show="isShow">
        <div class="box1">
          <span class="sp1"></span><span class="sp2">元数据查看</span>
        </div>
        <div class="cstop">
          <el-form :inline="true" :model="formInline" class="demo-form-inline" :disabled="true">
            <el-form-item label="卫星" class="ysjMsg">
              <el-input class="ysjMsgMrg" v-model="formInline.satellite" placeholder="卫星名称"></el-input>
            </el-form-item>
            <el-form-item label="载荷名称" class="ysjMsg">
              <el-input v-model="formInline.load" placeholder="载荷方式"></el-input>
            </el-form-item>
            <el-form-item label="空间分辨率" class="ysjMsg2">
              <el-input v-model="formInline.resRatio" placeholder="空间分辨率"></el-input>
            </el-form-item>
            <el-form-item label="时间" class="ysjMsg">
              <el-input class="ysjMsgMrg" v-model="formInline.producedDate" placeholder="生产时间"></el-input>
            </el-form-item>
            <el-form-item label="级别" prop="resource" style="width: 20%" class="ysjMsg2">
              <el-radio-group v-model="formInline.proLevel">
                <el-radio label="3"></el-radio>
                <el-radio label="4"></el-radio>
                <el-radio label="5"></el-radio>
              </el-radio-group> </el-form-item><br />
            <el-form-item label="坐标系统" class="ysjMsg">
              <el-input v-model="formInline.coordinateSys" placeholder="坐标系统"></el-input>
            </el-form-item>
            <el-form-item label="最小纬度" class="ysjMsg">
              <el-input v-model="formInline.minLat" placeholder="最小纬度"></el-input>
            </el-form-item>
            <el-form-item label="最大纬度" class="ysjMsg2">
              <el-input style="margin-left: 6px" v-model="formInline.maxLat" placeholder="最大纬度"></el-input>
            </el-form-item>
            <el-form-item label="最小经度" class="ysjMsg">
              <el-input v-model="formInline.minLon" placeholder="最小经度"></el-input>
            </el-form-item>
            <el-form-item label="最大经度" class="ysjMsg2">
              <el-input v-model="formInline.maxLon" placeholder="最大经度"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 正射校正 -->
      <OtgCorrection :sampleFun="sampleFun" :sampleCldFun="sampleCldFun" :pixelFun="pixelFun" :pixelNum="pixelNum"
        :geoWorkSpace="geoWorkSpace" :geoLayerName="geoLayerName" :geoLayerPos="geoLayerPos" :orderId="orderId"
        :productSubType="productSubType" :projection="projection" :checkRealityWait="checkRealityWait"
        ref="otgCorrectionPanel" v-if="productSubType === 45">
      </OtgCorrection>
      <!-- 地表覆盖 -->
      <Qualitative :sampleFun="sampleFun" :sampleCldFun="sampleCldFun" :pixelFun="pixelFun" :pixelNum="pixelNum"
        :geoWorkSpace="geoWorkSpace" :geoLayerName="geoLayerName" :geoLayerPos="geoLayerPos" :orderId="orderId"
        :productSubType="productSubType" :featureMapData="featureMapData" :checkRealityWait="checkRealityWait"
        ref="qualitativePanel" v-else-if="productSubType === 39 || productSubType === 47"></Qualitative>
      <!-- 土壤水份等 -->
      <SoilMositure :sampleFun="sampleFun" :sampleCldFun="sampleCldFun" :pixelFun="pixelFun" :pixelNum="pixelNum"
        :geoWorkSpace="geoWorkSpace" :geoLayerName="geoLayerName" :geoLayerPos="geoLayerPos" :orderId="orderId"
        :productSubType="productSubType" :checkRealityWait="checkRealityWait" ref="soilMositurePanel" v-else>
      </SoilMositure>
      <!-- 真实性检验方法 -->
      <div class="cardfive" v-if="!hasPixelFun">
        <div class="box1">
          <span class="sp1"></span><span class="sp2">真实性检验方法</span>
        </div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="检验方法">
            <el-select v-model="formInline.truthCheckFun" multiple :disabled="truthFun" placeholder="请选择">
              <el-option v-for="item in truthCheckFunOpt" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="btngroup">
          <el-button class="shbtn" type="primary" @click="todaichuli">取消</el-button>
          <el-button class="shbtn" type="primary" @click="changepage">确定</el-button>
        </div>
      </div>
      <div class="card2" v-if="hasPixelFun">
        <div class="leftCard">
          <div class="pixelDeal">
            <div class="box1">
              <span class="sp1"></span>
              <span class="sp22">像元级处理模型设置</span>
            </div>
            <div>
              <span class="cardsp">目标分辨率：{{ pixelNum }}</span>
              <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="像元级处理模型:">
                  <el-select v-model="pixelFun" placeholder="选择像元级处理方法" @change="pixelFunChanged" ref="pixelSel">
                    <el-option label="" value=""></el-option>
                    <el-option label="均值法" value="1" v-if="(globalSampleFun !== 1 && globalSampleFun !== '1') ||
                      globalSampleFun === null ||
                      globalSampleFun === ''
                      "></el-option>
                    <el-option label="最邻近法" value="6" v-if="(globalSampleFun !== 1 && globalSampleFun !== '1') ||
                      globalSampleFun === null ||
                      globalSampleFun === ''
                      "></el-option>
                    <el-option label="克里格法" value="7" v-if="(globalSampleFun !== 1 && globalSampleFun !== '1') ||
                      globalSampleFun === null ||
                      globalSampleFun === ''
                      "></el-option>
                    <el-option label="块克里格法" value="9" v-if="(globalSampleFun !== 1 && globalSampleFun !== '1') ||
                      globalSampleFun === null ||
                      globalSampleFun === ''
                      "></el-option>
                    <el-option label="MSN法" value="10"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
        <div class="rightCard">
          <div class="box1">
            <span class="sp11"></span>
            <span class="sp22">真实性检验方法</span>
          </div>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="检验方法:">
              <el-select v-model="formInline.truthCheckFun" multiple :disabled="truthFun" placeholder="请选择">
                <el-option v-for="item in truthCheckFunOpt" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="cardfive">
          <div class="btngroup">
            <el-button class="shbtn" type="primary" @click="todaichuli">取消</el-button>
            <el-button class="shbtn" type="primary" @click="changepage">确定</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SoilMositure from "@/components/ration/soilMoisture/index.vue";
import OtgCorrection from "@/components/ration/otgCorrection/index.vue";
import Qualitative from "@/components/ration/qualitative/index.vue";
import {
  getAnalyseMethod,
  delSampleData,
  upDateAnalyseMethod,
  checkReality,
  resetCheck
} from "@/api/lang/pendingOrder";
import qs from "qs";
import html2canvas from "@/lib/html2canvas.js"
import { productSubTypeVal, truthFunVal } from "@/lib/contract.js";

export default {
  name: "Inspection",
  components: {
    SoilMositure,
    OtgCorrection,
    Qualitative,
  },
  created() {
    if (
      Object.keys(this.$route.params).length > 0 &&
      sessionStorage.getItem("prePage") ===
      this.configration.path.orderUnprocessed
    ) {
      this.queryParams = this.$route.params;
    } else {
      this.queryParams = JSON.parse(
        localStorage.getItem(this.configration.path.orderUnprocessed)
      );
    }
    document.body.scrollTop = 0;
    this.initOrderPMsg();
    this.setTruthFunOpt();
  },
  data() {
    return {
      queryParams: null,
      orderMsg: "",
      productMsg: null,
      allMsg: null,
      pageshow: true,
      checkRealityWait: false,
      isShow: false,
      truthFun: false,
      productSubType: undefined,
      featureMapData: [],
      orderId: undefined,
      userId: null,
      userName: null,
      token: null,
      formInline: {
        truthCheckFun: [],
        satellite: "", //卫星
        load: "", //载荷
        resRatio: "0.000307", //空间分辨率
        producedDate: "",
        proLevel: "4", //产品级别
        coordinateSys: "WGS84", //坐标系
        minLat: "116.13622332", //最小经度
        maxLat: "118.342222", //最大经度
        minLon: "34.211234", //最小纬度
        maxLon: "35.3455666", //最大纬度
      },
      truthCheckFunOpt: [],
      sampleFun: "",
      sampleCldFun: null,
      pixelFun: "",
      pixelNum: "",
      geoWorkSpace: "",
      geoLayerName: "",
      geoLayerPos: [],
      tifPath: "",
      projection: null,
      orderData: [],
      sampleList: [],
      pdShow: true,
    };
  },
  methods: {
    initOrderPMsg() {
      let self = this;
      const am = (self.allMsg = this.queryParams);
      self.userId = localStorage.userId;
      self.userName = localStorage.userName;
      self.token = localStorage.token;
      const om = (self.orderMsg = self.allMsg.orderMsg);

      self.orderId = om.orderId;
      const pdType = om.productSubClassId;
      self.productSubType = pdType;

      // self.featureMapData = om.landCoverTypeVOList;
      self.featureMapData = am.groudClassData;
      // self.featureMapData = pdType === 39 ? om.landCoverTypeVOList : JSON.parse(am.productMsg.microwaveDataJson).vegetationPhenology;

      self.formInline = am.metaMsg;
      self.orderData = am.orderData;
      self.pixelNum = am.metaMsg.resRatio;

      self.geoLayerPos = [
        am.metaMsg.minLon,
        am.metaMsg.minLat,
        am.metaMsg.maxLon,
        am.metaMsg.maxLat,
      ];

      const pm = (self.productMsg = am.productMsg);
      self.geoWorkSpace = pm.geoWorkspace;
      self.geoLayerName = pm.geoLayerName;
      self.tifPath = pm.ftpPath;
      //由于空天院内网服务无法拉取外网资源，先改成内网资源访问
      // let rt = pm.ftpPath.split('/');
      // self.tifPath = 'http://10.0.31.125:18030/inspection/files/' + rt[rt.length - 1];
      self.projection = pm.projection;

      // 赋值真实性检验方法
      // getAnalyseMethod(self.orderId).then((res) => {
      //   // console.log('真实性检验',res);
      //   if (res.code === 200) {
      //     let truthFun = res.data.default;
      //     if (res.data.selected.length !== 0) truthFun = res.data.selected;
      //     if (truthFun.length !== 0) {
      //       const tfArr = [];
      //       for (let i in truthFun) {
      //         tfArr.push(truthFun[i].id);
      //       }
      //       self.formInline.truthCheckFun = tfArr;
      //       self.truthFun = true;
      //     }
      //   }
      // });

      // 赋值像元级处理方法
      if (om.processMethods !== null) {
        const pm = om.processMethods;
        const pmVal = Object.keys(pm)[0];
        self.pixelFun = pmVal.toString();
      }
      if (self.pixelFun !== "") {
        self.pdShow = true;
        self.$store.commit("setPixelFun", self.pixelFun);
      }

      // 赋值样本抽样方法
      if (om.samplingMethodId !== null)
        self.sampleFun = om.samplingMethodId + "";
      if (self.sampleFun !== "") {
        self.$store.commit("setSampleFun", self.sampleFun);
      }

      if (om.samplingMethodCldId !== null) {
        self.sampleCldFun = om.samplingMethodCldId + "";
      }
    },
    tableRowClassName({ rowIndex }) {
      if ((rowIndex + 1) % 2 !== 0) {
        return "background:#F5F7FA";
      } else {
        return "background:#FFFFFF";
      }
    },
    todaichuli() {
      resetCheck({ orderId: this.orderId }).then(res => {
        if (res.code === 200) {
          window.location.href = `${DAICHULI_URL}?orderid=${this.orderId}&token=${this.token}`;
        }
      })
    },
    changepage() {
      if (this.hasPixelFun && this.pixelFun === "") {
        this.$message.error("请选择像元级处理模型设置");
        return false;
      }
      var smpVal = undefined;
      var featureMapData = [];
      const pdType = this.productSubType;

      if (pdType === productSubTypeVal.ACS_ORTHOPHOTO) {
        smpVal = this.$refs.otgCorrectionPanel;
      } else if (
        pdType === productSubTypeVal.ACS_TYPESOFLANDCOVER ||
        pdType === productSubTypeVal.ACS_VEGETATIONPHENOLOGY
      ) {
        smpVal = this.$refs.qualitativePanel;
        featureMapData = smpVal.featureMapData;
      } else {
        smpVal = this.$refs.soilMositurePanel;
      }

      this.sampleList = smpVal.multipleSelection;
      // if (featureMapData !== [] || featureMapData.length !== 0)
      //   this.updateCoverType(featureMapData);

      const orderId = this.orderId;
      const tcf = this.formInline.truthCheckFun;

      if (this.sampleList.length === 0) {
        this.$message.error("请选择样本数据");
        return false;
      }
      if (tcf.length === 0) {
        this.$message.error("真实性检验方法");
        return false;
      }
      // 关联的样本数据入库
      const allSampleData = smpVal.allSampleData;
      this.addCotSamples(this.sampleList, allSampleData, orderId);
      //更新真实性检验方法
      this.updateTruthFun(orderId, tcf);
      this.checkRealityWait = true;
      // setTimeout(() => {
      //   this.screenCapture(this.sampleList, this.geoLayerPos).then(imgRes => {
      //     this.checkRealityWait = false;
      //   })
      // }, 2000)
      // 真实性校验方法
      var formData = new FormData();
      formData.append("orderId", orderId); //订单ID
      formData.append("productType", this.productSubType); //产品类型
      formData.append("isHttpUrl", true); //产品路径
      formData.append("dataPath", this.tifPath); //产品路径
      formData.append("samples", JSON.stringify(this.sampleList)); //样本数据
      if (this.pixelFun !== "")
        formData.append("pixelHandleType", this.pixelFun); //像元级处理方法（正射校正产品不需要）
      formData.append("truthCheckFuns", JSON.stringify(tcf)); //真实性校验
      formData.append("featureMapping", JSON.stringify(featureMapData));
      formData.append("microwaveDataJson", this.productMsg.microwaveDataJson); //特殊参数设置
      checkReality(formData).then((res) => {
        // console.log("真实性校验：", res);
        if (res?.code === 200 && res.message === "success") {
          this.$nextTick(function () {
            this.screenCapture(this.sampleList, this.geoLayerPos).then(imgRes => {
              const rm = res.data;
              let pixelHandleMsg = null;
              if (this.pixelFun !== ""){
                switch(this.pixelFun){
                  case "1":
                    pixelHandleMsg = "均值法"
                    break;
                  case "6":
                    pixelHandleMsg = "最邻近法"
                    break;
                  case "7":
                    pixelHandleMsg = "克里格法"
                    break;
                  case "9":
                    pixelHandleMsg = "块克里格法"
                    break;
                  case "10":
                    pixelHandleMsg = "MSN法"
                    break;
                }
              }
              const theSampleFun = this.transformPcMethod(this.$store.state.sampleFun)
              const reportMsg = {
                pdSubType: this.productSubType,
                reportResult: rm,
                geoWS: this.geoWorkSpace,
                geoLN: this.geoLayerName,
                geoLayerPos: this.geoLayerPos,
                tifPath: this.tifPath,
                metaData: this.formInline,
                sampleList: this.sampleList,
                orderId: this.orderId,
                userId: this.userId,
                userName: this.userName,
                token: this.token,
                orderMsg: this.orderMsg,
                productMsg: this.productMsg,
                imgRes: imgRes,
                pixelHandleMsg:pixelHandleMsg,
                projStr:res.projStr,
                sampleFun:theSampleFun
              };
              localStorage.setItem(
                this.configration.path.inspection,
                JSON.stringify(reportMsg)
              );
              this.$message({
                message: "真实性检验完成",
                type: "success",
              });
              this.checkRealityWait = false;
              this.$router.push({ name: "报告生成", params: reportMsg });
            });
          })
        } else {
          this.$message({
            message: res.message,
            type: "error",
          });
          this.checkRealityWait = false;
        }
      });
    },
    screenCapture(allSampel, gp) {
      return new Promise((resolve) => {
        const allLon = [], allLat = [];
        if (this.productSubType === productSubTypeVal.ACS_ORTHOPHOTO) {
          for (let i in allSampel) {
            allLon.push(allSampel[i].measureLong);
            allLat.push(allSampel[i].measureLat);
          }
        } else {
          for (let i in allSampel) {
            allLon.push(allSampel[i].lng);
            allLat.push(allSampel[i].lat);
          }
        }
        const sampleExtent = [Math.min(...allLon), Math.min(...allLat), Math.max(...allLon), Math.max(...allLat)]
        this.setViewToRect(sampleExtent[0], sampleExtent[1], sampleExtent[2], sampleExtent[3]);
        setTimeout(() => {
          this.getCaptrue('样本放大').then(res => {
            this.setViewToRect(gp[0], gp[1], gp[2], gp[3]);
            setTimeout(() => {
              this.getCaptrue('样本图').then(res1 => {
                if (this.productSubType === productSubTypeVal.ACS_ORTHOPHOTO) window.selfDefine.farViewer.entities.removeAll();
                else window.selfDefine.viewer.entities.removeAll();
                setTimeout(() => {
                  this.getCaptrue('产品图').then(res2 => {
                    resolve({
                      sampleImgFd: res,
                      sampleImg: res1,
                      productImg: res2
                    })
                  });
                }, 1000)
              })
            }, 1000)
          })
        }, 1000)
      })
    },
    getCaptrue(picName) {
      return new Promise((resolve, reject) => {
        const sceneDom = document.getElementById('sceneShowContent');
        if (sceneDom !== null) {
          html2canvas(sceneDom, {
            useCORS: true,
            height: sceneDom.offsetHeight,
            width: sceneDom.offsetWidth,
            scrollY: 0,
            scrollX: 0
          }).then(async (cbCanvas) => {
            resolve(cbCanvas.toDataURL())
            // cbCanvas.toBlob(blob => {
            //   const href = window.URL.createObjectURL(new Blob([blob]))
            //   const link = document.createElement('a')
            //   link.href = href
            //   link.download = picName + '.png'
            //   document.body.appendChild(link)
            //   link.click()
            //   document.body.removeChild(link)
            //   resolve(href)
            // }, 'image/png')
          });
        }
      })
    },
    setViewToRect(minLon, minLat, maxLon, maxLat) {
      // minLon = Number(minLon);
      // minLat = Number(minLat);
      // maxLon = Number(maxLon);
      // maxLat = Number(maxLat);
      // const ctLon = ((minLon + maxLon) / 2).toFixed(8);
      // const ctLat = ((minLat + maxLat) / 2).toFixed(8);
      // const west = minLon * 2 - ctLon;
      // const south = minLat * 2 - ctLat;
      // const east = maxLon * 2 - ctLon;
      // const north = maxLat * 2 - ctLat;
      const west = minLon - 0.01;
      const south = minLat - 0.01;
      const east = maxLon + 0.01;
      const north = maxLat + 0.01;
      const rectangle = Cesium.Rectangle.fromDegrees(west, south, east, north);
      if (this.productSubType === productSubTypeVal.ACS_ORTHOPHOTO) {
        window.selfDefine.farViewer.camera.setView({
          destination: rectangle
        });
      } else {
        window.selfDefine.viewer.camera.setView({
          destination: rectangle
        });
      }


    },
    addCotSamples(samplesList, allSampleData, orderId) {
      for (let i in samplesList) {
        allSampleData = allSampleData.filter(function (o) {
          return o.id !== samplesList[i].id;
        });
      }
      const isDel = [];
      for (let i in allSampleData) {
        isDel.push(allSampleData[i].id);
      }
      const dsForm = new FormData();
      dsForm.append("orderId", orderId);
      dsForm.append("idList", isDel);
      delSampleData(dsForm);
    },
    // 更新真实性检验方法
    updateTruthFun(orderId, tcf) {
      upDateAnalyseMethod(
        qs.stringify({ list: tcf, orderId: orderId }, { indices: false })
      );
    },
    updateCoverType(featureMapData) {
      for (let i in featureMapData) {
        const fi = featureMapData[i];
        if (fi.typeIdKg !== null) {
          const fParams = new FormData();
          fParams.append("coverId", fi.id);
          fParams.append("kgTypeId", Number(fi.typeIdKg));
          fParams.append("kgTypeName", fi.typeNameKg);
          updateFeature(fParams);
        }
      }
    },
    changeshow() {
      this.isShow = !this.isShow;
    },
    // 获取产品子分类
    setTruthFunOpt() {
      const opt = this.productSubType;
      const pst = productSubTypeVal;
      const tf = truthFunVal;
      if (opt === pst.ACS_ORTHOPHOTO) {
        this.truthCheckFunOpt = [
          { value: tf.ACM_MEANERROR, label: "平均误差" },
          { value: tf.ACM_MEANABSOLUTEERROR, label: "平均绝对误差" },
          { value: tf.ACM_RELATIVEERROR, label: "相对误差" },
          { value: tf.ACM_MEANRELATIVEERROR, label: "平均相对误差" },
          {
            value: tf.ACM_MEANABSOLUTERELATIVEERROR,
            label: "平均绝对相对误差",
          },
          { value: tf.ACM_ROOTMANSQUAREERROR, label: "均方根误差" },
          { value: tf.ACM_PLANENESSERROR, label: "平面中误差" },
        ];
      } else if (
        opt === pst.ACS_TYPESOFLANDCOVER ||
        opt === pst.ACS_VEGETATIONPHENOLOGY
      ) {
        this.truthCheckFunOpt = [
          { value: tf.ACM_ERRORMATRIX, label: "误差矩阵" },
          { value: tf.ACM_OVERALLACCURACY, label: "总体分类精度" },
          { value: tf.ACM_KAPPA, label: "Kappa系数" },
        ];
      } else {
        this.truthCheckFunOpt = [
          { value: tf.ACM_MEANERROR, label: "平均误差" },
          { value: tf.ACM_MEANABSOLUTEERROR, label: "平均绝对误差" },
          { value: tf.ACM_RELATIVEERROR, label: "相对误差" },
          { value: tf.ACM_MEANRELATIVEERROR, label: "平均相对误差" },
          {
            value: tf.ACM_MEANABSOLUTERELATIVEERROR,
            label: "平均绝对相对误差",
          },
          { value: tf.ACM_ROOTMANSQUAREERROR, label: "均方根误差" },
          { value: tf.ACM_CORRELATIONCOEFFICIENT, label: "相关系数" },
        ];
      }
    },
    pixelFunChanged() {
      //更新状态
      this.$store.commit("setPixelFun", this.pixelFun);
    },
    // 像元级方法枚举转换
    transformPcMethod(pixelDealFun) {
      const pixelDealFunMap = {
        0: "均值法",
        1: "最邻近法",
        2: "克里格法",
        3: "块克里格法",
        4: "MSN法",
      };
      if (pixelDealFun == null) return null;
      else return pixelDealFunMap[pixelDealFun];
    },
  },
  beforeDestroy() {
    //恢复初始状态
    this.$store.commit("setSampleFun", null);
    this.$store.commit("setPixelFun", null);
    this.$store.commit("setAltRange", null);
  },
  computed: {
    hasPixelFun: function () {
      return (
        this.productSubType !== 45 &&
        this.productSubType !== 39 &&
        this.productSubType !== 47
      );
    },
    globalSampleFun: function () {
      if (this.allMsg.orderMsg.processMethods == null) {
        this.pixelFun = "";
      }
      return this.$store.state.sampleFun;
    },
    globalPixelFun: function () {
      return this.$store.state.pixelFun;
    },
  },
};
</script>

<style scoped lang="less">
.Fade-enter,
.Fade-leave-to {
  opacity: 0;
}

.Fade-enter-to,
.Fade-leave {
  opacity: 1;
}

.Fade-enter-active,
.Fade-leave-active {
  transition: all 0.4s;
}

/deep/.cardsecond .el-input.is-disabled .el-input__inner {
  width: 140px;
  height: 33px;
}

/deep/.el-form--inline .el-form-item__label {
  text-align: justify;
  // text-align-last: justify;
  font-size: 15px;
}

.shbtn:hover,
.shbtn:active,
.shbtn:focus {
  background-color: rgba(97, 115, 206, 0.5);
}

.shbtn {
  width: 150px;
  height: 35px;
  background-color: #354595;
  border: 0;
}

.btngroup {
  margin-bottom: 20px;
  // margin-left: 40%;
  text-align: center;
}

/deep/.el-textarea__inner {
  margin-left: 20px;
  width: 98%;
}

/deep/.el-textarea__inner:focus {
  border-color: #354595;
}

/deep/.el-radio {
  margin-right: 10px;
}

/deep/.el-radio__inner::after {
  background-color: #354595;
}

/deep/.el-radio__input.is-checked .el-radio__inner {
  border-color: #354595;
  background: white;
}

/deep/.el-radio__input.is-disabled .el-radio__inner {
  border-color: #354595;
}

/deep/.el-radio__input.is-disabled.is-checked .el-radio__inner::after {
  background-color: #354595;
}

/deep/.el-radio__input.is-checked+.el-radio__label {
  color: #606266;
}

/deep/.el-radio__inner {
  border: 2px solid #354595;
}

/deep/.el-icon-close:before {
  content: none;
}

/deep/.el-tag .el-icon-close {
  width: 0;
  height: 0;
}

/deep/.cardfive .el-form-item {
  margin-top: 15px;
  width: 100%;
}

/deep/.cardfive .el-form--inline .el-form-item__content {
  width: 90%;
  height: 60px;
}

/deep/.cardfive .el-select {
  width: 100%;
  height: 60px;
  line-height: 60px;
}

/deep/.cardfive .el-input--suffix .el-input__inner {
  width: 100%;
  height: 60px;
  line-height: 60px;
}

/deep/.cardfive .el-form--inline .el-form-item__label {
  height: 60px;
  line-height: 60px;
  margin-left: 20px;
}

/deep/.cardfive .el-button--primary:hover {
  background-color: #354595;
}

/deep/.cardfive .el-button--primary:focus {
  background-color: #6979cc;
  border-color: #6979cc;
}

.box2 {
  margin-top: 10px;
  margin-bottom: 10px;
  height: 30px;
  width: 300px;
  display: inline-block;
}

.bxtitle {
  margin-top: 2.5px;
  display: inline-block;
  vertical-align: top;
  font-size: 18px;
  width: 80px;
  text-align: justify;
  text-align-last: justify;
}

.bxinput {
  display: inline-block;
  vertical-align: top;
  width: 200px;
}

/deep/.cardfive .el-input__inner {
  height: 60px;
}

.cstop {
  margin-top: 20px;
  margin-bottom: 0;
  position: relative;
  text-align: center;
}

.ysjMsg {
  width: 18%;
}

.ysjMsgMrg {
  margin-left: 14px;
}

.ysjMsg2 {
  width: 20%;
}

.cardsecond {
  width: 100%;
  background-color: white;
  font-size: 20px;
  margin-top: 20px;
}

.cardfrist {
  width: 100%;
  background-color: white;
  font-size: 20px;
  padding-bottom: 15px;
  // margin-top: 20px;
}

.cardfive {
  margin-top: 20px;
  background-color: white;
  padding: 0 0 10px 0;
  clear: both;
}

.box1 {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid rgb(205, 205, 205, 0.5);
}

.sp1 {
  display: inline-block;
  width: 7px;
  height: 26px;
  background-color: #354595;
  vertical-align: top;
  // position: absolute;
  margin-left: 20px;
  margin-top: 8px;
}

.sp11 {
  display: inline-block;
  width: 7px;
  height: 26px;
  background-color: #354595;
  vertical-align: top;
  // position: absolute;
  margin-left: 24px;
  margin-top: 8px;
}

.sp2 {
  margin-left: 10px;
  font-size: 20px;
  font-weight: 700;
  color: #354595;
  vertical-align: top;
}

.sp22 {
  margin-left: 10px;
  font-size: 20px;
  font-weight: 700;
  color: #354595;
  vertical-align: top;
}

.page {
  /* height: 1000px; */
  width: 100%;
  /* background-color: goldenrod; */
}

/deep/.el-button {
  line-height: 0;
}

.leftCard {
  width: 54%;
  height: 230px;
  background-color: white;
  float: left;
}

.rightCard {
  width: 46%;
  height: 230px;
  background-color: white;
  float: left;
}

.pixelDeal {
  height: 165px;
  background-color: white;
}

/deep/.leftCard .el-form-item {
  margin-top: 15px;
  width: 100%;
}

/deep/.leftCard .el-input__inner {
  height: 38px;
}

/deep/.leftCard .el-select {
  width: 100%;
  height: 38px;
  line-height: 38px;
}

/deep/.leftCard .el-form--inline .el-form-item__content {
  width: 50%;
  height: 38px;
}

/deep/.leftCard .el-form--inline .el-form-item__label {
  height: 38px;
  line-height: 38px;
  margin-left: 20px;
}

/deep/.rightCard .demo-form-inline .el-form-item {
  margin-top: 15px;
  width: 100%;
}

/deep/.rightCard .demo-form-inline .el-form-item__content {
  width: 80%;
}

/deep/.rightCard .demo-form-inline .el-select {
  width: 100%;
}

// /deep/.rightCard .el-form-item {
//   margin-top: 15px;
//   width: 100%;
// }
// /deep/.rightCard .el-input__inner {
//   height: 30px;
// }
// /deep/.rightCard .el-select {
//   width: 100%;
//   height: 30px;
//   line-height: 30px;
// }
// /deep/.rightCard .el-form--inline .el-form-item__content {
//   width: 70%;
//   height: 30px;
// }
// /deep/.rightCard .el-form--inline .el-form-item__label {
//   height: 30px;
//   margin-left: 24px;
// }
.cardsp {
  display: block;
  margin: 5px 0 0 20px;
  font-size: 15px;
  color: #606266;
  line-height: 40px;
}

.selectBox {
  height: 65px;
  width: 100%;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  line-height: 22px;
}

.selTxt {
  background-color: #f4f4f5;
  border-color: #e9e9eb;
  color: #909399;
  box-sizing: border-box;
  margin: 2px 0 2px 6px;
  height: 24px;
  padding: 0 8px;
  line-height: 22px;
  font-size: 12px;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  align-items: center;
  flex-wrap: wrap;
}
</style>
