<template>
  <div class="operate">
    <el-form
      ref="ruleForm"
      :model="form"
      :rules="rules"
      class="dialogForm"
      :label-width="90"
      :disabled="opts.type === 'view'"
    >
      <!-- <el-row :gutter="20" v-if="curRow.parentTypeName">
        <el-col :span="24">
          <el-form-item label="上级名称:">
            <el-input
              v-model="curRow.parentTypeName"
              type="text"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row> -->
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="分类编号:" prop="typeCode">
            <el-input
              v-model="form.typeCode"
              type="text"
              placeholder="请输入分类编号"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="分类名称:" prop="typeName">
            <el-input
              v-model="form.typeName"
              type="text"
              placeholder="请输入分类名称"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="分类描述:" prop="remark">
            <el-input
              v-model="form.remark"
              type="textarea"
              placeholder="请输入分类描述"
              resize="none"
              :rows="4"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="封面:" prop="cover">
            <div class="upload">
              <el-upload
                class="avatar-uploader"
                action="/prod-api/system/upload"
                :headers="uploadHeader"
                :before-upload="(rawFile) => beforeUpload(rawFile, ['.png', '.jpg', '.jpeg'])"
                :on-success="(response) => onSuccess(response, 'cover')"
                :on-error="(error, uploadFile, uploadFiles) => onError(error, uploadFile, uploadFiles)"
                :show-file-list="false"
                accept=".jpg, .png, .jpeg, .svg, .gif"
                :disabled="opts.type === 'view' || !!form.cover"
              >
                <div class="img" v-if="form.cover">
                  <img :src="form.cover" class="avatar" />
                  <div class="mask" v-if="opts.type !== 'view'">
                    <el-icon
                      class="icon"
                      :size="20"
                      @click="removeFile('cover')"
                    ><Delete /></el-icon>
                  </div>
                </div>
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, onMounted } from 'vue'
import { inheritAttr } from '@/utils/v3'
import { required } from '@/utils/validate-helper'
import uploadHeader from '@/utils/getUploadHeader'
import { documentTypeAdd, documentTypeEdit, documentTypeDetail } from '@/api/document/dataClassify'
import { fileList } from '@/api/system/file'
const methed = {
  add: documentTypeAdd,
  edit: documentTypeEdit
}
const { proxy } = getCurrentInstance()
const props = defineProps({
  curRow: {
    type: Object,
    default: () => ({})
  },
  opts: {
    type: Object,
    default: () => ({})
  }
})
const { curRow, opts } = props
const emit = defineEmits(['close'])
const form = reactive({
  typeCode: '',
  typeName: '',
  remark: '',
  cover: '',
  sysFileSaveRequestList: []
})

const rules = reactive({
  typeCode: required('分类编号'),
  typeName: required('分类名称'),
  remark: required('分类描述')
})

const submit = () => {
  proxy.$refs.ruleForm.validate(async (valid, fields) => {
    if (valid) {
      let api = methed[opts.type]
      if(!api) return
      const params = JSON.parse(JSON.stringify(form))
      if(opts.type === 'add'){
        params.parentId = curRow.id
      } else if(opts.type === 'edit'){
        params.id = curRow.id
      }
      const res = await api(params)
      if(res?.code !== 200) return
      proxy.$modal.msgSuccess('操作成功')
      emit('close', opts)
    } else {
      console.log('error submit!', fields)
    }
  })
}

const beforeUpload = (rawFile) => {
  console.log(rawFile)
  if(rawFile.name.length > 50) {
    proxy.$modal.msgError(`文件名称过长(50个字符以内)，请先修改再上传!`);
    return false
  }
  return true
}

const onSuccess = (response, prop) => {
  console.log(response)
  const { data } = response
  form[prop] = data.url
  form.sysFileSaveRequestList = [{ ...data, refType: 'document_type_cover' }]
  // nextTick(() => {
  //   proxy.$refs.ruleForm.validateField(prop)
  // })

}

const onError = (error, uploadFile, uploadFiles) => {
  console.log(error, uploadFile, uploadFiles)
}

const removeFile = (prop) => {
  proxy.$modal
  .confirm("是否确认删除？")
  .then(async () => {
    form[prop] = ''
    form.sysFileSaveRequestList = []
    nextTick(() => {
      proxy.$refs.ruleForm.validateField(prop)
    })
  })
  .catch(() => {});
}

const getDetail = async () => {
  const res = await documentTypeDetail(curRow.id)
  if(res?.code !== 200) rteturn
  inheritAttr(res.data, form)
  getFileInfo(res.data.id, 'document_type_cover', (data) => {
    if(!data.length) return
    const fileInfo = data[0]
    form.cover = fileInfo.url
    form.sysFileSaveRequestList = [{ ...fileInfo, refType: 'document_type_cover' }]
  })
}

const getFileInfo = async (id, refType, callback) => {
  const res = await fileList({ refId: id, refType })
  if(res?.code !== 200) return
  callback && callback(res.data)
}

onMounted(() => {
  if(['view', 'edit'].includes(opts.type)) getDetail()
})

defineExpose({
  submit
})
</script>

<style lang="scss" scoped>
.upload {
  position: relative;
  .fileName {
    position: absolute;
    left: 0;
    top: 30px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    .del {
      flex-shrink: 0;
      color: #f56c6c;
      cursor: pointer;
      margin-left: 10px;
    }
  }
}
.img {
  position: relative;
  width: 178px;
  height: 178px;
  img {
    width: 100%;
    height: 100%;
  }
  .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    display: none;
    .icon {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
    }
  }
  &:hover {
    .mask {
      display: block;
    }
  }
}
</style>