<template>
  <el-dialog
    :visible.sync="dialogManger.dialogVisible"
    :title="modelTitle"
    width="1200"
    append-to-body
    destroy-on-close
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <el-form
      ref="fileRef"
      :model="model"
      label-width="100px"
      label-position="top"
      class="file-form-class"
      :rules="rules"
    >
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="企业名称" prop="enterpriseName">
            <el-input
              v-model="model.enterpriseName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="文件版本" prop="version">
            <el-input v-model="model.version" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="文件状态" prop="status">
            <el-select
              v-model="model.status"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in dict.type.file_status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="文件识别号" prop="identifyNumber">
            <el-input
              v-model="model.identifyNumber"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="存储位置" prop="storage">
            <el-input v-model="model.storage" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="文件名称" prop="fileName">
            <el-input
              v-model="model.fileName"
              placeholder="请输入"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="发布日期" prop="publishDate">
            <el-date-picker
              v-model="model.publishDate"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="附件" prop="url">
            <div class="imageContnet" v-if="model.url && model.url.length > 0">
              <div v-for="(item, i) in model.url" :key="i" class="image">
                <div class="img-card">
                  <el-image
                    :src="item.path"
                    v-if="isImageFile(item.path)"
                    class="img"
                  >
                  </el-image>
                  <el-image
                    src="http://10.12.48.78:443/vehicle-quality-review-oss/2024/07/02/doc_d_20240702133702A019.png"
                    v-else
                    class="img"
                  >
                  </el-image>
                </div>
                <div class="img-name">文件:{{ item.name }}</div>
                <el-button
                  plain
                  type="danger"
                  @click="delFile(i)"
                  icon="el-icon-delete"
                ></el-button>
              </div>
            </div>
            <el-link type="primary" @click="selectSampleMaterial">
              从素材库选择</el-link
            >
          </el-form-item>
        </el-col>
      </el-row>
      <fileSelect
        :dialog-manger="fileManger"
        @select="selectFile"
      ></fileSelect>
    </el-form>
    <div slot="footer">
      <el-button @click="handleClose()"> 取消</el-button>
      <el-button type="primary" @click="handleConfirm()"> 保存</el-button>
    </div>
  </el-dialog>
</template>
<script>
import fileSelect from '@/components/fileSelect.vue'
export default {
  components:{
    fileSelect
  },
  props: {
    dialogManger: {
      type: Object,
      default() {
        return {
          dialogVisible: false,
          dialogEditId: 0
        }
      }
    }
  },
  dicts: ['file_status'],
  data() {
    return {
      model: this.$modelDataSource({
        url: '/review/enterprise/archive',
        dataKey: 'model',
        attributes: {
          id: 0,
          enterpriseName: '',
          fileName: '',
          version: '',
          publishDate: '',
          status: '',
          storage: '',
          identifyNumber: '',
          url: '',
          taskId: ''
        }
      }),
      fileManger: {
        dialogVisible: false,
        dialogEditId: null
      },
      rules: {
        enterpriseName: [
          { required: true, message: '请输入企业名称', trigger: 'blur' }
        ],
        fileName: [
          { required: true, message: '请输入文件名称', trigger: 'blur' }
        ],
        version: [
          { required: true, message: '请输入文件版本', trigger: 'blur' }
        ],
        publishDate: [
          { required: true, message: '请选择发布日期', trigger: 'change' }
        ],
        status: [
          { required: true, message: '请选择文件状态', trigger: 'change' }
        ],
        storage: [
          { required: true, message: '请输入存储位置', trigger: 'blur' }
        ],
        identifyNumber: [
          { required: true, message: '请输入文件识别号', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    modelTitle() {
      return this.dialogManger.dialogEditId ? '编辑' : '新增' + '文件'
    }
  },
  watch: {
    'dialogManger.dialogEditId'(newValue) {
      this.model.fetch(
        newValue,
        {},
        () => {
          this.dialogManger.dialogVisible = true
        },
        () => {
          this.$emit('refresh')
        }
      )
    }
  },
  methods: {
    selectFile(e) {
      this.model.url = e
    },
    delFile(index) {
      this.model.url.splice(index, 1)
    },
    isImageFile(filename) {
      /**
       * 判断文件名是否对应于常见的图片格式。
       *
       * 参数:
       * filename (string): 需要检查的文件名。
       *
       * 返回:
       * boolean: 如果文件名对应的扩展名是图片格式，则返回true，否则返回false。
       */

      // 常见图片格式列表
      const imageExtensions = ['jpg', 'jpeg', 'png']

      // 获取文件扩展名（不包括点）
      const extension = filename
        .slice(((filename.lastIndexOf('.') - 1) >>> 0) + 2)
        .toLowerCase()
      // 检查文件扩展名是否在图片格式列表中
      return imageExtensions.includes(extension)
    },
    handleClose() {
      this.$emit('close')
    },
    selectSampleMaterial() {
      this.fileManger.dialogVisible = true
    },
    handleConfirm() {
      this.$refs['fileRef'].validate(valid => {
        if (valid) {
          this.model.save(
            () => {
              this.dialogManger.dialogVisible = false
              this.$emit('refresh')
            },
            errors => {}
          )
        }
      })
    }
  }
}
</script>
