<template>
  <div class="bx-profession-list">
    <div class="bx-list">
      <!-- 查询使用 -->
      <div
        class="bx-list-item"
        @click="showProfessionPanel3"
        >
        <div class="bx-list-item-title">
          查询
        </div>
        <div class="bx-list-item-link">
          <i class="bx-icon" />
        </div>
      </div>
      <!-- 无默认值，有返回值 -->
      <div
        class="bx-list-item"
        @click="showProfessionPanel1"
        >
        <div class="bx-list-item-title">
          {{ chooseProfession1 ? chooseProfession1.des : '请选择职业(无默认值)' }}
        </div>
        <div class="bx-list-item-link">
          <i class="bx-icon" />
        </div>
      </div>
      <div
        class="bx-des"
        v-if="chooseProfession1"
        >
        <p class="bx-title">
          code: <span class="bx-val">
            {{ chooseProfession1.code }}
          </span>
        </p>
        <p class="bx-title">
          val: <span class="bx-val">
            {{ chooseProfession1.val }}
          </span>
        </p>
        <p class="bx-title">
          des: <span class="bx-val">
            {{ chooseProfession1.des }}
          </span>
        </p>
      </div>
      <!-- 有默认值，有返回值 -->
      <div
        class="bx-list-item"
        @click="showProfessionPanel2"
        >
        <div class="bx-list-item-title">
          {{ chooseProfession2 ? chooseProfession2.des : '请选择职业(有默认值)' }}
        </div>
        <div class="bx-list-item-link">
          <i class="bx-icon" />
        </div>
      </div>
      <div
        class="bx-des"
        v-if="chooseProfession2"
        >
        <p class="bx-title">
          code: <span class="bx-val">
            {{ chooseProfession2.code }}
          </span>
        </p>
        <p class="bx-title">
          val: <span class="bx-val">
            {{ chooseProfession2.val }}
          </span>
        </p>
        <p class="bx-title">
          des: <span class="bx-val">
            {{ chooseProfession2.des }}
          </span>
        </p>
      </div>
    </div>
    <div class="bx-white-line" />

    <!-- 查询使用，无检验规则 -->
    <bxs-profession-list
      v-model="isShowProfession3"
      :columns="columns"
      readonly
      :prevent-scroll-through="true"
      />
    <!-- 无默认值，有返回值 -->
    <bxs-profession-list
      v-model="isShowProfession1"
      :columns="columns"
      :verify-profess="verifyProfess"
      :prevent-scroll-through="true"
      @select="select"
      />
    <!-- 有默认值，有返回值 -->
    <bxs-profession-list
      v-model="isShowProfession2"
      :columns="columns"
      :verify-profess="verifyProfess"
      :prevent-scroll-through="true"
      :initial-selection="initialSelection"
      @select="select"
      />
  </div>
</template>
<script>
import Popup from '../../mixins/popup/index'

export default {
  mixins: [Popup],
  data() {
    return {
      productId: '1101',
      uuid: '580c6dd20df64d8eb27a02f24645d351',
      supportProfessions: ['1', '2', '3'],
      isShowProfession1: false,
      isShowProfession2: false,
      isShowProfession3: false,
      columns: [],
      initialSelection: null,
      chooseProfession1: null,
      chooseProfession2: null,
      type: 1,
    }
  },
  computed: {},
  created() {
    this.init()
  },
  methods: {
    init() {
      const vm = this
      vm.fetch(
        'get',
        'https://res.winbaoxian.com/autoUpload/common/zlwy_occu_v120601.json',
      ).then(res => {
        vm.columns = res
        vm.initialSelection = {
          code: '00101',
          des: '农产品经纪人',
          val: 1,
        }
      })
    },
    showProfessionPanel1() {
      this.type = 1
      this.isShowProfession1 = true
    },
    showProfessionPanel2() {
      this.type = 2
      this.isShowProfession2 = true
    },
    showProfessionPanel3() {
      this.type = 3
      this.isShowProfession3 = true
    },
    showPopupMixin() {
      this.isShow = true
    },
    select(params) {
      if (this.type === 1) {
        this.chooseProfession1 = params
      } else if (this.type === 2) {
        this.chooseProfession2 = params
      }
    },
    verifyProfess(profess) {
      if (!profess.code || !this.supportProfessions.length) {
        return true
      }
      if (
        profess.code &&
        this.supportProfessions.length &&
        this.supportProfessions.indexOf(String(profess.val)) !== -1
      ) {
        return true
      }
      return false
    },
    fetch(method, url) {
      return new Promise(resolve => {
        const xhr = new XMLHttpRequest()
        xhr.open(method, url)
        xhr.send()
        xhr.onreadystatechange = () => {
          if (xhr.readyState === 4 && xhr.status === 200) {
            resolve(JSON.parse(xhr.responseText))
          }
        }
      })
    },
  },
}
</script>
<style lang="postcss">
.bx-profession-list {
  & .bx-des {
    padding: 10px;
    background-color: #f2f2f2;
  }
  & .bx-title {
    color: #666;
    font-size: 12px;
  }
  & .bx-val {
    color: royalblue;
  }
  & .bx-white-line {
    height: 10px;
    background: #fff;
  }
}
</style>
