<!--
 * @Descripttion: 
 * @version: 
 * @Author: 王三华
 * @Date: 2023-10-17 13:50:40
-->
<!--
 * @Descripttion: 
 * @version: 
 * @Author: 王三华
 * @Date: 2023-05-30 20:18:30
-->

<template>
  <view>
    <u-picker
      @cancel="pickershow = false"
      :show="pickershow"
      ref="uPicker"
      :defaultIndex="defaultIndex"
      :columns="columns"
      @confirm="confirm"
      keyName="name"
      @change="changeHandler"
    ></u-picker>
  </view>
</template>

<script>
  import * as api from '@/api/goods';
  export default {
    data() {
      return {
        columns: [],
        pickershow: false,
        provinceList: [],
        cityList: [],
        quList: [],
        diqu: '',
        form: {},
        defaultIndex: [],
        user: '',
      };
    },
    props: {
      defaultCode: {
        type: Array,
        default: [],
      },
    },
    watch: {
      defaultCode: {
        deep: true,
        handler(n) {
          if (this.cityList.length > 0) {
            this.getDefaultIndex(n);
          } else {
            this.getAllAreaList(
              uni.getStorageSync('pkCountry') || this.user.pkSettleCountry
            ).then((res) => {
              if (res) {
                this.getDefaultIndex(n);
              }
            });
          }
        },
      },
    },
    created() {
      this.user = uni.getStorageSync('User');
      this.getAllAreaList(
        uni.getStorageSync('pkCountry') || this.user.pkSettleCountry
      );
    },
    methods: {
      getDefaultIndex(arr) {
        const a = this.provinceList.findIndex((item) => item.pkId == arr[0]);
        const b = this.cityList[a].arrList.findIndex(
          (item) => item.pkId == arr[1]
        );
        const c = this.quList.findIndex((item) => item.pkId == arr[1]);
        const d = this.quList[c].arrList.findIndex(
          (item) => item.pkId == arr[2]
        );
        this.columns = [
          this.provinceList,
          this.cityList[a].arrList,
          this.quList[c].arrList,
        ];
        let diqu;
        this.defaultIndex = [a, b, d > -1 ? d : 0];
        if (d > -1) {
          diqu = `${this.provinceList[a].name}-${this.cityList[a].arrList[b].name}-${this.quList[c].arrList[d].name}`;
        } else {
          diqu = `${this.provinceList[a].name}-${this.cityList[a].arrList[b].name}`;
        }
        this.$emit('getAddressData', diqu);
      },
      setShow() {
        this.pickershow = true;
      },
      getAllAreaList(pkCountry) {
        return new Promise((reslove, reject) => {
          api
            .getAllAreaList({
              pkCountry,
            })
            .then((res) => {
              this.provinceList = res.data.provinceList;
              // 市数组
              const cityList = [];
              res.data.provinceList.forEach((element, index) => {
                cityList.push({
                  pkId: element.pkId,
                  arrList: [],
                });
                res.data.cityList.forEach((item, cndex) => {
                  if (element.pkId == item.parent) {
                    cityList[index].arrList.push(item);
                  }
                });
              });
              this.cityList = cityList;
              // 区数组
              const quList = [];
              res.data.cityList.forEach((element, index) => {
                quList.push({
                  pkId: element.pkId,
                  arrList: [],
                });
                res.data.countyList.forEach((item, cndex) => {
                  if (element.pkId == item.parent) {
                    quList[index].arrList.push(item);
                  }
                });
              });
              this.quList = quList;
              this.columns = [
                res.data.provinceList,
                cityList[0].arrList,
                quList[0].arrList,
              ];
              reslove(true);
            });
        });
      },
      changeHandler(e) {
        const {
          columnIndex,
          value,
          values, // values为当前变化列的数组内容
          index,
          indexs,
          // 微信小程序无法将picker实例传出来，只能通过ref操作
          picker = this.$refs.uPicker,
        } = e;
        // 当第一列值发生变化时，变化第二列(后一列)对应的选项
        if (columnIndex === 0) {
          picker.setColumnValues(1, this.cityList[indexs[0]].arrList);
          let arr = [];
          this.quList.forEach((item) => {
            if (item.pkId == this.cityList[indexs[0]].arrList[0].pkId) {
              arr = item.arrList;
            }
          });
          picker.setColumnValues(2, arr);
          // picker为选择器this实例，变化第二列对应的选项
        } else if (columnIndex === 1) {
          let arr = [];
          this.quList.forEach((item) => {
            if (item.pkId == this.cityList[indexs[0]].arrList[index].pkId) {
              arr = item.arrList;
            }
          });
          picker.setColumnValues(2, arr);
        }
      },
      // 回调参数为包含columnIndex、value、values
      confirm(e) {
        this.pickershow = false;
        if (e.value[2]) {
          this.diqu = `${e.value[0].name}-${e.value[1].name}-${e.value[2].name}`;
          this.form.province = e.value[0].pkId;
          this.form.city = e.value[1].pkId;
          this.form.county = e.value[2].pkId;
        } else {
          this.diqu = `${e.value[0].name}-${e.value[1].name}`;
          this.form.province = e.value[0].pkId;
          this.form.city = e.value[1].pkId;
          this.form.county = '';
        }
        this.$emit('addressData', this.diqu, this.form);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .picker {
    display: flex;
    justify-content: space-between;
    width: 100%;
    border-width: 0.5px !important;
    border-color: #dadbde !important;
    border-style: solid;
    border-radius: 4px;
    padding: 6px 9px;
  }
</style>
