<template>
  <div>
    <transition name="Fade" mode="in-out">
      <router-view></router-view>
    </transition>
    <div>
      <div class="daichuli">
        <div class="box1">
          <span class="sp1"></span><span class="sp2">订单查询</span>
        </div>
        <OrderSearch :getOrderList="getOrderList" ref="orderSearchPanel" @initPage="initPage"></OrderSearch>
      </div>
      <div class="daichuli1">
        <div class="box1">
          <span class="sp1"></span><span class="sp2">查询结果</span>
        </div>
        <el-table :header-cell-style="{ background: '#E4E9F1' }" :cell-style="tableRowClassName" :data="pendingData"
          style="width: 98%; margin-left: 1%; margin-top: 15px">
          <el-table-column prop="orderCode" label="订单编号" width="180" align="center">
            <template slot-scope="scope">
              {{ scope.row.order_code }}
            </template>
          </el-table-column>
          <el-table-column prop="uploadDate" label="提交日期" width="180" align="center">
            <template slot-scope="scope">
              {{ scope.row.create_date | formatDate }}
            </template>
          </el-table-column>
          <el-table-column prop="satelliteType" label="卫星类型" align="center">
            <template slot-scope="scope">
              {{ scope.row.satellite_name }}
            </template>
          </el-table-column>
          <el-table-column prop="load" label="载荷名称" align="center">
            <template slot-scope="scope">
              {{ scope.row.satellite_load_name }}
            </template>
          </el-table-column>
          <el-table-column prop="category" label="产品大类" align="center">
            <template slot-scope="scope">
              {{ scope.row.product_id | categoryFilter }}
            </template>
          </el-table-column>
          <el-table-column prop="cldCategory" label="产品小类" align="center">
            <template slot-scope="scope">
              {{ scope.row.product_subclass_id | cldCategoryFilter }}
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="checkoutFun"
            label="检验类型"
            align="center"
          >
            直接检验
          </el-table-column> -->
          <el-table-column prop="user_id" label="订单创建者" align="center">
            <template slot-scope="scope">
              {{ scope.row.userName }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-search" @click="changePage(scope.row)">订单处理</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <Pagination :page-sizes="[6, 12, 18]" :total="pageForm.total" :page.sync="pageForm.page"
            :limit.sync="pageForm.limit" @pagination="getOrderList" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import OrderSearch from "@/components/orderSearch";
import Pagination from "@/components/Pagination";
import { getOrderListByStatus } from "@/api/common";
import { updateOrderStatus } from "@/api/pendingOrder";
export default {
  components: { Pagination, OrderSearch },
  filters: {
    categoryFilter(category) {
      const categoryMap = {
        1: "几何产品",
        2: "辐射产品",
        3: "陆表产品",
        4: "植被产品",
      };
      return categoryMap[category];
    },
    cldCategoryFilter(cldCategory) {
      const cldCategoryMap = {
        1: "正射校正",
        2: "高程产品",
        5: "干涉测量形变产品",
        3: "后向散射系数",
        4: "大气延迟校正",
        9: "地表粗糙度",
        6: "地表覆盖类型",
        7: "土壤水分",
        8: "地表盐碱度",
        10: "植被高度",
        11: "叶面积指数",
        12: "植被物候",
      };
      return cldCategoryMap[cldCategory];
    },
    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 {
      pendingData: [],
      pageForm: {
        total: 0,
        page: 1,
        limit: 6,
      },
    };
  },
  mounted() {
    this.getOrderList();
  },
  methods: {
    getOrderList() {
      const searchVal = this.$refs.orderSearchPanel;
      const sf = searchVal.searchForm;
      sf.page = this.pageForm.page;
      sf.limit = this.pageForm.limit;
      sf.status = [8];
      getOrderListByStatus(sf).then((res) => {
        // console.log(res);
        if (res.code === 200) {
          this.pendingData = res.data.dataList;
          this.pageForm.total = res.data.count;
        }
      });
    },
    initPage() {
      this.pageForm.page = 1;
    },
    tableRowClassName({ rowIndex }) {
      if ((rowIndex + 1) % 2 !== 0) {
        return "background:#F5F7FA";
      } else {
        return "background:#FFFFFF";
      }
    },
    changePage(orderMsg) {
      //  地表覆盖：153029  后向散射系数：152946
      // 高程产品：153064  植被高度：153073 叶面积指数：153049
      // 粗糙度 153057  

      // 适配完成产品
      // 土壤盐：153079 干涉形变:153086 干涉大气 153087  正射：152945
      this.$router.push("/orderUnprocessed?orderId=154090&token=WEB*1719907102702@TY84_ZZX-gxfw001132_4ff8a6f9de7f4d37837ba22354972efb");
    },
  },
};
</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: 16px;
}

.daichuli1 {
  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;
}

/deep/.el-icon-arrow-up:before {
  content: "\e78f";
}

.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/.el-date-editor--datetimerange.el-input,
.el-date-editor--datetimerange.el-input__inner {
  width: 270px;
  height: 35px;
  line-height: 30px;
}

/deep/.el-range-editor.el-input__inner {
  padding: 1px 10px;
}

// /deep/.daichuli .el-select {
//   width: 270px;
// }
// /deep/.daichuli .el-input__inner {
//   height: 35px;
//   line-height: 35px;
// }
.inp1 {
  width: 270px;
  height: 35px;
  line-height: 35px;
}

// /deep/.daichuli .el-input__inner {
//   width: 270px;
//   height: 35px;
//   line-height: 35px;
// }
.sp31 {
  display: inline-block;
}

/deep/.daichuli .el-input {
  width: 270px;
}

.box28 {
  text-align: center;
}

/deep/.daichuli .el-button--primary {
  width: 170px;
  height: 35px;
  // margin-top: 20px;
  margin-bottom: 20px;
}

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

.block {
  margin-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}

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

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

/deep/.el-input__icon {
  line-height: 35px;
}

/deep/.el-table th>.cell {
  font-size: 16px;
}
</style>
