<template>
  <div>
    <div class="orderMsg">
      <div class="title">
        <span class="sp1"></span><span class="sp2">订单信息</span>
      </div>
      <el-table
        :data="orderList"
        :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"
        >
          <template slot-scope="scope">
            {{ scope.row.orderSource | orderSourceFilter }}
          </template>
        </el-table-column>
        <el-table-column prop="uploadDate" label="提交时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.uploadDate | formatDate }}
          </template>
        </el-table-column>
        <el-table-column prop="fileName" label="文件名" align="center">
        </el-table-column>
        <el-table-column
          prop="fileSize"
          label="文件大小"
          sortable
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.fileSize | transformByte }}
          </template>
        </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="openMetaCode">查看</el-button>
        </el-table-column>
      </el-table>
    </div>
    <div class="metaMsg" v-show="metaShow">
      <div class="title">
        <span class="sp1"></span><span class="sp2">元数据信息</span>
      </div>
      <div class="cstop">
        <el-form
          :inline="true"
          :model="metaFormMsg"
          class="demo-form-inline"
          :disabled="true"
        >
          <el-form-item label="卫星" class="ysjMsg">
            <el-input
              class="ysjMsgMrg"
              v-model="metaFormMsg.satellite"
              placeholder="卫星名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="载荷" class="ysjMsg">
            <el-input
              class="ysjMsgMrg"
              v-model="metaFormMsg.load"
              placeholder="载荷方式"
            ></el-input>
          </el-form-item>
          <el-form-item label="空间分辨率" class="ysjMsg2">
            <el-input
              v-model="metaFormMsg.resRatio"
              placeholder="空间分辨率"
            ></el-input>
          </el-form-item>
          <el-form-item label="时间" class="ysjMsg">
            <el-input
              class="ysjMsgMrg"
              v-model="formatDateStr"
              placeholder="生产时间"
            ></el-input>
          </el-form-item>
          <el-form-item label="级别" prop="resource" class="ysjMsg2">
            <el-radio-group v-model="metaFormMsg.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="metaFormMsg.coordinateSys"
              placeholder="坐标系统"
            ></el-input>
          </el-form-item>
          <el-form-item label="最小纬度" class="ysjMsg">
            <el-input
              v-model="metaFormMsg.minLat"
              placeholder="最小纬度"
            ></el-input>
          </el-form-item>
          <el-form-item label="最大纬度" class="ysjMsg2">
            <el-input
              style="margin-left: 6px"
              v-model="metaFormMsg.maxLat"
              placeholder="最大纬度"
            ></el-input>
          </el-form-item>
          <el-form-item label="最小经度" class="ysjMsg">
            <el-input
              v-model="metaFormMsg.minLon"
              placeholder="最小经度"
            ></el-input>
          </el-form-item>
          <el-form-item label="最大经度" class="ysjMsg2">
            <el-input
              v-model="metaFormMsg.maxLon"
              placeholder="最大经度"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="showOrderMsg">
      <div class="orderScene">
        <div class="title">
          <span class="sp1"></span><span class="sp2">待审核产品预览</span>
        </div>
        <div
          id="auditPreview"
          @click="pickValue"
          style="overflow: hidden; position: relative"
        ></div>
      </div>
      <div class="orderPdf">
        <div class="title">
          <span class="sp1"></span><span class="sp2">检验报告</span>
        </div>
        <div class="pdfDom">
          <iframe class="pdfPage" :src="pdfUrl" frameborder="0"></iframe>
        </div>
      </div>
    </div>
    <div class="orderAudit">
      <div class="title">
        <span class="sp1"></span><span class="sp2">审核信息</span>
      </div>
      <div class="radiogroup">
        <el-radio-group v-model="auditVal">
          <el-radio label="1">审核通过</el-radio>
          <el-radio label="2">审核不通过</el-radio>
        </el-radio-group>
      </div>
      <el-input
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 4 }"
        placeholder="请输入内容"
        v-model="auditText"
      >
      </el-input>
      <div class="btngroup">
        <el-button class="shbtn" type="primary" @click="cancleSubmit"
          >取消</el-button
        >
        <el-button class="shbtn" type="primary" @click="submitAuditMsg"
          >确定</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import cu from "@/lib/cesiumUtils";
import {
  getProductMsg,
  getProductMetaMsg,
  getOrderSamples,
  updateOrderMsg,
  disOrderStatus,
  updateOrderStage,
  getReportMsg,
} from "@/api/pendingOrder";
import { orderExamine } from "@/api/audit";
import qs from "qs";

export default {
  filters: {
    orderSourceFilter(orderSource) {
      const orderSourceMap = {
        0: "用户上传",
        1: "历史上传",
        2: "平台共享",
      };
      return orderSourceMap[orderSource];
    },
    transformByte(size) {
      if (!size) {
        return "0B";
      }
      var num = 1024.0;
      if (size < num) {
        return size + "B";
      }
      if (size < Math.pow(num, 2)) {
        return (size / num).toFixed(2) + "K";
      }
      if (size < Math.pow(num, 3)) {
        return (size / Math.pow(num, 2)).toFixed(2) + "M";
      }
      if (size < Math.pow(num, 4)) {
        return (size / Math.pow(num, 3)).toFixed(2) + "G";
      }
      return (size / Math.pow(num, 4)).toFixed(2) + "T"; // T
    },
    formatDate(inputTime) {
      if (!inputTime && typeof inputTime !== "number") {
        return "";
      }
      var localTime = "";
      inputTime = new Date(inputTime);
      const offset = new Date().getTimezoneOffset();
      localTime = new Date(inputTime - offset * 60000).toISOString();
      localTime = localTime.substr(0, localTime.lastIndexOf("."));
      localTime = localTime.replace("T", " ");
      return localTime;
    },
  },
  mounted() {
    cu.initCesium("auditPreview");
    cu.handleClick();
  },
  created() {
    if (
      Object.keys(this.$route.params).length > 0 &&
      sessionStorage.getItem("prePage") === this.configration.path.daishenhe
    ) {
      this.queryParams = this.$route.params;
    } else {
      this.queryParams = JSON.parse(
        localStorage.getItem(this.configration.path.daishenhe)
      );
    }
    console.log("111111", this.queryParams);
    document.body.scrollTop = 0;
    this.initOrderMsg();
    const samplesList = this.queryParams.sample;
    this.getSplData(samplesList);
  },
  data() {
    return {
      queryParams: null,
      metaShow: false,
      orderList: [],
      metaFormMsg: {
        satellite: "", //卫星
        load: "", //载荷
        resRatio: "0.000307", //空间分辨率
        proLevel: "4", //产品级别
        coordinateSys: "WGS84", //坐标系
        minLat: "116.13622332", //最小经度
        maxLat: "118.342222", //最大经度
        minLon: "34.211234", //最小纬度
        maxLon: "35.3455666", //最大纬度
      },
      pdfUrl: "static/data/download.pdf",
      auditVal: "1",
      auditText: "",
    };
  },
  computed: {
    formatDateStr: function () {
      let inputTime = this.metaFormMsg.producedDate;
      if (!inputTime) {
        //&& typeof inputTime !== 'number'){
        return "";
      }
      var localTime = "";
      inputTime = new Date(inputTime).getTime();
      const offset = new Date().getTimezoneOffset();
      localTime = new Date(inputTime - offset * 60000).toISOString();
      localTime = localTime.substr(0, localTime.lastIndexOf("."));
      localTime = localTime.replace("T", " ");
      return localTime;
    },
  },
  methods: {
    initOrderMsg() {
      const self = this;
      const om = this.queryParams;
      const pdUId = om.product_upload_id;
      getProductMsg(qs.stringify({ productId: pdUId })).then((res) => {
        if (res || res.length !== 0) {
          const r = res[0];
          sessionStorage.setItem("tifPath", r.tifPath);
          self.orderList = [];
          self.orderList.push({
            orderCode: om.order_code,
            orderSource: om.order_resource,
            uploadDate: om.create_date,
            fileName: r.fileName,
            fileSize: r.fileSize,
            fileFormat: r.fileFormat,
          });
          getProductMetaMsg(qs.stringify({ dataPath: r.tifPath })).then(
            (res) => {
              if (res !== null) {
                self.metaFormMsg = {
                  satellite: om.satellite_name,
                  load: om.satellite_load_name,
                  resRatio:
                    res.imageResolution > 0.01
                      ? res.imageResolution
                      : (res.imageResolution * 111194.926).toFixed(2) + "米",
                  coordinateSys: res.coordinateSystem,
                  minLat: res.boundBoxMinY.toFixed(8),
                  maxLat: res.boundBoxMaxY.toFixed(8),
                  minLon: res.boundBoxMinX.toFixed(8),
                  maxLon: res.boundingBoxMaxX.toFixed(8),
                  producedDate: r.productDate,
                  proLevel: r.productLevel + "",
                };
                cu.flyToLayerRect(
                  res.boundBoxMinX,
                  res.boundBoxMinY,
                  res.boundingBoxMaxX,
                  res.boundBoxMaxY
                );
              }
            }
          );
          const geoWS = r.geoWorkspace;
          const geoLN = r.layerName;
          cu.addlayer(geoWS, geoLN);
        }
      });
      this.getNumPages(om.id);
    },
    getNumPages(orderId) {
      getReportMsg(orderId).then((res) => {
        console.log(res);
        if (res.code === 200 && res.data.length !== 0) {
          const rpMsg = res.data[0];
          this.pdfUrl = rpMsg.validationReportDownload;
        }
      });
    },
    tableRowClassName({ rowIndex }) {
      if ((rowIndex + 1) % 2 !== 0) {
        return "background:#F5F7FA";
      } else {
        return "background:#FFFFFF";
      }
    },
    openMetaCode() {
      this.metaShow = !this.metaShow;
    },
    submitAuditMsg() {
      const om = this.queryParams;
      const oe = {
        orderId: om.id,
        userId: localStorage.userId,
        exContext: this.auditText,
        exResult: Number(this.auditVal),
      };
      let os = 6;
      if (this.auditVal === "2") os = 7;
      orderExamine(qs.stringify(oe)).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: "订单审核成功",
          });
          updateOrderMsg({
            id: om.id,
            inspectionId: localStorage.userId,
            inspectionName: localStorage.userName,
          });
          disOrderStatus(om.id);
          const up = new FormData();
          up.append("orderId", om.id);
          up.append("orderStatus", os);
          up.append("userId", om.user_id);
          updateOrderStage(up).then((res) => {
            if (res.code === 200) this.$router.push({ name: "待审核检验订单" });
          });
        }
      });
    },
    cancleSubmit() {
      this.$router.push({ name: "待审核检验订单" });
    },
    // 获取样本
    getSplData(spl) {
      const om = this.queryParams;
      getOrderSamples(om.id, om.product_subclass_id).then((res) => {
        if (res.code == 200) {
          const sp = res.data;
          if (sp.length === 0) {
            this.$message({
              type: "warning",
              message: "没有样本数据",
            });
          } else {
            let sp = JSON.parse(spl);
            cu.removePoint();
            for (let i in sp) {
              cu.addPoint(sp[i].lon, sp[i].lat, sp[i].alt);
            }
          }
        }
      });
    },
    pickValue() {
      cu.handleClick();
    },
  },
};
</script>

<style scoped lang="less">
.orderMsg {
  width: 100%;
  background-color: white;
  font-size: 20px;
  height: 180px;
  padding-bottom: 20px;
}
.metaMsg {
  width: 100%;
  background-color: white;
  font-size: 20px;
  margin-top: 20px;
}
.showOrderMsg {
  width: 100%;
  // background-color: white;
  font-size: 20px;
  margin: 20px 0 20px 0;
  height: 600px;
}
.title {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid rgb(205, 205, 205, 0.5);
}
.orderScene {
  width: 50%;
  height: inherit;
  background-color: white;
  float: left;
  padding-bottom: 5px;
}
#auditPreview {
  width: 98%;
  height: calc(100% - 45px);
  background-color: #354595;
  margin-left: 1%;
  margin-top: 2px;
}
.orderPdf {
  width: calc(50% - 10px);
  margin-left: 10px;
  float: left;
  background-color: white;
  height: inherit;
  padding-bottom: 5px;
}
.orderPdf {
  width: calc(50% - 10px);
  margin-left: 10px;
  float: left;
  background-color: white;
  height: inherit;
  padding-bottom: 5px;
  .pdfDom {
    height: 560px;
    background-color: white;
    .pdfPage {
      width: 100%;
      height: 100%;
    }
  }
}
.orderAudit {
  background-color: white;
}
.radiogroup {
  margin-top: 20px;
  margin-left: 20px;
  height: 50px;
}
.btngroup {
  margin-top: 20px;
  margin-bottom: 20px;
  // margin-left: 40%;
  text-align: center;
}
.shbtn {
  width: 150px;
  height: 35px;
  background-color: #354595;
  border: 0;
  margin-bottom: 15px;
}
.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;
}
.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;
}
/deep/.el-button {
  line-height: 0;
}
/deep/.el-textarea__inner {
  margin-left: 20px;
  width: 50%;
}
/deep/.el-textarea__inner:focus {
  border-color: #354595;
}
</style>
