<template>
  <div v-if="formShow">
    <Form :model="formRef" class="flex justify-end" layout="inline">
      <div class="ml-2" v-for="item in formData" :key="item.name">
        <FormItem class="flex">
          <div :title="item.label" v-if="item.label" class="xt-from_label">
            {{ item.label }}
          </div>
          <div v-if="item.componentType == ComponentEnum.Input">
            <Input
              v-model:value="formRef[item.name]"
              :placeholder="item.placeholder"
              :disabled="item.disabled ? true : false"
              :style="{ width: item.width + 'px' }"
              :defaultValue="item.defaultValue"
              @change="handleChange"
              :size="item.size || 'large'"
            >
              <template #prefix v-if="item.prefix">
                <i :class="['iconfont', item.prefix]" />
              </template>
            </Input>
          </div>
          <div v-if="item.componentType == ComponentEnum.Select">
            <Select
              v-model:value="formRef[item.name]"
              :placeholder="item.placeholder"
              :mode="item.allowMultiple ? 'multiple' : undefined"
              :style="{ width: item.width + 'px' }"
              :defaultValue="item.defaultValue"
              @change="handleChange"
              :size="item.size || 'large'"
            >
              <SelectOption
                v-for="r in item.dicts"
                :key="r?.value"
                :value="r?.value"
                :disabled="r.disabled ? true : false"
              >
                <div class="flex items-center">
                  <div
                    v-if="r.prefixColor"
                    class="select-prefix"
                    :style="{ background: r.prefixColor }"
                  />
                  <div>{{ r.label }}</div>
                </div>
              </SelectOption>
            </Select>
          </div>
          <div v-if="item.componentType == ComponentEnum.DatePicker">
            <DatePicker
              v-model:value="formRef[item.name]"
              :placeholder="item.placeholder"
              :show-time="false"
              :format="item.format || 'YYYY-MM-DD HH:mm:ss'"
              :value-format="item.valueFormat || 'YYYY-MM-DD HH:mm:ss'"
              :disabled="item.disabled ? true : false"
              :style="{ width: item.width + 'px' }"
              :defaultValue="item.defaultValue"
              :disabled-date="item.disabledDate"
              @change="handleChange"
              :size="item.size || 'large'"
            />
          </div>
          <div v-if="item.componentType == ComponentEnum.RangePicker">
            <RangePicker
              v-model:value="formRef[item.name]"
              :show-time="false"
              :format="item.format || 'YYYY-MM-DD HH:mm:ss'"
              :value-format="item.valueFormat || 'YYYY-MM-DD HH:mm:ss'"
              :disabled="item.disabled ? true : false"
              :style="{ width: item.width + 'px' }"
              @change="handleChange"
              :defaultValue="item.defaultValue"
              :size="item.size || 'large'"
              :ranges="ranges"
            />
          </div>
          <div v-if="item.componentType == ComponentEnum.IconBtn">
            <div :class="['icon-btn', item.selected || item.count ? 'icon-btn--selected' : '']">
              <div class="icon-btn_count" v-if="item.count">{{ item.count }}</div>
              <i class="iconfont icon-xt-screen_default" @click="handleClick(item)" />
            </div>
          </div>
        </FormItem>
      </div>
    </Form>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { useDebounceFn } from '@vueuse/core';
  import { ComponentEnum } from './componentEnum';
  import {
    // Divider,
    // Button,
    Form,
    FormItem,
    Input,
    // InputGroup,
    // InputNumber,
    Select,
    SelectOption,
    // Radio,
    // RadioGroup,
    // InputPassword,
    // Checkbox,
    // CheckboxGroup,
    DatePicker,
    RangePicker,
    // Textarea,
    // message,
    // Tooltip,
    // Upload,
  } from 'ant-design-vue';
  import { dateRanges } from '/@/utils';

  interface Props {
    formShow?: boolean;
    formData: Array<{
      name: string;
      label?: string;
      width?: string | number;
      componentType: string;
      placeholder?: string;
      allowMultiple?: boolean;
      format?: string;
      valueFormat?: string;
      dicts?: Array<{
        label: string;
        value: string | number;
        disabled?: boolean;
        prefixColor?: string;
      }>;
      disabled?: boolean;
      defaultValue?: string;
      disabledDate?: any;
      picker?: string;
      size?: string;
      // filter btn 是否选中
      selected?: string;
      // iconBtn 数
      count?: number;
      prefix?: string;
    }>;
  }
  withDefaults(defineProps<Props>(), {
    formData: () => [],
    formShow: true,
  });
  const emit = defineEmits(['change', 'click']);
  const ranges = ref(dateRanges());
  // 表单
  const formRef = ref<any>({});
  function handleChange() {
    debouncedFn();
  }
  // 防抖
  const debouncedFn = useDebounceFn(() => {
    console.log('🚀 ~ file: XTForm.vue:109 ~ debouncedFn ~ formRef.value:', formRef.value);

    emit('change', formRef.value);
  }, 1000);

  function handleClick(data) {
    console.log('🚀 ~ file: XTForm.vue:138 ~ handleClick ~ data:', data);
    emit('click', data);
  }
</script>

<style lang="less" scoped>
  .select-prefix {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 4px;
  }

  .icon-btn {
    position: relative;
    width: 40px;
    height: 40px;
    background: #fff;
    box-shadow: 0 0 18px 0 rgb(0 37 74 / 12%);
    border-radius: 4px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;

    &--selected,
    &:hover {
      color: #0075ff;
    }

    &_count {
      position: absolute;
      top: 2px;
      right: 4px;
      display: block;
      font-size: 10px;
      width: 16px;
      height: 16px;
      line-height: 14px;
      color: #fff;
      background: #ff5d39;
      border-radius: 8px;
      border: 1px solid #fff;
    }

    & .iconfont {
      font-size: 20px;
      margin-right: 0;
      line-height: 40px;
    }
  }

  ::v-deep(.ant-form-item-control-input-content) {
    display: flex;
    align-items: center;
  }

  ::v-deep(.ant-form-item) {
    margin-right: 0;
  }

  ::v-deep(.ant-input) {
    border-color: #fff;
    border-radius: 4px;
  }

  ::v-deep(.ant-input-affix-wrapper) {
    border-color: #fff;
    border-radius: 4px;
  }

  ::v-deep(.ant-picker) {
    border-color: #fff;
    border-radius: 4px;
  }

  ::v-deep(.ant-select-selector) {
    border-color: #fff;
    border-radius: 4px;
  }

  ::v-deep(.ant-select:not(.ant-select-customize-input) .ant-select-selector) {
    border-color: #fff;
    border-radius: 4px;
  }

  .xt-from_label {
    margin-right: 10px;
  }
</style>
