<template>
  <div class="jobs-wrap">
    <div class="jobs-wrap-txt" :class="{ placeholder: !selectedTexts.length }" @click="show = true">
      <span>{{ selectedTexts[1] || placeholder }}</span>
      <svg-icon icon-class="triangle-right" slot="button" />
    </div>
    <cr-popup v-model="show" get-container="body" round closeable position="bottom" class="jobs">
      <div class="jobs-head">
        <div class="jobs-title">请选择</div>
        <cr-divider :hairline="false" :style="{ color: '#F4F4F4', margin: 0 }" />
      </div>
      <!-- content -->
      <div class="jobs-content">
        <div class="job-list">
          <div
            class="jobs-item"
            v-for="(item, index) in industry"
            :key="index"
            :class="{ active: columns[0].values.length > 0 && index === columns[0].selectedIndex }"
            @click="changeIndustry(item, index)"
          >
            <div class="jobs-item-txt">
              <span>{{ item.text }}</span>
              <cr-icon type="arrow" />
            </div>
            <div
              class="jobs-children"
              v-if="columns[0].values.length > 0 && index === columns[0].selectedIndex"
            >
              <div
                class="jobs-item"
                v-for="(it, idx) in columns[1].values"
                :key="idx"
                @click="changeProfession(it, idx)"
              >
                <div class="jobs-item-txt">{{ it.text }}</div>
              </div>
            </div>
            <cr-divider />
          </div>
        </div>
      </div>
    </cr-popup>
  </div>
</template>

<script>
/**
 * @description: 职业码表
 * @param {type}
 * @return:
 */
import popupPickerMixin from "../mixins/popupPicker.mixin.js";
import jobs from "@/api/jobs";
const CHANGE_EVENT = "input";
const INDUSTRY_INDEX = 0;
const PROFESSION_INDEX = 1;
export default {
  name: "PopupCascade",
  mixins: [popupPickerMixin],
  props: {
    value: null
  },
  watch: {
    // value(val) {
    //   this.popupShow = val;
    // },
    popupShow(val) {
      this.$emit(CHANGE_EVENT, val);
    }
  },
  computed: {
    industry() {
      const list = this.jobs[this.industryKey];
      return Object.keys(list).map(key => {
        return {
          code: key,
          text: list[key]
        };
      });
    },
    profession() {
      const list = this.jobs[this.professionKey];
      return Object.keys(list).map(key => {
        return {
          code: key,
          text: list[key]
        };
      });
    }
  },
  data() {
    return {
      show: false,
      jobs,
      industryKey: "industry",
      professionKey: "profession",
      columns: [],
      selectedCodes: [],
      selectedTexts: []
    };
  },
  created() {
    if (this.value) {
      const value = "" + this.value;
      this.selectedCodes = [value.substring(0, 4), value];
    }

    for (let i = 0; i < 2; i++) {
      this.columns[i] = {
        values: [],
        selectedIndex: ""
      };
    }
  },
  mounted() {
    this.renderIndustry();
  },
  methods: {
    changeIndustry(item, index) {
      this.columns[INDUSTRY_INDEX].selectedIndex = index;
      this.selectedCodes[INDUSTRY_INDEX] = item.code;
      this.selectedTexts[INDUSTRY_INDEX] = item.text;
      this.renderProfession(item.code);
    },
    changeProfession(item, index) {
      this.columns[PROFESSION_INDEX].selectedIndex = index;
      this.selectedCodes[PROFESSION_INDEX] = item.code;
      this.selectedTexts[PROFESSION_INDEX] = item.text;
      this.$emit("input", this.selectedCodes);
      this.show = false;
    },
    renderIndustry() {
      this.columns[INDUSTRY_INDEX].values = this.industry;
      this.setDefaultIndexOfColumn(this.industry, INDUSTRY_INDEX);
      const industry = this.industry[this.columns[INDUSTRY_INDEX].selectedIndex];
      if (industry) {
        this.selectedTexts[PROFESSION_INDEX] = industry.text;
        this.renderProfession(industry?.code);
      }
    },
    renderProfession(industryCode) {
      const professionOfIndustry = this.quickFilter(this.profession, 5, industryCode);
      this.columns[PROFESSION_INDEX].values = professionOfIndustry;
      this.setDefaultIndexOfColumn(professionOfIndustry, PROFESSION_INDEX);
      this.$forceUpdate();
    },
    quickFilter(list, slice, code) {
      const prefix = code.substring(0, slice);
      let start = false;
      const filtered = [];
      for (let i = 0, len = list.length; i < len; i++) {
        if (list[i].code.substr(0, slice) === prefix) {
          start = true;
          filtered.push(list[i]);
        } else {
          if (start) {
            break;
          }
        }
      }
      return filtered;
    },
    setDefaultIndexOfColumn(list, index) {
      if (this.selectedCodes[index]) {
        list.some((item, i) => {
          if (item.code === this.selectedCodes[index]) {
            this.columns[index].selectedIndex = i;
            return true;
          }
          return false;
        });
        // clear after first render
        this.selectedCodes[index] = "";
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import "../style/var.less";
.body-wrap-mixin {
  overflow-x: hidden;
  overflow-y: auto;
  height: 80vh;
  padding: @padding-lg;
}
.jobs {
  z-index: 200;
  height: 80vh;
  overflow: hidden;
  @{deep} .cr-icon {
    position: absolute;
    color: #d0cfcf;
    font-size: @font-size-18;
    top: 16px;
    right: 14px;
    z-index: 201;
  }
  &-wrap {
    width: 100%;
    &-txt {
      height: 24px;
      color: #333;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  &-head {
    width: 100%;
  }
  &-title {
    font-weight: @font-weight-bold;
    font-size: @font-size-18;
    color: @black;
    line-height: @line-height-lg + 1;
    padding: 13px 0 10px;
    text-align: center;
  }
  &-content {
    .body-wrap-mixin();
    font-size: @font-size-12;
    color: @gray-5;
    line-height: @line-height-md - 2;
  }
  &-list {
    width: 100%;
  }
  &-item {
    .cr-divider {
      margin: 0;
    }
    &-txt {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 15px;
      color: #333;
      padding: 12px 0;
      .cr-icon {
        font-size: 14px;
        color: #333;
        position: initial;
        transition: tranform 0.2s linear;
      }
    }
    &.active {
      .jobs-children {
        display: block;
      }
      .cr-icon {
        transform: rotate(90deg);
      }
    }
  }
  &-children {
    display: none;
    margin: 0 0 10px;
    padding: 2px 10px;
    border-radius: 8px;
    background-color: @gray-1;
    .jobs-item-txt {
      color: @gray-5;
      padding: 0;
      margin: 8px 0;
      font-size: 14px;
    }
  }
}
.placeholder {
  color: #ccc;
}
</style>
