<template>
  <div class="container-accountability managementList">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-row>
        <el-col :span="8">
          <el-form-item label="考核年度:">
            <el-select class="wdh" v-model="formInline.year" placeholder="年度考核目标任务:">
              <el-option :key="item.index" :label="item" :value="item" v-for="item in dateyear"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button type="primary" class="outButton" icon="el-icon-search" @click="search">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <el-col :span="24">
        <el-table
          :data="tableList"
          v-loading="loading"
          border
          stripe
          highlight-current-row
          style="margin-top:0;"
        >
          <el-table-column align="center" label="序号" width="60">
            <template slot-scope="scope">
              <span>{{scope.$index+1}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="考核年度" width="120" sortable :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{scope.row.YEAR}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="盟市名称" width="140" sortable :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{scope.row.ZHOUSHI}}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="填报进度" width="120" sortable :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-progress :percentage="Number(scope.row.TBJD)" :color="customColor"></el-progress>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="light" content="查看" placement="top">
                <el-button
                  type="primary"
                  size="small"
                  icon="el-icon-zoom-in"
                  class="button"
                  @click.stop="handleSee(scope.row)">
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <div v-show="!listLoading" class="pag-right clearFix">
          <el-pagination
            class="right"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="page.page"
            :page-sizes="[10,20,30,50]"
            :page-size="page.size"
            layout="total, sizes, prev, pager, next, jumper"
            v-if="paginationShow"
            :total="page.total"
          ></el-pagination>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="修改评价" :visible.sync="dialogFormVisible" width="30%" class="lsjbhyj">
      <el-form :model="lsjform" size="mini" :rules="rules" ref="lsjform">
        <el-row>
           <el-col :span="24">
            <el-form-item prop="pj" label="评价">
              <el-input
                type="text"
                v-model="lsjform.pj"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="pjExplain" label="评价说明">
              <el-input
                type="textarea"
                v-model="lsjform.pjExplain"
                resize="none"
                autofocus
                :autosize="{ minRows: 6, maxRows: 4}"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item style="text-align: center;">
              <el-button type="primary" @click="submitForm('lsjform')" class="outButton">确定</el-button>
              <el-button type="primary" @click="resetForm('lsjform')" class="outButton">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import * as assessment from "@/api/assessment";
import * as management from "@/api/headResponsibility/management";
export default {
  data() {
    return {
      formInline: {
        year: "",
        source: "20"
      },
      dateyear: [],
      tableList: [],
      loading: true,
      listLoading: false,
      paginationShow: true,
      page: {
        page: 1,
        size: 10,
        total: 0
      },
      customColor: "#409eff",
      dialogFormVisible: false,
      lsjform: {
        id:"",
        pj:"",
        pjExplain: ""
      },
      rules: {
        pj:[{
            required: true,
            message: "请输入评价",
            trigger: "change"
          },{
            min: 0,
            max: 2000,
            message: "输入文字个数最小2位,最大2000位",
            trigger: "change"
          }],
        pjExplain: [
          {
            required: true,
            message: "请输入评价说明",
            trigger: "change"
          },
          {
            min: 0,
            max: 2000,
            message: "输入文字个数最小2位,最大2000位",
            trigger: "change"
          }
        ]
      }
    };
  },
  methods: {


    handleSee(row){
      console.log("row",row);
      //  isDisabled: 1 查询  2 编辑
      this.$router.push({
        path:"/supervisionCheck/headResponsibility/cityList",
        query:{
          areaCode:row.SHI_AREA_CODE,
          year:row.YEAR,
          billityId:row.BIZ_RESP_RESPONSIBILITY_ID
        }
      })
    },



    /**
     * 查询按钮
     */
    search() {
      this.loading = true;
      this.paginationShow = false;
      this.handleCurrentChange(1);
      this.$nextTick(function() {
        this.paginationShow = true;
      });
    },

    /**
     * 分页大小
     */
    handleSizeChange(val) {
      this.page.size = val;
      this.getTabList();
    },

    /**
     * 分页第几页
     */
    handleCurrentChange(val) {
      this.page.page = val;
      this.getTabList();
    },
    /**
     * 表格数据查询接口
     */
    getTabList() {
      assessment.respSummaryFindByPage(this.formInline, this.page).then(res => {
        this.loading = false;
        if (res.infoCode == 200) {
          this.tableList = res.data.list;
          this.page.total = res.data.total;
        } else {
        }
        console.log(res);
      });
    },
    handleEdit(row){
      this.dialogFormVisible=true
      this.lsjform.id=row.ID
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          assessment.respSummaryUpdate(this.lsjform).then(res=>{
            if (res.infoCode==200) {
              this.resetForm("lsjform")
              this.$message.success(res.msg)
              this.getTabList();
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogFormVisible = false;
    },


      /**
       * 查询可选年分
       */
      findByYear(type){
        management.responsibilityFindByYear(type).then(res => {
          if (res.infoCode == 200) {
          this.dateyear = res.data;
          if(this.dateyear !=null){
            this.formInline.year= this.dateyear[0]
            this.search();

          }
        }
      });
      }




  },
  created() {
  this.findByYear('page');
  }
};
</script>
<style lang="scss">
.managementList {
  .el-progress__text {
    width: 37px;
  }
}
</style>
