<template>
  <div>
    <NavHeader color="#0687D2" title="人才码" @back="$router.go(-1)" />
    <div class="search">
      <div style="display: flex; align-items: center">
        <van-search
          class="long-placeholder"
          v-model="industry.name"
          label="行业"
          readonly
          placeholder="选择行业(选填)"
          @click="showIndustryPicker = true"
        />
        <van-search
          class="long-placeholder"
          v-model="category"
          label="类型"
          readonly
          placeholder="选择人才类型"
          @click="showCategoryPicker = true"
        />
      </div>
      <van-popup v-model="showIndustryPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="
            industryList.map((item) => {
              return item.typeName;
            })
          "
          @confirm="onIndustryConfirm"
          @cancel="showIndustryPicker = false"
        />
      </van-popup>
      <van-popup v-model="showCategoryPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="
            categoryList.map((item) => {
              return item.category;
            })
          "
          @confirm="onCategoryConfirm"
          @cancel="showCategoryPicker = false"
        />
      </van-popup>
    </div>
    <van-search
      class="content-search"
      v-model="search"
      placeholder="请输入内容关键词"
    />
    <div class="list">
      <no-data v-if="list.length === 0" text="暂无数据~"></no-data>
      <van-radio-group v-model="contentCode">
        <van-cell-group>
          <van-cell
            v-for="item in list"
            :key="item.contentCode"
            size="large"
            title-class="label"
            :title="item.contentName"
            clickable
            @click="setContent(item)"
          >
            <template #right-icon>
              <van-radio :name="item.contentCode" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </div>
    <van-button style="margin-top: 20px;" block color="#0687D2" @click="next">下一步</van-button>
  </div>
</template>

<script>
import NavHeader from "@/components/NavHeader";
import Vue from "vue";
import {
  Search,
  Button,
  Popup,
  Picker,
  RadioGroup,
  Radio,
  Cell,
  CellGroup,
} from "vant";
import NoData from "@/components/NoData";
import { getType, getCategory, getContent } from "@/api/talents";
import { decryptByDES } from "@/utils/utils";

Vue.use(Search)
  .use(Button)
  .use(Popup)
  .use(Picker)
  .use(RadioGroup)
  .use(Radio)
  .use(Cell)
  .use(CellGroup);

export default {
  components: { NavHeader, NoData },
  computed: {
    list() {
      return this.contentList.filter((item) => {
        return item.contentName.indexOf(this.search) !== -1;
      });
    },
  },
  data() {
    return {
      industry: {},
      category: "",
      showIndustryPicker: false,
      showCategoryPicker: false,
      industryList: [],
      categoryList: [],
      search: "",
      contentList: [],
      contentCode: "",
      result: {},
      testing: null,
      idCard: null,
    };
  },
  methods: {
    onIndustryConfirm(value, index) {
      this.industry.name = value;
      this.industry.code = this.industryList[index].code;
      this.category = ""; // 每次选完行业都要先清空类别
      this.getCategory();
      this.showIndustryPicker = false;
      // alert(JSON.stringify(this.industry))
    },
    getCategory() {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "查询类别中...",
      });
      getCategory({ appId: 1234, typeCode: this.industry.code }).then((res) => {
        this.$toast.clear();
        this.categoryList = res;
        this.categoryList.unshift({
          typeCode: "",
          categoryName: "全部",
          category: "全部",
        });
        this.category = "全部";
        this.getContent("");
      });
    },
    onCategoryConfirm(value, index) {
      console.log("value---", value, "index----", index);
      // 存储选择的字段
      this.testing = value;
      this.category = this.categoryList[index].category;
      this.showCategoryPicker = false;
      this.getContent(this.categoryList[index].categoryName);
    },
    getContent(category) {
      const { industry } = this;
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "查询中...",
      });
      getContent({
        appId: 1234,
        categoryName: category === "全部" ? "" : category,
        typeCode: industry.code,
      }).then((res) => {
        this.$toast.clear();
        this.result = {};
        this.contentCode = "";
        this.contentList = res.map((item) => {
          return item;
        });
      });
    },
    setContent(item) {
      // alert(JSON.stringify(item))
      // console.log(item);
      this.result = item;
      this.contentCode = item.contentCode;
      // this.$toast(JSON.stringify(this.result));
    },
    // 获取用户年龄 和 当前 年月份代码
    compareAge(age) {
      let res = sessionStorage.getItem("ZJCD-UserInfo");
      let userInfo = JSON.parse(res);
      // 国内人员
      let a = userInfo.idCardNo.substring(0, 4);
      // 检测是否为加密身份证
      if (Number(a) + "" !== NaN + "") {
        this.idCard = userInfo.idCardNo;
      } else {
        this.idCard = decryptByDES(
          userInfo.idCardNo,
          "MnuYbhGvF"
        ).toUpperCase();
      }
      // 用户信息的年月日
      let userY = Number(this.idCard.substr(6, 4));
      let userM = Number(this.idCard.substr(10, 2));
      let userD = Number(this.idCard.substr(12, 2));
      var data = new Date();
      var y = data.getFullYear();
      var m = data.getMonth() + 1;
      var d = data.getDate();
      console.log();
      if (y - userY < age) {
        this.nextForm();
      } else if (y - userY > age) {
        this.$toast("您已超过" + age + "岁");
      }
      if (y - userY == age) {
        if (m < userM) {
          this.nextForm();
        } else if (userM == m) {
          if (userD < d) {
            this.$toast("您已超过" + age + "岁");
          } else {
            this.nextForm();
          }
        } else {
          this.$toast("您已超过" + age + "岁");
        }
      }
    },
    // 跳转方法
    nextForm() {
      if (this.contentCode) {
        this.$store.commit("talents/SET_CATEGORY", this.result.category);
        this.$store.commit("talents/SET_CONTENT", {
          contentName: this.result.contentName,
          contentCode: this.contentCode,
        });
        if (
          this.result.categoryName === "A" ||
          this.result.categoryName === "B"
        ) {
          this.$router.push({ name: "ReportForm", query: {type: "AB", ticket: this.$route.query.ticket ? this.$route.query.ticket : ''} });
        } else {
          this.$router.push({ name: "ReportFilter",query: { ticket: this.$route.query.ticket ? this.$route.query.ticket : '' } });
        }
      } else {
        this.$toast("请选择一条内容");
      }
    },
    next() {
      sessionStorage.removeItem("ZJCD-Company");
      if (this.testing == null) {
        this.nextForm();
        return;
      }
      if (this.testing.indexOf("E") != -1) {
        this.compareAge(46);
      } else if (
        this.testing.indexOf("F") != -1 ||
        this.testing.indexOf("G") != -1
      ) {
        this.compareAge(36);
      } else {
        this.nextForm();
      }
    },
  },
  created() {
    this.$toast.loading({
      duration: 0, // 持续展示 toast
      forbidClick: true,
      message: "查询中...",
    });
    Promise.all([getType({ appId: 1234 }), getCategory({ appId: 1234 })]).then(
      (res) => {
        // alert(JSON.stringify(res))

        this.$toast.clear();
        this.industryList = res[0];
        this.industryList.unshift({
          typeCode: "",
          typeName: "全部",
        });
        this.industry = { code: "", name: "全部" };
        this.categoryList = res[1];
        this.categoryList.unshift({
          typeCode: "",
          categoryName: "全部",
          category: "全部",
        });
        this.category = "全部";
        this.getContent("");
      }
    );
    this.$store.commit("talents/SET_CATEGORY", "");
    this.$store.commit("talents/SET_CONTENT", {});
    this.$store.commit("talents/SET_GENERA", "");
  },
};
</script>

<style lang="stylus" scoped>
.list
  height: calc(100vh - 490px)
  overflow: auto
  background: #fff
  .label
    font-size: 28px
    color: #666666
.long-placeholder
  input::placeholder
    font-size: 10px
</style>
