<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="8">
          <el-form-item label="考核等级">
            <el-select class="wdh" v-model="formInline.khdj" placeholder="考核等级:">
              <el-option :key="item.index" :label="item" :value="item" v-for="item in khdjList"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

          <el-col :span="30">
            <el-form-item class="fourLabel searchRadio" style="margin-bottom: 10px;" label="盟市名称">
              <el-radio-group v-model="formInline.shiAreaCode"  @change="onRadioChange" >
                <el-radio :label="item.areaCode" :key="item.areaCode" v-for="item in radioList">{{item.orgName}}</el-radio>
              </el-radio-group>
            </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 style="height: 60px;">
      <el-col :span="2">
        <el-button type="primary" class="outButton" @click="theImport"><i class="iconfont icondaochu" style="margin-right: 5px;"></i>导出</el-button>
      </el-col>
    </el-row>


    <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="考核评分">
            <el-table-column align="center" label="盟市自评分值" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{scope.row.ZPBM_SCORE}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="省级牵头分值" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{scope.row.QTBM_SCORE}}</span>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              label="总分值"
              sortable
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span>{{scope.row.TOTAL_SCORE}}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="等级"
              sortable
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span>{{scope.row.PJ}}</span>
              </template>
            </el-table-column>
          </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>
              <el-tooltip class="item" effect="light" content="修改" placement="top">
                <el-button
                  v-if="scope.row.TBJD==100"
                  type="primary"
                  size="small"
                  class="button"
                  @click.stop="handleEdit(scope.row)">
                  <i class="tableIcon iconfont iconedit"></i>
                </el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="light" content="导出" placement="top">
                <el-button
                  v-if="scope.row.TBJD==100"
                  type="primary"
                  size="small"
                  class="button"
                  @click.stop="handleEdit(scope.row)">
                  <i class="tableIcon iconfont icondaochu"></i>
                </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-select class="wdh" v-model="lsjform.pj" placeholder="考核等级:">
                <el-option :key="item.index" :label="item" :value="item" v-for="item in khdjList"></el-option>
              </el-select>
            </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>

    <el-dialog title="查看" :visible.sync="dialogFormFind" width="30%" class="lsjbhyj">
      <el-form :model="lsjform" size="mini" :rules="rules" ref="lsjform">
        <el-row>
          <el-col :span="24">
            <el-form-item label="考核等级">
              <el-input
                disabled
                type="text"
                v-model="lsjform.pj"
                ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item  label="等级说明">
              <el-input
                disabled
                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="resetQx" 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";
import {downloadExcel } from "@/api/index";
export default {
  data() {
    return {
      excelDownloadDataFile: `${downloadExcel}`,
      radioList:{},
      formInline: {
        year: "",
        source: "20",
        shiAreaCode:"",
        khdj:""
      },
      dateyear: [],
      khdjList:[],
      tableList: [],
      loading: true,
      listLoading: false,
      paginationShow: true,
      page: {
        page: 1,
        size: 10,
        total: 0
      },
      customColor: "#409eff",
      dialogFormVisible: false,
      dialogFormFind: 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: {


    /**
     * 盟市列表
     */
    onRadioChange(){
      this.search();
    },


    /**
     * 列表导出
     */
    theImport(){
      const data = JSON.parse(window.localStorage.getItem("userInfo"));
      window.location.href=this.excelDownloadDataFile+"/downloadSummary?year="+this.formInline.year +"&areaCode="+data.areaCode+"&source="+this.formInline.source+"&shiAreaCode="+this.formInline.shiAreaCode+"&khdj="+encodeURI(this.formInline.khdj);
    },


    /**
     * 查看
     */
    handleSee(row){
      this.dialogFormFind=true
      this.lsjform.pj=row.PJ
      this.lsjform.pjExplain=row.PJ_EXPLAIN
    },

    /**
     * 取消
     */
    resetQx(){
      this.dialogFormFind=false
    },




    /**
     * 查询按钮
     */
    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
      this.lsjform.pj=row.PJ
      this.lsjform.pjExplain=row.PJ_EXPLAIN
    },


    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();

          }
        }
      });
      },

      //获取省市
      getShengShiList(){
        management.getDataTree().then(res => {
        this.radioList=res.data;
        this.radioList[0].orgName='全部';
        console.log("获取省市",this.radioList);
      });
      },



  },
  created() {
  this.findByYear('page');
  this.getShengShiList();
  this.khdjList.push("优秀");
  this.khdjList.push("良好");
  this.khdjList.push("合格");
  this.khdjList.push("不合格");
  }
};
</script>
<style lang="scss">
.managementList {
  .el-progress__text {
    width: 37px;
  }
}
</style>
