<template>
  <div class="app-container">
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%" v-dialogDrag append-to-body>
      <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="145px">
        <!-- 档案信息 -->
        <el-card class="box-card">
          <!-- 卡片头 -->
          <div slot="header" class="clearfix">
            <i class="el-icon-plus"/>
            <span>档案信息</span>
          </div>
          <!-- 卡片内容 -->
          <div>
            <el-row :gutter="2">
              <el-col :span="12">
                <el-form-item label="档案名称" prop="archivesName">
                  <el-input v-model="formData.archivesName" placeholder="请输入档案名称"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="档案存放位置" prop="archivesPhysicsUrl">
                  <el-input v-model="formData.archivesPhysicsUrl" placeholder="请输入档案存放位置"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="2" v-if="activeTab === 'contract_type'">
              <el-col :span="12">
                <el-form-item label="签订日期" prop="signTime">
                  <el-date-picker clearable v-model="formData.signTime" type="date" value-format="yyyy-MM-dd"
                                  placeholder="选择签订日期"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="到期日期" prop="expireTime">
                  <el-date-picker clearable v-model="formData.expireTime" type="date" value-format="yyyy-MM-dd"
                                  placeholder="到期日期"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>
        <!-- 档案内容 -->
        <el-card class="box-card">
          <!-- 卡片头 -->
          <div slot="header" class="clearfix">
            <i class="el-icon-plus"/>
            <span>档案内容</span>
          </div>
          <!-- 卡片内容 -->
          <div>
<!--              <el-form-item label="档案类型" prop="archivesType">-->
<!--                <el-radio-group v-model="formData.archivesType">-->
<!--                  <el-radio-button-->
<!--                    v-for="dict in this.getDictDatas(DICT_TYPE.ARCHIVES_ITEM_TYPE)"-->
<!--                    :key="dict.value"-->
<!--                    :label="dict.value"-->
<!--                  >-->
<!--                    {{ dict.label }}-->
<!--                  </el-radio-button>-->
<!--                </el-radio-group>-->
<!--              </el-form-item>-->
            <el-form-item label="文件上传"  prop="archivesUrls">
              <FileUpload ref="fileUpload" v-model="formData.archivesUrls" :limit="50" />
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model="formData.remark" maxlength="200"
                        show-word-limit />
            </el-form-item>
          </div>
        </el-card>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {createHashCodeByStr} from '@/utils/createUniqueCode'
import {updateArchives} from '@/api/company/archives/archives'

export default {
  name: 'ArchivesForm',
  data() {
    return {
      dialogTitle: null,
      dialogVisible: false,
      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
      formLoading: false,
      // 表单参数
      formData: {
        id: null,
        archivesName: null,
        archivesPhysicsUrl: null,
        signTime: null,
        expireTime: null,
        archivesType: "01",
        archivesUrls: null,
        remark: null,
        dataId: null,
        archivesCode: null,
      },
      // 表单校验
      formRules: {
        archivesName: [{required: true, message: "档案名称不能为空", trigger: "blur"}],
        archivesPhysicsUrl: [{required: true, message: "档案存放地址不能为空", trigger: "blur"}],
        signTime: [{required: true, message: "签订日期不能为空", trigger: "blur"}],
        expireTime: [{required: true, message: "到期日期不能为空", trigger: "blur"}],
        archivesUrls: [{required: true, message: "文件不能为空", trigger: 'blur'}]
      },
      activeItemType: "01",
      activeTab: '',
    }
  },
  methods: {
    /** 打开弹窗 */
    async open(data) {
      this.reset()
      // 修改时，设置数据
      if (data.id) {
        this.formData = {
          ...data,
        }
        this.formData.archivesUrls = this.buildUrls(data.archivesUrls)
      }
      this.dialogTitle = data.id ? '修改档案' : '新增档案'
      this.activeTab = data.activeTab
      this.formData.dataId = data.dataId
      this.dialogVisible = true
    },
    // 提交
    async submitForm() {
      // 校验主表
      await this.$refs['formRef'].validate()
      try {
        this.formLoading = true
        this.formData.archivesUrls = this.buildUrls(undefined)
        this.formData.archivesCode = createHashCodeByStr(this.formData.archivesName)
        const data = this.formData
        // 修改的提交
        if (data.id){
          await updateArchives(data)
          this.$modal.msgSuccess('修改成功')
          this.dialogVisible = false
          this.$emit('success')
          return
        }
        // 添加的提交
        await updateArchives(data)
        this.$modal.msgSuccess('新增成功')
        this.dialogVisible = false
        this.$emit('success')
      }finally {
        this.formLoading = false
      }
    },
    // 处理文件路径
    buildUrls(data){
      if (data){
        return data.split(",").map(item => {
          return {
            name: item.split("|")[1],
            url: item.split("|")[0],
            uid: item.split("|")[2],
            status: item.split("|")[3]
          }
        })
      }
      return this.formData.archivesUrls.map(item => `${item.url}|${item.name}|${item.uid}|${item.status}`).join(",")
    },
    reset(){
      this.formData =  {
        id: null,
        archivesName: null,
        archivesPhysicsUrl: null,
        signTime: null,
        expireTime: null,
        archivesType: "01",
        archivesUrls: null,
        remark: null,
        dataId: null,
        archivesCode: null,
      }
      this.resetForm('formRef')
    }
  }
}
</script>

<style scoped>
.box-card {
  margin-bottom: 10px;
}
</style>
