<!--
 * @Date: 2022-08-29 14:31:20
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2023-03-27 17:52:50
 * @FilePath: /data-table/src/components/AppointmentField/index.vue
 * @Description: 描述文本控件
-->
<template>
  <div class="Appointment-field-page">
    <div class="label">
      <span v-if="item.component_props.required">&nbsp;*</span>
      {{ item.component_props.label }}
    </div>
    <van-row v-for="(opt, index) in item.component_props.options" :key="index" style="padding: 0 1rem 0rem 1rem;">
      <van-col span="6">
        <div style="font-size: 1rem; line-height: 3;">{{ opt.title }}</div>
      </van-col>
      <van-col span="18">
        <van-field
          v-model="opt.value"
          is-link
          readonly
          :placeholder="opt.placeholder"
          @click="onClick(index, opt)"
          :border="false"
          style="width: 100%;"
        />
      </van-col>
    </van-row>
    <div
      v-if="show_empty"
      class="van-field__error-message"
      style="padding: 0 1rem 1rem 1rem"
    >
      预约时间不能为空
    </div>
  </div>
  <van-popup v-model:show="showPicker" position="bottom">
    <van-picker
      :title="item.component_props.appointment_title"
      :columns="columns"
      @confirm="onConfirm"
      @cancel="showPicker = false"
    />
  </van-popup>
</template>

<script setup>
import { styleColor } from "@/constant.js";
import { showDialog } from 'vant';

const props = defineProps({
  item: Object,
});
const emit = defineEmits(["active"]);
const showPicker = ref(false);
const picker_value = ref(props.item.component_props.default);
const columns = ref([])
const current_index = ref(0)
const show_empty = ref(false);

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.item.component_props.options[index]['columns'];
  showPicker.value = true
}

const onConfirm = ({ selectedOptions }) => {
  props.item.component_props.options.forEach(item => {
    item.value = ''
  })
  props.item.component_props.options[current_index.value]['value'] = selectedOptions[0]?.text;
  picker_value.value = selectedOptions[0]?.value;
  showPicker.value = false;
  // 触发点自定义监听事件，配合规则显示隐藏其他字段
  props.item.value = { key: props.item.key, value: picker_value.value, type: "appointment" };
  emit("active", props.item.value);
};
// 隐藏显示
const HideShow = computed(() => {
  return !props.item.component_props.disabled
})

const validAppointment = () => {
  // 必填项
  if (props.item.component_props.required && !picker_value.value) {
    show_empty.value = true;
  } else {
    show_empty.value = false;
  }
  return !show_empty.value;
};

defineExpose({ validAppointment });
</script>

<style lang="less" scoped>
.Appointment-field-page {
  .label {
    padding: 1rem 1rem 0 1rem;
    font-size: 0.9rem;
    font-weight: bold;
    span {
      color: red;
    }
  }
}

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