<template>
  <div class="app-container">
    <div class="ma">报送记录</div>
    <el-form label-width="100px" label-position="left">
      <el-form-item label="材料内容">
        {{ record.content_name }}
      </el-form-item>
      <el-form-item label="材料详情" v-if="record.content_desc">
        {{ record.content_desc }}
      </el-form-item>
      <el-form-item label="报送状态">
        {{ record.state }}
        <el-tag v-if="record.is_self" style="margin-left: 2px" effect="plain">主动报送</el-tag>
      </el-form-item>
      <el-form-item label="所属任务" v-if="record.task_">
        {{ record.task_.name }}/{{ record.task_.end_date }}
      </el-form-item>
      <el-form-item label="报送要求/备注" v-if="record.task_">
        <span v-if="data.action != 'update'">{{
          record.note
        }}</span>
        <el-input v-model="record.note" placeholder="" type="textarea" v-else>
        </el-input>
      </el-form-item>
      <el-form-item label="执行组织">
        {{ record.belong_dept_.name }}
      </el-form-item>
      <el-form-item label="报送人" v-if="record.up_user_">
        {{ record.up_user_.name }}/{{ record.up_date }}
      </el-form-item>
      <el-form-item label="报送说明">
        <span v-if="data.action != 'up'">{{ record.noteb }}</span>
        <el-input v-model="record.noteb" placeholder="" type="textarea" v-else >
        </el-input>
      </el-form-item>
      <el-form-item label="是否适用">
        <el-switch
          v-model="record.is_yes"
          :disabled="data.action != 'up'"
          @change="yeschange"
          inactive-color="red"
        ></el-switch>
      </el-form-item>
      <el-form-item label="修改意见" v-if="record.opinion || data.action=='reject'">
        <span v-if="data.action != 'reject'">{{record.opinion}}</span>
        <el-input
          v-model="record.opinion"
          placeholder=""
          type="textarea"
          v-else
        />
      </el-form-item>
      <el-form-item label="文件列表">
                <el-upload
                v-if="data.action == 'up' && record.is_yes"
          ref="upload"
          :action="upUrl"
          :before-upload="beforeUpload"
          :on-success="handleUpSuccess"
          :headers="upHeaders"
          multiple
          accept="image/*,.ppt,.pdf,.doc,.docx,.xls,.xlsx"
        >
          <el-button size="small" type="primary">上传文件</el-button>
            <span class="el-upload__tip">
              可上传多个pdf,word,ppt,excel,图片文件,单文件大小不超过50M
            </span>
        </el-upload>
      </el-form-item>
      <div
        v-for="(item, index) in fileList"
        v-bind:key="item.id"
        style="margin-top: 2px"
      >
        <i
          class="el-icon-delete"
          @click="deleteFile(index)"
          style="color: red"
          v-if="data.action == 'up'"
        ></i>
        <el-link :href="item.path" target="_blank" type="primary">{{
          item.name
        }}</el-link>
      </div>
    </el-form>
    <el-divider></el-divider>
    <div style="text-align: right">
      <el-button
        @click="confirm()"
        type="danger"
        v-if="this.data.action == 'reject'"
        >驳回</el-button
      >
      <el-button
        type="danger"
        @click="confirm()"
        v-else-if="this.data.action == 'delete'"
        >删除</el-button
      >
      <el-button type="primary" @click="confirm()" v-else>确认</el-button>
    </div>
  </div>
</template>
<style scoped>
.ma {
  margin-bottom: 10px;
  font-size: 20px;
}
.el-form-item {
  margin-bottom: 0px;
}
/* .term {
  color: rgba(0, 0, 0, 0.85);
  font-weight: bold;
  font-size: 16px;
}
.desc {
  color: rgba(0, 0, 0, 0.65);
  font-weight: bold;
  font-size: 16px;
} */
.litem {
  margin-left: 2px;
  cursor: pointer;
  color: #409eff;
}
</style>
<script>
import { upUrl, upHeaders } from "@/api/file";
import {
  updateRecord,
  upRecord,
  rejectRecord,
  confirmRecord,
  deleteRecord,
} from "@/api/record";
export default {
  name: "recorddo",
  props: ["data"],
  data() {
    return {
      upHeaders: upHeaders(),
      upUrl: upUrl(),
      record: null,
      fileList: [],
    };
  },
  created() {
    this.initRecord();
  },
  mounted() {
    this.initList();
  },
  methods: {
    initRecord() {
      this.record = Object.assign({}, this.data.record);
    },
    initList() {
      for (var i = 0; i < this.record.files_.length; i++) {
        this.fileList.push({
          id: this.record.files_[i].id,
          name: this.record.files_[i].name,
          path: this.record.files_[i].path,
        });
      }
    },
    handleUpSuccess(res, file, filelist) {
      this.fileList.push({
        id: res.data.id,
        name: res.data.name,
        path: res.data.path,
      });
      this.handleRemove(file);
    },
    handleRemove(file) {
      // 实现删除文件
      let fileList = this.$refs.upload.uploadFiles;
      let index = fileList.findIndex((fileItem) => {
        return fileItem.uid === file.uid;
      });
      fileList.splice(index, 1);
    },
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 50;
      if (!isLt2M) {
        this.$message.error("单文件不能超过50MB!");
      }
      return isLt2M;
    },
    deleteFile(index) {
      this.$confirm("确定删除该文件, 是否继续?", { type: "error" })
        .then(() => {
          this.fileList.splice(index, 1);
        })
        .catch((e) => {});
    },
    yeschange(val) {
      if (!val) {
        this.fileList = [];
      }
    },
    confirm() {
      if (this.data.action == "update") {
        updateRecord(this.record.id, this.record).then((res) => {
          this.$message.success("成功");
          this.$emit("handleDo",true);
        });
      } else if (this.data.action == "up") {
        var files = [];
        for (var i = 0; i < this.fileList.length; i++) {
          files.push(this.fileList[i].id);
        }
        this.record.files = files;
        upRecord(this.record.id, this.record).then((res) => {
          this.$message.success("成功");
          this.$emit("handleDo",true);
        });
      } else if (this.data.action == "reject") {
        rejectRecord(this.record.id, this.record).then((res) => {
          this.$message.success("成功");
          this.$emit("handleDo",true);
        });
      } else if (this.data.action == "confirm") {
        confirmRecord(this.record.id).then((res) => {
          this.$message.success("成功");
          this.$emit("handleDo",true);
        });
      }  else if (this.data.action == "view") {
        this.$emit("handleDo",false);
      } else if (this.data.action == "delete") {
        this.$confirm("确认删除?", "警告", {
          type: "error",
        })
          .then(async () => {
            await deleteRecord(this.record.id);
            this.$message.success("成功");
            this.$emit("handleDo",true);
          })
          .catch((err) => {
            console.error(err);
          });
      }
    },
  },
};
</script>
