<template>
  <div class="container-accountability selfAuditList">
    <el-form :model="formInline" :inline="true" class="search-bm-boder">
      <!-- <el-form-item label="考核年度:" label-width="72px">
        <el-select v-model="formInline.year" placeholder="请选择" class="inputCompatible" clearable>
          <el-option
            v-for="(item,index) in years"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="评分标准:" class="itemStyle" label-width="72px">
        <el-input v-model="formInline.taskName" clearable class="inputCompatible"></el-input>
      </el-form-item>
      <el-form-item label="状态:" label-width="44px">
        <el-select v-model="formInline.status" placeholder="请选择" clearable class="inputCompatible">
          <el-option
            v-for="item in zt"
            :key="item.ID"
            :label="item.NAME"
            :value="item.ID"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="牵头部门:" label-width="72px">
        <!-- <el-input v-model="formInline.qtbm" clearable class="inputCompatible"></el-input> -->
        <el-select placeholder="请选择" v-model="formInline.qtbm" clearable class="inputCompatible">
          <el-option v-for="item in cityPartData" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <div class="search-button">
          <span class="search-line"></span>
          <div class="search-select" @click="searchShowMoreBool = !searchShowMoreBool">
            更多条件
            <i class="el-icon-arrow-up" v-show="searchShowMoreBool"></i>
            <i class="el-icon-arrow-down" v-show="!searchShowMoreBool"></i>
          </div>
          <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-row v-show="searchShowMoreBool">
        <el-form-item label="配合部门:" label-width="72px">
          <!-- <el-input v-model="formInline.phbm" clearable class="inputCompatible"></el-input> -->
          <el-select placeholder="请选择" v-model="formInline.phbm" clearable class="inputCompatible">
            <el-option v-for="item in cityPartData" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-row>
    </el-form>
    <el-row class="addBtnBg">
      <el-button type="primary" size="small" class="iconfont icondaochu11" @click="reportFun">导出</el-button>
    </el-row>
    <div style="color: red;font-size: 14px;margin-top: 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>
    <el-table
      :data="list"
      v-loading="loading"
      border
      stripe
      highlight-current-row
      style="margin-top:10px;"
    >
      <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="考核年度" sortable :show-overflow-tooltip="true" min-width='95'>
        <template slot-scope="scope">
          <span>{{scope.row.year}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="评分标准"
        sortable
        :show-overflow-tooltip="true"
        min-width='95'
      >
        <template slot-scope="scope">
          <span>{{scope.row.khrwpfbz}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="nyfz"
        sortable
        label="农业分值"
        :show-overflow-tooltip="true"
        min-width='95'
      ></el-table-column>
      <el-table-column
        align="center"
        prop="fnyfz"
        sortable
        label="非农业分值"
        min-width='105'
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column align="center" label="市牵头部门" sortable :show-overflow-tooltip="true" min-width='120'>
        <template slot-scope="scope">
          <span>{{scope.row.cityQtbm}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="市配合部门" sortable :show-overflow-tooltip="true" min-width='120'>
        <template slot-scope="scope">
          <span>{{scope.row.cityPhbm}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="考核得分" sortable :show-overflow-tooltip="true" min-width='95'>
        <template slot-scope="scope">
          <span>{{scope.row.score}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态" sortable :show-overflow-tooltip="true">
        <template slot-scope="scope">
<!--          <span>{{scope.row.statusValue}}</span>-->
          <span v-if='scope.row.status == 10'>未录入</span>
          <span v-if='scope.row.status == 20'>已录入</span>
          <span v-if='scope.row.status == 30'>已提交</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" 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="go_details(scope.row)"
            ></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="驳回" placement="top" v-if="scope.row.status==30">
            <el-button
              type="primary"
              size="small"
              class="iconfont iconbohui operate_edit_btn"
              @click.stop="editFun(scope.row,'20')"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="pag-right clearFix" v-if="paginationShow">
      <el-pagination class='right' :current-page.sync="limit.page" :page-size="limit.size" :page-sizes="[10,20,30,40]"
          :total="limit.total" @current-change="handleCurrentChange" @size-change="handleSizeChangeTask"
          layout="total, sizes, prev, pager, next, jumper" v-if="paginationShow">
      </el-pagination>
    </div>
    <div style="text-align: center;margin-top:10px" v-if="$route.query.from == 'cityLook'">
      <el-button type="primary" size="small" class="iconfont iconfanhui" @click="go_index()">返回</el-button>
    </div>
  </div>
</template>
<script>
import { getTabList,getStatus,updateStatus } from "@/api/headResponsibility/selfAudit/index.js"
import * as management from "@/api/headResponsibility/assessmentTaskQuery";
import { business } from "@/api/index";
export default {
  data() {
    return {
      curServer: `${business}`,
      searchShowMoreBool: false,
      formInline: {
        year: this.$route.query.year,
        status:"",
        taskName:"",
        qtbm: '',
        phbm: '',
        bilityid: this.$route.query.bilityid,
        areaCode: this.$route.query.areaCode,
        type: 20
      },
      timedata:null,
      zt:[],
      years:[],
      list: [],
      loading: false,
      paginationShow: true,
      limit: {
        page: 1,
        size: 10,
        total: 0
      },
      cityPartData: []
    };
  },
  created() {
    this.commonFun()
    // this.get_year();
    this.getAllPart()
    this.get_List()
    this.get_status()
  },
  methods: {
    async editFun(row,state){
      let data={
        id:row.id,
        status:state,
        type:"20",
        year:row.year
      }
      let res= await updateStatus(data)
      if (res && res.infoCode === 200) {
        this.$message.success("操作成功");
        this.search()
        return;
      }
      this.$message.error("操作失败");
    },
    //返回
    go_index() {
      this.$router.back(-1);
    },
    commonFun() {
      if(this.formInline.year) {
        this.ksjstime();
      }else {
        this.timedata = null
      }
    },
    reportFun() {
      if(this.formInline.year) {
        window.location.href=`${this.curServer}examinationExcel/exportAreaExcel?areaCode=${this.formInline.areaCode}&phbm=${this.formInline.phbm}&qtbm=${this.formInline.qtbm}&year=${this.formInline.year}&tag=2`
      }else {
        this.$message({
          message: '请选择考核年度',
          type: "warning",
          duration: 2000
        });
      }
    },
    getAllPart() {
      management.cityDeptName('0').then(res => {
        if(res.infoCode == 200) {
          this.cityPartData = res.data
        }else {
          this.$message({
            type: 'error',
            message: res.msg,
            duration: 2000
          })
        }
      })
    },
    //获取考核开始结束时间
    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
          })
        }
      })
    },
    //状态
    get_status(){
      getStatus().then(res=>{
        if(res.infoCode == 200){
          this.zt = res.data
          this.zt.forEach(item=>{
            if(item.NAME == '已上报'){
              item.NAME = '已提交'
            }
          })
        }else {
          this.$message({
            type: 'error',
            message: res.msg,
            duration: 2000
          })
        }
      }).catch(err=>{
        console.log(err)
      })
    },
    //加入查询条件
    search(){
      this.commonFun()
      this.paginationShow = false
      this.handleCurrentChange(1)
			this.$nextTick(function () {
			  this.paginationShow = true;
			})
    },
    reset() {//重置
      this.formInline = {
        year: this.$route.query.year,
        status:"",
        taskName:"",
        qtbm: '',
        phbm: '',
        bilityid: this.$route.query.bilityid,
        areaCode: this.$route.query.areaCode,
        type: 20
      }
      this.commonFun()
      this.get_List()
    },
    //获取列表信息
    get_List() {
      this.loading = true
      getTabList(this.formInline,this.limit)
        .then(res => {
          if (res.infoCode == 200) {
            this.list = res.data.list;
            this.limit.total = res.data.total
          }else {
            this.$message({
              type: 'error',
              message: res.msg,
              duration: 2000
            })
          }
          this.loading = false
        })
    },
    //跳转到详情页
    go_details(row) {
      console.log;
      this.$router.push({
        path: "/accountability/cityCheckResultDetail",
        query: {
          areaCode: row.areaCode,
          taskId: row.taskId,
          id: row.id
        }
      });
    },
    handleCurrentChange(val) {
      this.limit.page = val
      this.get_List()
    },
    handleSizeChangeTask(val) {
      this.limit.size = val
      this.get_List()
    },
    // 时间格式化函数
    dateFormat(time) {
      if (time) {
        var day = time.split("T");
        //获取日期部分的年月日
        var days = day[0].split("-");
        return days[0] + "-" + days[1] + "-" + days[2];
      } else {
        return "";
      }
    }
  }
};
</script>

<style lang='scss'>
.selfAuditList {
  // .itemStyle .el-form-item__label{
  //     line-height: 20px;
  // }
  .el-form-item {
    margin-bottom: 12px;
  }
  .pad10 {
    padding-left: 15px;
  }
}
</style>
