<template>
  <div class="step1">
    <BasicForm @register="register">
      <template #categoryName="{ model }">
        <div class="flex">
          <Input
            v-model:value="model.categoryName"
            placeholder="请选择所属品类"
            style="width: 300px"
            :disabled="cateGoryDisabled"
            @focus="handleFocus"
          />
          <Button type="link" :disabled="!model.categoryName" @click="handleCategoryId"
            >查看功能</Button
          >
        </div>
      </template>
    </BasicForm>
    <CategoryList
      @register="registerDrawer"
      @handleOpenListDrawer="handleOpenListDrawer"
      @handleSelectCategory="handleSelectCategory"
      @handleClose="handleClose"
    />
    <CategoryListDrawer @register="registerListDrawer" :cateforyListInfo="cateforyListInfo" />
  </div>
</template>
<script lang="ts" setup>
  import { nextTick, ref } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { step1Schemas } from '../device.profile.data';
  import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
  import { buildUUID } from '/@/utils/uuid';
  import { Input, Button } from 'ant-design-vue';
  import { useDrawer } from '/@/components/Drawer';
  import CategoryList from '../components/CategoryList.vue';
  import CategoryListDrawer from '../components/CategoryListDrawer.vue';

  const emits = defineEmits(['next', 'emitDeviceType']);
  const props = defineProps({
    ifShowBtn: { type: Boolean, default: true },
  });
  const [registerDrawer, { openDrawer, closeDrawer }] = useDrawer();
  const [registerListDrawer, { openDrawer: openListDrawer, closeDrawer: closeListDrawer }] =
    useDrawer();

  const [register, { validate, setFieldsValue, resetFields, updateSchema, getFieldsValue }] =
    useForm({
      labelWidth: 100,
      schemas: step1Schemas,
      actionColOptions: {
        span: 14,
      },
      showResetButton: false,
      showActionButtonGroup: props.ifShowBtn ? true : false,
      submitButtonOptions: {
        text: '下一步',
      },
      submitFunc: customSubmitFunc,
    });

  const cateGoryDisabled = ref<boolean>(false);

  const editOrAddNameStatus = (nameStatus) =>
    updateSchema({
      field: 'name',
      componentProps: {
        disabled: nameStatus,
      },
    });
  const setFieldsdefaultRuleChainId = async (id) => {
    await nextTick();
    setFieldsValue({ defaultRuleChainId: id });
  };

  async function customSubmitFunc() {
    const values = await validate();
    if (!values) return;
    emits('next', true, null);
    emits('emitDeviceType', values?.deviceType);
  }
  const imageUrl = ref('');
  //回显数据
  const setFormData = async (v) => {
    if (v.image) {
      setFieldsValue({
        image: [{ uid: buildUUID(), name: 'name', url: v.image } as FileItem],
      });
    }
    // 不能把image字段回显进去，页面会显示大量警告
    const { image, ...params } = v;
    imageUrl.value = image;
    setFieldsValue({ ...params, category: params?.categoryId ? 1 : 2 });
  };
  //获取数据
  async function getFormData() {
    await validate();
    const values = getFieldsValue();
    if (!values) return;
    if (Reflect.has(values, 'image')) {
      const file = (values.image || []).at(0) || {};
      values.image = file.url || null;
    }
    return values;
  }
  //清空数据
  const resetFormData = () => {
    resetFields();
  };

  const editOrAddDeviceTypeStatus = (status: boolean) => {
    updateSchema([
      {
        field: 'deviceType',
        componentProps: {
          disabled: status,
        },
      },
      {
        field: 'category',
        componentProps({ formModel }) {
          return {
            options: [
              { label: '自定义品类', value: 2 },
              { label: '标准品类', value: 1 },
            ],
            onChange() {
              formModel.categoryId = null;
              formModel.categoryName = undefined;
            },
            disabled: status,
          };
        },
      },
    ]);

    cateGoryDisabled.value = status;
  };

  // 查看功能
  const handleCategoryId = () => {
    const { categoryId } = getFieldsValue() || {};
    if (!categoryId) return;
    cateforyListInfo.value = { record: { id: categoryId }, isRight: false };
    openListDrawer(true);
  };

  // 获取焦点
  const handleFocus = () => {
    const { categoryId } = getFieldsValue() || {};
    openDrawer(true, { categoryId });
  };

  //打开品类名称
  const cateforyListInfo = ref<any>({});
  const handleOpenListDrawer = (record?: any) => {
    cateforyListInfo.value = { record, isRight: true };
    openListDrawer(true);
  };

  // 选择产品品类
  const handleSelectCategory = (item) => {
    closeDrawer();
    closeListDrawer();
    item.id && setFieldsValue({ categoryId: item.id, categoryName: item?.name });
  };

  // 关闭抽屉
  const handleClose = () => {
    closeListDrawer();
  };

  defineExpose({
    editOrAddNameStatus,
    setFormData,
    resetFormData,
    getFormData,
    editOrAddDeviceTypeStatus,
    getFieldsValue,
    setFieldsdefaultRuleChainId,
  });
</script>
<style lang="less" scoped>
  @import url('./common/DeviceConfigurationSetp.less');
</style>