<template>
  <div>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="20" :md="14" :lg="12" :xl="8">
        <el-form :label-width="150" :model="formData" ref="formRef">
          <el-form-item v-for="(item, index) in configItemList.filter(item => item.type != 'hidden')" :key="index"
            :label="`${item.name}：`" :prop="item.code">
            <template
              v-if="item.type == 'text' || item.type == 'readonly' || item.type == 'textarea' || item.type == 'password'">
              <el-input v-model="formData[item.code]" :placeholder="`请输入${item.name}`"
                :type="item.type == 'textarea' ? 'textarea' : (item.type == 'password' ? 'password' : '')"
                :readonly="item.type == 'readonly'" />
            </template>
            <template v-else-if="item.type == 'number'">
              <el-input-number v-model="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'">
              <el-radio-group v-model="formData[item.code]" :name="item.code">
                <el-radio v-for="(value, key) in item.param" :value="key" :key="key">
                  {{ value }}
                </el-radio>
              </el-radio-group>
            </template>
            <template v-else-if="item.type == 'checkbox'">
              <el-checkbox-group v-model="formData[item.code]" :name="item.code">
                <el-checkbox :value="key" :key="key" v-for="(value, key) in item.param">{{ value }}</el-checkbox>
              </el-checkbox-group>
            </template>
            <template v-else-if="item.type == 'select' || item.type == 'selects'">
              <el-select v-model="formData[item.code]" :multiple="item.type == 'selects'">
                <el-option v-for="(value, key) in item.param" :key="key" :value="key" :label="value" />
              </el-select>
            </template>
            <template v-else-if="item.type == 'date' || item.type == 'datetime'">
              <el-date-picker :type="item.type" :placeholder="`请选择${item.name}`" v-model="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 v-slot: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="setting"/>
            </template>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <div class="submit-btn">
      <el-button type="primary" @click="handleSubmit" v-perm="['sys:configWeb:save']">更新系统设置</el-button>
    </div>
</div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted,nextTick } from 'vue';
import { message } from "@/utils/auth";
import type { ElForm } from 'element-plus';
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: ''
  },
});
type FormInstance = InstanceType<typeof ElForm>;
const editorRef=ref()
const formRef = ref<FormInstance>();
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("更新成功");
  emit('success',props.activeName)
};
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})
  })
};
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
};
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="scss" scoped>
.submit-btn {
  position: fixed;
  bottom: 50px;
  right: 4%;
}
</style>
