<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="dealMsg">
      <div class="orderSceneOfFeedback" v-if="failedStatus">
        <div class="title">
          <span class="sp1"></span><span class="sp2">已处理产品预览</span>
        </div>
        <div id="dealPreview"></div>
      </div>
      <div class="orderScene" v-if="failedStatusPdf">
        <div class="title">
          <span class="sp1"></span><span class="sp2">已处理产品预览</span>
        </div>
        <div id="dealPreview"></div>
      </div>
      <div class="orderPdf" v-if="failedStatusPdf">
        <div class="title">
          <span class="sp1"></span><span class="sp2">检验报告</span>
        </div>
        <div class="pdfDom">
          <!-- <pdf  v-for="i in numPages" :key="i" :src="pdfsrc" :page="i"></pdf> -->
          <iframe class="pdfPage" :src="pdfUrl" frameborder="0"></iframe>
        </div>
      </div>
    </div>
    <div class="auditMsg" v-if="hasAudit">
      <div class="title">
        <span class="sp1"></span><span class="sp2">审核信息</span>
      </div>
      <div class="status">
        <span
          >审核状态：{{ auditStatus === 1 ? "审核通过" : "审核不通过" }}</span
        >
      </div>

      <el-input
        type="textarea"
        :disabled="true"
        rows="3"
        v-model="auditMsgText"
      >
      </el-input>
    </div>
    <div class="feedbackMsg" v-if="failedStatus">
      <div class="title">
        <span class="sp1"></span><span class="sp2">处理信息</span>
      </div>
      <div class="desc" style="margin-top: 20px">
        <el-descriptions title="">
          <el-descriptions-item label="订单状态">{{
            feedbackFailure.feedbackResult
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="desc">
        <el-descriptions title="">
          <el-descriptions-item label="反馈时间">{{
            feedbackDateStr
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="desc">
        <el-descriptions title="">
          <el-descriptions-item label="原因">{{
            feedbackFailure.feedbackReason
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="desc">
        <el-descriptions title="">
          <el-descriptions-item
            label="备注"
            v-if="feedbackFailure.feedbackContext"
            >{{ feedbackFailure.feedbackContext }}</el-descriptions-item
          >
        </el-descriptions>
      </div>
      <el-image
        v-if="feedbackFailure.feedbackPicUrl"
        style="margin-bottom: 5px; margin-left: 20px"
        :src="feedbackFailure.feedbackPicUrl"
        fit="cover"
      >
      </el-image>
    </div>
  </div>
</template>

<script>
// import pdf from 'vue-pdf'
import cu from "@/lib/cesiumUtils";
import {
  getProductMsg,
  getProductMetaMsg,
  getOrderSamples,
  getReportMsg,
  getFeedbackMsg,
} from "@/api/pendingOrder";
import qs from "qs";
import { getExamineMsg } from "@/api/audit";

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).getTime();
      // console.log('inputTim11e',inputTime,'typeof inputTime',typeof inputTime)
      const offset = new Date().getTimezoneOffset();
      localTime = new Date(inputTime - offset * 60000).toISOString();
      localTime = localTime.substr(0, localTime.lastIndexOf("."));
      localTime = localTime.replace("T", " ");
      console.log("localTime", localTime);
      return localTime;
    },
  },
  mounted() {
    cu.initCesium("dealPreview");
  },
  created() {
    if (
      Object.keys(this.$route.params).length > 0 &&
      sessionStorage.getItem("prePage") === this.configration.path.yichuli
    ) {
      this.queryParams = this.$route.params;
    } else {
      this.queryParams = JSON.parse(
        localStorage.getItem(this.configration.path.yichuli)
      );
    }
    document.body.scrollTop = 0;
    this.initOrderMsg();
    // console.log('11111',this.queryParams)
    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: "",
      // pdfsrc:'',
      // numPages:1,
      feedbackFailure: {
        feedbackDate: "",
        feedbackResult: "",
        feedbackReason: "",
        feedbackContext: "",
        feedbackPicUrl: "",
      },
      failedStatus: false,
      failedStatusPdf: true,
      hasAudit: false,
      auditStatus: 1,
      auditMsgText: "",
    };
  },
  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;
    },
    feedbackDateStr: function () {
      let inputTime = this.feedbackFailure.feedbackDate;
      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];
          self.productMsg = r;
          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,
          });
          sessionStorage.setItem("tifPath", r.tifPath);
          getProductMetaMsg(qs.stringify({ dataPath: r.tifPath })).then(
            (res) => {
              console.log("111", res);
              if (res !== null && res !== "") {
                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);
        }
      });
      if (
        om.order_status === 2 ||
        om.order_status === 6 ||
        om.order_status === 7
      ) {
        this.getNumPages(om.id);
        if (om.order_status === 6 || om.order_status === 7) {
          this.hasAudit = true;
          getExamineMsg(om.id).then((res) => {
            if (res.code === 200 && res.data.length !== 0) {
              const rs = res.data[0];
              this.auditMsgText = rs.examineContext;
              this.auditStatus = rs.examineResult;
            }
          });
        }
      } else {
        this.failedStatus = true;
        this.failedStatusPdf = false;
        getFeedbackMsg(om.id).then((res) => {
          if (res.code === 200 && res.data.length !== 0) {
            const rd = res.data[0];
            console.log(rd);
            self.feedbackFailure.feedbackDate = rd.feedbackDate;
            self.feedbackFailure.feedbackResult = rd.feedbackResult;
            self.feedbackFailure.feedbackReason = rd.feedbackReason;
            self.feedbackFailure.feedbackContext =
              rd.feedbackContext === "" ? false : rd.feedbackContext;
            self.feedbackFailure.feedbackPicUrl =
              rd.feedbackPicUrl === "" ? false : rd.feedbackPicUrl;
          }
        });
      }
    },
    getNumPages(orderId) {
      getReportMsg(orderId).then((res) => {
        if (res.code === 200 && res.data.length !== 0) {
          const rpMsg = res.data[0];
          this.pdfUrl = rpMsg.validationReportDownload;
          // const pdfName = rpMsg.validationReportName;
          // var loadingTask = pdf.createLoadingTask(pdfUrl,{withCredentials: false})
          // loadingTask.promise.then(pdf =>{
          //     this.pdfsrc = loadingTask
          //     this.numPages = pdf.numPages
          // }).catch((err) => {
          //     console.error('pdf加载失败')
          // })
        }
      });
    },
    tableRowClassName({ rowIndex }) {
      if ((rowIndex + 1) % 2 !== 0) {
        return "background:#F5F7FA";
      } else {
        return "background:#FFFFFF";
      }
    },
    openMetaCode() {
      this.metaShow = !this.metaShow;
    },
    // 获取样本
    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 {
            if (om.order_status === 3) {
              cu.removePoint();
              for (let i in sp) {
                cu.addPoint(sp[i].lon, sp[i].lat, sp[i].alt);
              }
            } else {
              let sp = JSON.parse(spl);
              cu.removePoint();
              for (let i in sp) {
                cu.addPoint(sp[i].lon, sp[i].lat, sp[i].alt);
              }
            }
          }
        }
      });
    },
  },
};
</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;
}
.dealMsg {
  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;
}
.orderSceneOfFeedback {
  width: 100%;
  height: inherit;
  background-color: white;
  float: left;
  padding-bottom: 5px;
}
#dealPreview {
  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;
  .pdfDom {
    height: 560px;
    background-color: white;
    // overflow: hidden;
    // overflow-y: auto;
    // overflow-x: auto;
    .pdfPage {
      width: 100%;
      height: 100%;
    }
  }
}

.feedbackMsg {
  background-color: white;
}

.status {
  margin-left: 20px;
  font-size: 16px;
  margin-top: 10px;
  margin-bottom: 15px;
}

.desc {
  margin-left: 20px;
  font-size: 16px;
}
.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%;
  height: 30px;
  margin-bottom: 20px;
}
/deep/.el-textarea__inner:focus {
  border-color: #354595;
}
.auditMsg {
  background-color: white;
}
.status {
  margin-left: 20px;
  font-size: 16px;
  margin-top: 10px;
  margin-bottom: 15px;
}
</style>
