<template>
  <div class="picker-demo">
    <div class="t1">
      常规展示
    </div>
    <div class="t2">
      数据类型一
    </div>
    <div class="t4">
      默认，不设置默认值时,选中{{ selectedChange1 }}
    </div>
    <bxs-picker
      @change="selectPicker1"
      :value="selectedChange1"
      title="选择"
      :picker-data="column4"
      ref="picker01"
      />
    <button
      type="button"
      @click="setDefault1"
      >
      设置默认值
    </button> &nbsp;&nbsp;
    <button
      type="button"
      @click="clearDefault1"
      >
      清空默认值
    </button>
    <hr>
    <div class="t2">
      数据类型二
    </div>
    <div class="t4">
      默认，不设置默认值时,选中{{ selectedChange2 }}
    </div>
    <bxs-picker
      @change="selectPicker2"
      picker-type="default"
      :value="selectedChange2"
      title="选择"
      :picker-data="column1"
      ref="picker02"
      />
    <button
      type="button"
      @click="setDefault2"
      >
      设置默认值
    </button> &nbsp;&nbsp;
    <button
      type="button"
      @click="clearDefault2"
      >
      清空默认值
    </button>
    <hr>
    <div class="t1">
      多列展示
    </div>
    <div class="t4">
      默认，不设置默认值时,选中{{ selectedChange5 }}
    </div>
    <bxs-picker
      @change="selectPicker5"
      picker-type="default"
      :value="selectedChange5"
      :picker-data="defaultColumns"
      ref="picker03"
      />
    <hr>
    <div class="t1">
      联动展示
    </div>
    <div class="t1">
      默认，不设置默认值时,选中{{ selectedChange3 }}
    </div>
    <bxs-picker
      @confirm="selectPicker1"
      picker-type="default"
      :value="selectedChange3"
      @change="selectPicker3"
      :picker-data="citysColumns"
      ref="picker04"
      />
    <button
      type="button"
      @click="selectedbtn33"
      >
      修改value值
    </button>
    <hr>
    <div class="t1">
      弹窗展示
    </div>
    <button
      type="button"
      @click="setDefault3"
      >
      展示
    </button>
    <button
      type="button"
      @click="setDefault4"
      >
      展示
    </button>
    <div class="t4">
      默认，不设置默认值时,选中{{ selectedChange4 }}
    </div>
  </div>
</template>
<script>
import {
  column1,
  column2,
  column3,
  column4,
  column5,
  expressData,
} from './data'

const citys = {
  浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
  福建: ['福州', '厦门', '莆田', '三明', '泉州'],
  上海: ['浦东', '徐家北', '黄浦江', '新界'],
  厦门: ['厦门1', '厦门2', '厦门3'],
}
export default {
  data() {
    return {
      title1: '弹窗展示',
      column1,
      column2,
      column3: [column3, column2],
      column4,
      column5,
      expressData,
      citysColumns: [
        {
          values: Object.keys(citys),
          className: 'column1',
          defaultIndex: 1,
        },
        {
          values: citys['浙江'],
          className: 'column2',
          defaultIndex: 3,
        },
      ],
      defaultColumns: [
        {
          values: column1,
          className: 'column1',
        },
        {
          values: column2,
          className: 'column2',
        },
        {
          values: column3,
          className: 'column3',
        },
      ],
      selectedChange1: ['温州'],
      selectedChange2: ['主宰'],
      selectedChange3: ['', '', ''],
      selectedChange4: [],
      selectedChange5: [],
      i: ['宁波'],
    }
  },
  methods: {
    selectPicker1(picker, value) {
      this.selectedChange1 = value
    },
    selectPicker2(picker, value) {
      this.selectedChange2 = value
    },
    selectPicker3(picker, values) {
      this.selectedChange3 = values
      picker.setColumnValues(1, citys[values[0]])
    },
    selectPicker4(picker, value, index) {
      this.selectedChange4 = value
      this.$toast(`当前值：${JSON.stringify(value)}, 当前索引：${index}`)
    },
    selectPicker5(picker, value) {
      this.selectedChange5 = value
    },
    selectedbtn33() {
      this.$refs.picker04.setValues(['浙江', '宁波'])
    },
    setDefault1() {
      this.$refs.picker01.setValues(['宁波'])
    },
    clearDefault1() {
      this.$refs.picker01.setValues([''])
    },
    setDefault2() {
      this.$refs.picker02.setValues(['幽鬼'])
    },
    clearDefault2() {
      this.$refs.picker02.setValues([
        {
          text: '',
          value: '',
        },
      ])
    },
    setDefault3() {
      const vm = this
      this.$picker({
        title: 'asas',
        defaultValue: ['上海', '徐家北'],
        pickerData: this.citysColumns,
        callback(backInfo) {
          vm.selectedChange4 = backInfo.value
          if (backInfo.type === 'change') {
            backInfo.picker.setColumnValues(1, citys[backInfo.value[0]])
          } else {
            vm.citysColumns[0].defaultIndex = 2
            vm.citysColumns[1].defaultIndex = 1
          }
        },
      })
    },
    setDefault4() {
      const vm = this
      this.$picker({
        title: '1111',
        defaultValue: vm.i,
        valueKey: 'des',
        pickerData: this.column4,
        callback(backInfo) {
          vm.selectedChange4 = backInfo.value
          vm.i = [backInfo.value]
        },
      })
    },
  },
  mounted() {},
}
</script>
<style>
.picker-demo {
  background: #fff;
}
.picker-demo .t1 {
  font-size: 16px;
  line-height: 140%;
}
.picker-demo .t2 {
  font-size: 14px;
  line-height: 140%;
}
.picker-demo .t4 {
  font-size: 12px;
  line-height: 140%;
}
.picker-demo button {
  width: 100px;
  height: 36px;
  text-align: center;
  background: #fff;
  margin-bottom: 10px;
}
</style>
