<template>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="60%"
    @close="close"
  >
    <el-form :model="form" :rules="rules" ref="formRef">
      <el-form-item label="备案上传" prop="fileIds">
        <uploadCom
          @updateInfo="list => updateInfo(list, 'fileIds')"
          :info="form.fileIds"
          :show="true"
          key="fileIds"
        />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitInfo">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import uploadCom from "@/components/uploadCom/uploadCom";
import { userCertCreateApi, certDetailsApi } from "@/api/admin/role";
export default {
  components: { uploadCom },
  data() {
    return {
      dialogVisible: false,
      form: {
        userId: "",
        type: "REG",
        fileIds: []
      },
      rules: {
        fileIds: [{ required: true, message: "请上传备案信息" }]
      }
    };
  },
  methods: {
    showInfo(row) {
      this.form.userId = row.userId;
      this.getDetail();
      this.dialogVisible = true;
    },
    updateInfo(list, type) {
      this.form[type] = list;
      this.$refs.formRef.validateField(type);
    },

    async getDetail() {
      const res = await certDetailsApi(this.form.userId);
      if (res.data.code === 0 && res.data.data.length) {
        let arr = res.data.data.map(item => {
          if (item.file) {
            const obj = {
              fileId: item.file.id,
              fileName: item.file.original,
              url: item.file.path
            };
            return obj;
          }
        });
        console.log("arr", arr);
        this.form.fileIds = arr;
      }
      console.log("ress", res);
    },
    submitInfo() {
      this.$refs.formRef.validate(async valid => {
        if (valid) {
          const fileIds = this.form.fileIds.map(item => item.fileId);
          let obj = {
            userId: this.form.userId,
            type: this.form.type,
            fileIds: fileIds
          };
          const res = await userCertCreateApi(obj);
          if (res.data.data) {
            this.$message.success("备案成功");
            this.$emit("success");
            this.close();
          }
        }
      });
    },
    close() {
      this.form = {
        userId: "",
        type: "REG",
        fileIds: []
      };
      this.dialogVisible = false;
    }
  }
};
</script>

<style lang="scss" scoped></style>
