<template>
  <div>
    <el-form
      :model="searchForm"
      class="demo-form-inline"
      style="padding: 20px 0 0 30px; text-algin: center"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="提交日期">
            <el-date-picker
              v-model="searchForm.submitDate"
              type="datetimerange"
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              popper-class="date-style"
              value-format=" yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="卫星类型">
            <el-select
              v-model="searchForm.satellite"
              placeholder="请选择卫星"
              @change="bindLoad"
            >
              <el-option
                v-for="item in stlOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="载荷选择">
            <el-select v-model="searchForm.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-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="产品大类">
            <el-select
              v-model="searchForm.category"
              placeholder="全部"
              @change="getCategory($event)"
            >
              <el-option
                v-for="item in cgOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产品小类">
            <el-select v-model="searchForm.cldCategory" placeholder="全部">
              <el-option
                v-for="item in cldcgOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="检验类型">
            <el-select v-model="searchForm.checkoutFun" placeholder="全部">
              <el-option
                v-for="item in ckfOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="订单编号">
            <el-input v-model="searchForm.orderCode"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="extSearch">
          <el-form-item label="订单状态">
            <el-select
              v-model="searchForm.extOption"
              placeholder="全部"
              ref="test11"
            >
              <el-option
                v-for="item in extOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="submitSearch">
      <el-button type="primary" @click="search">查询</el-button>
    </div>
  </div>
</template>
<script>
let categorySele = [
  { value: "", label: "" },
  { value: 1, label: "几何产品" },
  { value: 2, label: "辐射产品" },
  { value: 3, label: "陆表产品" },
  { value: 4, label: "植被产品" },
];
let allCategory = [
  { pro: 1, label: "", value: "" },
  { pro: 2, label: "", value: "" },
  { pro: 3, label: "", value: "" },
  { pro: 4, label: "", value: "" },
  { 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 },
];
export default {
  props: {
    getOrderList: {
      type: Function,
      default: null,
    },
    extSearch: {},
  },
  data() {
    return {
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      searchForm: {
        submitDate: "",
        satellite: "",
        load: "",
        category: "",
        cldCategory: "",
        checkoutFun: "",
        orderCode: "",
        extOption: "",
      },
      stlOptions: [
        {
          value: "",
          label: "",
        },
        {
          value: "1米C-SAR卫星",
          label: "1米C-SAR卫星",
        },
        {
          value: "3米L-SAR卫星",
          label: "3米L-SAR卫星",
        },
        {
          value: "5米S-SAR卫星",
          label: "5米S-SAR卫星",
        },
        {
          value: "高轨20米SAR卫星",
          label: "高轨20米SAR卫星",
        },
      ],
      loadOptions: [
        {
          value: "",
          label: "",
        },
        {
          value: "1米C-SAR",
          label: "1米C-SAR",
        },
        {
          value: "3米L-SAR",
          label: "3米L-SAR",
        },
        {
          value: "5米S-SAR",
          label: "5米S-SAR",
        },
        {
          value: "高轨20米SAR",
          label: "高轨20米SAR",
        },
      ],
      loadOpt: [],
      cgOptions: categorySele,
      cldcgOptions: [],
      ckfOptions: [
        {
          value: "",
          label: "",
        },
        {
          value: "directChk",
          label: "直接检验",
        },
      ],
      extOptions: [
        { value: "", label: "" },
        { value: "2", label: "处理成功" },
        { value: "3", label: "处理失败" },
        { value: "6", label: "审核通过" },
        { value: "7", label: "审核未通过" },
      ],
    };
  },
  methods: {
    // 根据卫星选择载荷
    bindLoad(val) {
      const item = this.loadOptions.filter(
        (item) => item.value + "卫星" === val
      );
      if (item && item.length > 0) {
        this.loadOpt = item;
        this.searchForm.load = item[0].value;
      } else {
        this.loadOpt = [];
        this.searchForm.load = "";
      }
    },
    // 获取产品分类
    getCategory(prov) {
      this.searchForm.cldCategory = "";
      let roles = [];
      this.cldcgOptions = [];
      this.cldCategory = "";
      for (var val of allCategory) {
        if (prov === val.pro) {
          roles.push({ label: val.label, value: val.value });
        }
      }
      this.cldcgOptions = roles;
      this.cldCategory = this.cldcgOptions[0].value;
    },
    //表格查询功能
    search() {
      //按下查询按钮则搜索结果从第一页显示
      this.$emit("initPage");
      if (this.getOrderList) {
        this.getOrderList();
      }
    },
  },
};
</script>
<style scoped lang="less">
/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/ .el-input {
  width: 270px;
}
.submitSearch {
  text-align: center;
}
/deep/.submitSearch .el-button--primary {
  width: 160px;
  height: 35px;
  //   margin-top: 20px;
  margin-bottom: 20px;
}
/deep/.el-button {
  line-height: 0;
}

// /deep/.date-style .el-date-picker {
//     width: 190px !important;
//     height: 235px !important;

//     // .el-picker-panel {
//         line-height: 0px;
//     // }
//     .el-picker-panel__content {
//         width: 155px !important;
//         height: 180px !important;
//     }
//     table {
//         font-size: 11px;
//     }
//     .el-date-picker__header {
//         margin: 5px;
//     }
//     .el-date-picker__header-label {
//         font-size: 11px;
//     }
//     .el-date-picker__header el-date-picker__header-label {
//         font-size: 11px;
//     }
//     .el-date-table td, .el-date-table td div {
//         height: 22px;
//     }
//     .el-month-table td .cell,
//     .el-year-table td .cell,
//     .el-date-table td .cell {
//         width: 100%;
//     }
//   }
</style>
