<!--
 * @Date: 2023-03-29 13:09:02
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-11-21 13:16:03
 * @FilePath: /data-table/src/components/RatePickerField/MyComponent.vue
 * @Description: 文件描述
-->
<template>
  <div style="width: 100%;">
    <van-rate
      v-model="rate_value"
      :count="props.component_props.data_length"
      :readonly="props.component_props.readonly"
      :color="styleColor.baseColor"
      style="padding: 1rem"
    />
    <van-divider />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useCustomFieldValue } from '@vant/use';
import { styleColor } from "@/constant.js";
import Cookies from 'js-cookie';
import { useRoute } from "vue-router";

const $route = useRoute();

// 获取父组件传值
const props = inject('props');
const rate_value = ref(props.component_props.default);

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

// 适配cookie保存未完成表单
watch(
  () => rate_value.value,
  (v) => {
    const currentValue = v;
    const existingCookie = Cookies.get($route.query.code);

    if (existingCookie) {
      // 如果Cookie存在，更新它
      let obj = JSON.parse(existingCookie);
      obj[props.key] = currentValue; // 替换掉旧值
      Cookies.set($route.query.code, JSON.stringify(obj), { expires: 1 });
    } else {
      // 如果Cookie不存在，新增它
      Cookies.set($route.query.code, JSON.stringify({ [props.key]: currentValue }), { expires: 1 });
    }
  }
);
</script>

<style lang="less" scoped>

</style>