<template>
<div>
  <!-- 遮罩层 -->
  <van-popup
    v-model="wages"
    position="bottom"
    custom-style="height: 20%;"
    bind:close="onClose"
  >
    <!--  picker多联级选择器 -->
    <van-picker
      v-model="salaryRequirements"
      value-key="text"
      show-toolbar
      title="期望月薪" 
      confirm-button-text="确定"
      :columns="wagesColumns"
      @cancel="wagesCancel"
      @confirm="wagesConfirm"
      @change="wagesChange"
   />
  </van-popup>
</div>
</template>

<script>
export default {
 data() {
   return {
     salaryRequirements: [],
     wages: true, // 控制这个去显示picker+遮罩层
     salaryExpectationLeft: [],
     salaryExpectation: {},
     wagesColumns: [],
    }
 },
 mounted () {
   // 因为有联动，所以说如果选择了1k，那么右边就不能选择低于1k的，所以
   // 得设置x = 0
   let x = 0;
   for (let i = 0; i <= 250; i++) {
     // 因为第一个是面议，后面的都是数字，id与text值相同
     if (i == 0) {
       this.salaryExpectationLeft.push({ id: 0, text: `面议` });
       this.salaryExpectation['面议'] = [{ id: 0, text: `面议` }]; 
     } else {
       this.salaryExpectation[`${i}k`] = [];
       this.salaryExpectationLeft.push({ id: i, text: `${i}k` });
       x++;
       for (let j = 1; j <= 250; j++) {
         this.salaryExpectation[`${i}k`].push(
           { id: j + x, text: `${j + x}k` }
         )
       }
     }
   }
   this.wagesColumns = [
     {
       values: this.salaryExpectationLeft,
       className: 'column1',
       // defaultIndex: this.salaryRequirements[0].id
       // 没选中情况下进入picker的时候默认选种哪个数据
     },
     {
       values: this.salaryExpectation[
         this.salaryExpectationLeft[0].text
       ],
       className: 'column2',
       // defaultIndex: this.salaryRequirements[1].id
       // 没选中情况下进入picker的时候默认选种哪个数据
     },
   ];
 },
 methods: {
   // 每一次change的时候让picker右边数据变化
   wagesChange (picker, values) {
     this.wagesColumns[1].values = 
     this.salaryExpectation[values[0].text]
   },
   // 点击取消
   wagesCancel () {
     this.wages = false;
   },
   // 点击确定
   wagesConfirm (item) {
     if (item[0].id == 0) {
       item[1] = { id: 0, text: '面议' }
     }
     this.wages = false;
   },
 }
}
</script>