<!--
 * @Date: 2023-03-28 15:38:09
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2023-03-28 16:10:58
 * @FilePath: /data-table/src/components/AppointmentField/MyComponent.vue
 * @Description: 自定义组件
-->
<template>
  <div style="width: 100%;">
    <van-row v-for="(opt, index) in props.component_props.options" :key="index">
      <van-col span="7">
        <div style="font-size: 1rem; line-height: 3;">{{ opt.title }}</div>
      </van-col>
      <van-col span="17">
        <van-field
          v-model="opt.value"
          is-link
          readonly
          :placeholder="opt.placeholder"
          @click="onClick(index, opt)"
          :border="false"
        />
      </van-col>
    </van-row>
  </div>
  <van-popup v-model:show="showPicker" position="bottom">
    <van-picker
      :title="props.component_props.appointment_title"
      :columns="columns"
      @confirm="onConfirm"
      @cancel="showPicker = false"
    />
  </van-popup>
</template>

<script setup>
import { inject, ref } from 'vue'
import { useCustomFieldValue } from '@vant/use';
import { styleColor } from "@/constant.js";
import { showDialog } from 'vant';

// 获取父组件传值
const props = inject('props');

const showPicker = ref(false);
const picker_value = ref('');
const columns = ref([]);
const current_index = ref(0);

const onClick = (index, opt) => {
  if (opt.disabled) {
    showDialog({
      title: '温馨提示',
      message: '暂时不能预约！',
      theme: 'round-button',
      width: '320px',
      confirmButtonColor: styleColor.baseColor
    }).then(() => {
      // on close
    });
    return false;
  }
  current_index.value = index;
  columns.value = props.component_props.options[index]['columns'];
  showPicker.value = true;
}

const onConfirm = ({ selectedOptions }) => {
  props.component_props.options.forEach(item => {
    item.value = ''
  })
  props.component_props.options[current_index.value]['value'] = selectedOptions[0]?.text;
  picker_value.value = selectedOptions[0]?.value;
  showPicker.value = false;
};

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

<style lang="less" scoped>

:deep(.van-cell--clickable) {
  border: 1px solid #eaeaea;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  margin-top: 0.5rem;
}
</style>