<template>
  <div class="container-accountability managementList">
    <el-form :model="formInline" :inline="true" class="search-bm-boder">
      <el-form-item label="考核年度:">
        <!--        <el-select v-model="formInline.year" placeholder="请选择考核年度" clearable class="inputCompatible">-->
<!--          <el-option :key="item.index" :label="item" :value="item" v-for="item in dateyear"></el-option>-->
<!--        </el-select>-->
        <el-date-picker
                type="year"
                v-model="formInline.year"
                class="inputCompatible"
                value-format="yyyy"
                placeholder="请选择考核年度"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="地区:">
        <!-- <el-input v-model="formInline.areaCodeName" placeholder="请输入地区"></el-input> -->
        <el-select v-model="formInline.areaCode" placeholder="请选择地区" clearable class="inputCompatible">
            <el-option :key="item.dictCode" :label="item.dictName" :value="item.dictCode" v-for="item in areaCodeOption"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="类型:">      
          <el-select v-model="formInline.areaCodeType" placeholder="请选择类型" clearable class="inputCompatible">
            <el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in areaCodeTypeOption"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item>
        <div class="search-button">
            <span class="search-line"></span>
            <el-button type="primary" size="small" class="iconfont iconchaxun" @click="search">查询</el-button>
            <el-button type="primary" size="small" class="iconfont iconzhongzhi" @click="reset">重置</el-button>
        </div>
      </el-form-item>
    </el-form>
    <el-row class="addBtnBg">
        <el-button type="primary" size="small" class="iconfont iconneimengicon-2" @click="selIssue">抽查分发</el-button>
    </el-row>
    <div style="color: red;font-size: 14px;margin-top: 10px;margin-bottom: 10px;">
      <span>考核时间：</span>
      <span v-if="timedata">{{dateFormat(timedata.sjPhbmStartTime) }}</span> <span v-if="timedata"> 至 </span><span v-if="timedata">{{ dateFormat(timedata.sjPhbmEndTime)}}</span>
    </div>
    <!-- @row-click="tableRowClick" -->
    <el-table
      :data="tableList"
      v-loading="loading"
      border
      stripe
      highlight-current-row
      @selection-change="selectionChange"
    >
      <el-table-column type="selection" align="center" width="55" :selectable="selectable"></el-table-column>
      <el-table-column align="center" label="序号" width="60">
        <template slot-scope="scope">
          <span>{{scope.$index+1}}</span>
        </template>
      </el-table-column>
      <el-table-column prop='year' align="center" label="考核年度" sortable :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop='areaCodeName' align="center" label="地区" sortable :show-overflow-tooltip="true"></el-table-column>
      <el-table-column align="center" label="类型" sortable :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{scope.row.areaCodeType == 'fnyq' ? '非农业区' : '农业区'}}</span>
        </template>
      </el-table-column>
      <el-table-column  align="center" label="总分" sortable :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{scope.row.areaCodeType == 'fnyq' ? scope.row.fnyfz : scope.row.nyfz}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="完成分数" sortable :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{scope.row.areaCodeType == 'fnyq' ? scope.row.taskFnyfz : scope.row.taskNyfz}}</span>
        </template>
      </el-table-column>
      <el-table-column prop='zpdfOrKhdfOrCcdf' align="center" label="考核得分" sortable :show-overflow-tooltip="true"></el-table-column>
      <el-table-column align="center" label="完成进度" sortable :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{scope.row.wcjd}}%</span>
        </template>
      </el-table-column>
      <el-table-column prop='ifkhff' align="center" label="抽查分发" sortable :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span v-if="scope.row.ifccff == 'yes'">已抽查</span>
          <span v-if="scope.row.ifccff == 'no'">未抽查</span>
        </template>
      </el-table-column>
      <el-table-column prop='updateTime' align="center" label="最后更新时间" sortable :show-overflow-tooltip="true"></el-table-column>
      <el-table-column align="center" label="状态" sortable :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{scope.row.statusValue}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="45" align="center">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="light" content="查看" placement="top">
            <el-button
              type="primary"
              size="small"
              class="iconfont iconchakan2 operate_show_btn"
              @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>
  </div>
</template>
<script>
import * as management from "@/api/headResponsibility/assessmentTaskQuery";
import { khendtime } from "@/api/headResponsibility/selfAudit"
import { userAreaCodeTree } from "@/api/login/login"
export default {
  data() {
    return {
      selList: [],
      timedata:null,
      formInline: {
        year:"",
        type: 20,
        areaCodeName: '', 
        areaCodeType: ''
      },
      dateyear: [],
      tableList: [],
      loading: false,
      listLoading: false,
      paginationShow: true,
      page: {
        page: 1,
        size: 10,
        total: 0
      },
      areaCodeOption: [],
      areaCodeTypeOption: [
        {
          value: 'nyq',
          label: '农业区'
        },{
          value: 'fnyq',
          label: '非农业区'
        }
      ]
    };
  },
  methods: {
    selectionChange(val) {//列表复选框改变事件
        this.selList=[]
        if (val.length==0) {
            this.selList=[]
        } else {
            val.forEach(item => {
                this.selList.push({
                  areaCode: item.areaCode,
                  bizRespResponsibilityId: item.bilityid,
                  year: item.year,
                  url: '/accountability/selfAudit',
                  itemUrlHaveDone: '/accountability/selfAudit',
                  itemName: `${item.year}年度${item.areaCodeName}考核结果抽查`
                });
            });
        }
    },
    selectable(row, index) {//复选框是否可用
        // if(row.ifccff == 'no' && row.statusValue == '已完成') {
        //     return true
        // }else {
        //     return false
        // }
      if(row.ifccff == 'no') {
        return true
      }else {
        return false
      }
    },
    // 时间格式化函数
    dateFormat(time) {
      if (time) {
        var day = time.split("T");
        //获取日期部分的年月日
        var days = day[0].split("-");
        return days[0] + "-" + days[1] + "-" + days[2];
      } else {
        return "";
      }
    },
    commonFun() {
      if(this.formInline.year) {
        this.ksjstime();
      }else {
        this.timedata = null
      }
    },
    ksjstime(){
      management.findYear(this.formInline.year,1).then(res=>{
        if(res.infoCode == 200){
          if(res.data){
            this.timedata = res.data
          }else {
            this.timedata = null
          }
        }else {
          this.$message({
            type: 'error',
            message: res.msg,
            duration: 2000
          })
        }
      })
    },
    /**
     * 查询按钮
     */
    search(type) {
      this.commonFun()
      this.paginationShow = false;
      // this.handleCurrentChange(1);
      this.getTabList(type)
      this.$nextTick(function() {
        this.paginationShow = true;
      });
    },
    reset() {
      this.formInline = {
        year:"",
        type: 20,
        areaCode:'',
        areaCodeType:''
      }
      this.search()
    },
    selIssue(){//抽查分发
      if(this.selList.length == 0) {
        this.$message({ type: "warning", message: "请选择抽查项",duration: 2000 })
      }else {
        management.selCheck(this.selList)
        .then(res => {
            if (res.infoCode==200) {
              this.$message({
                message: '抽查分发成功',
                type: "success",
                duration: 2000
              });
              this.getTabList()
            } else {
              this.$message({
                message: res.msg,
                type: "error",
                duration: 2000
              });
            }
        });
      }
    },
    /**
     * 表格行内点击事件
     */
    tableRowClick(row, column, event) {
      if (event.label != "操作") {
        this.handleSee(row);
      }
    },
    /**
     * 表格查看按钮
     */
    handleSee(row) {
        this.$router.push({
            path:"/accountability/cityCheckResultSee",
            query:{
                bilityid:row.bilityid,
                areaCode: row.areaCode,
                year: row.year,
                markYear: this.formInline.year,
                from: 'cityLook'
            }
        })
    },
    /**
     * 分页大小
     */
    handleSizeChange(val) {
      this.page.size = val;
      this.getTabList()
    },

    /**
     * 分页第几页
     */
    handleCurrentChange(val) {
      this.page.page = val;
      this.getTabList()
    },
    /**
     * 表格数据查询接口
     */
    getTabList(type) {
      if (type != "start") {//非初始化调用：查询、分页
          sessionStorage.setItem('searchData', JSON.stringify(this.formInline))
          sessionStorage.setItem('pageData', JSON.stringify(this.page))
      } else {//初始化分两种情况，详情页等返回后的初始化，以及第一次进入此菜单的初始化
          if(JSON.parse(sessionStorage.getItem('searchData'))){//详情页返回后，将对应查询条件和分页的字段赋值，页面回显参数
              this.formInline = JSON.parse(sessionStorage.getItem('searchData'))
              this.page = JSON.parse(sessionStorage.getItem('pageData'))
          }else {//第一次进去此菜单时，保存上方默认的data
              sessionStorage.setItem('searchData', JSON.stringify(this.formInline))
              sessionStorage.setItem('pageData', JSON.stringify(this.page))
          }
      }
      this.loading=true
      if(!this.formInline.areaCodeType){
        this.formInline.areaCodeType = null
      }
      management.assessmentList(this.formInline, this.page)
        .then(res => {
            if (res.infoCode==200) {
                this.tableList=res.data.list
                this.page.total=res.data.total
            } else {
              this.$message({
                message: res.msg,
                type: "error",
                duration: 2000
              });
            }
            this.loading = false;
        });
    },

      /**
       * 查询可选年分
       */
      findByYear(type){
        management.responsibilityFindByYear(type).then(res => {
            if (res.infoCode == 200) {
              this.dateyear = res.data;
              // if(!this.$route.query.markYear && this.$route.query.markYear !='') {//没这个参数时
              //   if(this.dateyear !=null){
              //     // this.formInline.year= this.dateyear[0]
              //   }
              // }
            }else {
              this.$message({
                message: res.msg,
                type: "error",
                duration: 2000
              });
            }
        });
      }
  },
  created() {
    // if(this.$route.query.markYear || this.$route.query.markYear == '') {
    //   this.formInline.year = this.$route.query.markYear
    // }
    userAreaCodeTree().then(res => {
      this.areaCodeOption = res.data.subDataDictionarys
    })
    this.search('start');
    this.findByYear('page');
  }
};
</script>
<style lang="scss">

</style>
