<template>
  <div id="searchBoxNew">
    <div class="inputListBox" v-if="topType">
      <div class="fon_s">商品类型：</div>
      <div>
        <el-button
          :type="formData.goodsType === item.value ? 'primary' : ''"
          :size="size"
          v-for="(item, index) in lists"
          :key="index"
          @click="formData.goodsType = item.value"
          >{{ item.label }}</el-button
        >
      </div>
    </div>
    <div class="inputListBoxs">
      <div
        class="fon_s"
        style="padding-top: 10px; width: 70px; text-align: end"
      >
        筛选：
      </div>
      <el-form :inline="true" :model="formData" class="tsxnz demo-form-inline">
        <template v-for="(item, index) in formList">
          <el-form-item :key="index" :label="item.label" v-if="ifCs(item)">
            <!-- 教育类型 -->
            <el-select
              v-if="item.scope === 'educationType'"
              v-model="formData[item.prop]"
              :placeholder="item.placeholder"
              :size="size"
              @change="changeEducationType"
            >
              <el-option
                v-for="(items, indexs) in educationType"
                :key="indexs"
                :label="items.educationName"
                :value="items.id"
              ></el-option>
            </el-select>
            <!-- 业务层次 -->
            <el-select
              v-else-if="item.scope === 'businessLevel'"
              v-model="formData[item.prop]"
              :placeholder="item.placeholder"
              :size="size"
              @change="changeBusinessLevel"
            >
              <el-option
                v-for="(items, indexs) in newBusinessLevel"
                :key="indexs"
                :label="items.businessName"
                :value="items.id"
              ></el-option>
            </el-select>
            <!-- 院校 -->
            <el-select
              v-else-if="item.scope === 'schoolList'"
              v-model="formData[item.prop]"
              :placeholder="item.placeholder"
              :size="size"
            >
              <el-option
                v-for="(items, indexs) in newSchoolList"
                :key="indexs"
                :label="items.schoolName"
                :value="items.id"
              ></el-option>
            </el-select>
            <!-- 专业 -->
            <el-select
              v-else-if="item.scope === 'Professional'"
              v-model="formData[item.prop]"
              :placeholder="item.placeholder"
              :size="size"
            >
              <el-option
                v-for="(items, indexs) in newProfessional"
                :key="indexs"
                :label="items.categoryName"
                :value="items.id"
              ></el-option>
            </el-select>
            <!-- 科目 -->
            <el-select
              v-else-if="item.scope === 'sujectType'"
              v-model="formData[item.prop]"
              :placeholder="item.placeholder"
              :size="size"
            >
              <el-option
                v-for="(items, indexs) in newSujectType"
                :key="indexs"
                :label="items.subjectName"
                :value="items.id"
              ></el-option>
            </el-select>
            <el-select
              v-else-if="item.scope === 'select'"
              v-model="formData[item.prop]"
              :placeholder="item.placeholder"
              :size="size"
            >
              <el-option
                v-for="(items, indexs) in item.options"
                :key="indexs"
                :label="items.label"
                :value="items.value"
              ></el-option>
            </el-select>
            <div v-else-if="item.scope === 'numList'">
              <el-input-number
                :controls="false"
                v-model="formData[item.prop1]"
                controls-position="right"
                :min="0"
                :max="100"
                size="small"
                @change="
                  handleChanges(formData[item.prop1], formData[item.prop2])
                "
              ></el-input-number
              >~
              <el-input-number
                :controls="false"
                v-model="formData[item.prop2]"
                controls-position="right"
                :min="0"
                :max="100"
                size="small"
                @change="
                  handleChanges(formData[item.prop1], formData[item.prop2])
                "
              ></el-input-number>
            </div>
            <el-input-number
              v-else-if="item.scope === 'inputNumber'"
              v-model="formData[item.prop]"
              controls-position="right"
              :min="0"
              :max="100"
              size="small"
            ></el-input-number>
            <el-cascader
              v-else-if="item.scope === 'cascader'"
              v-model="formData[item.prop]"
              :options="item.options"
              :size="size"
              :props="{
                label: item.props.label,
                value: item.props.value,
                checkStrictly: true,
                emitPath: false,
              }"
            ></el-cascader>
            <el-date-picker
              v-else-if="item.scope === 'datePicker'"
              v-model="formData[item.prop]"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
              :size="size"
              value-format="timestamp"
            >
            </el-date-picker>
            <el-date-picker
              v-else-if="item.scope === 'datePickerA'"
              v-model="formData[item.prop]"
              type="datetime"
              :size="size"
              placeholder="选择日期时间"
              value-format="timestamp"
            >
            </el-date-picker>
            <el-input
              v-else
              v-model="formData[item.prop]"
              :placeholder="item.placeholder"
              :size="size"
            ></el-input>
          </el-form-item>
        </template>
        <el-form-item>
          <el-button :size="size" type="primary" @click="search"
            >查询</el-button
          >
          <el-button :size="size" @click="init">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  props: ["formList", "topType", "pageSizes", "pageNums", "formData"], //参考文档 component.md
  data() {
    return {
      lists: [
        {
          label: "全部",
          value: "",
        },
        {
          label: "视频",
          value: 1,
        },
        {
          label: "面授",
          value: 2,
        },
        {
          label: "服务",
          value: 3,
        },
        {
          label: "组合",
          value: 4,
        },
      ],
      size: "small", //输入框尺寸类型
      // formData: {
      //   status: "0,1",
      //   pageSize: this.pageSizes,
      //   pageNum: this.pageNums,
      // }, //表单数据收集
      newBusinessLevel: [],
      newSchoolList: [],
      newProfessional: [],
      newSujectType: [],
      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]);
            },
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(["educationType"]),
  },
  created() {
    var self = this;
    document.onkeydown = function (e) {
      var key = window.event.keyCode;
      if (key === 13) {
        self.search();
      }
    };
  },
  methods: {
    ifCs(item) {
      if (item.scope === "businessLevel" && !this.formData["educationId"]) {
        return false;
      } else if (item.scope === "schoolList" && !this.formData["educationId"]) {
        return false;
      } else if (
        item.scope === "Professional" &&
        !this.formData["educationId"]
      ) {
        return false;
      } else if (item.scope === "sujectType" && !this.formData["educationId"]) {
        return false;
      } else {
        return true;
      }
    },
    //搜索
    search() {
      this.$emit("search", 1);
    },
    //重置
    init() {
      this.$emit("init");
    },
    handleChanges(int1, int2) {
      if (int1 !== undefined && int2 !== undefined) {
        if (int1 > int2) {
          this.$message.error("请规范输入取值范围");
        }
      }
    },
    changeEducationType(id) {
      if (this.formData.businessId) {
        this.formData.businessId = "";
      }
      if (this.formData.schoolId) {
        this.formData.schoolId = "";
      }
      if (this.formData.ProfessionalId) {
        this.formData.ProfessionalId = "";
      }
      if (this.formData.subjectId) {
        this.formData.subjectId = "";
      }
      this.$api
        .inquirebusinessList({ status: 1, educationId: id })
        .then((res) => {
          this.newBusinessLevel = res.rows;
        });

      this.$api
        .inquireUserSchool({ status: 1, educationId: id })
        .then((res) => {
          this.newSchoolList = res.rows;
        });
      this.$api
        .inquireCourseMajor({ status: 1, educationId: id })
        .then((res) => {
          this.newProfessional = res.rows;
        });
      this.$api
        .inquireCourseSubject({ status: 1, educationId: id })
        .then((res) => {
          this.newSujectType = res.rows;
        });
      console.log(this.newBusinessLevel, this.newSchoolList);
    },
    changeBusinessLevel(id) {},
  },
};
</script>

<style lang="less" scoped>
.fon_s {
  font-size: 14px;
  color: #6b6b6b;
}
.inputListBox {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.inputListBoxs {
  display: flex;
  margin-bottom: 12px;
}
.tsxnz {
  flex: 1;
  /deep/ .el-form-item {
    margin-bottom: 0px;
  }
}
</style>
