<template>
  <div class="container-accountability selfAuditPage">
    <el-form ref="zpbmlist" :model="zpbmlist" label-width="100px" :rules="rulesForm">
      <el-row>
        <el-col :span="8" :offset="4">
          <el-form-item label="考核年度">
            <el-input v-model="taskInfo.year" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16" :offset="4">
          <el-form-item label="评分标准">
            <el-input
              v-model="taskInfo.pfbz"
              type="textarea"
              :rows="4"
              disabled
              resize="none"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row>
        <el-col :span="16" :offset="4">
          <el-form-item label="考核指标">
            <el-input
              v-model="taskInfo.khzb"
              type="textarea"
              :rows="4"
              placeholder=""
              disabled
              resize="none"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16" :offset="4">
          <el-form-item label="重点考核事项">
            <el-input
              v-model="taskInfo.khsx"
              type="textarea"
              :rows="4"
              placeholder=""
              disabled
              resize="none"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16" :offset="4">
          <el-form-item label="考核内容">
            <el-input
              v-model="taskInfo.khnr"
              type="textarea"
              :rows="4"
              placeholder=""
              disabled
              resize="none"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row> -->
      <el-row :gutter="20">
        <el-col :span="24">
          <h3 class="titH3">自评部门评分</h3>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" :offset="4">
          <el-form-item label="自评部门">
            <el-input v-model="zpbmlist.zpbm" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16" :offset="4">
          <el-form-item label="评分意见" prop="scoreReason">
            <el-input
              v-model="zpbmlist.scoreReason"
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
              resize="none"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" :offset="4">
          <el-form-item label="填报人" prop="bmtbr">
            <el-input v-model="zpbmlist.bmtbr" placeholder="请输入" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="审核人" prop="bmshr">
            <el-input v-model="zpbmlist.bmshr" placeholder="请输入" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" :offset="4">
          <el-form-item label="文件上传">
            <el-upload
								ref="upload"
								:action="file"
								:on-success="onSuccess"
								:on-error='onError'
								:on-remove="handleRemove"
								multiple
								:file-list="fileList"
                :on-preview="handlePreview"
								:auto-upload="true">
								<el-button size="small" type="primary" class="button">点击上传</el-button>
						</el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="text-align: center;">
      <el-button type="primary" size="small" class="iconfont iconbaocun" @click="btn_save('zpbmlist')" :loading="loadingSave">保存</el-button>
      <el-button type="primary" size="small" class="iconfont iconfanhui" @click="go_index()">返回</el-button>
    </div>
  </div>
</template>

<script>
import {
  getDetailList,
  save
} from "@/api/headResponsibility/selfAudit/index.js";
import { file, fileDownload } from "@/api/index.js";
import * as validate from "@/utils/validate";
export default {
  data() {
    return {
      taskInfo: {},
      loadingSave: false,
      file: `${file}`,
      fileList: [],
      fileDownload: `${fileDownload}`,
      zpbmlist: {}, //自评部门列表
      needArr: [],
      rulesForm: {
        scoreReason: [
          { validator: validate.validateTenBai, trigger: "blur" }
        ],
        bmtbr: [
          { required: true, message: "请输入填报人", trigger: "blur" },
          { validator: validate.validateFive, trigger: "blur" }
        ],
        bmshr: [
          { required: true, message: "请输入审核人", trigger: "blur" },
          { validator: validate.validateFive, trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.get_detailList();
  },
  methods: {
    //保存
    btn_save(formName) {
      this.$refs[formName].validate(valid => {
        if(valid) {
          this.loadingSave = true
          this.zpbmlist.fileId = this.needArr.length == 0 ? '' : this.needArr.join(',')
          save(this.zpbmlist)
            .then(res => {
              if (res.infoCode == 200) {
                this.$message({
                  message: '保存成功',
                  type: "success",
                  duration: 2000
                });
                this.$router.push("/accountability/selfAudit");
              } else {
                this.$message({
                  message: res.msg,
                  type: "error",
                  duration: 2000
                });
                this.loadingSave = false
              }
            })
        }else {
          return false 
        }
      })
    },
    //返回
    go_index() {
      this.$router.push("/accountability/selfAudit");
    },
    //获取详情页数据
    get_detailList() {
      let params = {
        id: this.$route.query.id
      };
      getDetailList(params)
        .then(res => {
          if (res.infoCode == 200) {
            this.taskInfo = res.data.taskInfo; //基本信息列表
            this.zpbmlist = res.data.zpbm; //自评部门列表
            if(res.data.zpbm.fileVOList) {//上传文件的集合（包含文件名和文件id）
              res.data.zpbm.fileVOList.map(item => {
                this.fileList.push({
                  name: item.fileName,
                  response: {
                    data: {
                      id: item.fileId
                    }
                  }
                })
              })
            }
            if(res.data.zpbm.fileId){//上传的文件id(逗号隔开的字符串)
              this.needArr = res.data.zpbm.fileId.split(',')
            }
          }else {
            this.$message({
              message: res.msg,
              type: "error",
              duration: 2000
            });
          }
        })
    },
    onSuccess(response, file, fileList) {
			if(response.infoCode == 200) {
				this.$message({
					message: '上传成功',
          type: 'success',
          duration: 2000
        })
        this.needArr.push(response.data.id)
        // console.log('上传啊啊啊',this.needArr)
			}else {
				this.$message({
					message: `${response.msg}`,
          type: 'error',
          duration: 2000
				})
			}
    },
    onError(err, file, fileList) {
			this.$message({
				message: "上传失败",
        type: 'error',
        duration: 2000
			})
    },
    handleRemove(file, fileList) {
      // console.log('删除的',fileList)
      let otherArr = []
      fileList.map(item => {
        otherArr.push(item.response.data.id)
      })
      this.needArr = otherArr
      // console.log('删除的',this.needArr)
    },
    handlePreview(file) {
      window.location.href = `${fileDownload}?id=${file.response.data.id}`
		}
  }
};
</script>

<style lang='scss'>
.selfAuditPage {
  // .lastDialog{
  //   .el-form-item__label{
  //     line-height: 20px;
  //     padding-top: 10px;
  //   } 
  // }
}
</style>