<template>
  <div class="app-container">
    <div class="ma">上报记录</div>
    <div class="ma">
      <span class="term">清单内容</span>
      <span class="desc">{{ record.content_.name }}</span>
    </div>
    <div class="ma">
      <span class="term">上报状态</span>
      <span class="desc">{{ record.state }}</span>
    </div>
    <div class="ma">
      <span class="term">所属任务</span>
      <span class="desc">{{ record.task_.name }}</span>
    </div>
    <div class="ma">
      <span class="term">任务过期</span>
      <span class="desc">{{ record.task_.end_date }}</span>
    </div>
    <div class="ma">
      <span class="term">上报备注</span>
      <el-input
        v-model="record.note"
        placeholder=""
        type="textarea"
        :readonly="record.state != '待上报'"
      >
      </el-input>
    </div>
    <div class="ma">
      <span class="term">执行部门</span>
      <span class="desc">{{ record.belong_dept_.name }}</span>
    </div>
    <div class="ma" v-if="record.up_user_">
      <span class="term">上报人</span>
      <span class="desc">{{ record.up_user_.name }}/{{ record.up_state }}</span>
    </div>
    <div class="ma">
      <span class="term">上报说明</span>
      <el-input
        v-model="record.noteb"
        placeholder=""
        type="textarea"
        :readonly="record.state == '已上报' && record.state == '已确认'"
      >
      </el-input>
    </div>
    <div class="ma">
      <span class="term">是否适用</span>
      <el-switch v-model="record.is_yes"></el-switch>
    </div>
    <div class="ma">
      <el-upload
        ref="upload"
        :action="upUrl"
        :before-upload="beforeUpload"
        :on-success="handleUpSuccess"
        :headers="upHeaders"
        :on-preview="handlePreview"
        multiple
        :file-list="fileList"
        accept="image/*,application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/msword,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
      >
        <el-button size="small" type="primary">上传文件</el-button>
        <template #tip>
          <div class="el-upload__tip">
            可上传pdf,word,ppt,excel,图片文件,大小不超过20M
          </div>
        </template>
      </el-upload>
    </div>
    <el-divider></el-divider>
    <div style="text-align: right">
      <el-button type="primary" @click="confirm()" v-if="this.data.action =='reject'">驳回</el-button>
      <el-button type="primary" @click="confirm()" >确认</el-button>
    </div>
  </div>
</template>
<style>
.ma {
  margin-bottom: 10px;
}
.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;
}
</style>
<script>
import { upUrl, upHeaders } from "@/api/file";
import { updateRecord, upRecord, rejectRecord, confirmRecord } from "@/api/record"
export default {
  name: "recorddo",
  props: ["data"],
  data() {
    return {
      upHeaders: upHeaders(),
      upUrl: upUrl(),
      record: this.data.record,
      fileList:[]
    };
  },
  created() {

  },
  mounted() {
    this.initList()
  },
  methods: {
    initList(){
      for(var i=0;i<this.record.files_.length;i++){
        this.fileList.push({
          id:this.record.files_.id,
          name:this.record.files_.name,
          url:this.record.files_.path
        })
      }
    },
    handlePreview(file){
      if ("url" in file) {
        window.open(file.url);
      } else {
        window.open(file.response.data.path);
      }
    },
    handleUpSuccess(res, file, filelist) {
      this.$message.success('成功')
    },
    beforeRemove(){
      if(this.record.state!='待上报'&& this.record.state!='待整改'){
        this.$message.error("当前状态不可移除")
        return False;
      }
      return True
    },
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 20;
      if (!isLt2M) {
        this.$message.error("单文件不能超过20MB!");
      }
      return isLt2M;
    },
    confirm(){
      if(this.data.action=='update'){
        updateRecord(this.record.id, this.record).then(res=>{
          this.$message.success('成功')
        })
      }
      else if(this.data.action=='up'){
        upRecord(this.record.id, this.record).then(res=>{
          this.$message.success('成功')
        })
      }
      else if(this.data.action=='reject'){
        rejectRecord(this.record.id, this.record).then(res=>{
          this.$message.success('成功')
        })
      }
      else if(this.data.action=='confirm'){
        confirmRecord(this.record.id).then(res=>{
          this.$message.success('成功')
        })
      }
      this.$emit('handleDo')
    }
  },
};
</script>
