<template>
  <van-dropdown-menu active-color="#333">
    <van-dropdown-item v-model="destination" :title="destinationTitle" :options="destinationOption" @change="destinationChange" />
    <van-dropdown-item v-if="destination2Option.length>0" v-model="destination2" :title="destination2Title" :options="destination2Option" @change="destination2Change" />
  </van-dropdown-menu>
</template>
<script>
export default {
  data () {
    return {
      destination: 0,
      destination2: 0,
      destinationTitle: '所在地（市）',
      destination2Title: '所在地（区）',
      // 所在地
      destinationOption: [],
      destination2Option: [],
    }
  },
  mounted () {
    this.getDestination()// 所在地（市）
  },
  methods: {
    // 获取地区(市)
    getDestination () {
      this.yxAxios.get(`${this.yanxueUrl}/api/Manage/GetAllArea?province=33`).then((res) => {
        if (res.data.status == 1) {
          let data = res.data.data;
          let destinationOption = [{ text: '不限', label: '', value: 0, id: '' }]
          this.destinationOption = destinationOption.concat(data);
          console.log('地区(市)：', data)
        } else {
          this.$message.warning(res.data.message || res.data.result);
        }
      })
    },
    // 获取地区(区)
    getDestination2 (value) {
      this.yxAxios.get(`${this.yanxueUrl}/api/Manage/GetAllArea?city=${value}`).then((res) => {
        if (res.data.status == 1) {
          let data = res.data.data;
          let destination2Option = [{ text: '不限', label: '', value: 0, id: '' }]
          this.destination2Option = destination2Option.concat(data);
          console.log('地区(区)：', data)
        } else {
          this.$message.warning(res.data.message || res.data.result);
        }
      })
    },

    // 选择市
    destinationChange (value) {
      if (value == 0) {
        this.destinationTitle = '所在地（市）'
        this.destination2Option = []
        this.destination2Title = '所在地（区）'
      } else {
        for (let i in this.destinationOption) {
          if (this.destinationOption[i].value == value) {
            this.destinationTitle = this.destinationOption[i].text
            break;
          }
        }
        this.getDestination2(value)
      }
      this.dropdownChange()
    },
    // 选择区
    destination2Change (value) {
      if (value == 0) {
        this.destination2Title = '所在地（区）'
      } else {
        for (let i in this.destination2Option) {
          if (this.destination2Option[i].value == value) {
            this.destination2Title = this.destination2Option[i].text
            break;
          }
        }
      }
      this.dropdownChange()
    },

    dropdownChange () {
      let destination = '';
      for (let i in this.destinationOption) {
        if (this.destinationOption[i].value == this.destination) {
          destination = this.destinationOption[i].label;
          break;
        }
      }
      let destination2 = '';
      for (let i in this.destination2Option) {
        if (this.destination2Option[i].value == this.destination2) {
          destination2 = this.destination2Option[i].label;
          break;
        }
      }
      this.$emit("dropdownChange", {
        destination: destination,
        destination2: destination2,
      })
    }
  }
}
</script>
<style lang="scss">
.van-dropdown-item__content {
  max-height: 100%;
}
.destionation_box {
  padding: 10px 0;
}
.destination-van-button {
  float: right;
  margin-right: 20px;
  margin-bottom: 20px;
}

</style>