<template>
  <div class="card">
    <div class="top">
      <span class="sp1">参数配置</span
      ><span class="sp2" @click="resetForm">清除所有条件</span>
    </div>
    <div class="conter">
      <el-form :inline="true" :model="orderParam" class="demo-form-inline">
        <el-form-item label="卫星选择">
          <el-select
            v-model="orderParam.satellite"
            placeholder="请选择卫星"
            @change="getLoadBys($event)"
          >
            <el-option
              v-for="item in satelliteOpt"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="载荷名称">
          <el-select v-model="orderParam.load" placeholder="请选择载荷方式">
            <el-option
              v-for="item in loadOpt"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form
        :inline="true"
        class="demo-form-inline1"
        :model="orderParam"
        ref="productTypeForm"
        :hide-required-asterisk="true"
      >
        <el-form-item
          label="产品类别"
          prop="cldCategory"
          :rules="[{ required: true, message: ' ' }]"
        >
          <el-select
            v-model="orderParam.category"
            clearable
            placeholder="选择产品类别"
            @change="getCategory($event)"
          >
            <el-option
              v-for="item in categorySele"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            style="width: 155px"
            v-model="orderParam.cldCategory"
            filterable
            placeholder="选择产品子类"
            :loading="loading"
            @change="getCldCategory($event)"
          >
            <el-option
              v-for="item in cldCategorySele"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <el-form :model="orderParam" class="demo-form-inline2">
        <el-form-item label="检验方法">
          <el-radio v-model="orderParam.checkoutFun" label="直接检验"
            >直接检验</el-radio
          >
        </el-form-item>
      </el-form>
      <el-form :model="orderParam" class="demo-form-inline3">
        <el-form-item label="产品来源">
          <el-radio-group v-model="orderParam.proApproach">
            <el-radio label="0" @change="open1">本地上传</el-radio>
            <el-radio label="1" @change="open2">历史上传</el-radio>
            <!-- <el-radio label="2" @change="open3" disabled>平台共享</el-radio> -->
          </el-radio-group>
        </el-form-item>
      </el-form>
      <!-- 产品来源选择弹框 -->
      <div class="conter1">
        <!-- 本地弹框 -->
        <div class="bendi" v-show="isBendi">
          <el-upload
            class="upload-demo"
            drag
            :on-change="handleChange"
            :file-list="fileList"
            :auto-upload="false"
            accept=".zip"
            action="#"
            :disabled="isGreeTerms"
            ref="upload"
            :on-remove="handleRemove"
          >
            <i class="el-icon-upload" ref="uploadBtn"></i>上传文件
          </el-upload>
          <el-progress
            v-show="progressFlag"
            :percentage="loadProgress"
          ></el-progress>
          <div class="uploadTips" v-show="isUploadTips">
            <p style="margin-left: 15px; font-size: 15px">*提示：</p>
            <p style="margin-left: 37px">
              <span style="font-weight: bolder; font-size: 21px">·</span
              >&nbsp;上传遥感产品须为geotiff格式相对应的文件，WGS84坐标系，单个文件大小不超过1G，并打包为zip文件后再上传;
            </p>
            <p style="margin-left: 37px">
              <span style="font-weight: bolder; font-size: 21px">·</span
              >&nbsp;同一遥感产品如有多个相关文件，请将其打包为1个zip文件后再上传;
            </p>
          </div>
        </div>
        <!-- 协议弹窗  -->
        <div class="xieyi">
          <el-dialog
            :modal-append-to-body="false"
            title="国家民用空间基础设施陆地观测卫星共性应用支撑平台文件上传责任声明"
            :visible.sync="isBendi1"
            width="45%"
            :before-close="handleClose"
          >
            <span class="dialog-text">
              <p>
                1、用户上传的所有资源都不得违反国家法律法规。具体如下：<br />
                （1）不得上传中华人民共和国法律、法规、规章、条例以及国家政策所禁止或限制的资源或内容，包括但不限于以下情形：<br />
                1）反对宪法所确定的基本原则；<br />
                2）危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；<br />
                3）损害国家荣誉和利益的；<br />
                4）煽动民族仇恨、民族歧视、破坏民族团结的；<br />
                5）破坏国家宗教政策，宣扬邪教和封建迷信的；<br />
                6）散布谣言，扰乱社会秩序，破坏社会稳定的；<br />
                7）散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；<br />
                8）侮辱或者诽谤他人，侵犯他人合法权利的；<br />
                9）煽动非法集会、结社、游行、示威、聚众扰乱社会秩序的；<br />
                10）以非法民间组织名义活动的；<br />
                11）含有虚假、有害、胁迫、侵犯他人隐私、骚扰、侵权、中伤、粗俗、猥亵、或其它道德上令人反感的内容的；<br />
                12）含有中国法律、法规、规章、条例以及国家政策禁止或限制内容的。<br />
                （2）不得上传与NSICAT提供的服务内容无关的广告、垃圾信息等资源或内容。<br />
                （3）不得上传无法正常显示，或带有病毒或存在其他问题的资源或内容。<br />
                （4）不得上传侵犯第三人知识产权或其他合法权益的资源或内容。<br />
                （5）不得上传违反NSICAT用户协议、版权规则或任何其他业务规则的资源或内容。<br />
              </p>
              2、用户仅可上传其享有知识产权或已取得相关权利人合法授权的资源或内容，用户不得在未经授权的情况下，上传任何可能涉及侵权的资源或内容，用户必须保证上传资源或内容不侵犯任何第三方的合法权益。用户不得未经著作权人同意擅自对他人的作品进行全部或部分复制、修改、改编、翻译、汇编、反向工程、反向编译、反向汇编或改写并进行上传。用户可以为介绍、评论、研究等目的，在合理范围内依法引用他人已经发表的作品，但应当注明作者姓名、作品名称，且不得侵犯著作权人及其他权利人的合法权益。<br />
              3、除由NSICAT上传及发布的资源或内容外，NSICAT分享的其他资源或内容来自用户上传，NSICAT管理者不对该等用户上传的资源或内容的权属等进行实质审核，上传用户须独立就该等上传资源或内容的合法性承担责任。<br />
              4、用户保证上传的所有资源或内容符合中华人民共和国法律、法规、规章和规范性文件的相关规定，不侵犯任何第三方的合法权益。若用户上传及发布的内容发生权利纠纷或涉嫌侵犯第三方合法权益，因此发生的纠纷由用户自行解决，并由用户承担全部法律责任。NSICAT管理者并有权删除相关资源或内容，并可以暂停或终止向该用户提供相关服务。<br />
              5、NSICAT管理者并不保证用户上传的资源或内容能够通过NSICAT传播途径使得其他用户成功获取、使用。<br />
              6、NSICAT管理者保留对用户上传的资源或资源进行不定期的合法、合规性检查的权利，并有权依据检查结果对不符合法律规定或NSICAT规则的资源或内容进行移除，或终止上传用户使用NSICAT服务的资格，且无需向用户或其他任何第三方承担责任。<br />
              7、如用户上传的资源或内容涉嫌侵犯第三方的合法权利，第三方向NSICAT管理者提出举报，NSICAT管理者有权直接删除相关资源或内容。<br />
              8、当权利人发现NSICAT分享的内容侵犯其合法权益时，权利人可向NSICAT管理者举报，权利人需要将包括但不限于权属证明、权利主体证明、网址链接、联系方式、投诉内容及要求的信息发到NSICAT管理者指定联系方式中。NSICAT管理者有权依据权利人提供的信息及中国法律法规和规范性文件的规定做出独立判断，并采取相应措施。<br />
              9、对于用户上传到NSICAT的任何资源或内容，用户同意NSICAT管理者在全世界范围内享有免费的、永久的、不可撤销的、非排他性的使用及商业合作权利，包括但不限于对作品进行复制、下载、展示及网络传播等。<br />
              10、用户上传到NSICAT的资源及其内容仅为其作者或用户个人的观点，不代表NSICAT观点，NSICAT不对此承担任何责任，NSICAT亦不对该等资源或内容的真实性、完整性、准确性及合法性进行任何保证或承担任何责任。<br />
              11、用户不得重复上传资源或内容。
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="sureUpload"
                  >同意上传条款</el-button
                >
                <el-button
                  @click="
                    isBendi1 = false;
                    isGreeTerms = true;
                  "
                  >拒绝</el-button
                >
              </span>
            </span>
          </el-dialog>
        </div>
        <!-- 历史弹框 -->
        <div class="lishi" v-show="isLis">
          <span class="lstext">历史上传</span>
          <el-table
            ref="historyTable"
            :data="historyDataList"
            tooltip-effect="dark"
            style="width: 100%"
            :header-cell-style="{ background: '#E4E9F1' }"
            :cell-style="tableRowClassName"
            @selection-change="handleSelectionChange"
            @current-change="histroyCheck"
          >
            <el-table-column type="selection"> </el-table-column>
            <el-table-column label="文件名称" show-overflow-tooltip width="80">
              <template slot-scope="scope">{{ scope.row.fileName }}</template>
            </el-table-column>
            <el-table-column
              prop="fileSize"
              label="文件大小"
              show-overflow-tooltip
              width="70"
            >
              <template slot-scope="scope">
                {{ scope.row.fileSize | transformByte }}
              </template>
            </el-table-column>
            <el-table-column
              prop="uploadDate"
              label="上传时间"
              show-overflow-tooltip
              width="70"
            >
              <template slot-scope="scope">
                {{ scope.row.uploadDate | formatDate }}
              </template>
            </el-table-column>
            <el-table-column
              prop="productDate"
              label="成像时间"
              show-overflow-tooltip
              width="80"
            >
            </el-table-column>
            <el-table-column
              prop="fileFormat"
              label="文件格式"
              show-overflow-tooltip
              width="76"
            >
            </el-table-column>
          </el-table>
          <div class="block">
            <Pagination
              layout="prev, pager, next"
              :total="pageForm.total"
              :page.sync="pageForm.page"
              :limit.sync="pageForm.limit"
              @pagination="getHistoryList"
            />
          </div>
        </div>
        <!-- 平台共享弹框 -->
        <div class="pingtai" v-show="isPt">
          <span class="lstext">平台共享</span>
          <el-form :model="shareFileForm" label-width="140px">
            <el-form-item label="产品级别" class="el1">
              <el-select
                v-model="shareFileForm.proLevel"
                placeholder="请选择产品级别"
              >
                <el-option label="" value=""></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="空间分辨率" class="el2">
              <el-input v-model="shareFileForm.resRatio"></el-input
              ><span class="danwei">米</span>
            </el-form-item>
            <el-form-item label="时间范围" class="el3">
              <el-date-picker
                v-model="shareFileForm.dateAare"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="区域范围" class="el4">
              <el-radio-group v-model="shareFileForm.proArea">
                <el-radio label="检验站区域"></el-radio>
                <el-radio label="试验场区域"></el-radio>
                <el-radio label="行政区域"></el-radio>
                <el-radio label="自定义区域"></el-radio>
                <el-radio label="矢量文件区域"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <!-- 高级参数模板 -->
    <div class="bottom">
      <span class="sp1">高级参数</span
      ><i
        style="cursor: pointer"
        :class="{
          'el-icon-d-arrow-right cal': isYes,
          'el-icon-d-arrow-right cal1': !isYes,
        }"
        @click="open"
      ></i>
    </div>
    <div class="bottom1" v-show="isBottom">
      <el-form :inline="true" :model="orderParam" class="demo-form-inline">
        <el-form-item label="抽样方法">
          <!-- <el-select
            v-model="orderParam.sampleFun"
            placeholder="选择抽样方法"
            @change="funcChange"
          >
            <el-option
              v-for="item in funcOpt"
              :key="item.name"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select> -->
          <el-cascader
            v-model="orderParam.sampleFun"
            :options="funcOpt"
            placeholder="选择抽样方法"
            popper-class="cascader-popper"
            @change="funcChange"
            clearable
            :show-all-levels="false"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <el-form :inline="true" :model="orderParam" class="demo-form-inline">
        <el-form-item label="像元级处理方法">
          <el-select
            v-model="orderParam.pixelDealFun"
            placeholder="选择像元级处理方法"
            :disabled="forbiddenPixel"
          >
            <el-option
              v-for="item in pixelDealFunOpt"
              :key="item.name"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form :inline="true" :model="orderParam" class="demo-form-inline">
        <el-form-item label="真实性检验方法">
          <el-select
            v-model="orderParam.truthCheckFun"
            multiple
            collapse-tags
            placeholder="选择真实性检验方法"
          >
            <el-option
              v-for="item in truthCheckOpt"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="last">
      <el-form :inline="true" class="demo-form-inline1">
        <el-form-item>
          <el-button @click="cancel">取消</el-button>
          <el-button
            type="primary"
            @click="onSubmit()"
            :disabled="
              uploadStage ||
              (fileList.length == 0 && multipleSelection.length == 0)
            "
            >确定</el-button
          >
          <!-- <el-button type="primary" @click="onSubmit()">确定</el-button> -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import cu from "@/lib/cesiumUtils";
import { addProduct, getProductList } from "@/api/creatOrder";
import { getProductMetaMsg } from "@/api/pendingOrder";
import Pagination from "@/components/Pagination";
import qs from "qs";
import JsZip from "jszip";

let categorySele = [
  { value: 1, label: "几何产品" },
  { value: 2, label: "辐射产品" },
  { value: 3, label: "陆表产品" },
  { value: 4, label: "植被产品" },
];
let allCategory = [
  { pro: 1, label: "正射校正", value: 1 },
  { pro: 1, label: "高程产品", value: 2 },
  { pro: 2, label: "后向散射系数", value: 3 },
  { pro: 2, label: "大气延迟校正", value: 4 },
  { pro: 3, label: "地表粗糙度", value: 9 },
  { pro: 3, label: "地表覆盖类型", value: 6 },
  { pro: 3, label: "土壤水分", value: 7 },
  { pro: 3, label: "土壤盐碱度", value: 8 },
  { pro: 3, label: "干涉测量形变", value: 5 },
  { pro: 4, label: "植被高度", value: 10 },
  { pro: 4, label: "叶面积指数", value: 11 },
  { pro: 4, label: "植被物候", value: 12 },
];

let satelliteOpt = [
  { value: "0", label: "1米C-SAR卫星" },
  { value: "1", label: "3米L-SAR卫星" },
  { value: "2", label: "5米S-SAR卫星" },
  { value: "3", label: "高轨20米SAR卫星" },
];

let loadOpt = [
  { pro: "0", value: "1米C-SAR", label: "1米C-SAR" },
  { pro: "1", value: "3米L-SAR", label: "3米L-SAR" },
  { pro: "2", value: "5米S-SAR", label: "5米S-SAR" },
  { pro: "3", value: "高轨20米SAR", label: "高轨20米SAR" },
];

let pixelDealFunOpt = [
  {
    name: "均值法",
    value: "0",
  },
  {
    name: "最邻近法",
    value: "1",
  },
  {
    name: "克里格法",
    value: "2",
  },
  {
    name: "块克里格法",
    value: "3",
  },
  {
    name: "MSN法",
    value: "4",
  },
];

export default {
  components: { Pagination },
  filters: {
    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;
    },
  },
  data() {
    return {
      isBendi1: false,
      isPt: false,
      isLis: false,
      isBendi: false,
      isBottom: false,
      isYes: true,
      isUploadTips: true, //本地上传提示框显隐
      isGreeTerms: false, //根据是否同意上传条款控制上传组件
      progressFlag: false,
      loadProgress: 0,
      uploadStage: true,
      orderParam: {
        satellite: "", //卫星选择
        load: "", //载荷选择
        category: "", //产品分类
        cldCategory: "", //产品子类
        sampleFun: [], //抽样方法
        pixelDealFun: "", //像元级处理方法
        truthCheckFun: [], //真实性检验方法
        checkoutFun: "直接检验", //检验方法
        proApproach: "", //产品来源
      },
      forbiddenPixel: false,
      truthCheckOpt: [],
      satelliteOpt: satelliteOpt,
      loadOpt: [],
      funcOpt: [],
      pixelDealFunOpt: pixelDealFunOpt,
      categorySele: categorySele, //产品分类选项
      loading: false, //产品子类选择加载
      cldCategorySele: [], //产品子类选项
      shareFileForm: {
        //平台共享参数
        proLevel: "", //产品级别
        resRatio: "", //空间分辨率
        dateAare: "", //时间范围
        proArea: "", //区域范围
      },
      fileList: [], //上传文件的列表
      historyDataList: [],
      multipleSelection: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      productMsg: {
        productName: undefined,
        file: undefined,
        userId: undefined,
        userName: undefined,
        productCategory: undefined,
        productCldCategory: undefined,
        fileSize: undefined,
        fileFormat: undefined,
        productId: undefined,
        uploadDate: undefined,
        // productId:81
      },
      pageForm: {
        total: 0,
        page: 1,
        limit: 2,
      },
    };
  },
  created() {
    this.funcOpt = this.configration.funcOpt;
  },
  methods: {
    sureUpload() {
      this.isBendi1 = false;
      this.isGreeTerms = false;
      setTimeout(() => {
        this.$refs.uploadBtn.click();
      }, 500);
    },
    cancel() {
      cu.closelayer();
    },
    open() {
      this.isYes = !this.isYes;
      this.isBottom = !this.isBottom;
    },
    open1() {
      this.checkFormData(() => {
        this.isBendi = true;
        this.isBendi1 = true;
        this.isLis = false;
        this.isPt = false;
        this.isUploadTips = true;
      });
    },
    open2() {
      this.checkFormData(() => {
        this.isLis = true;
        this.isBendi = false;
        this.isPt = false;
        this.getHistoryList();
      });
    },
    checkFormData(callback) {
      let op = this.orderParam;
      const sl = op.satellite,
        ld = op.load,
        cg = op.category,
        ccg = op.cldCategory;
      if (sl === "" || ld === "" || cg === "" || ccg === "") {
        this.$message.error("卫星、载荷、产品类型不可为空");
        op.proApproach = "";
        return false;
      }
      callback();
    },
    getHistoryList() {
      const ccg = this.orderParam.cldCategory;
      const userId = localStorage.userId;
      getProductList(ccg, userId, this.pageForm.page, this.pageForm.limit).then(
        (res) => {
          if (res.code === 200) {
            this.historyDataList = res.data.dataList;
            this.pageForm.total = res.data.count;
          }
        }
      );
    },
    open3() {
      this.isPt = true;
      this.isLis = false;
      this.isBendi = false;
    },
    funcChange() {
      this.orderParam.pixelDealFun = "";
      for (let i = 0; i < this.funcOpt.length; i++) {
        if (this.funcOpt[i].value === this.orderParam.sampleFun[0]) {
          this.pixelDealFunOpt = this.funcOpt[i].pixelDealFun;
          break;
        }
      }
      this.$forceUpdate();
    },
    onSubmit() {
      const openLab = {
        proID: "1",
        ifShow: true,
        productParam: this.orderParam,
        productMsg: this.productMsg,
        // labelCla:this.orderParam.cldCategory
      };
      const op = this.orderParam;
      const sl = op.satellite,
        ld = op.load,
        cg = op.category,
        ccg = op.cldCategory,
        pa = op.proApproach;
      if (sl === "" || ld === "" || cg === "" || ccg === "" || pa === "")
        this.$message.error("卫星、载荷、产品类型以及产品来源不可为空");
      if (sl !== "" && ld !== "" && cg !== "" && ccg !== "" && pa !== "")
        this.bus.$emit("openMenu", openLab); // 触发事件
      // this.bus.$emit('openMenu',openLab)
      // cu.addlayer()
    },
    // 重置参数
    resetForm() {
      this.orderParam = {
        satellite: "", //卫星选择
        load: "", //载荷选择
        category: "", //产品分类
        cldCategory: "", //产品子类
        sampleFun: "", //抽样方法
        pixelDealFun: "", //像元级处理方法
        truthCheckFun: [], //真实性检验方法
        checkoutFun: "直接检验", //检验方法
        proApproach: "", //产品来源
      };
      this.shareFileForm = {
        //平台共享参数
        proLevel: "", //产品级别
        resRatio: "", //空间分辨率
        dateAare: "", //时间范围
        proArea: "", //区域范围
      };
      this.$refs.upload.clearFiles();
      this.progressFlag = false;
      this.loadProgress = 0;
      this.fileList = [];
      this.uploadStage = true;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    getFileType(fileName) {
      return fileName.slice(fileName.lastIndexOf(".") + 1);
    },
    handleRemove(file) {
      this.loadProgress = 0;
      this.progressFlag = false;
      let arr = this.fileList.filter((fileItem) => {
        return fileItem.name != file.name;
      });
      this.fileList = arr;
    },
    handleChange(file) {
      let that = this;
      let new_zip = new JsZip();
      new_zip.loadAsync(file.raw).then((files) => {
        //----file压缩包里的内容----//
        let _array = Object.values(files.files);
        let flag = false;
        _array.map((childFile) => {
          if (
            this.getFileType(childFile.name) !== "tif" &&
            this.getFileType(childFile.name) !== "tiff"
          ) {
            flag = true;
          }
        });
        if (!flag) {
          cu.clearLayers();
          this.loadProgress = 0;
          this.$refs["productTypeForm"].validate((valid) => {
            if (valid) {
              this.fileList = [];
              const self = this;
              if (file.status === "ready") {
                this.progressFlag = true; // 显示进度条
                this.loadProgress = 0;
                const interval = setInterval(() => {
                  if (this.loadProgress >= 90) {
                    clearInterval(interval);
                    return;
                  }
                  this.loadProgress += 1;
                }, 50);
              }
              const fileName = file.name;
              const size = file.size;
              const suffix = fileName
                .substring(fileName.lastIndexOf(".") + 1, fileName.length)
                .toLowerCase();
              if (suffix != "zip") {
                self.$message.error("只能上传zip文件");
                return false;
              }
              self.isUploadTips = false;
              // self.filePath = file.name;
              this.fileList.push(file);
              // const index =self.filePath.indexOf(".")
              self.productMsg.userId = localStorage.userId;
              self.productMsg.userName = localStorage.userName;
              self.productMsg.productName = fileName;
              self.productMsg.productCategory = self.orderParam.category;
              self.productMsg.productCldCategory = self.orderParam.cldCategory;
              self.productMsg.fileSize = size;
              self.productMsg.fileFormat = "geotiff";
              self.productMsg.file = file.raw;
              const formData = new FormData();
              const pMsg = self.productMsg;
              for (var i in pMsg) {
                formData.append(i, pMsg[i]);
              }
              if (pMsg.productName) {
                addProduct(formData).then((res) => {
                  if (res.msg === "success" && res.uploadStage) {
                    self.productMsg.productId = res.productId;
                    this.loadProgress = 100;
                    this.uploadStage = false;

                    const geoWS = res.publishMsg.geo_workspace;
                    const geoLN = res.publishMsg.layer_name;
                    cu.addlayer(geoWS, geoLN);
                    const tifPath = res.publishMsg.tif_path;
                    self.flyToThePro(tifPath);
                  } else {
                    this.$message.error("数据上传失败");
                  }
                });
              }
            } else {
              this.$message({
                message: "产品类别与子类别不能为空值！",
                type: "error",
              });
            }
          });
        } else {
          this.$message({
            message: "压缩文件中格式不正确！",
            type: "error",
          });
          let arr = this.fileList.filter((fileItem) => {
            return fileItem.name != file.name;
          });
          this.fileList = arr;
        }
      });
    },
    // 历史上传产品选择
    handleSelectionChange(val) {
      cu.clearLayers();
      if (val.length > 1) {
        this.$refs.historyTable.clearSelection();
        this.$refs.historyTable.toggleRowSelection(val.pop());
      } else if (val.length === 1) {
        this.multipleSelection = val;
        this.setSubmitParam();
      }
    },
    // 历史上传点选行
    histroyCheck: function (currentRow) {
      this.$refs.historyTable.toggleRowSelection(currentRow);
    },
    // 设置参数并加载影像
    setSubmitParam() {
      const self = this;
      let hd = self.multipleSelection;
      if (hd !== [] && hd.length !== 0) {
        hd = hd[0];
        if (hd == null) return false;
        self.productMsg.userId = localStorage.userId;
        self.productMsg.userName = localStorage.userName;
        self.productMsg.productName = hd.fileName;
        self.productMsg.productCategory = hd.productType;
        self.productMsg.productCldCategory = hd.productSubclassId;
        self.productMsg.fileSize = hd.fileSize;
        self.productMsg.fileFormat = hd.fileFormat;
        self.productMsg.productId = hd.id;
        self.productMsg.uploadDate = hd.uploadDate;
        self.uploadStage = false;
        this.getCategory(hd.productType);
        this.orderParam.category = hd.productType;
        this.getCldCategory(hd.productSubclassId);
        this.orderParam.cldCategory = hd.productSubclassId;
        const geoWS = hd.geoWorkspace;
        const geoLN = hd.layerName;
        cu.addlayer(geoWS, geoLN);
        self.flyToThePro(hd.tifPath);
      }
    },
    flyToThePro(tifPath) {
      getProductMetaMsg(qs.stringify({ dataPath: tifPath })).then((res) => {
        if (res !== null) {
          cu.flyToLayerRect(
            res.boundBoxMinX,
            res.boundBoxMinY,
            res.boundingBoxMaxX,
            res.boundBoxMaxY
          );
        }
      });
    },
    tableRowClassName({ rowIndex }) {
      if ((rowIndex + 1) % 2 !== 0) {
        return "background:#F5F7FA";
      } else {
        return "background:#FFFFFF";
      }
    },
    // 获取产品分类
    getCategory(prov) {
      let roles = [];
      this.cldCategorySele = [];
      this.orderParam.cldCategory = "";
      for (var val of allCategory) {
        if (prov === val.pro) {
          roles.push({ label: val.label, value: val.value });
        }
      }
      this.cldCategorySele = roles;
      if (prov) this.orderParam.cldCategory = this.cldCategorySele[0].value;
      this.getCldCategory(this.orderParam.cldCategory);
    },
    getLoadBys(prov) {
      let lr = [];
      this.loadOpt = [];
      this.orderParam.load = "";
      for (var val of loadOpt) {
        if (prov === val.pro) {
          lr.push({ label: val.label, value: val.value });
        }
      }
      this.loadOpt = lr;
      this.orderParam.load = this.loadOpt[0].value;
    },
    // 获取产品子分类，同步限制真实性检验方法选择
    getCldCategory(opt) {
      if (opt === 1) {
        this.truthCheckOpt = [
          { value: "0", label: "平均误差" },
          { value: "1", label: "平均绝对误差" },
          { value: "2", label: "相对误差" },
          { value: "3", label: "平均相对误差" },
          { value: "4", label: "平均绝对相对误差" },
          { value: "5", label: "均方根误差" },
          { value: "6", label: "平面中误差" },
        ];
      } else if (opt === 6 || opt === 12) {
        this.truthCheckOpt = [
          { value: "8", label: "误差矩阵" },
          { value: "9", label: "总体分类精度" },
          { value: "10", label: "Kappa系数" },
        ];
      } else {
        this.truthCheckOpt = [
          { value: "0", label: "平均误差" },
          { value: "1", label: "平均绝对误差" },
          { value: "2", label: "相对误差" },
          { value: "3", label: "平均相对误差" },
          { value: "4", label: "平均绝对相对误差" },
          { value: "5", label: "均方根误差" },
          { value: "7", label: "相关系数" },
        ];
      }

      if (opt === 1 || opt === 6 || opt === 12) this.forbiddenPixel = true;
      else this.forbiddenPixel = false;
    },
  },
  watch: {
    "orderParam.category": function (newVal, oldVal) {
      this.productMsg.productCategory = newVal;
    },
    "orderParam.cldCategory": function (newVal, oldVal) {
      this.productMsg.productCldCategory = newVal;
      console.log(this.orderParam.proApproach);
      if (this.orderParam.proApproach === "1") this.getHistoryList();
    },
  },
};
</script>

<style scoped lang="less">
/deep/.el-dialog__body::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  position: absolute;
  left: 600px;
}
/deep/.el-dialog__body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.1);
}
/deep/.el-dialog__body::-webkit-scrollbar-thumb {
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}

.card {
  width: 430px;
  position: absolute;
  left: 5px;
  top: 70px;
  background-color: white;
  z-index: 2;
  border-radius: 4px;
  max-height: 90%;
  overflow: hidden;
  overflow-y: auto;
}
.top {
  height: 50px;
  font-size: 25px;
  font-weight: 500px;
  line-height: 60px;
  padding: 0 0 0 15px;
  color: #354595;
  border-bottom: 5px solid gainsboro;
}
.conter {
  height: 100%;
  font-size: 20px;
  border-bottom: 1px solid gainsboro;
}
.sp1 {
  font-weight: 700;
}
.sp2 {
  font-size: 14px;
  margin-left: 47%;
  cursor: pointer;
  font-weight: bolder;
}
/deep/.el-icon-arrow-up:before {
  content: "\e78f";
}
/deep/.el-select .el-input .el-select__caret {
  transition: transform 0s;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}
/deep/.el-select .el-input .el-select__caret.is-reverse {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 0px;
  border-top-left-radius: 0px;
}
/deep/.el-input__icon {
  width: 40px;
  background-color: #354595;
  position: relative;
  left: 10px;
}
/deep/.el-form-item__label {
  padding: 0 20px 0 16px;
  font-size: 15px;
}
/deep/.conter .demo-form-inline .el-form-item {
  margin-top: 10px;
  margin-bottom: 0;
  width: 100%;
}
/deep/.conter .demo-form-inline .el-form-item__content {
  width: 65%;
}
/deep/.conter .demo-form-inline .el-select {
  width: 305px;
}
/deep/.conter .demo-form-inline1 .el-form-item {
  margin-top: 10px;
  margin-bottom: 0;
  width: 100%;
}
/deep/.conter .demo-form-inline1 .el-select {
  width: 140px;
  padding-right: 10px;
}
// /deep/.demo-form-inline2 .el-radio:last-child{
//   margin-left: 70px;
// }
/deep/.el-form-item {
  margin-bottom: 15px;
}
/deep/.demo-form-inline3 .el-form-item {
  margin-bottom: 0;
}
.conter1 {
  font-size: 16px;
}

.dialog-footer {
  display: block;
  text-align: center;
  margin-top: 10px;
}
/deep/.el-dialog__body .el-button--primary,
.el-button--default {
  background-color: #354595;
  border-color: #354595;
  color: white;
  border-radius: 4px;
}
/deep/.el-dialog__body .el-button--primary {
  margin-right: 10px;
}
/deep/.el-dialog__body {
  height: 500px;
  overflow-y: auto;
}
/deep/.el-dialog__header {
  background-color: #0b239b;
}
/deep/.el-dialog__title {
  color: white;
}
/deep/.el-upload-dragger .el-icon-upload {
  font-size: 20px;
  color: black;
}
/deep/.upload-demo {
  display: inline-block;
  width: 100%;
}
.uploadTips {
  width: 90%;
  margin-left: 5%;
  border: 1px solid #a59f9fb0;
  border-radius: 5px;
  margin-bottom: 10px;
  font-size: 14px;
  color: red;
  line-height: 23px;
}
/deep/.el-upload {
  width: 100%;
}
/deep/.el-upload-dragger .el-icon-upload {
  margin: 0;
  line-height: 35px;
}
/deep/.el-upload-dragger {
  width: 90%;
  height: 35px;
  margin-left: 20px;
  margin-top: 10px;
}
/deep/.el-upload-list__item {
  width: 90%;
  margin-left: 20px;
}
/deep/.bendi .el-progress {
  width: 96%;
  margin-left: 3%;
}
.lishi {
  width: 96%;
  height: 100%;
  margin-left: 2%;
}
.lstext {
  display: block;
  font-size: 20px;
  margin-left: 15px;
  margin-top: 20px;
  color: #354595;
  font-weight: 600;
  margin-bottom: 10px;
}
/deep/.el-table .cell,
.el-table--border td:first-child .cell,
.el-table--border th:first-child .cell {
  padding-left: 10px;
  padding-right: 0;
}
/deep/.lishi .el-checkbox__inner {
  border-radius: 50%;
}
/deep/.lishi .el-table th > .cell {
  color: #354595;
  font-size: 13px;
}
/deep/.lishi .el-table td > .cell {
  font-size: 13px;
}
/deep/.lishi {
  thead .el-table-column--selection .cell {
    display: none;
  }
}
.block {
  margin: 10px 0 10px 0;
  text-align: center;
}
/deep/.block .pagination-container {
  padding: 0px;
}
// .el-icon-arrow-left{
//   margin-right: 80px;
// }
// .el-icon-arrow-right{
//   margin-left: 80px;
// }
/deep/.pingtai .el-form-item__label {
  text-align: left;
}
/deep/.pingtai .el-select {
  width: 260px;
}
/deep/.pingtai .el-input__inner {
  width: 190px;
}
/deep/.pingtai .el-input {
  width: 210px;
}
.danwei {
  font-size: 16px;
  display: inline-block;
  position: relative;
  left: -15px;
}
/deep/.pingtai .el3 .el-input__icon {
  background-color: white;
  left: 190px;
}
/deep/.el-date-editor .el-range__close-icon {
  display: none;
}
/deep/.pingtai .el3 .el-input__inner {
  width: 240px;
}
/deep/.pingtai .el3 .el-icon-time:before {
  content: "\e78e";
}
/deep/.el-date-editor .el-range-input {
  width: 30%;
}
/deep/.pingtai .el-radio {
  width: 80px;
  font-size: 15px;
  margin-top: 15px;
}
/deep/.el-radio__label {
  font-size: 14px;
  margin-right: -20px;
}
/deep/.pingtai .el4 .el-form-item__label {
  padding: 5px 25px 0 16px;
}
.pingtai .el-form {
  border-top: 1px solid gainsboro;
  padding: 5px 0 0 0;
}
// /deep/.demo-form-inline2 .el-cascader-node>.el-radio, .el-radio:last-child{
//   margin-left: 90px;
// }
// /deep/.demo-form-inline3 .el-cascader-node>.el-radio, .el-radio:last-child{
//   margin-left: 10px;
// }
.bottom {
  width: 450px;
  height: 100%;
  font-size: 20px;
  font-weight: 600;
  line-height: 40px;
  padding: 10px 0 0 0;
  color: #354595;
  margin-left: 15px;
}
.bottom1 {
  // width: 380px;
  height: 100%;
  // border-top:  2px solid gainsboro;
  margin-left: 20px;
  margin-bottom: 20px;
}
/deep/.bottom1 .el-form-item__label {
  padding: 0 25px 0 0;
  width: 155px;
  text-align: left;
}
.cal {
  margin-left: 265px;
  transform: rotate(90deg);
  font-weight: 600;
}
.cal1 {
  margin-left: 265px;
  transform: rotate(270deg);
  font-weight: 600;
}
/deep/.bottom1 .demo-form-inline .el-form-item {
  margin-top: 10px;
  margin-bottom: 0;
  width: 100%;
}
/deep/.bottom1 .demo-form-inline .el-form-item__content {
  width: 50%;
}
/deep/.bottom1 .demo-form-inline .el-select {
  width: 100%;
}
/deep/ .el-button + .el-button {
  margin-left: 0;
}
/deep/.bottom1 .demo-form-inline1 .el-form-item__content {
  width: 100%;
}
/deep/.el-select .el-input__inner {
  height: 35px;
}
/deep/.el-input__icon {
  height: 35px;
  line-height: 35px;
}
/deep/.last .el-form-item {
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
}
/deep/.last .el-form-item__content {
  width: 100%;
}
/deep/.last .el-button {
  width: 50%;
  border-radius: 0;
}
/deep/.last .el-button:first-child {
  border-bottom-left-radius: 4px;
  background-color: #4f5fb3;
  border-color: #4f5fb3;
  height: 45px;
}
/deep/.last .el-button:last-child {
  border-bottom-right-radius: 4px;
  background-color: #354595;
  border-color: #354595;
  height: 45px;
}
/deep/.el-button:focus,
.el-button:hover {
  color: white;
  border-color: 0;
  background-color: 0;
}
// /deep/.el-upload-list__item .el-icon-close {
//   display: none;
// }
// /deep/.el-icon-close:before {
//   content: "";
// }
.bendi {
  padding-bottom: 15px;
}

/deep/ .el-cascader .el-input .el-input__icon {
  transition: transform 0s;
  transform: rotateZ(180deg);
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}
/deep/ .el-cascader .el-input .el-input__icon.is-reverse {
  transform: rotateZ(0);
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 0px;
  border-top-left-radius: 0px;
}
/deep/ .el-cascader .el-icon-arrow-down:before {
  content: "\e78f";
}
/deep/ .el-input__inner {
  height: 35px;
  line-height: 35px;
}
</style>

<style>
.cascader-popper {
  height: 120px;
}
</style>