<template>
  <div>
    <div>
      <transition name="Fade" mode="out-in">
        <router-view></router-view>
      </transition>
    </div>
    <div class="page" v-show="pageshow">
      <div class="daichuli">
        <div class="box1">
          <span class="sp1"></span><span class="sp2">订单信息</span>
        </div>
        <el-table :data="orderData" :header-cell-style="{ background: '#E4E9F1' }" :cell-style="tableRowClassName"
          style="width: 98%; margin-left: 1%; margin-top: 15px" :default-sort="{ prop: 'date', order: 'descending' }">
          <el-table-column prop="orderCode" label="订单编号" width="180" align="center">
          </el-table-column>
          <el-table-column prop="orderSource" label="订单来源" width="180" align="center">
          </el-table-column>
          <el-table-column prop="uploadDate" label="提交时间" align="center">
          </el-table-column>
          <el-table-column prop="fileName" label="文件名" 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="changePage">查看</el-button>
          </el-table-column>
        </el-table>
      </div>
      <div class="daichuli2" 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" prop="producedDate">
              <el-input class="ysjMsgMrg" v-model="formInline.producedDate" placeholder="生产时间"></el-input>
            </el-form-item>
            <el-form-item label="级别" prop="resource" 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 label="其他"></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>
      <div class="daichuli1">
        <div class="box1">
          <span class="sp1"></span><span class="sp2">待检验产品预览</span><el-button type="primary" size="small"
            @click="downLoadPro">下载</el-button>
        </div>
        <product-info @removeLayer="removeLayer" @addLayer="addLayer" @removeSample="removeSplData"
          @addSample="getSqlData"></product-info>
        <div class="preview">
          <div id="PendPreview" @click="pickValue" style="overflow: hidden; position: relative"></div>
        </div>
      </div>

      <div class="daichuli1" v-if="groudClassShow">
        <div class="box1">
          <span class="sp1"></span><span class="sp2">{{
            orderMsg.productSubClassId == 39
            ? "地表覆盖类型表"
            : "植被物候类型表"
          }}</span>
        </div>
        <el-table :data="groudClassData" :header-cell-style="{ background: '#E4E9F1' }" :cell-style="tableRowClassName"
          style="width: 98%; margin-left: 1%; margin-top: 15px" height="200">
          <el-table-column label="序号" align="center" type="index" width="100">
          </el-table-column>
          <el-table-column prop="coverName" label="地物类型名称" align="center"></el-table-column>
          <el-table-column prop="imageValue" label="像素实际值" align="center"></el-table-column>
        </el-table>
      </div>

      <div class="dealGrp">
        <el-button type="primary" @click="inspection">处理</el-button>
        <el-button type="primary" @click="dialogFormVisible = true">无法处理</el-button>
        <el-button type="primary" @click="todaichuli">取消</el-button>
      </div>
      <!-- 无法处理弹窗 -->
      <div class="unableDeal">
        <el-dialog title="" :visible.sync="dialogFormVisible" width="35%">
          <div class="box1">
            <span class="sp1"></span><span class="sp2">反馈信息</span>
          </div>
          <hr />
          <el-form :inline="true" :model="unDeal" class="demo-form-inline" ref="feedbackForm" label-width="100px">
            <el-form-item label="反馈结果">
              <el-radio-group v-model="unDeal.udMsg">
                <el-radio label="无法处理"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="原因" prop="udReason" :rules="[{ message: ' ', required: true }]">
              <el-select v-model="unDeal.udReason" placeholder="选择原因">
                <el-option v-for="item in udrOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="图片上传">
              <div class="tupian">
                <el-upload class="upload-demo" action="/" accept=".jpg,.jpeg,.png" :before-upload="beforeUpload"
                  :http-request="uploadImgFile" :on-remove="removeUploadFile" list-type="picture">
                  <el-button size="small" type="white"><i class="el-icon-upload"></i>上传图片</el-button>
                </el-upload>
              </div>
            </el-form-item>
            <div class="beizhu">
              <el-form-item label="备注">
                <el-input type="textarea" v-model="unDeal.remark" style="margin-left: -40px"></el-input>
              </el-form-item>
            </div>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="subFeedback">保存</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import cu from "@/lib/cesiumUtils";
import {
  getOrderMsg,
  getPendingProductMsg,
  orderFeedback,
  updateOrderStage,
  getSamplesList,
  getUserInfo,
  getFeatureMap,
} from "@/api/lang/pendingOrder";
import { productSubTypeVal } from "@/lib/contract.js";

import qs from "qs";
import ProductInfo from "../../../components/productInfo/index";

export default {
  components: {
    ProductInfo,
  },
  mounted() {
    cu.initCesium("PendPreview");
    cu.handleClick();
  },
  created() {
    if (
      Object.keys(this.$route.params).length > 0 &&
      sessionStorage.getItem("prePage") === this.configration.path.daichuli
    ) {
      this.queryParams = this.$route.params;
    } else {
      this.queryParams = JSON.parse(
        localStorage.getItem(this.configration.path.daichuli)
      );
    }
    document.body.scrollTop = 0;
    this.initOrderMsg();
  },
  data() {
    return {
      queryParams: null,
      orderMsg: "",
      userId: null,
      userName: null,
      token: null,
      orderId: null,
      productMsg: "",
      pageshow: true,
      isShow: false,
      formInline: {
        satellite: "", //卫星
        load: "", //载荷
        resRatio: "0.000307", //空间分辨率
        producedDate: "",
        proLevel: "5", //产品级别
        coordinateSys: "WGS84", //坐标系
        minLat: "116.13622332", //最小经度
        maxLat: "118.342222", //最大经度
        minLon: "34.211234", //最小纬度
        maxLon: "35.3455666", //最大纬度
        centerLon: "",
        centerLat: "",
      },
      orderData: [
        {
          orderCode: "219088784675",
          orderSource: "本地上传",
          uploadDate: "2021-05-24",
          fileName: "XXXXX产品.zip",
          fileSize: "1.0GB",
          fileFormat: "geotiff",
        },
      ],
      tifPath: "",
      unDeal: {
        udMsg: "无法处理",
        udReason: "",
        remark: "",
      },
      udrOptions: [
        {
          value: "待检验产品格式不支持",
          label: "待检验产品格式不支持",
        },
        {
          value: "缺少地面实测数据",
          label: "缺少地面实测数据",
        },
        {
          value: "添加样本分布不均匀",
          label: "添加样本分布不均匀",
        },
        {
          value: "实测数据样本数量不满足要求",
          label: "实测数据样本数量不满足要求",
        },
        {
          value: "其他",
          label: "其他",
        },
      ],
      feedbackImg: null,
      imgLocalUrl: null,
      imgFileList: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      groudClassShow: false,
      groudClassData: [
        {
          groClaName: "林地",
          pixelNum: "10",
        },
        {
          groClaName: "草地",
          pixelNum: "02",
        },
      ],
      workSpace: null,
      layerName: null,
      shadeIsShow: true,
      tempPos: null,
    };
  },
  methods: {
    async initOrderMsg() {
      const self = this;
      self.token = this.$route.query.token;
      const userMsg = await getUserInfo(self.token);
      if (userMsg.code === 200) {
        self.userId = userMsg.data.userid;
        self.userName = userMsg.data.username;
        localStorage.setItem("userId", self.userId);
        localStorage.setItem("userName", self.userName);
      }
      const orderId = (self.orderId = this.$route.query.orderId);
      getOrderMsg(orderId).then((res) => {
        if (res.code === 200) {
          self.orderMsg = res.data;
          // const psId = res.data.productSubClassId;
          this.getSqlData();

          getPendingProductMsg(orderId).then((res) => {
            if (res.code === 200) {
              const pm = (self.productMsg = res.data);
              const om = self.orderMsg;
              // 订单基本信息
              self.orderData = [];
              self.orderData.push({
                orderCode: om.orderCode,
                orderSource: om.orderResourceName,
                uploadDate: om.createDate,
                fileName: pm.fileName,
                fileSize: pm.fileSize,
                fileFormat: pm.fileFormat,
              });
              const minLat = parseFloat(Number(pm.minLatitude).toFixed(8));
              const maxLat = parseFloat(Number(pm.maxLatitude).toFixed(8));
              const minLon = parseFloat(Number(pm.minLongitude).toFixed(8));
              const maxLon = parseFloat(Number(pm.maxLongitude).toFixed(8));
              // 元数据信息
              self.formInline = {
                satellite: om.satelliteName,
                load: om.satelliteLoadName,
                producedDate: pm.collectDate,
                proLevel: om.productSubClassId == 45 || om.productSubClassId == 51 ? '3' : '5',
                resRatio:
                  pm.productSpaceResolution > 0.01
                    ? pm.productSpaceResolution + "米"
                    : (pm.productSpaceResolution * 111194.926).toFixed(2) +
                    "米",
                coordinateSys: pm.coordinateSystem,
                minLat: minLat,
                maxLat: maxLat,
                minLon: minLon,
                maxLon: maxLon,
              };
              sessionStorage.setItem('metaDataId', pm.metaDataId)
              // 加载geoserver
              const geoWS = pm.geoWorkspace;
              const geoLN = pm.geoLayerName;
              this.workSpace = geoWS;
              this.layerName = geoLN;

              cu.addlayer(geoWS, geoLN);
              cu.flyToLayerRect(minLon, minLat, maxLon, maxLat);
              const proSubId = om.productSubClassId;
              // 加载地物关联信息
              if (proSubId === 39) {
                self.groudClassShow = true;
                document.cookie = 'KJInspect-Token=' + self.token
                getFeatureMap(self.userId, orderId, self.token).then(res => {
                  if (res.code == 200) {
                    const rd = res.dataList;
                    const gda = []
                    for (let i in rd) {
                      gda.push({ imageName: rd[i].name, imageValue: rd[i].imageValue, coverId: rd[i].systemCoverList[0].coverId, coverName: rd[i].systemCoverList[0].coverName });
                    }
                    self.groudClassData = gda;
                  }
                })
              } else if (proSubId === 47) {
                self.groudClassShow = true;
                self.groudClassData = JSON.parse(pm.microwaveDataJson).vegetationPhenology;
              }
            }
          });
        }
      });
    },
    inspection() {
      let param = {
        userId: this.userId,
        userName: this.userName,
        token: this.token,
        orderMsg: this.orderMsg,
        productMsg: this.productMsg,
        orderData: this.orderData,
        metaMsg: this.formInline,
        groudClassData: this.groudClassData
      };
      localStorage.setItem(
        this.configration.path.orderUnprocessed,
        JSON.stringify(param)
      );
      this.$router.push({ name: "检验处理", params: param });
    },
    changePage() {
      this.isShow = !this.isShow;
    },
    todaichuli() {
      window.location.href = `${DAICHULI_URL}?orderid=${this.orderId}&token=${this.token}`;
    },
    backpage() {
      this.$router.go(-1);
      this.bus.$emit("aaaa", true);
    },
    tableRowClassName({ rowIndex }) {
      if ((rowIndex + 1) % 2 !== 0) {
        return "background:#F5F7FA";
      } else {
        return "background:#FFFFFF";
      }
    },
    uploadImgFile(option) {
      this.feedbackImg = option.file;
    },
    beforeUpload(file) {
      if (this.imgFileList.length > 0) {
        this.$message({
          message: "只能保存一张图片，请删除后再次上传！",
          type: "warning",
        });
        return false;
      }

      this.imgFileList.push(file);
      this.imgLocalUrl = window.URL.createObjectURL(file);
    },
    removeUploadFile(file) {
      this.imgFileList.pop(file);
    },
    //订单反馈
    subFeedback() {
      this.$refs["feedbackForm"].validate((valid) => {
        if (valid) {
          const fb = new FormData();
          fb.append("orderId", this.orderId);
          fb.append("userId", this.userId);
          fb.append("feedbackResult", this.unDeal.udMsg);
          fb.append("feedbackReason", this.unDeal.udReason);
          fb.append("feedbackContext", this.unDeal.remark);
          fb.append("multipartFile", this.feedbackImg);
          orderFeedback(fb).then((res) => {
            if (res.code === 200 || res.message === "反馈成功") {
              this.$message({
                type: "success",
                message: "反馈成功",
              });
              this.imgLocalUrl = null;
              this.dialogFormVisible = false;
              window.location.href = DAICHULI_URL;
              // updateOrderStage(
              //   qs.stringify(
              //     {
              //       orderId: this.orderId,
              //       orderStatus: 3,
              //       userId: this.userId,
              //     },
              //     { indices: false }
              //   )
              // ).then(uoRes => {
              //   if (uoRes.code == 200 && uoRes.success)
              // });
            }
          });
        } else {
          this.$message({
            message: "无法处理的原因不能为空值！",
            type: "error",
          });
        }
      });
    },
    // 获取样本
    getSqlData() {
      const psid = this.orderMsg.productSubClassId;
      getSamplesList(this.orderId).then((res) => {
        if (res.code == 200) {
          const sp = res.data.list;
          if (sp.length === 0) {
            this.$message({
              type: "warning",
              message: "没有样本数据",
            });
          } else {
            cu.removePoint();
            if (psid === productSubTypeVal.ACS_ORTHOPHOTO) {
              for (let i in sp) {
                cu.addPoint(sp[i].measureLong, sp[i].measureLat, 10);
              }
            } else {
              for (let i in sp) {
                const alt = JSON.parse(sp[i].paramStr).alt;
                cu.addPoint(sp[i].lng, sp[i].lat, alt !== "null" ? alt : 10);
              }
            }
          }
        }
      });
    },
    // 下载产品数据
    downLoadPro() {
      const zipPath = this.productMsg.filePath;
      if (zipPath !== null || zipPath !== undefined) {
        const pdfName = zipPath.substr(zipPath.lastIndexOf("/") + 1); //截取文件名称字符串
        if ("download" in document.createElement("a")) {
          const elink = document.createElement("a");
          elink.download = pdfName;
          elink.style.display = "none";
          elink.href = zipPath;
          document.body.appendChild(elink);
          elink.click();
          document.body.removeChild(elink);
        } else {
          location.href = zipPath;
        }
      }
    },
    pickValue() {
      cu.handleClick();
    },
    addLayer() {
      cu.addlayer(this.workSpace, this.layerName);
    },
    removeLayer() {
      cu.clearLayers();
    },
    removeSplData() {
      cu.removePoint();
    },
  },
};
</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;
}

.daichuli {
  width: 100%;
  background-color: white;
  font-size: 20px;
  padding-bottom: 10px;
}

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

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

.sp1 {
  display: inline-block;
  width: 7px;
  height: 26px;
  background-color: #354595;
  position: relative;
  left: 20px;
  top: 6px;
}

.sp2 {
  margin-left: 30px;
  font-size: 20px;
  font-weight: 700;
  color: #354595;
}

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

/deep/.daichuli .el-button--primary {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
  width: 100px;
  height: 30px;
}

/deep/.daichuli .el-button--primary:focus {
  background-color: #354595;
  border-color: #354595;
}

/deep/ .daichuli1 .el-button--primary {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
  width: 100px;
  height: 30px;
  margin-left: 30px;
  position: relative;
  top: -3px;
}

#PendPreview {
  width: 98%;
  height: 600px;
  background-color: #354595;
  margin-left: 1%;
  margin-top: -60px;
}

.dealGrp {
  // margin-top: 20px;
  text-align: center;
  width: 100%;
  background-color: white;
}

/deep/.dealGrp .el-button--primary {
  width: 170px;
  height: 35px;
  margin-bottom: 20px;
  background-color: #354595;
  margin-left: 10px;
  border-color: #354595;
}

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

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

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

.ysjMsg {
  width: 18%;
}

.ysjMsgMrg {
  margin-left: 14px;
}

.ysjMsg2 {
  width: 20%;
}

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

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

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

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

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

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

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

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

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

.unableDeal .box1 {
  width: 70%;
  position: absolute;
  left: 0;
  top: 10px;
  border: none !important;
}

.unableDeal hr {
  width: 99%;
  position: absolute;
  left: 0.5%;
  top: 50px;
  border: none;
  background-color: #c0c4cc;
  height: 1px;
}

/deep/.unableDeal .el-radio {
  padding: 0 30px 0 20px;
}

/deep/.unableDeal .el-select .el-input {
  width: 180px;
}

/deep/.unableDeal .el-upload-dragger .el-icon-upload {
  font-size: 20px;
  color: black;
}

.upload-demo {
  display: inline-block;
}

.el-upload-dragger {
  margin-left: 0px;
}

/deep/.unableDeal .el-upload-dragger .el-icon-upload {
  margin: 0;
  line-height: 30px;
}

/deep/.unableDeal .el-form-item {
  margin-bottom: 0;
}

/deep/.unableDeal .el-input__inner {
  height: 35px;
}

/deep/.unableDeal .el-upload-dragger {
  width: 150px;
  height: 35px;
  margin-left: 27px;
  margin-top: 20px;
  border: 1px solid #d9d9d9;
}

/deep/.unableDeal .el-textarea__inner {
  margin-left: 40px;
  margin-top: 20px;
}

.sp3 {
  position: relative;
  top: -13px;
}

// /deep/.el-textarea__inner{
//   margin-left: 70px;
//   margin-top: 20px;
// }
/deep/.beizhu .el-form-item__label {
  margin-top: 20px;
}

/deep/.dialog-footer {
  text-align: center;
}

/deep/.dialog-footer .el-button--primary {
  width: 150px;
  height: 35px;
  background-color: #354595;
  border-color: #354595;
}

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

.imgPreview {
  width: 178px;
  height: 178px;
  display: block;
}

.preview {
  width: 98%;
  height: 600px;
  margin-left: 1%;
  margin-top: -60px;
  position: relative;
}

.shade {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 98%;
  height: 600px;
  appearance: none;
  background-color: rgba(14, 20, 34, 0.3);
  cursor: pointer;
  margin-left: 1%;
  line-height: 600px;
  text-align: center;
  color: white;
  z-index: 1000;
}
</style>
