<template>
  <!-- width 680px -->
  <div class="page_dialog">
    <el-dialog 
      @close="closeDialog" 
      :model-value="props.visible"  
      :title="props.title" 
      :width="props.width || '480px'"
      :close-on-click-modal="false"
      class="el_button"
    >

    <slot name="form_pre"></slot>
  
    <el-form 
        v-loading="formLoading"
        :inline="true"
        :model="formData"  
        ref="formRef" 
        label-width="auto"
    >
      <el-form-item 
        style="width: 100%;"
        v-for="item in finalFormItemList" 
        :key="item.key"
        :label="item.label ? item.label + ':' : ''"
        :prop="item.key"
        :rules="item.rules"
        :style="item.style"
        :class="[item.className,{'top_label':(item.type=='textarea'||item.type=='checkbox'||item.type=='file' || item.type == 'checkboxButton' ||
                                              item.custom === true || item.type=='noDragFile' || item.type=='imgFile' || 
                                              item.type == 'fileShowList' || item.type=='radio')}]"
      >
        <template v-if="item.custom">
          <slot :name="item.key" :formItem="item"></slot>
        </template>

        <template v-else>
          <!-- autocomplete="off" -->
          <template v-if="!props.formDisabled">
            <el-input v-if="item.type=='input'" v-model="formData[item.key]"  :disabled="item.disabled" :placeholder="item.placeholder"/>
            <el-input v-else-if="item.type=='password'" type="password" v-model="formData[item.key]"  :disabled="item.disabled"/>
            <el-input v-else-if="item.type=='textarea'" :autosize="{ minRows: item.rows, maxRows: item.rows }" v-model="formData[item.key]" type="textarea" :rows="item.rows"  :disabled="item.disabled" :placeholder="item.placeholder"/>
            <el-input v-else-if="item.type=='number'" type="number"  v-model="formData[item.key]" :rows="item.rows"  :disabled="item.disabled" :placeholder="item.placeholder"/>
            
            <el-radio-group 
              v-else-if="item.type=='radio'"  
              v-model="formData[item.key]" 
              :disabled="item.disabled" 
              :placeholder="item.placeholder"
              @change="(val)=>handleSelectChange(item.key,val,item.type)"
            >
              <el-radio v-for="radioItem in item.selectList" :key="radioItem.value" :value="radioItem.value">{{ radioItem.label }}</el-radio>
            </el-radio-group>
            
            <el-select 
              v-else-if="item.type=='select'"  
              @change="(val)=>handleSelectChange(item.key,val)"
              v-model="formData[item.key]"  :style="item.style" :disabled="item.disabled" :placeholder="item.placeholder"
            >
              <el-option
                v-for="selectItem in item.selectList"
                :key="selectItem.value"
                :label="selectItem.label"
                :value="selectItem.value"
              />
            </el-select>

            <el-select
              class="multipleSelect"
              v-else-if="item.type=='multipleSelect'"
              v-model="formData[item.key]"
              multiple
              @change="(val)=>handleSelectChange(item.key,val)"
              :disabled="item.disabled" :placeholder="item.placeholder"
            >
              <el-option
                v-for="selectItem in item.selectList"
                :key="selectItem.value"
                :label="selectItem.label"
                :value="selectItem.value"
                />
            </el-select>

            <el-select
              class="multipleSelect"
              v-else-if="item.type=='multipleSelectSearch'"
              v-model="formData[item.key]"
              filterable
              multiple
              @change="(val)=>handleSelectChange(item.key,val)"
              :disabled="item.disabled" :placeholder="item.placeholder"
            >
              <el-option
                v-for="selectItem in item.selectList"
                :key="selectItem.value"
                :label="selectItem.label"
                :value="selectItem.value"
                />
            </el-select>

             <el-select
              class="multipleSelect"
              v-else-if="item.type=='singleSelectSearch'"
              v-model="formData[item.key]"
              filterable
              @change="(val)=>handleSelectChange(item.key,val)"
              :disabled="item.disabled" :placeholder="item.placeholder"
            >
              <el-option
                v-for="selectItem in item.selectList"
                :key="selectItem.value"
                :label="selectItem.label"
                :value="selectItem.value"
                />
            </el-select>


            <template v-else-if="item.type == 'unionSelect'">
              <span style="display: flex;width: 100%;gap:20px">
                <el-select v-for="unionSubItem in item.unionSelectList"
                  :key="unionSubItem.key"
                  @change="(val)=>handleSelectChange(item.key,val,item.type,null,unionSubItem.key)"
                  :model-value="formData[item.key]?.[unionSubItem.key]"
                  :style="unionSubItem.style" :disabled="unionSubItem.disabled" :placeholder="unionSubItem.placeholder"
                >
                  <el-option
                    v-for="selectItem in unionSubItem.selectList"
                    :key="selectItem.value"
                    :label="selectItem.label"
                    :value="selectItem.value"
                  />
                </el-select>
              </span>
            </template>

            <template v-else-if="item.type=='checkbox'" >
              <el-checkbox
                v-if="item.checkAll && item.selectList?.length > 0"
                :model-value="formData[item.key]?.length === item.selectList?.length"
                :indeterminate="formData[item.key]?.length > 0 && formData[item.key]?.length < item.selectList?.length"
                @change="(val)=>handleCheckAllOrNot(val,item.key,item.selectList)"
              >
                全部
              </el-checkbox>

              <el-checkbox-group  
                class="check_group_list"
                v-model="formData[item.key] "
                @change="(val)=>handleSelectChange(item.key,val,item.type,item.selectList)"
              >
                <el-checkbox 
                  v-for="checkItem in item.selectList" 
                  :key="checkItem.value"
                  :label="checkItem.label"
                  :value="checkItem.value"
                />
              </el-checkbox-group>

            </template>


            <template v-else-if="item.type=='checkboxButton'" >
              <el-checkbox-group  
                class="check_group_btn_list"
                v-model="formData[item.key] "
                @change="(val)=>handleSelectChange(item.key,val,item.type,item.selectList)">
                <el-checkbox-button 
                  v-for="checkItem in item.selectList" 
                  :key="checkItem.value"
                  :label="checkItem.label"
                  :value="checkItem.value"/>
              </el-checkbox-group>
            </template>

            



            <template v-else-if="item.type == 'switch'">
              <div style="display: flex;align-items: center;gap:20px;">
                <el-switch
                  v-model="formData[item.key] "
                  class="ml-2"
                  style="--el-switch-on-color: #2e64fa; --el-switch-off-color: #E2E2E3"
                />
                <span style="color:#999999;font-size: 14px;">{{ item.tips }}</span>
              </div>
            </template>
          

            <el-date-picker
              v-else-if="item.type=='datePicker'"
              v-model="formData[item.key] "
              type="daterange"
              :range-separator="item.placeholder.rangeSeparator"
              :start-placeholder="item.placeholder.startPlaceholder"
              :end-placeholder="item.placeholder.endPlaceholder"
              size="default"
              :disabled="item.disabled"
            />

            <el-date-picker
              v-else-if="item.type=='datePickerNoRange'"
              v-model="formData[item.key] "
              type="date"
              :range-separator="item.placeholder.rangeSeparator"
              :start-placeholder="item.placeholder.startPlaceholder"
              :end-placeholder="item.placeholder.endPlaceholder"
              size="default"
              :disabled="item.disabled"
              :disabled-date="item.disabledDate"

            />

            
            <el-date-picker
              v-else-if="item.type=='dateTimePicker'"
              v-model="formData[item.key]"
              @change="(val)=>handleSelectChange(item.key,val,item.type)"
              :start-placeholder="item.placeholder.startPlaceholder"
              :end-placeholder="item.placeholder.endPlaceholder"
              type="datetimerange"
              format="YYYY-MM-DD HH:mm:ss"
              date-format="YYYY/MM/DD ddd"
              time-format="A hh:mm:ss"
              :range-separator="item.placeholder.rangeSeparator"
              size="default"
              :disabled="item.disabled"
              :disabled-date="item.disabledDate"
            />

            <el-date-picker
              v-else-if="item.type=='dateTimePickerNoRange'"
              v-model="formData[item.key]"
              type="datetime"
              :placeholder="item.placeholder"
              :disabled="item.disabled"
              style="width: 100%;"
              :disabled-date="item.disabledDate"
              @change="(val)=>handleSelectChange(item.key,val,item.type)"
            />

            <el-upload
              v-else-if="item.type=='file'"
              class="upload-demo"
              action="#"
              drag
              :auto-upload="false"
              @change="(file)=>handleFileChange(file,item)"
              :disabled="item.disabled"
              >
                <span v-if="props.fileLoading" style="display: flex;flex-direction: row;align-items: center;gap: 3px;line-height: 1.5;color:#2e64fa">
                  上传中<el-icon class="is-loading">
                    <Loading />
                  </el-icon>
                </span>
                
                <span v-else-if="formData[item.key]?.name" class="file_list">
                  <span class="el-upload__tip">
                    <span  @click.stop.prevent="HandlePreviewFile(formData[item.key])">
                      {{ formData[item.key]?.name  }}   
                    </span> 
                    <img class="delete_img"  @click="HandleRemove(item.key)" :src="deleteIcon" alt="">
                  </span>
                  <i  class="iconfont hjx-dui"></i>
                </span>

                <img class="no_data" v-else :src="noDataBg" alt="">
                <el-button type="primary"><i class="iconfont hjx-daochu"></i> 上传文件</el-button>

            </el-upload>


            <el-upload
              v-else-if="item.type == 'noDragFile'" 
              class="upload-demo"
              :style="(item.tips ? ({display: 'flex',gap:'10px',alignItems:'center'}) : '')"
              action="#"
              :auto-upload="false"
              @change="(file)=>handleFileChange(file,item)"
              :disabled="item.disabled"
              >
                <el-button :disabled="item.disabled" type="primary">
                  <!-- <i class="iconfont hjx-daochu"></i> -->
                  {{formData[item.key]?.name ? '重新上传' : '点击上传'}}
                </el-button>
              
                <template #tip>
                  <div class="no_drag_content el-upload__tip" :class="{'right_tips':item.tips}">
                    
                    <!-- v-if="props.fileLoading"  -->
                    <span v-if="props.fileLoading" style="display: flex;flex-direction: row;align-items: center;gap: 3px;line-height: 1.5;color:#2e64fa">
                      上传中<el-icon class="is-loading">
                        <Loading />
                      </el-icon>
                      <span style="color:#f56c6c;cursor: pointer;" @click="HandleFileAbort">取消</span>
                    </span>

                    <template v-else-if="item.tips">
                      <span v-if="formData[item.key]?.name" style="color:#999999;font-size: 14px;">
                          {{ formData[item.key]?.name  }}   
                      </span>
                      <span v-else style="color:#999999;font-size: 14px;">{{ item.tips }}</span>
                    </template>

                    <template v-else-if="!(item.tips) && formData[item.key]?.name">
                      <span class="file_list">
                        <span class="el-upload__tip">
                          <span  @click.stop.prevent="HandlePreviewFile(formData[item.key])">
                            {{ formData[item.key]?.name  }}   
                          </span> 
                          <img class="delete_img"  @click="HandleRemove(item.key)" :src="deleteIcon" alt="">
                        </span>
                        <i  class="iconfont hjx-dui"></i>
                      </span>
                    </template>
                  </div>
                </template>
            </el-upload>
 
            <!-- imgFile 原先的组件 -->
            <template  v-else-if="0" >
              <div class="img_file_area">
                <el-upload 
                  action="#" 
                  :auto-upload="false"
                  @change="(file)=>handleFileChange(file,item)"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                >
                  <div class="operation_area">
                    <i class="iconfont hjx-a-Folder-uploadwenjianjia-shangchuan"></i>
                  </div>
                </el-upload>
                <span v-if="props.fileLoading" class="cover"  style="gap: 3px;line-height: 1.5;color:#2e64fa">
                  上传中
                  <el-icon class="is-loading">
                    <Loading />
                  </el-icon>
                </span>
                <span v-else-if="formData[item.key]?.url">
                  <img class="cover"   :src="formData[item.key]?.url" alt="">
                  <img   class="close" @click="HandleRemove(item.key)" :src="closeFillImg">
                </span>
              </div>
            </template>

            <template  v-else-if="item.type=='imgFile'" >
              <div class="img_file_area1">
                <el-upload 
                  action="#" 
                  :auto-upload="false"
                  @change="(file)=>handleFileChange(file,item)"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                >
                  <div class="operation_area">
                    <el-icon class="icon"><Plus /></el-icon>
                    <span>{{item.uploadTips ? item.uploadTips : '上传文件'}}</span>
                  </div>
                </el-upload>

                <span v-if="formData[item.key].fileLoading" class="cover"  style="gap: 3px;line-height: 1.5;color:#2e64fa">
                  上传中
                  <el-icon class="is-loading">
                    <Loading />
                  </el-icon>
                </span>

                <!-- 单张 -->
                <template  v-if="item.limit == 1 && !formData[item.key].fileLoading">
                  <span  class="img_file" v-if="formData[item.key]?.url">
                    <img class="cover"   :src="formData[item.key]?.url" alt="">
                    <img   class="close" @click="HandleRemove(item.key)" :src="closeFillImg">
                  </span>
                </template>

                  <!-- 多张 -->
                  <!-- 多张 对象结构 { files:[{name:'',url:''},{}],fileLoading:false}-->
                  <template v-else-if="item.limit > 1">
                    <span  class="img_file" v-for="fileItm in formData[item.key].files" :key="fileItm">
                      <img class="cover"   :src="fileItm?.url" alt="">
                      <div class="operation_btn">
                        <span class="delete" @click="HandleRemoveSingleImg(item.key,fileItm)">删除</span>
                        <span class="preview" @click="HandleImgPreview(fileItm?.url)">查看</span>
                      </div>
                    </span>
                  </template>
                  <el-image-viewer
                    v-if="imgVisible"
                    :url-list="[dialogImageUrl]"
                    show-progress
                    @close="imgVisible = false"
                  />
              </div>
            </template>


            <template  v-else-if="item.type=='fileShowList'" >
              <div class="file_show_list">
                <el-upload 
                  action="#" 
                  :auto-upload="false"
                  @change="(file)=>handleFileChange(file,item)"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                >
                  <div class="operation_area">
                    <el-icon class="icon"><Plus /></el-icon>
                    <span>{{item.uploadTips ? item.uploadTips : '上传文件'}}</span>
                  </div>
                </el-upload>

                
                <div class="file_list">
                  <span v-if="formData[item.key].fileLoading" class="cover"  style="gap: 3px;line-height: 1.5;color:#2e64fa">
                    上传中
                    <el-icon class="is-loading">
                      <Loading />
                    </el-icon>
                  </span>
                  <!-- 单张 -->
                  <template  v-if="item.limit == 1 && !formData[item.key].fileLoading">
                    <div  class="file_desc" v-if="formData[item.key]?.url">
                      <img class="icon" :src="fileIcon" alt="">
                      <div class="file_msg">
                        <span class="name" :title="formData[item.key]?.name">{{ formData[item.key]?.name }}</span>
                        
                        <span class="size"> 
                          <span>{{ formData[item.key]?.fileSize }}</span>
                          <span>{{ formData[item.key]?.time }}</span>
                        </span>
                      </div>
                      <div class="table_row_option">
                          <span class="el_button_delete" @click="HandleRemove(item.key)">删除</span>
                          <span class="el_button_editor" @click="HandleFilePreview(formData[item.key])">预览</span>
                          <span class="el_button_editor" @click="HandleFileDownload(formData[item.key]?.url)">下载</span>
                        </div>
                    </div>
                  </template>

                  <!-- 多张 对象结构 { files:[{name:'',url:''},{}],fileLoading:false}-->
                  <template v-else-if="item.limit > 1">
                    <div  class="file_desc" v-for="fileItm in formData[item.key].files" :key="fileItm">
                      <img class="icon" :src="fileIcon" alt="">
                      <div class="file_msg">
                        <span class="name" :title="fileItm?.name">{{ fileItm?.name }}</span>
                        <span class="size"> 
                          <span>{{ fileItm?.fileSize }}</span>
                          <span>{{ fileItm?.time }}</span>
                        </span>
                      </div>
                      <div class="table_row_option">
                        <span class="el_button_delete" @click="HandleRemoveSingleImg(item.key,fileItm)">删除</span>
                        <span class="el_button_editor" @click="HandleFilePreview(fileItm)"> 预览</span>
                        <span class="el_button_editor" @click="HandleFileDownload(fileItm?.url)">下载</span>
                      </div>
                    </div>
                  </template>
                </div>
              </div>
            </template>

            <a v-else-if="item.type=='url'"  @click="HandlePreviewFile(formData[item.key])" >{{ formData[item.key]?.name }}</a>
          </template>

          <template v-else>
            <el-input v-if="item.type!=='file' && item.type!=='url' &&  
                            item.type!=='unionSelect' && item.type !== 'dateTimePicker'" 
                      class="readonly_input" 
                      v-model="formData[item.key]" :readonly="true" />

            <span  v-else-if="item.type=='unionSelect' " style="display: flex;width: 100%;gap:20px">
              <el-input  
                class="readonly_input"
                v-for="unionSubItem in item?.unionSelectList" 
                :key="unionSubItem.key" :style="unionSubItem.style" 
                :model-value="formData[item.key]?.[unionSubItem.key]"  
                :readonly="true"
              />
            </span>

            <el-date-picker
              v-else-if="item.type=='dateTimePicker'"
              v-model="formData[item.key]"
              :start-placeholder="item.placeholder.startPlaceholder"
              :end-placeholder="item.placeholder.endPlaceholder"
              type="datetimerange"
              format="YYYY-MM-DD HH:mm:ss"
              date-format="YYYY/MM/DD ddd"
              time-format="A hh:mm:ss"
              :range-separator="item.placeholder.rangeSeparator"
              size="default"
              :disabled="true"
            />

            <a v-else-if="item.type=='file' "  @click= "formData[item.key]?.name ? HandlePreviewFile(formData[item.key]) : ''" >
              {{ formData[item.key]?.name || '未选择任何文件' }}   
            </a>
            <a v-else-if="item.type=='url'"  @click="HandlePreviewFile(formData[item.key])" >{{ formData[item.key]?.name }}</a>
          </template>

      </template>


      </el-form-item>
    </el-form>
    <template #footer>
      <div class="footer_bottom">
        <div class="footer_right">
          <slot name="footerRight" :formRef="formRef"></slot>
        </div>
        <div class="footer_right">
          <el-button class="button_border_gray cancel" @click="closeDialog">取 消</el-button>
          <slot name="footer_btn" :formRef="formRef"></slot>
          <slot name="confirm" :formRef="formRef" :formData="formData">
            <el-button class="button_background" :disabled="props.disabledConfirm" :loading="props.submitLoading" @click="props.disabledConfirm ? '' : formSubmitCheck(formRef)">确 定</el-button>
          </slot>
        </div>
      </div>
    </template>

    <FilePreview  
        :previewVisible="previewVisible"
        @close="HandClosePreview"
        :fileMessage="fileMessage" />
    </el-dialog>
  </div>
  
</template>

<script lang="ts" setup>
import { ref, computed, watch } from 'vue'
import FilePreview from './FilePreview.vue'
import noDataBg from '@/assets/bg/table_no_data.png'
import deleteIcon from '@/assets/icon/delete.svg'
import {Loading} from '@element-plus/icons-vue'

import closeFillImg from '@/assets/icon/close_fill.svg'

import { ElMessage } from 'element-plus'

import fileIcon from '@/assets/icon/file.png'


const previewVisible = ref(false)

const handlePictureCardPreview = ()=>{
  console.log('预览')
}


const handleRemove = ()=>{
  console.log('移除')
}
type  ItemType = 
  |'input'|'password'|'textarea'|'number'|'radio'
  |'select'|'multipleSelect' | 'singleSelectSearch' | 'multipleSelectSearch' | 'unionSelect' |'checkbox'|'datePicker' | 'checkboxButton'
  |'dateTimePicker'| 'dateTimePickerNoRange' |'datePickerNoRange' |'url'|'file' | 'switch' | 'imgFile' | 'noDragFile' | 'fileShowList' | String


interface formItemProperty {
  key: String,
  label: String,
  type?:ItemType,
  limit?:Number, // 文件上传限制的数量
  uploadTips?:String,
  acceptType?:[],
  checkAll?:Boolean,
  placeholder?:|String 
              | {
                rangeSeparator:String,
                startPlaceholder:String
                endPlaceholder:String
              },
  rules?: any[],
  hidden?: Boolean,
  disabled?: Boolean,
  // 日期专用
  disabledDate?:Function,
  custom:Boolean,
  style: Record<string, any>,
  className?:String,
  unionSelectList?:{
    key:String,
    type:String,
    placeholder:String,
    disabled:Boolean,
    style:Record<string, any>,
    selectList: { label: string, value: any }[] | [],
  }[]
  selectList?: { label: string, value: any }[] | [],
  rows?:number,
  tips?:String,
}

const props = defineProps({
    width:{
      required:false,
    },
    visible:{
        type:Boolean,
        required:true
    },
    title:{
        type:String,
        required:true
    },
    formItemList:{
        type:Array<formItemProperty>,
        default:()=>[]
    },
    submitLoading:{
      type:Boolean,
      default:false,
      required:true
    },
    formLoading:{
      type:Boolean,
      default:false
    },
    defaultFormData:{
      type:Object,
      required:true,
      // default:()=>{}
    },
    formDisabled:{
      type:Boolean,
      default:false
    },
    fileLoading:{
      type:Boolean,
      default:false
    },
    disabledConfirm:{
        type:Boolean,
        default:false
    }
})
const emit  = defineEmits(['close','confirm','formItemChange','fileUpload','abortFile'])

const fileMessage = ref({})
const formData = ref({})
const formRef = ref()

const finalFormItemList = computed(()=>{
    return props.formItemList.filter(item=>!item.hidden)
})

const HandleFileAbort = ()=>{
  emit('abortFile')
}


// 是否全选

watch(()=>props.defaultFormData,(newVal)=>{
  formData.value = newVal
},{immediate:true})

const formSubmitCheck = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async(valid) => {
    if (valid) {
      emit('confirm', {formData:formData.value,formRef:formEl})
    }
  }).catch(err=>{
    console.log('报错信息',err)
  })
}

const HandlePreviewFile = (file)=>{
  console.log('附件信息',file)
  previewVisible.value = true
  fileMessage.value  = {url:file.url,name:file.name}
}

const closeDialog = () => {
  formRef.value.resetFields()
  emit('close')
}

const HandClosePreview = ()=>{
  fileMessage.value = {}
  previewVisible.value = false
}

const handleSelectChange = (key,val,type,selectList,subKey) =>{
  if(type == 'unionSelect'){
    if(formData.value[key]){
      formData.value[key][subKey] = val
    }else{
      formData.value[key] = {}
      formData.value[key][subKey] = val
    }
  }
  emit('formItemChange',{key,val,formData:formData.value,subKey})
}

const handleCheckAllOrNot = (val,key,allData)=>{
  let allValue = allData.map(item=>item.value)
  let finalVal = val ? allValue : [] 
  formData.value = {...formData.value,[key]:finalVal}
  // 选项----
  emit('formItemChange',{key,val:finalVal,formData:formData.value})
}

const handleFileChange = (file,formItem)=>{
  console.log('文件上传前获取到的参数',file)
  // 在此处校验上传的文件格式
  let suffix = file.name.split('.').pop()
  if(formItem?.acceptType){
    if(formItem?.acceptType?.includes(suffix)){
      emit('fileUpload',{key:formItem.key,file})
    }else{
      ElMessage({
        message: `文件支持以 ${(formItem.acceptType)?.join('、')} 为后缀结尾的文件`,
        type: 'error',
        duration: 5 * 1000
      })
    }
  }else{
      emit('fileUpload',{key:formItem.key,file})
  }
}

const HandleRemove = (formKey)=>{
  formData.value[formKey] = null
}

const HandleRemoveSingleImg = (formKey,aimFile) =>{
  formData.value[formKey] = {
    ...formData.value[formKey],
    files:formData.value[formKey].files.filter(item=>{
      return item !== aimFile
    })
  }
  // formData.value[formKey].filter(item=>{
  //   return item !== aimFile
  // })
}

const imgVisible = ref(false)
const dialogImageUrl = ref('')
const HandleImgPreview = (url)=>{
  imgVisible.value = true
  dialogImageUrl.value = url
}
const HandleFileDownload = (url)=>{
  let link = document.createElement('a')
  link.href = url
  link.download = url
  link.style.display = 'none';
  document.body.appendChild(link)
  link.click();
  document.body.removeChild(link)
}

const HandleFilePreview = (params)=>{
  previewVisible.value = true
  fileMessage.value = params
}
</script>  
<style lang="scss" scoped>
.img_file_area{
  width: 100%;
  display: flex;
  gap:10px;
  align-items: center;

  >span{
    position: relative;
    .close{
      width: 14px;
      height: 14px;
      color: #F56C6C;
      position:absolute;
      top:-5px;
      right: -2px;
    }
  }

  .cover,
  .operation_area{
    width: 90px;
    height: 60px;
    border-radius: 6px;
    background-color: #f0f4f8;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .operation_area1{
    width: 200px;
    height: 117px;
    color:#CCCED4;
    font-size: 14px;

    border-radius: 6px;
    background-color: #f0f4f8;
    display: flex;
    align-items: center;
    justify-content: center;

  }

  .operation_area{
    background-color: #F0F4F8;
    font-size: 24px;
  }
}

.img_file_area1{
  width: 100%;
  display: flex;
  gap:10px;
  align-items: center;
  flex-wrap: wrap;

  >span{
    position: relative;
    .close{
      width: 14px;
      height: 14px;
      color: #F56C6C;
      position:absolute;
      top:-5px;
      right: -2px;
    }
  }
  .cover,
  .operation_area{
    width: 200px;
    height: 117px;
    color:#CCCED4;
    font-size: 14px;
    border-radius: 6px;
    background-color: #f0f4f8;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cover{
    border:solid #CED1D8 1px
  }

  .operation_area{
    background-color: #FAFBFF;
    display: flex;
    flex-direction: column;
    border:dashed #CCCED4 1px;
    gap:8px;
    .icon{
      font-size: 40px;
    }
  }

  .img_file{
    position: relative;

    .operation_btn{
      display: none;
      justify-content: center;
      align-items: center;
      gap:10px;

      background-color:rgba(0, 0, 0,0.1);
      position: absolute;
      width: 100%;
      height: 100%;
      top:0px;
      left:0px;

      .delete,
      .preview{
        line-height: 1;
        padding:8px 20px;
        background-color: white;
        border-radius: 4px;
        cursor: pointer;
      }
      
      .delete{
        color:#F56C6C;
      }
      .preview{
        color:#2E64FA;
      }
    }

    &:hover{
      .operation_btn{
        display:flex;
      }
    }
  }
}

.file_show_list{
  width: 100%;
  display: flex;
  gap:10px;
  align-items: flex-start;
  flex-wrap: now-wrap;
  >span{
    position: relative;
    .close{
      width: 14px;
      height: 14px;
      color: #F56C6C;
      position:absolute;
      top:-5px;
      right: -2px;
    }
  }
  .operation_area{
    width: 200px;
    height: 80px;
    color:#CCCED4;
    font-size: 14px;
    border-radius: 6px;
    background-color: #f0f4f8;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FAFBFF;
    display: flex;
    flex-direction: column;
    border:dashed #CCCED4 1px;
    gap:8px;
    .icon{
      font-size: 24px;
    }
  }
  .img_file{
    position: relative;
   
  }
  .file_list{
    max-width: calc(100% -  200px - 10px);
    flex:1 1;
    display: flex;
    flex-direction: column;
    gap:20px;

    .file_desc{
      display: flex;
      align-items: center;
      gap:10px;
      height: 80px;
      width: 100%;
      
      border:solid #EBEEF5 1px;
      border-radius: 10px;
      padding:20px;
      line-height: 1.5;
      .icon{
        width: 40px;
        height: 40px;
        vertical-align: middle;
      }

      .file_msg{
        max-width: calc(100% - 40px - 20px - 117px);
        flex-grow: auto;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap:4px;
        .name{
          font-weight: 600;
          font-size: 14px;
          color: #333333;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          cursor: pointer;
        }
        .size{
          font-size: 12px;
          color: #999999;
          display: flex;
          gap:10px;
        }
      }
      .table_row_option{
        justify-content: flex-end;
      }
    }
  }
}




.multipleSelect{
  :deep(.el-select__wrapper){
     height: auto;
  }
}

.upload-demo{
  width: 100%;

  .right_tips{
    margin-top: 0px;
  }

  .file_list{
    // 拖拽
    width: 80%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap:5px;

    .el-upload__tip{
      flex:1 1;
      display: flex;
      justify-content: space-between;
      align-items: center;

      margin-top: 0;
      // 拖拽
      background-color: white;
      padding:0 8px;
      > a{
        color: #666;
      }
      > img{
        width: 15px;
      }
    }

    .hjx-dui {
      color: #2dab85;
      font-size: 16px;
    }
  }
  .el-button{
    padding:0 10px !important;
    background-color: #2e64fa;
    &.is-disabled{
      background-color: #cfd2d4;
      border:none;
      color: white;
      cursor: not-allowed;
    }
  }

 

  .no_drag_content{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    .file_list{
      width: 100%;
      background-color: #F5F7FC;
      .el-upload__tip{
        background-color: transparent;
      }
    }
  }

  :deep(.el-upload-dragger){
    background-color: #f0f4f7;
    border:dashed #9a9c9e 1px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    .no_data{
      width: 60px;
    }
  }
}


.check_group_btn_list,
.check_group_list{
  width: 100%;
}

.check_group_btn_list{
  display: flex;
  flex-wrap: wrap;
  gap:20px;

  :deep(.el-checkbox-button){
    .el-checkbox-button__inner{
      border-radius: 4px;
      border:solid #dcdfe6 1px;
      &:hover {
        color: #666666;
      }
    }
    &.is-focus{
      .el-checkbox-button__inner{
        border:solid #dcdfe6 1px;
      }
    }
    &.is-checked{
      .el-checkbox-button__inner{
        background: #2E64FA;
        border: 1px solid  #2E64FA;
        color: #fff;
        &:hover {
          background: #2E64FA;
        }
      }
    }
  }
}



.delete_img{
  width: 96px;
  height: 36px !important;
  font-weight: 400;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
}

.iconfont {
  margin-right: 5px;

  &.hjx-a-Folder-uploadwenjianjia-shangchuan{
    color: #999999;
    font-size: 24px;
  }
}

.page_dialog{
  :deep(.el-dialog) {
    margin: calc(min(50px,5vh)) auto calc(min(50px,5vh));
  }
  :deep(.el-dialog__body){
    min-height: 156px;
    max-height: calc(90vh - 48px - 66px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: auto;
    .el-date-editor--date.el-input{
      width: 100%;
      border:none;
    }
  }

  a{
    &:hover{
      cursor: pointer;
    }
  }

  .el-form-item{
    :deep(.el-form-item__content){
      .el-date-editor.is-disabled{
        .el-input__icon,
        .el-range-separator{
          color: #333;
        }
      }
      .el-range-input[disabled]{
        color: #333;
      }
      .readonly_input{
        .el-input__wrapper{
          background-color: #f5f7fa;
          &:hover{
            box-shadow: none;
            border:solid #dcdfe6  1px;
            cursor: not-allowed;
          }   
          .el-input__inner[readonly]{
            color: #333;
            &:hover{
              cursor: not-allowed;
            }
          }
        }
      }
    }
  }

}

.footer_bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
}


</style>

<style lang="scss">
//部分标签顶部对齐
.top_label{
  .el-form-item__label-wrap{
    // border:solid red 1px;
    align-self: flex-start;
  }
}


</style>