<template>
  <div class="container-accountability cityEntryAdd">
    <h3 class="tit">首长责任制考核评分</h3>
    <el-form ref="form" :model="form" :rules="rules" label-width="140px">
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="年度考核目标任务">
            <el-input v-model="form.taskName" type="text" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="考核指标">
            <el-input v-model="form.quotaName" type="textarea"  resize="none"  disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="分值">
            <el-input v-model="form.totalScore" type="text" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="评分标准">
            <el-input v-model="form.scoreStandard" type="textarea" :rows="4" resize="none" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <h3 class="titleUseStyle_1">自评部门评分</h3>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="自评部门" prop="zpbm">
            <el-input v-model="form.zpbm" type="text" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="自评部门分值" prop="zpbmScore">
            <el-input v-model="form.zpbmScore" type="text" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="自评部门说明" prop="zpbmExplain">
            <el-input
              disabled
              v-model="form.zpbmExplain"
              type="textarea"
              :autosize="{ minRows: 6, maxRows: 10}"
              resize="none"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="扣分原因" >
            <el-input
              disabled
              v-model="form.zpbmKfyy"
              type="textarea"
              :autosize="{ minRows: 3, maxRows: 10}"
              resize="none"
              ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="整改措施">
            <el-input
              disabled
              v-model="form.zpbmZgcs"
              type="textarea"
              :autosize="{ minRows: 3, maxRows: 10}"
              resize="none"
              ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="填报人" prop="zpbmTbr">
            <el-input v-model="form.zpbmTbr" type="text" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="审核人" prop="zpbmShr">
            <el-input v-model="form.zpbmShr" type="text" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <h3 class="titleUseStyle_1">牵头部门评分</h3>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="牵头部门" prop="qtbm">
            <el-input v-model="form.qtbm" type="text" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="牵头部门分值" prop="qtbmScore">
            <el-input v-model="form.qtbmScore" type="text" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="牵头部门说明" prop="qtbmExplain">
            <el-input
              disabled
              v-model="form.qtbmExplain"
              type="textarea"
              :autosize="{ minRows: 6, maxRows: 10}"
              resize="none"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="扣分原因">
            <el-input
              disabled
              v-model="form.qtbmKfyy"
              type="textarea"
              :autosize="{ minRows: 3, maxRows: 10}"
              resize="none"
              ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="填报人" prop="qtbmTbr">
            <el-input v-model="form.qtbmTbr" type="text" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="审核人" prop="qtbmShr">
            <el-input v-model="form.qtbmShr" type="text" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <h3 class="titleUseStyle_1">配合部门意见</h3>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="20">
          <el-form-item label="配合部门意见">
            <el-table :data="form.phbm" style="width: 100%" border>
              <el-table-column label="配合部门" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <el-input
                    v-show="scope.row.show==1"
                    v-model="scope.row.phbm"
                    clearable
                    :maxlength="maxlength"
                  ></el-input>
                  <span v-show="scope.row.show!=1">{{scope.row.phbm}}</span>
                </template>
              </el-table-column>
              <el-table-column label="配合部门说明" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <el-input
                    v-show="scope.row.show==1"
                    v-model="scope.row.phbmExplain"
                    clearable
                    :maxlength="maxlength"
                  ></el-input>
                  <span v-show="scope.row.show!=1">{{scope.row.phbmExplain}}</span>
                </template>
              </el-table-column>
              <el-table-column label="填报人" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <el-input
                    v-show="scope.row.show==1"
                    v-model="scope.row.phbmTbr"
                    clearable
                    :maxlength="maxlength"
                  ></el-input>
                  <span v-show="scope.row.show!=1">{{scope.row.phbmTbr}}</span>
                </template>
              </el-table-column>
              <el-table-column label="审核人" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <el-input
                    v-show="scope.row.show==1"
                    v-model="scope.row.phbmShr"
                    clearable
                    :maxlength="maxlength"
                  ></el-input>
                  <span v-show="scope.row.show!=1">{{scope.row.phbmShr}}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="文件">
            <el-upload
              v-if="form.fileMap.name"
              ref="upload"
              :action="uploadUrl"
              :file-list="fileList"
              disabled>
              <el-button size="small" type="primary" class="button" disabled>文件下载</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <h3 class="titleUseStyle_1">省级配合部门意见</h3>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="20">
          <el-form-item label="配合部门意见">
            <el-table :data="sjphbmList.phbmList" style="width: 100%" border>
              <el-table-column label="配合部门" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <el-input
                    v-show="scope.row.show==1"
                    v-model="scope.row.phbm"
                    clearable
                    :maxlength="maxlength"
                    ></el-input>
                  <span v-show="scope.row.show!=1">{{scope.row.phbm}}</span>
                </template>
              </el-table-column>
              <el-table-column label="配合部门说明" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <el-input
                    v-show="scope.row.show==1"
                    v-model="scope.row.phbmExplain"
                    clearable
                    :maxlength="maxlength"
                    ></el-input>
                  <span v-show="scope.row.show!=1">{{scope.row.phbmExplain}}</span>
                </template>
              </el-table-column>
              <el-table-column label="填报人" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <el-input
                    v-show="scope.row.show==1"
                    v-model="scope.row.tbr"
                    clearable
                    :maxlength="maxlength"
                    ></el-input>
                  <span v-show="scope.row.show!=1">{{scope.row.tbr}}</span>
                </template>
              </el-table-column>
              <el-table-column label="审核人" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <el-input
                    v-show="scope.row.show==1"
                    v-model="scope.row.shr"
                    clearable
                    :maxlength="maxlength"
                    ></el-input>
                  <span v-show="scope.row.show!=1">{{scope.row.shr}}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row :gutter="20">
        <el-col :span="24">
          <h3 class="titleUseStyle_1">省级牵头部门评分</h3>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="牵头部门" prop="qtbm">
            <el-input v-model="sjphbmList.qtbm" type="text" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="牵头部门分值" prop="qtbmScore">
            <el-input v-model="sjphbmList.qtbmScore" type="text" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="牵头部门说明" prop="qtbmExplain">
            <el-input
              disabled
              v-model="sjphbmList.qtbmExplain"
              type="textarea"
              :autosize="{ minRows: 6, maxRows: 10}"
              resize="none"
              ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="扣分原因">
            <el-input
              disabled
              v-model="sjphbmList.qtbmKfyy"
              type="textarea"
              :autosize="{ minRows: 3, maxRows: 10}"
              resize="none"
              ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="填报人" prop="qtbmTbr">
            <el-input v-model="sjphbmList.tbr" type="text" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="审核人" prop="qtbmShr">
            <el-input v-model="sjphbmList.shr" type="text" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row :gutter="20">
        <el-col :span="24">
          <div style="width: 80%; margin: 0 auto; text-align: center; ">
            <el-button
              style="margin: 0 50px;"
              type="primary"
              class="outCancelButton"
              @click="back"
            >取消</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import * as management from "@/api/headResponsibility/cityEntry";
import{ file,fileDownload} from "@/api/index.js"
import * as validate from "@/utils/validate"
export default {
  data() {
    return {
      sjphbmList:{},
      form: {
        taskName:"",
        quotaName:"",
        totalScore:"",
        totalScore:"",
        scoreStandard:"",
        zpbm:"",
        zpbmScore:"",
        zpbmExplain:"",
        zpbmTbr:"",
        zpbmShr:"",
        qtbm:"",
        qtbmScore:"",
        qtbmExplain:"",
        qtbmTbr:"",
        qtbmShr:"",
        fileId:"",
        phbm: [],
        fileMap:{
          name:""
        }
      },
      rules: {
        zpbm:[{ required: true, message: "请输入自评部门", trigger: "blur" }],
        zpbmScore:[
          { required: true, message: "请输入自评部门评分", trigger: "blur" },
          {trigger: ['blur', 'change'], validator: validate.isNumber}
        ],
        zpbmExplain:[{ required: true, message: "请输入自评部门说明", trigger: "blur" }],
        zpbmTbr:[{ required: true, message: "请输入自评部门填报人", trigger: "blur" }],
        zpbmShr:[{ required: true, message: "请输入自评部门审核人", trigger: "blur" }],
        qtbm:[{ required: true, message: "请输牵头部门", trigger: "blur" }],
        qtbmScore:[
          { required: true, message: "请输入牵头部门评分", trigger: "blur" },
          {trigger: ['blur', 'change'], validator: validate.isNumber}
        ],
        qtbmExplain:[{ required: true, message: "请输入牵头部门说明", trigger: "blur" }],
        qtbmTbr:[{ required: true, message: "请输入牵头部门填报人", trigger: "blur" }],
        qtbmShr:[{ required: true, message: "请输入牵头部门审核人", trigger: "blur" }],

      },
      file:`${file}`,
      fileDownload:`${fileDownload}`,
      maxlength: 20,
      loading: false,
      flagNum: 0,
      uploadUrl: `${file}`,//上传地址
      fileList: []
    };
  },
  methods: {


    uploadFile(item){
      console.log("item",item);

    },
    /**
     * 表格新增按钮
     */
    renderHeader(h) {
      return h("div", { class: "tabBtnBox" }, [
        h("span", null, "操作"),
        h("i", {
          class: "el-icon-circle-plus-outline",
          on: {
            click: () => {
              if (this.flagNum == 0) {
                this.form.phbm.unshift({
                  phbm: "",
                  phbmExplain: "",
                  phbmTbr: "",
                  phbmShr: "",
                  show: 1
                });
                this.flagNum++;
              } else {
                this.$message.warning("请填写完上一条新增数据在进行新增");
              }
            }
          }
        })
      ]);
    },
    /**
     * 表格修改按钮
     */
    handleEdit(index, row) {
      row.show = 1;
    },
    /**
     * 表格删除按钮
     */
    handleDelete(index, row) {
      this.form.phbm.splice(index, 1);
      this.flagNum = 0;
    },

    handleExceed(files, fileList) {
      this.$message.warning(`上传文件超出最大个数，当前只允许上传有1个文件`);
    },
    handleChange(file, fileList) {
      console.log(file)
    },
    handleRemove(file, fileList) {
       this.form.fileId=""
    },
    handleSuccess(file, fileList){
      this.form.fileId=file.data.id
    },
    handlePreview(file){
      location.href=file.url
    },
    /**
     * 返回按钮
     */
    back() {
      this.$router.back(-1);
    },
    /**
     * 确定按钮
     */
    save() {
      console.log(this.form.phbm)
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true;
          this.form.id=this.$route.query.id
          if (this.flagNum!=0) {
            this.handleDelete(0)
          }
          //总分值
          const totalScore=this.form.totalScore;
          //自评部门分值
          const zpbmScore=this.form.zpbmScore;
          //牵头部门分值
          const qtbmScore=this.form.qtbmScore;
          if(zpbmScore>totalScore){
            this.loading = false;
            return this.$message({
              message: '自评部门分值不能大于年度考核目标任务分值',
              type: 'error'
            })
          }
          if(qtbmScore>totalScore){
            this.loading = false;
            return this.$message({
              message: '牵头部门分值不能大于年度考核目标任务分值',
              type: 'error'
            })
          }

          management.respScoreInputUpdateZCity(this.form).then(res=>{
            this.loading = false;
            if (res.infoCode == 200) {
              this.$message.success(res.msg);
              this.$router.push({
                path: "/supervisionCheck/headResponsibility/cityEntry"
              });
            } else {
              this.$message.error(res.msg);
            }
          })
        } else {
          return false;
        }
      });
    },


      downMethod(ele,currentId) {//点击文件下载方法
        ele.$el.getElementsByTagName('a')[0].setAttribute('title','点击下载')
        ele.$el.getElementsByTagName('a')[0].setAttribute('href',`${fileDownload}?id=${currentId}`)
      },

    /**
     * 查询评分表接口
     */
    getPfb(id) {
      management.respScoreInputFindById(id).then(res => {
        if (res.infoCode == "200") {
          if (res.data.fileMap!=null) {
            this.fileList=[{
              name:res.data.fileMap.name,
              url:`${fileDownload}?id=${res.data.fileMap.id}`
            }]
              setTimeout(() => {
                this.downMethod(this.$refs.upload,res.data.fileMap.id)
            },10)
          }
          this.form= res.data;
        }
      });
    },
      /**
       * 查询评分表接口
       */
      findByQtbmInfo(id,type) {
        management.findByQtbmInfo(id,type).then(res => {
          if (res.infoCode == "200") {
            this.sjphbmList=res.data;
            console.log("sjphbmList",this.sjphbmList);

          }
        });
    }
  },
  created() {
    this.getPfb(this.$route.query.id);
    this.findByQtbmInfo(this.$route.query.id,"city");
  }
};
</script>
<style lang="scss">
.cityEntryAdd {
  .tit {
    text-align: center;
    margin-bottom: 32px;
  }
  .titleUseStyle_1 {
    font-size: 14px;
    width: 100%;
    height: 30px;
    line-height: 30px;
    color: #fff;
    font-weight: 400;
    background: #3d62c1 !important;
    padding-left: 8px;
     margin-bottom: 20px;
  }
  .tabBtnBox {
    width: 100%;
    /* height: 100%; */
    padding-top: 2px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 8px;
    box-sizing: border-box;

    i {
      cursor: pointer;
    }
    i:hover {
      color: #409eff;
    }
  }
  .el-table__header {
    .is-leaf {
      padding: 0;
    }
  }
}
</style>
