<template>
  <div class="table_box">
    <div class="right-header">
      <el-row class="top_search_nav">
        <div>
          <el-radio-group v-model="tabPosition" style="" @change="getClearData" v-loading="loadingGroup">
            <el-radio-button label="公示列表">公示列表</el-radio-button>
            <el-radio-button label="通过列表">通过列表</el-radio-button>
            <el-radio-button label="审核列表">审核列表</el-radio-button>
            <el-radio-button label="驳回列表">驳回列表</el-radio-button>
          </el-radio-group>
        </div>
      </el-row>
    </div>
    <!-- 可申请时间 -->
    <div class="right-header">
      <div>
        <span style="margin-right:20px;">可申请时间：</span>
        <el-date-picker v-model="time" type="daterange" value-format="yyyy-MM-dd 00:00:00" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
        <el-button type="primary" style="margin-left:20px;" @click="onchange" :disabled="disabled">修 改</el-button>
      </div>
    </div>
    <div class="right-main">
      <div
        style="
          box-shadow: 0px 0px 10px 2px rgb(153 153 153 / 20%);
          margin-top: 20px;
          padding: 16px 16px 0 16px;
          background: #fff;
        "
      >   
        <div class="totalnum">
          <div class="circle"></div>
          <div class="num">公示数量：{{shownum}}条</div>
          <div class="num">通过数量：{{passnum}}条</div>
          <div class="num">审核数量：{{checknum}}条</div>
          <div class="num">驳回数量：{{rejectnum}}条</div>
        </div>
        <div style="height:10px;">

        </div>
        <Tables
          v-loading="loadingTable"
          :header="headerName"
          :data="tableData"
          :columnWidths="columnWidths"
          :slotColumns="slotColumns"
        >

          <el-table-column :resizable="false" align="center" label="序号" type="index" width="60" />
          <template width="160px" slot="coopName" slot-scope="scope">
            <div>{{ scope.row.name}}</div>
          </template>
          <template width="160px" slot="legalRepresent" slot-scope="scope">
            <span>{{ scope.row.person}}</span>
          </template>
          <template width="160px" slot="showTime" slot-scope="scope">
            <span>{{ scope.row.createTime | formatTime }}</span>
          </template>
          <template width="160px" slot="formtype"  slot-scope="scope">
            <span>{{ scope.row.key=='apply'?'申报表':'监测表'}}</span>
          </template>
          <template slot="oprate">
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  v-if="tabPosition == '公示列表'" @click="lookpassFun(scope.row)" type="text" size="small" v-loading="btnLoading"
                  ><i class="line-icon line-edit-icon"></i>查看
                </el-button>
                <el-button
                  v-if="tabPosition == '公示列表'" @click="ShowFun(scope.row)" type="text" size="small" class="edit-btn"
                  ><i class="line-icon line-edit-icon"></i>取消公示
                </el-button>
                <el-button
                  v-if="tabPosition == '通过列表'" @click="lookpassFun(scope.row)" type="text" size="small" v-loading="btnLoading"
                  ><i class="line-icon line-edit-icon"></i>查看
                </el-button>
                <el-button
                  v-if="tabPosition == '通过列表' && scope.row.status == 1 && scope.row.key =='apply' " @click="addFun(scope.row)" type="text" size="small" v-loading="btnLoading"
                  >
                  <i class="line-icon line-edit-icon"></i>添加公示
                </el-button>
                <el-button
                  v-if="tabPosition == '通过列表' && scope.row.status == 0 || tabPosition == '通过列表' && scope.row.key =='monitor'" type="text" size="small" v-loading="btnLoading"
                  >
                  <i class="line-icon line-edit-icon"></i><span style="color:#CCCCCC;cursor:not-allowed;">添加公示</span>
                </el-button>
                <el-button
                  v-if="tabPosition == '审核列表'" @click="looklistFun(scope.row)" type="text" size="small" v-loading="btnLoading"
                  ><i class="line-icon line-edit-icon"></i>查看
                </el-button>
                <!-- <el-button
                  v-if="tabPosition == '审核列表'" @click="lookpassFun(scope.row)" type="text" size="small" v-loading="btnLoading"
                  ><i class="line-icon line-edit-icon"></i>查看
                </el-button> -->
                <el-button
                  v-if="tabPosition == '审核列表'" @click="checklistFun(scope.row)" type="text" size="small" v-loading="btnLoading"
                  ><i class="line-icon line-edit-icon"></i>审核
                </el-button>
                <el-button
                  v-if="tabPosition == '驳回列表'" @click="rejectlistFun(scope.row)" type="text" size="small" v-loading="btnLoading"
                  ><i class="line-icon line-edit-icon"></i>已驳回
                </el-button>
              </template>
            </el-table-column>
          </template>
        </Tables>
      </div>
      <!--分页-->
      <div style="text-align: center" class="pagination">
        <page-nation
          :total="totals"
          @pageChange="pageChange"
          :defaultPage.sync="currentPage"
          :pageSizes="pageSizes"
        ></page-nation>
      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="showVisible"
      :close-on-click-modal="false"
      width="30%">
      <span>取消公示</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showVisible = false">取 消</el-button>
        <el-button type="primary" @click="removeShowFun" :loading="btntrueloading">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="showaddVisible"
      :close-on-click-modal="false"
      width="30%">
      <span>添加公示</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showaddVisible = false">取 消</el-button>
        <el-button type="primary" @click="addShowFun" :loading="btntrueloading">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 待审核 -->
    <checkflowing :dataObj="checkingObj"></checkflowing>
    <!-- 已驳回 -->
    <rejected :dataObj="rejectedObj"></rejected>
    <!-- 查看申报表文件 -->
    <applyfiledialog :dataObj="applyfileObj"></applyfiledialog>
    <!-- 查看监测表文件 -->
    <checkfiledialog :dataObj="checkfileObj"></checkfiledialog>
    <!-- 公示/通过查看 -->
    <checkdialog :dataObj="showObj"></checkdialog>
  </div>
</template>

<script>
import pageNation from "../../components/common/PageNation.vue";
import Tables from "../../components/common/Table.vue";
import checkflowing from "./dialog/checkflowing.vue"
import rejected from "./dialog/rejected.vue"
import { year_day } from "@/units/tool";
import applyfiledialog from "../cooperative/dialog/applyfiledialog.vue"
import checkfiledialog from "../cooperative/dialog/checkfiledialog.vue"
import checkdialog from "./dialog/checkdialog.vue"
import { 
    // 按照状态获取审核列表
    getcheckStatus,
    // 取消公示
    deleteShow,
    // 添加公示
    postaddShow,
    // 获取权限
    getAuth,
    // 获取时间限制规则
    gettimeLimit,
    // 改变时间规则
    changetimeLimit
    } from "../../apis/modules/coopapproval.js";
import { 
    // 获取公示列表
    getShowlist
    } from "../../apis/modules/cooperative.js";
import Applyfiledialog from '../cooperative/dialog/applyfiledialog.vue';
export default {
  name:'coopapproval',
  filters: {
    formatTime(v) {
      return year_day(v);
    },
    formatProposer(val) {
      return proposerType[val];
    },
    formatStatus(val) {
      return stateMap[val];
    },
  },
  watch:{
    // 监听时间是否改变
    "time":function (nv,ov) {
      if (nv !== ov) {
        this.disabled = false
      }
    }
  },
  data() {
    return {
      // 按钮是否加载
      btntrueloading:false,
      // 时间改变修改
      disabled:true,
      //表单附加弹框
      applyfileObj:{},
      checkfileObj:{},
      showObj:{},
      addUserid:'',
      // 时间
      time: [],
      showVisible: false,
      showaddVisible:false,
      tabPosition: "公示列表",
      reviewList: "",
      detailDialog: false,
      dialogreview: false,
      tableData: [],
      columnWidths: { state: "100px", releaseTime: "160px" }, //控制某一列的宽度，设置对应字段即可
      slotColumns: [
        "coopName",
        "legalRepresent",
        "showTime",
        "formtype"
      ], //多个灵活调用插槽
      headerName: {
        coopName: "专业合作社名称",
        legalRepresent: "法人代表",
        showTime: "公示时间",
        formtype: "表单类型"
      },
      width:'0',
      dataObj: {},
      checkingObj:{},
      rejectedObj:{},
      pageSizes: [10, 30, 50, 120], //控制每页显示的条数
      currentPage: 1,
      totals: 1,
      pageSize: 10,
      loadingTable: false, //loadin表格加载
      btnLoading: false,
      loadingGroup: false,
      token:'',
      // 权限数组
      auth:[],
      // 总数
      shownum:0,
      passnum:0,
      checknum:0,
      rejectnum:0,
    };
  },
  components: {
    pageNation,
    Tables,
    checkflowing,
    rejected,
    Applyfiledialog,
    applyfiledialog,
    checkfiledialog,
    checkdialog
  },
  mounted() {
    this.slotColumns = ["coopName","legalRepresent","showTime"]
    this.headerName = {coopName: "专业合作社名称",legalRepresent: "法人代表",showTime: "公示时间"}
    this.token = localStorage.getItem('token')
    // 获取用户权限
    this.getuserAuth()
    // 公示列表
    this.getShowlistData()
    // 获取时间限制规则
    this.gettime()
    // 获取总数
    this.getTotalNum()
  },
  methods: {
    // 获取时间限制规则
    gettime(){
      gettimeLimit({}).then((res)=>{
        if (res.status == 0) {
          JSON.parse(res.data).forEach((item,index) => {
            this.time.push(item.value)
          });
        }
      })
    },
    // 更改时间限制规则
    onchange(){
      if (this.time == null) {
        this.$message({
          message: '请填写时间',
          type: 'warning'
        });
        return
      }
      let data = {
        startTime:this.time[0],
        endTime:this.time[1]
      }
      changetimeLimit(data).then((res)=>{
        if (res.status == 0) {
          this.$message({
            message: '更改时间成功',
            type: 'success'
          });
          this.disabled = true
        }
      })
    },
    // 获取用户权限
    getuserAuth(){
      let param = {
        token:this.token
      }
      getAuth(param).then((res)=>{
        if (res.status == 0) {
          this.auth = res.data
        }
      })
    },
    //公示列表数据 
    getShowlistData() {
        this.loadingTable = true;
        let params = {
          page:this.currentPage,
          pageSize: this.pageSize
        }
        getShowlist(params).then((res) => {
          this.tableData = res.data.items
          this.totals = res.data.total
          this.loadingTable = false;
        });
    },
    getTotalNum(){
        this.loadingTable = true;
        getShowlist({}).then((res) => {
          this.shownum = res.data.total
          this.loadingTable = false;
        })
        getcheckStatus({},2).then((res)=>{
          this.checknum = res.data.total
          this.loadingTable = false;

        })
        getcheckStatus({},1).then((res)=>{
          this.passnum = res.data.d.total
          this.loadingTable = false;

        })
        getcheckStatus({},-1).then((res)=>{
          this.rejectnum = res.data.total
          this.loadingTable = false;

        })
    },
    // 按照状态获取公示、通过、审核、驳回列表
    // 获取审核列表数据
    getcheckStatusData(){
      this.loadingTable = true;
      if (this.tabPosition == '审核列表') {
        let num = 2
        let params = {
          page: this.currentPage,
          pageSize: this.pageSize,
        };
        getcheckStatus(params,num).then((res)=>{
          let formdata = res.data.items.map((item,index) => {
            let formid = res.data.items[index]
            return formid
          })
          this.totals = res.data.total
          this.tableData = formdata
          this.loadingTable = false;
        })
      }else if (this.tabPosition == '通过列表') {
        let num = 1
        let params = {
          page: this.currentPage,
          pageSize: this.pageSize,
        };
        getcheckStatus(params,num).then((res)=>{
          this.totals = res.data.d.total
          this.tableData = res.data.d.items
          this.loadingTable = false;
        })
      }else if (this.tabPosition == '驳回列表') {
        let num = -1
        let params = {
          page: this.currentPage,
          pageSize: this.pageSize,
        };
        getcheckStatus(params,num).then((res)=>{
          this.totals = res.data.total
          let formdata = res.data.items.map((item,index) => {
            let formid = res.data.items[index]
            return formid
          })
          this.tableData = formdata
          this.loadingTable = false;
        })
      }else{
        this.getShowlistData()
      }
    },
    // 切换点击
    getClearData() {
      this.currentPage = 1
      this.getcheckStatusData()
      if (this.tabPosition == '公示列表') {
        this.slotColumns = ["coopName","legalRepresent","showTime"]
        this.headerName = {coopName: "专业合作社名称",legalRepresent: "法人代表",showTime: "公示时间"}
      }else if (this.tabPosition == '通过列表') {
        this.slotColumns = ["coopName","legalRepresent","showTime","formtype"]
        this.headerName = {coopName: "专业合作社名称",legalRepresent: "法人代表",showTime: "通过时间",formtype: "表单类型"}
      }else if (this.tabPosition == '审核列表') {
        this.slotColumns=["coopName","legalRepresent","showTime","formtype"]//多个灵活调用插槽
        this.headerName={coopName: "专业合作社名称",legalRepresent: "法人代表",showTime: "提交时间",formtype: "表单类型"}
      }
      else{
        this.slotColumns=["coopName","legalRepresent","showTime","formtype"]//多个灵活调用插槽
        this.headerName={coopName: "专业合作社名称",legalRepresent: "法人代表",showTime: "驳回时间",formtype: "表单类型"}
      }
    },
    ShowFun(rowObj){
      this.showVisible = true
      this.addUserid = rowObj.userId
    },
    addFun(rowObj){
      this.showaddVisible = true
      this.addUserid = rowObj.userId
    },
    // 取消公示
    removeShowFun() {
      this.btntrueloading = true
      deleteShow({},this.addUserid).then((res)=>{
        const {status} =  res
        if (status == 0) {
          this.showVisible = false
          // 总数
          this.getTotalNum()
          this.getShowlistData()
          this.$message({
            message: '取消成功',
            type: 'success'
          });
          this.btntrueloading = false
        }
      })
    },
    // 添加公示
    addShowFun(){
      this.btntrueloading = true
      postaddShow({},this.addUserid ).then((res)=>{
        const {status} =  res
        if (status == 0) {
          this.showaddVisible = false
          // 总数
          this.getTotalNum()
          this.getcheckStatusData()
          this.$message({
            message: '添加成功',
            type: 'success'
          });
          this.btntrueloading = false
        }
      })
    },
    // 公示/通过查看按钮
    lookpassFun(rowObj){
      this.showObj = {
        detailDialog: true,
        userId:rowObj.userId,
        name:rowObj.name,
        person:rowObj.person
      }
    },
    // 审核查看按钮点击
    looklistFun(rowObj){
      if (rowObj.key == "apply") {
        this.applyfileObj = {
          detailDialog: true,
          name:rowObj.name,
          person:rowObj.person,
          param:JSON.parse(rowObj.formParam.param),
          fileParam:rowObj.fileParam,
        }
      }else{
        // this.checkfileObj = {
        //   detailDialog: true,
        //   param:JSON.parse(rowObj.formParam.param),
        //   fileParam:rowObj.fileParam,
        //   fn:()=>{
        //     this.getTotalNum()
        //   }
        // }
        this.showObj = {
          detailDialog: true,
          userId:rowObj.userId,
          name:rowObj.name,
          person:rowObj.person
        }
      }
    },
    // 待审核按钮点击
    checklistFun(rowObj){
      // 判断状态选择不同的checkflow
      this.btnLoading = true;
      this.loadingTable = true;
      // 待审核
      this.checkingObj = {
          detailDialog: true,
          ...rowObj,
          param:JSON.parse(rowObj.formParam.param),
          paramInfo:JSON.parse(rowObj.formParam.paramInfo),
          fn: () => {
            this.getcheckStatusData();
          },
          totalfn:() => {
            this.getTotalNum()
          },
          auth:this.auth
      };
      this.btnLoading = false;
      this.loadingTable = false;
    },
    // 已驳回按钮
    rejectlistFun(rowObj){
      // 判断状态选择不同的checkflow
      this.rejectedObj = {
          ...rowObj,
          param:JSON.parse(rowObj.formParam.param),
          paramInfo:JSON.parse(rowObj.formParam.paramInfo),
          detailDialog: true
      };
    },
    //显示不同条的数据 
    pageChange(pageNum) {
      this.currentPage = pageNum.page;
      this.pageSize = pageNum.pageSize;
      this.getcheckStatusData()
    },
  },
};
</script>
<style lang="scss" scoped>
.totalnum{
  padding: 10px 0 20px 0;
  border-bottom: 1px solid #ccc;
  display: flex;
  .circle{
    margin: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #13aa51;
  }
  .num{
    padding-right: 20px;
  }
}
.el-dialog {
  div {
    padding: 10px 10px;
  }
}
</style>
