<script lang="ts" setup>
  import { Card, Tag } from 'ant-design-vue';
  import CreateSpeedModel from './createSpeedModel.vue';
  import { ref, watch, unref } from 'vue';
  import { useModal } from '/@/components/Modal';
  import { PlusCircleOutlined } from '@ant-design/icons-vue';
  import { generateUUID } from '/@/hooks/web/useGenerateUUID';
  import { useI18n } from '/@/hooks/web/useI18n';

  const props = withDefaults(
    defineProps<{
      value: any;
      title?: string;
    }>(),
    {
      title: useI18n().t('tenant.config.form.editTransmissionTenantMessage'),
    }
  );
  const emit = defineEmits(['update:value']);
  const { t } = useI18n();

  const speedData = ref<{ value: string | number; second: string | number; uuid?: string }[]>([]);
  const handleSuccess = (values) => {
    if (!values?.length) {
      speedData.value = [];
      emit('update:value', []);
      return;
    }
    speedData.value = values;
    const items = values.map((item) => `${item.value}:${item.second}`).join(',');
    emit('update:value', items);
  };
  const handleOpenCreate = () => {
    openModal(true, {
      title: props.title,
      data: unref(speedData),
    });
  };

  const objectArray = (values) => {
    return values?.map((item) => {
      const [value, second] = item.split(':');
      return {
        value: parseInt(value, 10),
        second: parseInt(second || value, 10),
        uuid: generateUUID(),
      };
    });
  };

  watch(
    () => props.value,
    (target) => {
      if (target && typeof target === 'string' && target !== '0') {
        const values = target.split(',');
        speedData.value = objectArray(values);
      }
    },
    { immediate: true }
  );

  // watch(
  //   () => speedData,
  //   () => {
  //     emit('update:value', unref(speedData));
  //   }
  // );

  const [registerModal, { openModal }] = useModal();
</script>
<template>
  <section class="!flex items-center">
    <div class="flex flex-col justify-start items-start w-4/5">
      <Card class="w-full">
        <div
          class="flex flex-col"
          v-if="speedData && speedData.length >= 1 && speedData?.[0].value && speedData?.[0].second"
        >
          <div v-for="(item, index) in speedData" :key="item.value">
            <!-- <Tag color="blue" v-if="index === 0 && item.value && item.second"
              >{{ item.value }}条消息每{{ item.second }}秒</Tag
            >  -->
            <Tag color="blue" v-if="index === 0 && item.value && item.second">{{
              t('tenant.config.form.messageNumberEverySeconds', {
                messageNumber: item.value,
                secondsNumber: item.second,
              })
            }}</Tag>
            <Tag color="blue" v-else v-show="item.value && item.second">{{
              t('tenant.config.form.butMessageNumberEverySeconds', {
                messageNumber: item.value,
                secondsNumber: item.second,
              })
            }}</Tag>
          </div>
        </div>

        <div v-else>
          <span class="font-bold">{{ t('tenant.config.form.notConfigured') }}</span>
        </div>
      </Card>
    </div>
    <PlusCircleOutlined
      class="ml-2"
      style="color: #377dff; font-size: 24px"
      @click="handleOpenCreate"
    />
    <CreateSpeedModel @register="registerModal" @success="handleSuccess" />
  </section>
</template>

<style lang="less" scoped>
  :deep(.ant-card-body) {
    padding: 12px;
    max-height: 110px;
    overflow-y: auto;
  }
</style>