<template>
  <!-- 地区弹窗 -->
  <van-popup v-model:show="areaPopshow" round position="bottom">
    <van-cascader
      @close="areaPopshow = false"
      v-model="cascaderValue"
      :title="$t('kCascader.selectRegion')"
      :options="options"
      @change="onChange"
      @finish="onFinish"
    />
  </van-popup>
</template>

<script>
import { onMounted, ref } from "vue";
// 导入接口
import { Api_getArea, Api_getAreaDetail } from "@/service/user";
export default {
  setup(props, { emit }) {
    // 刚进页面
    onMounted(() => {
      // 获取地区
      getAddress();
    });
    const selectId = ref("");
    const init = (id) => {
      selectId.value = id;
      // 如果有选中的地区
      if (selectId.value) {
        selectArea();
      }
    };
    // 地区弹窗
    const areaPopshow = ref(false);
    const cascaderValue = ref("");
    const options = ref();
    // 获取区域
    const getAddress = (value = "", idx, val = "") => {
      Api_getArea({ value }).then((res) => {
        if (res.data.code === "00000") {
          switch (idx) {
            case 0:
              // 把第二级组合放到第一级里面
              options.value.forEach((item) => {
                if (item.value === value) {
                  item.children = res.data.data;
                }
              });
              // 如果是回显的
              if (selectId.value) {
                getAddress(val, 1);
              }
              break;
            case 1:
              // 把第三级组合放到第二级里面
              options.value.forEach((item) => {
                if (item.children && item.children.length > 0) {
                  item.children.forEach((item1) => {
                    // 如果有下级
                    if (item1.hasChildren) {
                      if (item1.value === value) {
                        item1.children = res.data.data;
                      }
                    }
                  });
                }
              });
              break;
            default:
              // 省级列表
              options.value = res.data.data;
              break;
          }
        }
      });
    };
    // 选择器改变时
    const onChange = ({ value, tabIndex }) => {
      switch (tabIndex) {
        case 0:
          // 把第二级组合放到第一级里面
          options.value.forEach((item) => {
            if (item.value === value) {
              item.children = [];
            }
          });
          break;
        case 1:
          // 把第三级组合放到第二级里面
          options.value.forEach((item) => {
            if (item.children && item.children.length > 0) {
              item.children.forEach((item1) => {
                // 如果有下级
                if (item1.hasChildren) {
                  if (item1.value === value) {
                    item1.children = [];
                  }
                }
              });
            }
          });
          break;
      }
      // 如果不是点击第三级还要去请求
      if (tabIndex !== 2) {
        getAddress(value, tabIndex);
      }
    };
    // 选择完成时
    const onFinish = ({ selectedOptions, tabIndex }) => {
      areaPopshow.value = false;
      const selectName = selectedOptions.map((option) => option.text).join("/");
      const selectId = selectedOptions[tabIndex]["value"];
      emit("areapopfinish", { selectName, selectId });
    };
    // 打开弹窗
    const openPop = () => {
      areaPopshow.value = true;
    };
    // 获取选中的区域
    const selectArea = () => {
      Api_getAreaDetail({ value: selectId.value }).then(async (res) => {
        const resData = res.data;
        if (resData.code === "00000") {
          if (resData.data.length > 0) {
            let areaName = '';
            // 当第二级获取完后才获取第三级，不然不会默认选中
            await getAddress(
              resData.data[0]["value"],
              0,
              resData.data[0]["children"][0]["value"]
            );
            // 如果存在第三级
            if (resData.data[0]["children"][0]["children"]) {
                areaName = `${resData.data[0]['text']}/${resData.data[0]["children"][0]['text']}/${resData.data[0]["children"][0]["children"][0]['text']}`;
              // 默认选中最后一级的值
              cascaderValue.value =
                resData.data[0]["children"][0]["children"][0]["value"];
            } else {
                areaName = `${resData.data[0]['text']}/${resData.data[0]["children"][0]['text']}`;
              // 如果存在第二级
              // 默认选中最后一级的值
              cascaderValue.value = resData.data[0]["children"][0]["value"];
            }
            // 回显到input
            emit('getareaname',areaName);
          }
        }
      });
    };
    return {
      areaPopshow,
      options,
      onFinish,
      cascaderValue,
      onChange,
      openPop,
      init,
    };
  },
};
</script>

<style lang="less" scoped>
</style>