<template>
  <div>
    <a-form :label-col="{ style: { width: '150px' } }" :model="formData" ref="formRef">
      <a-form-item
        v-for="(item, index) in configItemList.filter((item) => item.type != 'hidden')"
        :key="index"
        :label="`${item.name}：`"
        :name="item.code"
      >
        <template
          v-if="
            item.type == 'text' ||
            item.type == 'readonly' ||
            item.type == 'textarea' ||
            item.type == 'password'
          "
        >
          <component
            :is="
              item.type == 'text' || item.type == 'readonly'
                ? 'a-input'
                : item.type == 'textarea'
                ? 'a-textarea'
                : 'a-input-password'
            "
            v-model:value="formData[item.code]"
            :placeholder="`请输入${item.name}`"
            :type="item.type == 'textarea' ? 'textarea' : item.type == 'password' ? 'password' : ''"
            :disabled="item.type == 'readonly'"
          />
        </template>
        <template v-else-if="item.type == 'number'">
          <a-input-number v-model:value="formData[item.code]" placeholder="请输入" />
        </template>
        <!-- <template v-else-if="item.type=='icon'">
          <IconPicker class="flex-1" v-model="formData[item.code]"/>
        </template> -->
        <template v-else-if="item.type == 'radio'">
          <a-radio-group v-model:value="formData[item.code]" :name="item.code">
            <a-radio v-for="(value, key) in item.param" :value="key" :key="key">
              {{ value }}
            </a-radio>
          </a-radio-group>
        </template>
        <template v-else-if="item.type == 'checkbox'">
          <a-checkbox-group v-model:value="formData[item.code]" :name="item.code">
            <a-checkbox :value="key" :key="key" v-for="(value, key) in item.param">{{
              value
            }}</a-checkbox>
          </a-checkbox-group>
        </template>
        <template v-else-if="item.type == 'select' || item.type == 'selects'">
          <a-select
            v-model:value="formData[item.code]"
            :mode="item.type == 'selects' ? 'multiple' : ''"
          >
            <a-select-option v-for="(value, key) in item.param" :key="key" :value="key">{{
              value
            }}</a-select-option>
          </a-select>
        </template>
        <template v-else-if="item.type == 'date' || item.type == 'datetime'">
          <a-date-picker
            :type="item.type"
            :placeholder="`请选择${item.name}`"
            v-model:value="formData[item.code]"
            style="width: 100%"
            :value-format="item.type == 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'"
            :format="item.type == 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'"
          />
        </template>
        <template v-else-if="item.type == 'image'">
          <UploadImg
            :fileType="['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
            name="setting"
            :fileSize="200"
            v-model:image-url="formData[item.code]"
          >
            <template #tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template>
          </UploadImg>
        </template>
        <template v-else-if="item.type == 'images'">
          <UploadImgs
            @upload="fileUploadImgs"
            file-type=".jpeg,.png,.jpg,.gif"
            name="setting"
            :fileSize="200"
            :multiple="true"
            :fileList="item.filePath"
            :z-index="index"
          />
        </template>
        <template v-else-if="item.type == 'file'">
          <UploadFile
            @upload="fileUploadFile"
            file-type=".xlsx.xls.doc.docx"
            name="setting"
            :file-list="formData[item.code] ? [{ name: item.fileName, url: item.filePath }] : []"
            :z-index="index"
          />
        </template>
        <template v-else-if="item.type == 'files'">
          <UploadFile
            @upload="fileUploadFiles"
            file-type=".xlsx.xls.doc.docx"
            name="setting"
            :multiple="true"
            :file-list="item.filePath"
            :z-index="index"
          />
        </template>
        <template v-else-if="item.type == 'ueditor'">
          <Editor ref="editorRef" :height="fwbHeight" class="flex-1" name="config" />
        </template>
      </a-form-item>
    </a-form>
    <div class="submit-btn">
      <a-button type="primary" @click="handleSubmit" v-perm="['sys:configWeb:save']"
        >更新系统设置</a-button
      >
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, onMounted, nextTick } from 'vue';
  import { message } from 'ant-design-vue';
  import Editor from '@/components/Editor/tinymce.vue';
  import UploadImg from '@/components/Upload/Image.vue';
  import UploadImgs from '@/components/Upload/Images.vue';
  import UploadFile from '@/components/Upload/file.vue';
  // import IconPicker from "@/components/icon/picker.vue";
  import { updateWeb } from '@/api/setting/web';

  /**
   * 定义接收的参数
   */
  const props = defineProps({
    dataList: {
      type: Array,
      required: true,
      default: [],
    },
    activeName: {
      type: String,
      required: true,
      default: '',
    },
  });

  /**
   * 定义参数变量
   */
  const editorRef = ref();
  const formRef = ref();
  const fwbHeight = document.body.clientHeight - 400;
  const formData = reactive({});
  const configItemList = ref([]);
  const emit = defineEmits(['success']);

  /**
   * 执行提交表单
   */
  const handleSubmit = async () => {
    await formRef.value?.validate();
    let ueditorIndex = 0;
    configItemList.value.map((item) => {
      if (item.type == 'ueditor') {
        formData[item.code] = editorRef.value[ueditorIndex].myValue;
        ueditorIndex++;
      }
    });
    console.log(formData);
    await updateWeb(formData);
    message.success('更新成功');
    emit('success', props.activeName);
  };

  /**
   * 上传图片文件
   * @param list 列表
   * @param index 索引
   */
  const fileUploadImgs = (list: any, index: any) => {
    const code = configItemList.value[index].code;
    formData[code] = [];
    configItemList.value[index].filePath = [];
    list.map((item) => {
      formData[code].push(item.filePath);
      configItemList.value[index].filePath.push({ filePath: item.filePath });
    });
  };

  /**
   * 上传文件
   * @param filePath 文件路径
   * @param fileName 文件名称
   * @param index 索引
   */
  const fileUploadFile = async (filePath: any, fileName: any, index: any) => {
    const code = configItemList.value[index].code;
    formData[code] = filePath ? `${fileName}|${filePath}` : '';
    configItemList.value[index].filePath = filePath;
    configItemList.value[index].fileName = fileName;
  };

  /**
   * 批量上传文件
   * @param list 列表
   * @param index 索引
   */
  const fileUploadFiles = (list: any, index: any) => {
    const code = configItemList.value[index].code;
    configItemList.value[index].filePath = [];
    formData[code] = [];
    list.map((item) => {
      formData[code].push(`${item.name}|${item.url}`);
      configItemList.value[index].filePath.push({ name: item.name, url: item.url });
    });
  };

  /**
   * 钩子函数
   */
  onMounted(() => {
    configItemList.value = JSON.parse(JSON.stringify(props.dataList));
    nextTick(() => {
      let ueditorIndex = 0;
      configItemList.value.map((item) => {
        formData[item.code] = item.value;
        if (item.type == 'ueditor') {
          if (editorRef.value) {
            editorRef.value[ueditorIndex].myValue = item.value;
            ueditorIndex++;
          }
        }
      });
    });
  });
</script>
<style lang="less" scoped>
  .submit-btn {
    position: fixed;
    bottom: 50px;
    right: 4%;
  }
</style>
