<template>
  <a-button v-if="props.isCreate" type="primary" @click="handleClick">
    <template #icon><icon-plus /></template>
    新建
  </a-button>
  <a-button
    v-if="!props.isCreate"
    type="outline"
    size="small"
    :style="{ marginRight: '10px', padding: '7px' }"
    @click="handleClick"
  >
    <template #icon><icon-edit /></template>
    修改
  </a-button>

  <a-modal
    width="900px"
    height="500px"
    :visible="visible"
    @cancel="handleCancel"
  >
    <template #title>{{ modalTitle }}</template>
    <a-form
      ref="CreateRef"
      :model="formData"
      :style="{ width: '800px',height: '420px' }"
    >
      <!-- 产品名称 -->
      <a-form-item
        field="name"
        label='产品名称'
        :rules="[{ required: true, message: '产品名称不能为空' }]"
        :validate-trigger="['change']"
      >
        <a-input
          v-model="formData.name"
          placeholder='请输入产品名称'
        />
      </a-form-item>
      <!-- 产品分类-->
      <a-form-item
        field="productType"
        label="产品分类"
        :rules="[{ required: true, message: '产品分类不能为空' }]"
        :validate-trigger="['change']"
      >
        <a-input
          v-model="formData.productType"
          placeholder='请选择产品分类'
        />
      </a-form-item>
      <!-- 产品类型 -->
      <a-form-item
        field="model"
        label="类型"
        :rules="[{ required: true, message: '产品类型不能为空' }]"
        :validate-trigger="['change']"
      >
        <a-input
          v-model="formData.model"
          placeholder='请输入产品类型'
        />
      </a-form-item>
      <!-- 接入方式 -->
      <a-form-item
        field="link"
        label="接入"
        :rules="[{ required: true, message: '接入方式不能为空' }]"
        :validate-trigger="['change']"
      >
        <a-select
          v-model="formData.link"
          placeholder='请输入接入方式'
          :options="linkOptions"
          allow-search
        />
      </a-form-item>
      <!-- 备注 -->
      <a-form-item
        field="remark"
        label="备注"
      >
        <a-textarea
          v-model="formData.remark"
          placeholder='请输入备注'
        />
      </a-form-item>
      <!-- 参数   -->
      <a-form-item
        field="params"
        label="参数"
      >
<!--        <a-table-->
<!--          :columns="columns"-->
<!--          :data="paramsData"-->
<!--          :bordered="false"-->
<!--          :pagination="false"-->
<!--          :table-layout-fixed="true"-->
<!--          :show-header="false"-->
<!--          :hoverable="false"-->
<!--          :column-resizable="true"-->
<!--          :filter-icon-align-left="true"-->
<!--          :body-cell-class="{ padding: '0px',marginLeft: '-10px' }"-->
<!--        >-->
<!--          <template #name="{ record }">-->
<!--            <a-input-->
<!--              v-model="record.name"-->
<!--              placeholder="名称"-->
<!--            />-->
<!--          </template>-->
<!--          <template #identifier="{ record }">-->
<!--            <a-input-->
<!--              v-model="record.identifier"-->
<!--              placeholder="标识"-->
<!--            />-->
<!--          </template>-->
<!--          <template #dataType="{ record }">-->
<!--            <a-select-->
<!--              v-model="record.dataType"-->
<!--              :options="dataTypeOptions"-->
<!--              allow-search-->
<!--            />-->
<!--          </template>-->
<!--          <template #type="{ record }">-->
<!--            <a-select-->
<!--              v-model="record.type"-->
<!--              :options="typeOptions"-->
<!--              allow-search-->
<!--            />-->
<!--          </template>-->
<!--          <template #operation="{ record }">-->
<!--            <a-button type="text"  @click="handleDeleteParams(record)"><icon-minus-circle /></a-button>-->
<!--          </template>-->
<!--          <template #footer>-->
<!--            <a-button  @click="handleAddParams" style="width: 100%" >-->
<!--              <icon-plus />-->
<!--            </a-button>-->
<!--          </template>-->
<!--        </a-table>-->
        <div style="width: 100%">
          <div style="width: 100%;margin-bottom: 5px; ">
            <a-space v-for="(param,index) in paramsData" :key="index" style="margin-bottom: 5px">
              <a-input v-model="param.name"  placeholder="名称" allow-clear />
              <a-input v-model="param.identifier"  placeholder="标识" allow-clear />
              <a-select v-model="param.dataType" :options="dataTypeOptions" allow-search placeholder="数据类型" style="width: 140px"/>
              <a-select v-model="param.type" :options="typeOptions" allow-search placeholder="类型" style="width: 140px"/>
              <a-button type="text"  @click="handleDeleteParams(index)"><icon-minus-circle /></a-button>
            </a-space>
          </div>
          <a-button  @click="handleAddParams" style="width: 100%" type="outline">
            <icon-plus />
          </a-button>
        </div>
      </a-form-item>
    </a-form>

    <template #footer>
      <a-button class="editor-button"  @click="handleCancel">取消</a-button>
      <a-button class="editor-button"  type="primary" @click="handleSubmit">确定</a-button>
    </template>
  </a-modal>

  <a-modal
    width="900px"
    :visible="paramsVisible"
    @cancel="paramsCancel"
  >
    <template #title>添加参数</template>
    <a-form
      ref="CreateRef"
      :model="paramsData"
      :style="{ width: '650px' }"
    >
      <!-- 添加参数  -->
      <a-form-item
        field="name"
        label="参数名称"
        :rules="[{ required: true, message: '参数名称不能为空' }]"
        :validate-trigger="['change']"
      >
        <a-input
          v-model="paramsData.name"
          placeholder='请选择参数名称'
        />
      </a-form-item>
      <!-- 参数标识  -->
      <a-form-item
        field="identifier"
        label="参数标识"
        :rules="[{ required: true, message: '参数标识不能为空' }]"
        :validate-trigger="['change']"
      >
        <a-input
          v-model="paramsData.identifier"
          placeholder='请选择参数标识'
        />
      </a-form-item>

      <a-form-item
        field="dataType"
        label="数据类型"
        :rules="[{ required: true, message: '数据类型不能为空' }]"
        :validate-trigger="['change']"
      >
        <a-select
          v-model="paramsData.dataType"
          placeholder='请输入数据类型'
          :options="dataTypeOptions"
          allow-search
        />
      </a-form-item>
      <a-form-item
        field="type"
        label="参数类型"
        :rules="[{ required: true, message: '参数类型不能为空' }]"
        :validate-trigger="['change']"
      >
        <a-select
          v-model="paramsData.type"
          placeholder='请输入参数类型'
          :options="typeOptions"
          allow-search
        />
      </a-form-item>
    </a-form>

    <template #footer>
      <a-button class="editor-button"  @click="paramsCancel">取消</a-button>
      <a-button class="editor-button"  type="primary" @click="paramsSubmit">确定</a-button>
    </template>
  </a-modal>

</template>

<script lang="ts" setup>
  import useVisible from '@/hooks/visible';
  import { computed, defineEmits, onMounted, PropType, ref } from 'vue';
  import { FormInstance } from '@arco-design/web-vue/es/form';
  import { Message } from '@arco-design/web-vue';
  import '@wangeditor/editor/dist/css/style.css'
  import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
  import { createProduct, ProductCreateRecord, queryProductDetail, updateProduct } from '@/api/product';

  const props = defineProps({
    prem: {
      type: Object as PropType<ProductCreateRecord>,
    },
    isCreate: Boolean,
    id: Number,
  });
  const emit = defineEmits(['refresh']);
  const modalTitle = computed(() => {
    return props.isCreate ? '创建产品' : '编辑产品';
  });
  const { visible, setVisible } = useVisible(false);
  const CreateRef = ref<FormInstance>();
  const formData = ref<any>({
    // params: [],
    // ...props.prem,
  });
  const columns=[
    {
      title: '参数名称',
      dataIndex: 'name',
      slotName: 'name',
      width: '120',
    },
    {
      title: '参数标识',
      dataIndex: 'identifier',
      slotName: 'identifier',
      width: '120',
      align: 'left'
    },
    {
      title: '数据类型',
      dataIndex: 'dataType',
      slotName: 'dataType',
      width: '150',
      align: 'left'
    },
    {
      title: '参数类型',
      dataIndex: 'type',
      slotName: 'type',
      width: '180',
      align: 'left'
    },
    {
      title: '操作',
      dataIndex: 'operation',
      slotName: 'operation',
      align: 'left'
    }
  ];
  const paramsData = ref([
    {
      name: '',
      identifier: '',
      dataType: '',
      type: '',
    },
  ]);
  const linkOptions = computed<SelectOptionData[]>(() => [
    {
      label: 'TCP',
      value: 'TCP',
    },
    {
      label: 'HTTP',
      value: 'HTTP',
    },
    {
      label: 'MQTT',
      value: 'MQTT',
    },
  ]);
  const dataTypeOptions = computed<SelectOptionData[]>(() => [
    {
      label: '整型',
      value: 'INT',
    },
    {
      label: '单精度浮点型',
      value: 'FLOAT',
    },
    {
      label: '双精度浮点型',
      value: 'DOUBLE',
    },
    {
      label: '布尔型',
      value: 'BOOLEAN',
    },
    {
      label: '字符串',
      value: 'STRING',
    },
    {
      label: '日期型',
      value: 'DATE',
    },
    {
      label: '透传',
      value: 'RAW',
    },
  ]);
  const typeOptions = computed<SelectOptionData[]>(() => [
    {
      label: '输入',
      value: 'INPUT',
    },
    {
      label: '输出',
      value: 'OUTPUT',
    },
    {
      label: '读写属性',
      value: 'RW',
    },
  ]);
  const paramsVisible = ref(false);
  const paramsName = ref([]);
  const fetchData = async (Id: number | undefined) => {
    const res = await queryProductDetail(Id);
    formData.value = res.data;
    paramsData.value = res.data.params;
  };
  // 组件被点击
  const handleClick = () => {
    setVisible(true);
    if (!props.isCreate) {
      fetchData(props.id);
    }
  };
  // 提交
  const handleSubmit = async () => {
    const valid = await CreateRef.value?.validate();
    if (!valid) {
      // 新增
      if (props.isCreate) {
        formData.value.params = paramsData.value;
        // formData.value.username = formData.value.email;
        const res = await createProduct(formData.value);
        if (res.status === 200) {
          Message.success({
            content: '新建成功',
            duration: 5 * 1000,
          });
          emit('refresh');
          setVisible(false);
        }
        CreateRef.value?.resetFields();
      } else {
        // 编辑
        const res = await updateProduct(formData.value);
        if (res.status === 200) {
          Message.success({
            content: '修改成功',
            duration: 5 * 1000,
          });
          emit('refresh');
          setVisible(false);
        }
      }
    }
  };

  // 点击添加参数
  const handleAddParams = () => {
    // paramsVisible.value = true;
    paramsData.value.push({
      name: '',
      identifier: '',
      dataType: '',
      type: '',
    });
  };
  // 删除参数
  const handleDeleteParams = (record: any) => {
    if (record !== -1) {
      paramsData.value.splice(record, 1);
    }
  };
  // 点击取消
  const paramsCancel = () => {
    paramsVisible.value = false;
  };
  // 参数模态框提交
  const paramsSubmit = () => {
    paramsVisible.value = false;
    formData.value.params.push(paramsData.value);
    paramsName.value.push(paramsData.value.name);
  }
  // 关闭
  const handleCancel = async () => {
    setVisible(false);
  };
</script>

<style scoped>
  .editor-button{
    position: static
  }
</style>
