<template>
  <el-dialog
      ref="dialog"
      :close-on-click-modal="false"
      :title="title"
      :top="dialogFormTop"
      :visible.sync="dialogVisible"
      :destroy-on-close="true"
      width="97.5%"
      :model="false"
      :before-close="handleClose"
  >
    <div class="dialog_content">
      <div class="tab-area">
        <tab-control :tab-id.sync="currentBadChangeId" style-type="colorful" :data-arr="isBadChangeArr" />
      </div>
      <div v-if="currentBadChangeId=='commitSituation'" class="table-area">
          <my-table  @clickTableTr="clickTable"  :table-data="tableData" :headers="badChangeTableHeader">
          </my-table>
        <div class="page">
          <ele-pagination  @sizeOrPageChange="sizeOrPageChange"  :total-count="totalCount" :current-page="currentPage" :page-size="pageSize"/>
        </div>
      </div>
      <div v-else class="content-area">
        <div  v-loading="loading"  element-loading-text="数据加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(3, 30, 57, 0.8)">
        <el-timeline>
          <el-timeline-item :key="index" :timestamp=insertTime placement="top">
            <el-card>
              <div class="single_count">
                <div class="one_part">
                  <span>评价总数：</span>
                  <span class="showOldPlan">{{ commitCount }}</span>
                </div>
                <div  class="one_part">
                  <span>差评数：</span>
                  <span class="showOldPlan">{{ badCommitCount }}</span>
                </div>
                <div  class="one_part">
                  <span>差评率：</span>
                  <span class="showOldPlan">{{ badCommitInterest }}</span>
                </div>

              </div>
              <div class="single_count_reasons">
                  <span>勾选理由：</span>
                  <div  class="one_part_reasons_detail" v-if="ReasonList.length >0">
                    <el-badge :value="item.value"  v-for="(item,index) in ReasonList" :key="index" class="item_reason" type="warning">
                      <el-button  v-bind:style="[item.color]" size="small">{{ item.name }}</el-button>
                    </el-badge>
                  </div>
              </div>
              <el-form class="one_part_first" size="small" :model="formData" :rules="rules" label-width="100px">
                <el-form-item label="整改计划：">
                  <el-input type="textarea" :rows="4" v-model="formData.plan"></el-input>
                </el-form-item>
                <el-form-item label="上传文件：">
                  <el-upload
                      class="upload-demo"
                      ref="upload"
                      action="http://10.81.66.9:9250/ywtb/ywtbfileUpload"
                      :limit="1"
                      :onError="uploadError"
                      :onSuccess="uploadSuccess"
                      :beforeUpload="beforeAvatarUpload"
                      :file-list="fileList"
                      :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="endButton">
                <el-button size="small"  type="primary" @click="submitUpload">保存</el-button>
                <el-button size="small" type="primary"  @click="closeDialog">关闭</el-button>

              </div>
            </el-card>
          </el-timeline-item>
          <el-timeline-item v-for="(item,index) in timeLineData" :key="index" :timestamp=item.insertTime placement="top">
            <el-card>
              <div class="single_card">
                <div class="single_count">
                  <div class="one_part">
                    <span>评价总数：</span>
                    <span class="showOldPlan">{{item.commitCount}}</span>
                  </div>
                  <div  class="one_part">
                    <span>差评数：</span>
                    <span class="showOldPlan">{{item.badCommitCount}}</span>
                  </div>
                  <div  class="one_part">
                    <span>差评率：</span>
                    <span class="showOldPlan">{{item.badCommitInterest}}</span>
                  </div>

                </div>
                <div class="single_count_reasons">
                  <span>勾选理由：</span>
                  <div  class="one_part_reasons_detail" v-if="item.reasonList.length >0">
                    <el-badge :value="item.value"  v-for="(item,index) in item.reasonList" :key="index" class="item_reason" type="warning">
                      <el-button  v-bind:style="[item.color]" size="small">{{ item.name }}</el-button>
                    </el-badge>
                  </div>
                </div>
                <div class="single_content">
                  <div  class="one_part">
                    <span>整改内容：</span>
                    <span class="showOldPlan">{{item.changeContent}}</span>
                  </div>
                  <div  class="one_part">
                  <span>附件：</span>
                  <span class="showOldAppendix">{{item.appendix}}</span>
                  </div>

                </div>
              </div>
            </el-card>
          </el-timeline-item>

        </el-timeline>
        </div>
      </div>

    </div>
  </el-dialog>
</template>

<script>
import { isBadChangeArr,badChangeTableHeader
} from "@/views/units/local-data";
import ElePagination from "@/components/ele-paga/ElePagination";
import TabControl from "@/components/common-panel/c-cpns/TabControl";
import MyTable from "@/components/my-table/MyTable";
import {MessageBox} from "element-ui";
export default {
  name: "EventHandleFileModel",
  components: {TabControl, ElePagination, MyTable},
  props:{
    dialogVisible:{
      type:Boolean
    },

    title:{

    },
    situationCode:{

    },
    matterCode:{

    },
    showType:{

    },
    fileList:[],

  },
  data() {
    return {

      loading: false,
      matter:'',
      situation:'',
      dialogFormTop:'12vh',
      // formData:{
      //   value1:''
      // },
      commitTypeList:[
        {
          label:'受理督办',
          value:'SL_DB',
        },
        {
          label:'受理提醒',
          value:'SL_TX',
        },
        {
          label:'办结督办',
          value:'BJ_DB',
        },
        {
          label:'办结提醒',
          value:'BJ_TX',
        },
        {
          label:'平均受理时间',
          value:'AVG_SL_TIME',
        },
        {
          label:'平均办结时间',
          value:'AVG_BJ_TIME',
        },
        {
          label:'承诺办结时间',
          value:'CNBJSX',
        },
        {
          label:'承诺受理期限',
          value:'SLQX',
        },
      ],
      currentBadChangeId:'',
      tableData:[
      ],
      totalCount:0,
      currentPage:1,
      pageSize:10,
      currentTableHeader:'',
      formData: {
        plan:''
      },
      rules:[

      ],
      timeLineData:[
      ],
      insertTime:'',
      commitCount:'',
      badCommitCount:'',
      badCommitInterest:'',
      ReasonList:[
      ]
    }
  },
  computed:{
    badChangeTableHeader(){
      return badChangeTableHeader
    },
    isBadChangeArr() {
      return isBadChangeArr
    }
  },
  mounted() {
    this.currentBadChangeId = "commitSituation";
  },

  methods:{
    getReasonListColor(length,index){
      let y = 255/(length + 1) *(index +1)
      return 'rgb(255,' + y + ',0,0.4)'
    },
    getReasonListBorderColor(length,index){
      let y = 255/(length + 1) *(index +1)
      return '1px solid rgb(255,' + y + ',0,1)'
    },
    clickTable(e1,e2,e3) {
      this.$emit('clickTableTr',e1,e2,e3)
    },
    handleClose() {
      this.$emit('update:dialogVisible',false)
    },
    closeDialog(){
      this.formData.plan ='';
      this.$refs.upload.clearFiles();
      this.$emit('update:dialogVisible',false)
    },
      submitUpload() {
        this.$refs.upload.submit();
      },
      uploadSuccess (response, file, fileList) {
        console.log('上传文件', response,file, fileList)
        if(response.msg[0].success =='true'){
            this.submitCommit(response.msg[0].error);
        }else{
          this.loading=false;
          MessageBox.alert('文件上传失败', '提示', {
            confirmButtonText: '确定'
          });
        }
      },
      // 上传错误
      uploadError (response, file, fileList) {
        console.log('上传失败，请重试！',response, file, fileList)
      },
      // 上传前对文件的大小的判断
      beforeAvatarUpload (file) {
        this.loading=true;
        const extension = file.name.split('.')[1] === 'xls'
        const extension2 = file.name.split('.')[1] === 'xlsx'
        const extension3 = file.name.split('.')[1] === 'doc'
        const extension4 = file.name.split('.')[1] === 'docx'
        const isLt2M = file.size / 1024 / 1024 < 10
        if (!extension && !extension2 && !extension3 && !extension4) {
          this.loading=false;
          MessageBox.alert('上传模板只能是 xls、xlsx、doc、docx 格式!', '提示', {
            confirmButtonText: '确定'
          });
        }
        if (!isLt2M) {
          this.loading=false;
          MessageBox.alert('上传模板大小不能超过 10MB!', '提示', {
            confirmButtonText: '确定'
          });
        }
        return extension || extension2 || extension3 || extension4 && isLt2M
      },
    submitCommit(path){
      this.$request({
        url:'/ywtb/editYwtbRectification',
        method:'post',
        data:{
          "MATTER_CODE":'1',
          "SITUATION_CODE":this.situation,
          "ENCLOSURE":path,
          'RECTIFICATION_PLAN':this.formData.plan,
          'OPERATION_TIME1':'2022-01-01',
          'UNIT_CODE':'AH0001',
        }
      }).then(response => {
        let dataArr = response.data.msg[0].success;
        if(dataArr=='true'){
          console.log(dataArr);
          this.loading=false;
          MessageBox.alert('上传整改计划成功', '提示', {
            confirmButtonText: '确定'
          });
          this.closeDialog();
        }
      })
    },
    changeTableHeader(id){
      //this.currentBadChangeId = id;
      if(id=='commitSituation'){ //查询评价情况
        this.commitSituationData()
      }else{ //查询整改计划
        this.changePlanData()
      }
    },
    sizeOrPageChange(page,size){
      this.currentPage = page;
      this.pageSize = size;
      this.commitSituationData();
    },
    commitSituationData(){
      this.tableData = []
      this.$request({
        url:'/ywtb/selectYwtbEvaluateBySituationPageList',
        method:'post',
        data:{
          "SITUATION_CODE":this.situation,
          'pageSize':this.pageSize,
          'pageIndex':this.currentPage
        }
      }).then(response => {
        let dataArr = response.data.msg[0].Rows;
        if(dataArr.length > 0){
          for(let i=0;i<dataArr.length;i++){
            dataArr[i].COMMENT_TIME =dataArr[i].COMMENT_TIME.length > 16 ?dataArr[i].COMMENT_TIME =dataArr[i].COMMENT_TIME.substring(0,16):dataArr[i].COMMENT_TIME
          }
          this.tableData = dataArr;

        }else{
          this.tableData = []
        }
        this.totalCount =response.data.msg[0].TotalRowCount;
      })
    },
    setReasonList(reason){
      let reasonList = [];
      if(reason==undefined||reason==''){
        return reasonList
      }
      reasonList =reason.split(';')
      let reasonInUse = [];
      for(let i =0;i<reasonList.length;i++){
        let temp = {
          rn:i,
          name:reasonList[i].slice(0,reasonList[i].indexOf('(')),
          value:reasonList[i].slice(reasonList[i].indexOf('(') +1,reasonList[i].indexOf(')'))
        }
        reasonInUse.push(temp)
      }
      for(let i=0;i<reasonInUse.length;i++){
        reasonInUse[i].color = {
          background:this.getReasonListColor(reasonInUse.length,i+1),
          border:this.getReasonListBorderColor(reasonInUse.length,i+1)
        }
      }
      return reasonInUse
    },
    changePlanData(){


      this.loading=true;
      this.timeLineData = []
      this.$request({
        url:'/ywtb/selectYwtbRectificationBySituationPageList',
        method:'post',
        data:{
          "SITUATION_CODE":this.situation,
          'pageSize':this.pageSize,
          'pageIndex':this.currentPage
        }
      }).then(response => {
        this.loading=false;
        let useData= []
        let dataArr = response.data.msg[0].Rows;
        dataArr[0].START_TIME =dataArr[0].START_TIME.length > 16 ?dataArr[0].START_TIME =dataArr[0].START_TIME.substring(0,16):dataArr[0].START_TIME
        dataArr[0].END_TIME =dataArr[0].END_TIME.length > 16 ?dataArr[0].END_TIME =dataArr[0].END_TIME.substring(0,16):dataArr[0].END_TIME
        this.insertTime= dataArr[0].START_TIME +'---'+dataArr[0].END_TIME;  //开始时间
        this.commitCount=dataArr[0].EVALUATE_ALL_NUM;//评价总数
        this.badCommitCount=dataArr[0].EVALUATE_CP_NUM;  //差评数
        this.badCommitInterest=dataArr[0].EVALUATE_CPL; //差评率
        this.ReasonList = this.setReasonList(dataArr[0].REASON)
        if(dataArr.length >1){
          for(let i=1;i<dataArr.length;i++){
            dataArr[i].START_TIME =dataArr[i].START_TIME.length > 16 ?dataArr[i].START_TIME =dataArr[i].START_TIME.substring(0,16):dataArr[i].START_TIME
            dataArr[i].END_TIME =dataArr[i].END_TIME.length > 16 ?dataArr[i].END_TIME =dataArr[i].END_TIME.substring(0,16):dataArr[i].END_TIME
            let tempdata = {
              insertTime:dataArr[i].START_TIME !=undefined? dataArr[i].START_TIME+'---'+ dataArr[i].END_TIME :dataArr[i].END_TIME,
              startTime: dataArr[i].START_TIME,   //开始时间
              endTIme:dataArr[i].END_TIME,   //结束时间
              commitCount:dataArr[i].EVALUATE_ALL_NUM, //评价总数
              badCommitCount:dataArr[i].EVALUATE_CP_NUM,   //差评数
              badCommitInterest:dataArr[i].EVALUATE_CPL,  //差评率
              appendix:dataArr[i].ENCLOSURE.substr(dataArr[i].ENCLOSURE.lastIndexOf('/')),   //附件
              changeContent:dataArr[i].RECTIFICATION_PLAN,  //整改内容
              reasonList:this.setReasonList(dataArr[i].REASON)
            }
            useData.push(tempdata);
          }
          this.timeLineData = useData;
        }else{
          this.timeLineData = [];
        }
      })
    },
  },
  watch: {
    dialogVisible:{
      handler(val){
        if(val){
         this.situation = this.situationCode;

         this.matter = this.matterCode;
         if(this.showType == this.currentBadChangeId){
           this.changeTableHeader(this.showType);
         }else{
           this.currentBadChangeId = this.showType;
         }
        }
      },
      deep:true
    },
    currentBadChangeId:{
      handler(n){
        this.changeTableHeader(n);
      },
      deep:true
    },

  }
}
</script>

<style scoped  lang="scss">
::v-deep{
  .el-badge__content{
    border: none;
  }
  .el-button{

    color: #fff;
  }
  .tab-item{

    //padding: 2px 4px;
    margin-right: 10px;

    &.class1{
      &.active{
        color: #40a0ff;
      }
      background: rgba(0, 128, 255, 0.3);
      border: 1px solid #0080ff;
    }
    &.class2{
      &.active{
        color: #e6ac00;
      }
      background: rgba(255, 191, 0, 0.3);
      border: 1px solid #ffbf00;
    }
    &.class3{
      &.active{
        color: #ff5c25;
      }
      background: rgba(255, 64, 0, 0.3) ;
      border: 1px solid #ff4000;
    }
    &.class4{
      &.active{
        color: #39e545;
      }
      background: rgba(34, 172, 56, 0.3);
      border: 1px solid #22ac38;
    }
  }
  .dialog_content{
    width: 100%;
    height:820px;
  }
  .tab-area{
    margin-bottom: 1px;
    width:100%;
    border-bottom: 1px solid #0080ff;
    margin-bottom:20px;
    ::v-deep{
      .tab-item{

        //padding: 2px 4px;
        margin-right: 10px;

        &.class1{
          &.active{
            color: #40a0ff;
          }
          background: rgba(0, 128, 255, 0.3);
          border: 1px solid #0080ff;
        }
        &.class2{
          &.active{
            color: #e6ac00;
          }
          background: rgba(255, 191, 0, 0.3);
          border: 1px solid #ffbf00;
        }
        &.class3{
          &.active{
            color: #ff5c25;
          }
          background: rgba(255, 64, 0, 0.3) ;
          border: 1px solid #ff4000;
        }
        &.class4{
          &.active{
            color: #39e545;
          }
          background: rgba(34, 172, 56, 0.3);
          border: 1px solid #22ac38;
        }
      }
    }
  }
  .table-area {
    width: 99%;
    height: 90%;
    padding-left: 0.5%;
  }
  .content-area {
    width: 99%;
    height: 90%;
    padding-left: 0.5%;
    overflow: auto;
  }
  .page{
    margin-top: 5px;
    text-align: right;
  }
  .single_card{
    color: #fff;
  }
  .single_count{
    color: #fff;
    display: flex;
    padding-left: 20px;
  }
  .single_count_reasons{
    width: 97%;
    padding-left: 40px;
    margin-bottom: 10px;
    color: #fff;
    display: flex;
    align-items: flex-start;
    .one_part_reasons_detail{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      line-height: 40px;
      width: 100%;
      .item_reason{
        padding-left: 4px;
        margin-top: 10px;
        margin-bottom: 10px;
        margin-right: 20px;
      }
    }
    >span{
      display:inline-block;
      width:82px;
      word-wrap:break-word;
      white-space:normal;
      height: 100%;
      padding-top: 20px;
    }
  }
  .single_content{
    width: 98%;
    padding-left: 20px;
  }
  .one_part{
    padding-left: 20px;
    padding-right: 20px;
    line-height: 40px;
    >span{
      padding-right: 10px;
    }
  }

  .one_part_first{
    padding-left: 10px;
  }
  .showOldAppendix{
    color: #0e6b9e;
  }
  .showOldPlan{
    color: #fff;
  }
  .endButton{
    padding-left: 120px;
  }
}

</style>
