<template>
  <div id="electricCard">
    <div class="right">
      <div class="right_header">
        <div class="role_button" :role_button_code="item.role_button_code"  :class="[item.chosen?'botton_top_chosen':'botton_top']" v-for="(item,index) in typeList" @click="typeChange(item.code)" :key="index">{{item.name}}</div>
      </div>
      <div class="right_content">
        <div  v-loading="loading"  element-loading-text="数据加载中"  class="right_content_info"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(3, 30, 57, 0.8)">
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-row :gutter="20">
            <el-col :span="20">
              <div class="grid-content bg-purple">
                <el-form-item v-if="!hasOperation" label="证照名称">
                  <el-input v-model="form.name" placeholder="" clearable></el-input>
                </el-form-item>

                <el-form-item v-if="hasOperation" label="开始时间：">
                  <el-date-picker type="month"   format="yyyy 年 MM 月"    value-format="yyyy-MM"  placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item v-if="hasOperation" label="结束时间：">
                  <el-date-picker type="month"   format="yyyy 年 MM 月"   value-format="yyyy-MM" placeholder="选择日期" v-model="form.date2" style="width: 100%;"></el-date-picker>
                </el-form-item>
<!--                <el-form-item label="配合部门">-->
<!--                  <el-input v-model="form.operationUnit" placeholder="" clearable></el-input>-->
<!--                </el-form-item>-->
              </div>
            </el-col>

            <el-col :span="4">
              <el-form-item class="setSearch">
                <el-button class="role_button" role_button_code="a7fbde48-0228-4896-8af2-3a47a1ba0c67" type="primary" @click="onSubmitSearch">查询</el-button>
                <el-button class="role_button" role_button_code="7ac44236-79a2-4905-85e4-13e5cae09288"  v-if="eletricCurrentId=='1'||eletricCurrentId=='2'" @click="downloadModel()" type="primary">导入模板</el-button>
<!--                <el-button v-if="eletricCurrentId=='1'||eletricCurrentId=='2'" @click="uploadModel()" type="primary">-->
<!--                  导入-->
<!--                  <input  style="display: none" type="file" id="fileExport" @change="handleFileChange" ref="inputer">-->
<!--                </el-button>-->
                <el-upload v-if="eletricCurrentId=='1'||eletricCurrentId=='2'" style="display: inline-block;margin-left:8px"
                           class="upload-demo"
                           action="http://10.81.66.9:9250/ywtb/ywtbLicense_upload"
                           :show-file-list="showList"
                           :onError="uploadError"
                           :onSuccess="uploadSuccess"
                           :beforeUpload="beforeAvatarUpload"
                           :file-list="fileList">
                  <el-button class="role_button" role_button_code="df9dcabf-872c-486c-a7a7-a82b8d3d5f55"   type="primary">点击上传</el-button>
                </el-upload>
                <el-button class="role_button" role_button_code="7ac44236-79a2-4905-85e4-13e5cae09288" v-if="eletricCurrentId=='3'" type="primary" @click="downloadModel()">导入模板</el-button>
                <el-button class="role_button" role_button_code="df9dcabf-872c-486c-a7a7-a82b8d3d5f55" v-if="eletricCurrentId=='3'" type="primary" @click="openFileModel()">导入</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="search_right">
            <span>共有</span>
            <span>{{totalCount}}</span>
            <span>条记录</span>
          </div>
        </el-form>
        <div class="table-area">
          <my-table  :headers="tableHeader" :table-data="tableData" :has-operation="hasOperation">
            <template #selectionBefore>
              <el-table-column
                  type="selection"
                  width="55"
              >
              </el-table-column>

            </template>
            <template #operation="{data}">
              <el-link class="mr-link" type="primary" @click="showDetail(data)">详细报表</el-link>
            </template>
          </my-table>
        </div>
        <ele-pagination v-if="totalCount > 0"  @sizeOrPageChange="sizeOrPageChange" :current-page="currentPage"  :total-count="totalCount" :page-size="pageSize"/>
      </div>
      </div>
    </div>
    <el-dialog title="月度报表" :visible.sync="dialogFormVisible" :width="dialogFormWidth"  :destroy-on-close="true" :top="dialogFormTop">
      <el-form size="middle"  :model="formData" :rules="rules" label-width="240px">
        <el-form-item label="月份：">
            <el-date-picker type="month" placeholder="选择日期"  value-format="yyyy-MM" v-model="formData.INSERT_TIME" style="width: 100%;"></el-date-picker>
        </el-form-item>
          <el-form-item label="调用证照次数：">
              <el-input type="text" v-model="formData.CALL_LICENSE_NUM"></el-input>
          </el-form-item>
          <el-form-item label="实际用证事项数：">
              <el-input type="text" v-model="formData.LICENSE_ITEM_NUM"></el-input>
          </el-form-item>
          <el-form-item label="调用证照种类：">
              <el-input type="text" v-model="formData.CALL_LICENSE_TYPE"></el-input>
          </el-form-item>
          <el-form-item label="“用证清单”调用次数：">
              <el-input type="text" v-model="formData.CALL_CERTIFICATE_NUM"></el-input>
          </el-form-item>
          <el-form-item label="用证清单”调用次数(对比办件库)：">
              <el-input type="text" v-model="formData.CALL_CERTIFICATE_BJK"></el-input>
          </el-form-item>
          <el-form-item label="用证清单”调用次数(符合最新调用需求)：">
              <el-input type="text" v-model="formData.CALL_CERTIFICATE_ZXDY"></el-input>
          </el-form-item>
          <el-form-item label="详细报表：">
              <el-upload
                  class="upload-demo"
                  ref="upload"
                  action="http://10.81.66.9:9250/ywtb/ywtbLicenseYdbb_upload"
                  :limit="1"
                  :onError="uploadMonthError"
                  :onSuccess="uploadMonthSuccess"
                  :beforeUpload="beforeMonthAvatarUpload"
                  :file-list="fileList"
                  :data="uploadData"
                  :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <div slot="tip" class="el-upload__tip">支持扩展名：.rar,.zip,.doc,.docx,.pdf,.jpg...</div>
              </el-upload>
          </el-form-item>

      </el-form>

      <div class="model-btns" >
        <el-button size="small"  @click="saveMonthTable" type="primary" >保存</el-button>
        <el-button size="small"  @click="closeMonthTable" type="primary">关闭</el-button>

      </div>
    </el-dialog>
    <electric-card-table-model :dialog-visible.sync="isModelShow" :searchDate="searchDate" title="月度报表-详情"/>
  </div>
</template>

<script>
import MyTable from "@/components/my-table/MyTable";
import {electricSevenTableHeader, electricTableHeader,electricYearTableHeader} from "@/views/units/local-data";
import ElePagination from "@/components/ele-paga/ElePagination";
import {getWeek, startTime, endTime, getYear} from "@/commomUse";
import {mapEletricCardMutations, mapEletricCardState} from "@/units/map-units";
import ElectricCardTableModel from "@/views/electricCard/c-cpns/ElectricCardTableModel";
import {MessageBox} from "element-ui";
export default {
  name: "ElectricCard",
  components: {ElePagination, MyTable,ElectricCardTableModel},
  data(){
    return{
      showList:false,
      formData: {
        INSERT_TIME:'',
        CALL_LICENSE_NUM:'',
        LICENSE_ITEM_NUM:'',
        CALL_LICENSE_TYPE:'',
        CALL_CERTIFICATE_NUM:'',
        CALL_CERTIFICATE_BJK:'',
        CALL_CERTIFICATE_ZXDY:'',
      },
      uploadData:null,
      rules:[

      ],
      loading:false,
      typeList:[
        {
          id:'1',
          code:'2',
          name:'7日用证量',
          chosen:false,
          role_button_code:'4a159a3e-b0b4-4361-8958-35b217ef2900'
        },
        {
          id:'2',
          code:'1',
          name:'7日制证量',
          chosen:false,
          role_button_code:'a55acd74-1265-4078-b077-be0b3dfe49b1'
        },
        {
          id:'3',
          code:'3',
          name:'月度报表',
          chosen:false,
          role_button_code:'dd8ff54a-3949-4d45-a575-5e424981bca1'
        },
        {
          id:'4',
          code:'4',
          name:'近一年用证量',
          chosen:false,
          role_button_code:'68fa6f3d-2a25-4f12-88bd-1da9f6c9200e'
        },
        {
          id:'5',
          code:'5',
          name:'近一年制证量',
          chosen:false,
          role_button_code:'1cb6368a-db01-4267-8cd8-e310164519e1'
        },
      ],
      currentId:'',
      form: {
        name: '',
        //operationUnit: '',
        date1: '',
        date2: '',
      },
      totalCount:0,
      currentPage:1,
      pageSize:10,
      tableData:[],
      tempData:[
        {
          rn:'1',
          time:'1',
          sjyzsxs:'1',
          dyzzzl:'1',
          dyzzcs:'1',
          yzqddycs:'1',
          yzqddycsdbbjk:'1',
          yzqddycsfhzxdyyq:'1',
        },
        {
          rn:'4',
          time:'4',
          sjyzsxs:'4',
          dyzzzl:'4',
          dyzzcs:'4',
          yzqddycs:'4',
          yzqddycsdbbjk:'4',
          yzqddycsfhzxdyyq:'4',
        },
      ],
      tableHeader:[],
      dialogFormWidth:'50%',
      dialogFormTop:'12vh',
      dialogFormVisible:false,
      hasOperation:true,
      isModelShow:false,
      lastDate:'',
      searchDate:'',
      file:'',
      formatData:'',
      fileList:[]
    }
  },
  computed:{
    ...mapEletricCardState({
      eletricReFresh:'eletricCardRefresh',
      eletricCurrentId:'eletricCardCurrentId',
    }),
    electricTableHeader(){
      return electricTableHeader
    },
    electricSevenTableHeader(){
      return electricSevenTableHeader
    },
    electricYearTableHeader(){
      return electricYearTableHeader
    }
  },
  mounted() {
    this.form.date1 = startTime();
    this.form.date2 = endTime();
    this.form.date1 = '';
    this.form.date2 = '';
    if(this.eletricReFresh){
      this.eletricCardCurrentId('3')
    }
  },
  methods:{
    saveMonthTable(){
      this.$refs.upload.submit();
      //this.dialogFormVisible =false;

    },
    closeMonthTable(){
      this.$refs.upload.clearFiles();
      this.dialogFormVisible =false;

    },
    downloadModel(){
      let url ='';
      if(this.eletricCurrentId=='1'){
        url ='http://10.81.69.64/files/ywtb/2022-03-15至2022-03-22制证明细.xlsx'

      }else if(this.eletricCurrentId=='2'){
        url ='http://10.81.69.64/files/ywtb/2022-03-15至2022-03-22用证明细.xlsx'
      }else{
        url ='http://10.81.69.64/files/ywtb/电子证照月度报表.xlsx'
      }
      const a = document.createElement('a')
      a.href = url;
      a.style.display="none";
      //测试链接console.log(a.href)
      a.download = '证照模板'  // 下载文件的名字
      document.body.appendChild(a)
      a.click();
      document.body.removeChild(a);
    },
    uploadError (response, file, fileList) {
      this.loading=false;
      console.log('上传失败，请重试！',response, file, fileList)
    },
    uploadSuccess (response, file, fileList) {
      console.log('上传文件', response,file, fileList)
      if(response.msg[0].success =='true'){
        this.loading=false;
        MessageBox.alert('上传整改计划成功', '提示', {
          confirmButtonText: '确定'
        });
      }else{
        this.loading=false;
        MessageBox.alert('文件上传失败', '提示', {
          confirmButtonText: '确定'
        });
      }
    },
    // 上传前对文件的大小的判断
    beforeAvatarUpload (file) {
      this.loading=true;
      const extension = file.name.split('.')[1] === 'xls'
      const extension2 = file.name.split('.')[1] === 'xlsx'
      const isLt2M = file.size / 1024 / 1024 < 10
      if (!extension && !extension2) {
        this.loading=false;
        MessageBox.alert('上传模板只能是 xls、xlsx 格式!', '提示', {
          confirmButtonText: '确定'
        });
      }
      if (!isLt2M) {
        this.loading=false;
        MessageBox.alert('上传模板大小不能超过 10MB!', '提示', {
          confirmButtonText: '确定'
        });
      }
      return extension || extension2  && isLt2M
    },

    uploadMonthSuccess (response, file, fileList) {
      console.log('上传文件', response,file, fileList)
      if(response.msg[0].success =='true'){
        this.loading=false;
        MessageBox.alert('上传整改计划成功', '提示', {
          confirmButtonText: '确定'
        });
      }else{
        this.loading=false;
        MessageBox.alert('文件上传失败', '提示', {
          confirmButtonText: '确定'
        });
      }
    },
    // 上传错误
    uploadMonthError (response, file, fileList) {
      console.log('上传失败，请重试！',response, file, fileList)
    },
    // 上传前对文件的大小的判断
    beforeMonthAvatarUpload (file) {
      this.loading=true;
      const extension = file.name.split('.')[1] === 'xls'
      const extension2 = file.name.split('.')[1] === 'xlsx'
      const isLt2M = file.size / 1024 / 1024 < 10
      if (!extension && !extension2) {
        this.loading=false;
        MessageBox.alert('上传模板只能是 xls、xlsx格式!', '提示', {
          confirmButtonText: '确定'
        });
      }
      if (!isLt2M) {
        this.loading=false;
        MessageBox.alert('上传模板大小不能超过 10MB!', '提示', {
          confirmButtonText: '确定'
        });
      }

      this.uploadData = {
        INSERT_TIME:this.formData.INSERT_TIME,
        LICENSE_ITEM_NUM:this.formData.LICENSE_ITEM_NUM,
        CALL_LICENSE_TYPE:this.formData.CALL_LICENSE_NUM,
        CALL_CERTIFICATE_NUM:this.formData.CALL_CERTIFICATE_NUM,
        CALL_CERTIFICATE_BJK:this.formData.CALL_CERTIFICATE_BJK,
        CALL_CERTIFICATE_ZXDY:this.formData.CALL_CERTIFICATE_ZXDY,
      }
      console.log(this.uploadData)
      let promise = new Promise((resolve) => {
        this.$nextTick(function () {
          resolve(extension || extension2&& isLt2M&&true);
        });
      });
      return promise; //通过返回一个promis对象解决
    },
    getlastDate(){
      this.$request({
        url:'/ywtb/selectMaxLicenseDate',
        method:'post',
        data:{
        }
      }).then(response => {
        var dataArr = response.data.msg[0].Rows[0];
        this.lastDate =dataArr.LICENSE_DATE;
        this.changelabel();
        this.onSubmitSearch();
      })
    },
    showDetail(data){
      console.log(data);
      this.searchDate =data.time;
      this.isModelShow = true;
    },
    openFileModel(){
      this.dialogFormVisible =true;
    },
    sizeOrPageChange(page,size){
      this.currentPage = page;
      this.pageSize = size;
      this.onSubmit();
    },
    changelabel(){
      let DateUse =getWeek(this.lastDate,7);
      for(let i=0;i<this.tableHeader.length;i++){
        if(parseInt(this.tableHeader[i].label) > 0&&parseInt(this.tableHeader[i].label) <8){
          this.tableHeader[i].label=DateUse[parseInt(this.tableHeader[i].label) - 1];
        }
      }
    },
    changeYearLabel(){
      let DateUse =getYear();
      for(let i=0;i<this.tableHeader.length;i++){
        if(parseInt(this.tableHeader[i].label) > 0&&parseInt(this.tableHeader[i].label) <13){
          this.tableHeader[i].label=DateUse[parseInt(this.tableHeader[i].label) - 1];
        }
      }
    },
    onSubmit(){
      if(this.eletricCurrentId =='1'||this.eletricCurrentId =='2'){
        this.$request({
          url:'/ywtb/selectYwtbLicenseSevenCountNum',
          method:'post',
          data:{
            "TYPE":this.eletricCurrentId,
            "LICENSE_NAME":this.form.name,
            "PAGESIZE":this.pageSize,
            "PAGEINDEX":this.currentPage
          }
        }).then(response => {
          var dataArr = response.data.msg[0].Rows;
          this.totalCount =response.data.msg[0].TotalRowCount;
          console.log(dataArr)
          console.log(this.totalCount)
          this.tableData = [];
          for(var i=0;i<dataArr.length;i++){
            let temp = {
              name:dataArr[i].LICENSE_NAME,
              unit:dataArr[i].BELONGING_DEPARTMENT,
              totalUseCount:dataArr[i].TOTAL_NUM,
              first:dataArr[i].L0,
              second:dataArr[i].L1,
              third:dataArr[i].L2,
              forth:dataArr[i].L3,
              fifth:dataArr[i].L4,
              sixth:dataArr[i].L5,
              seventh:dataArr[i].L6,
            }
            this.tableData.push(temp);
          }
        })
      }else if(this.eletricCurrentId =='3'){
        this.$request({
          url:'/ywtb/selectYwtbLicenseReportPageList',
          method:'post',
          data:{
            "START_TIME":this.form.date1,
            "END_TIME":this.form.date2,
            "PAGESIZE":this.pageSize,
            "PAGEINDEX":this.currentPage
          }
        }).then(response => {
          var dataArr = response.data.msg[0].Rows;
          this.totalCount =response.data.msg[0].TotalRowCount;
          console.log(dataArr)
          console.log(this.totalCount)
          this.tableData = [];
          for(var i=0;i<dataArr.length;i++){
            let temp = {
              time:dataArr[i].INSERT_TIME,
              sjyzsxs:dataArr[i].LICENSE_ITEM_NUM,
              dyzzzl:dataArr[i].CALL_LICENSE_TYPE,
              dyzzcs:dataArr[i].CALL_LICENSE_NUM,
              yzqddycs:dataArr[i].CALL_CERTIFICATE_NUM,
              yzqddycsdbbjk:dataArr[i].CALL_CERTIFICATE_BJK,
              yzqddycsfhzxdyyq:dataArr[i].CALL_CERTIFICATE_ZXDY,
            }
            this.tableData.push(temp);
          }
        })
      }else{
        let type = '';
        if(this.eletricCurrentId=='4'){
          type = '2';
        }else{
          type = '1';
        }

        this.$request({
          url:'/ywtb/selectYwtbLicenseYearCountNum',
          method:'post',
          data:{
            "TYPE":type,
            "LICENSE_NAME":this.form.name,
            "PAGESIZE":this.pageSize,
            "PAGEINDEX":this.currentPage
          }
        }).then(response => {
          var dataArr = response.data.msg[0].Rows;
          this.totalCount =response.data.msg[0].TotalRowCount;
          console.log(dataArr)
          console.log(this.totalCount)
          this.tableData = [];
          for(var i=0;i<dataArr.length;i++){
            let temp = {
              name:dataArr[i].LICENSE_NAME,
              unit:dataArr[i].BELONGING_DEPARTMENT,
              totalUseCount:dataArr[i].TOTAL_NUM,
              first:dataArr[i].L0,
              second:dataArr[i].L1,
              third:dataArr[i].L2,
              forth:dataArr[i].L3,
              fifth:dataArr[i].L4,
              sixth:dataArr[i].L5,
              seventh:dataArr[i].L6,
              eighth:dataArr[i].L7,
              ninth:dataArr[i].L8,
              tenth:dataArr[i].L9,
              eleventh:dataArr[i].L10,
              twelfth:dataArr[i].L11
            }
            this.tableData.push(temp);
          }
        })
      }
    },
    onSubmitSearch(){
      this.currentPage = 1;
      this.onSubmit();
    },

    typeChange:function(code){
      for(let i=0;i<this.typeList.length;i++){
        if(code==this.typeList[i].code){
          this.type = this.typeList[i].name;
          this.typeList[i].chosen=true;
         this.eletricCardCurrentId(code);
        }else{
          this.typeList[i].chosen=false;
        }
      }
      if(code =='3'){
        this.tableHeader =this.electricTableHeader;
        this.hasOperation= true;
        this.getlastDate();
      }else if(code =='1'||code=='2'){
        this.hasOperation= false;
        this.tableHeader =this.electricSevenTableHeader;
        this.getlastDate();
      }else{
        this.hasOperation= false;
        this.tableHeader =this.electricYearTableHeader;
        this.changeYearLabel();
        this.onSubmitSearch();
      }
    },
    ...mapEletricCardMutations(['eletricCardCurrentId'])
  },
  watch:{
    eletricCurrentId(val){
      this.form.date1 = '';
      this.form.date2 = '';
      this.typeChange(val)

    }
  }
}
</script>

<style scoped lang="scss">
#electricCard{
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  justify-content: flex-start;
  @media screen and (max-height: 980px) {
    background: url("../../assets/imgs/带手指低.png") no-repeat;
  }

  @media screen and (min-height: 980px) {
    background: url("../../assets/imgs/带手指高.png") no-repeat;
  }
  background-size: 100% !important;
  margin-left: 0.5%;
  .right{
    width:100%;
    height:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    .right_header{
      width: 97%;
      height: 12%;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      .botton_top_chosen{
        width: 177px;
        height: 44px;
        color: #fdbf00;
        font-size: 24px;
        font-weight: bold;
        font-family: 微软雅黑;
        background:url("../../assets/imgs/下载1.png") no-repeat;
        background-size: 100%;
        border-color: transparent;
        text-align: center;
        line-height: 44px;
        cursor: pointer;
      }
      .botton_top:focus,
      .botton_top:hover {
        background:url("../../assets/imgs/下载1.png") no-repeat;
        background-size: 100%;
      }

      .botton_top {
        width: 177px;
        height: 44px;
        color: #FFF;
        font-size: 24px;
        font-weight: bold;
        font-family: 微软雅黑;
        background:url("../../assets/imgs/下载2.png") no-repeat;
        background-size: 100%;
        border-color: transparent;
        text-align: center;
        line-height: 44px;
        cursor: pointer;
      }
    }
    .right_content{
      width: 96%;
      height: 90%;
      .search_right{
        width: 100%;
        height: 100%;
        color: #fff;
        font-size: 17px;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
      }
      .table-area{
        width: 100%;
        height: 80%;
      }
    }
  }
  .el-table{
    ::v-deep{
      .el-table__body tr.el-table__row:hover>td {
        cursor: pointer;
        background: #0e6b9e !important
      }
    }
    height: 100% !important;

  }
  ::v-deep .el-pagination {
    padding-top: 20px;
    float: right;
  }
  .right_content_info{
    width: 100%;
    height: 100%;
  }
  .setSearch{
    display: flex;
    justify-content: flex-end;
  }
}

</style>
