<!--
 * @Date: 2023-03-29 15:27:02
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-06-06 16:01:31
 * @FilePath: /data-table/src/components/AreaPickerField/MyComponent.vue
 * @Description: 文件描述
-->
<template>
  <div style="width: 100%;">
    <van-field
      v-model="fieldValue"
      is-link
      readonly
      :required="props.component_props.required"
      placeholder="请选择省市区"
      @click="onClick"
      :border="show_address ? true : false"
    />
    <van-field
      v-if="show_address"
      v-model="address"
      placeholder="请填写详细地址"
      :border="false"
      :readonly="props.component_props.readonly"
    />
    <van-divider />

    <van-popup v-model:show="showPicker" position="bottom">
      <van-area
        v-model="props.city_code"
        title=""
        :area-list="areaList"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { areaList } from "@vant/area-data";
import { useCustomFieldValue } from '@vant/use';

// 获取父组件传值
const props = inject('props');
const show_address = ref(!props.component_props.no_street)

const address = ref(props.component_props.default.input_value);
const city_code = ref("");
const showPicker = ref(false);
let fieldValue = ref(props.component_props.default.picker_value);

const onClick = () => {
  if (!props.component_props.readonly) { // 非只读状态下可以点击弹出
    showPicker.value = true;
  }
};

const result_value = computed(() => {
  return {
    address: fieldValue.value + ' ' + address.value,
    city_code: city_code.value,
    picker_value: fieldValue.value,
    input_value: address.value
  }
})

const onConfirm = ({ selectedOptions }) => {
  fieldValue.value = selectedOptions.map((option) => option.text).join(" ");
  city_code.value = selectedOptions[2]?.value;
  showPicker.value = false;
};

// 此处传入的值会替代 Field 组件内部的 value
useCustomFieldValue(() => result_value.value);
</script>

<style lang="less" scoped>

</style>