<template>
  <div id="handleAnalysis">
    <analysis-table-model :dialog-visible.sync="isModelShow" title="办件情况统计表"/>
    <div class="left">
        <span class="singleButton top_button">
          <span class="little_span role_button" :role_button_code="unitList[0].role_button_code" :class="[unitList[0].chosen?'little_active':'']" @click="unitChange(unitList[0])">{{unitList[0].name}}</span>
        </span>
      <span class="singleButton middle_button">
          <span class="little_span role_button" :role_button_code="unitList[1].role_button_code" :class="[unitList[1].chosen?'little_active':'']" @click="unitChange(unitList[1])">{{unitList[1].name}}</span>
        </span>
    </div>

    <div class="right">

      <div class="right_header">
        <div class="right_header_left">
          <div class="role_button" :role_button_code="item.role_button_code"  :class="[item.chosen?'button_top_chosen':'button_top']" v-for="(item,index) in timeList" :key="index" @click="timeChange(item.code)">{{item.name}}</div>
        </div>
        <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" :key="index" @click="typeChange(item.code)">{{item.name}}</div>
        <div class="right_header_right">
          <div class="button_top role_button" role_button_code="a4605e67-4084-42c1-af50-78a4d9fca7af" @click="isModelShow=true">办件情况统计表</div>
        </div>
      </div>


      <div class="right_content">

        <div class="left_part">
             <ItemMenu/>
        </div>
        <div class="right_part">
          <div>
            <AnalysisThreeType/>
          </div>
          <div>
            <AnalysisTotalHandle/>
          </div>
          <div>
            <AnalysisHandleSituation/>
          </div>
          <div>
            <AnalysisTotalNotice/>
          </div>

          <div>
            <AnalysisTotalTime/>
          </div>
          <div>
            <AnalysisAverageTime/>
          </div>
        </div>


      </div>
    </div>

  </div>
</template>

<script>
import ItemMenu from '@/components/item-menu/ItemMenu'
import AnalysisThreeType from "@/components/analysis-three-type/AnalysisThreeType";
import AnalysisTotalHandle from "@/components/analysis-total-handle/AnalysisTotalHandle";
import AnalysisTotalNotice from "@/components/analysis-total-notice/AnalysisTotalNotice";
import AnalysisTotalTime from "@/components/analysis-total-time/AnalysisTotalTime";
import AnalysisHandleSituation from "@/components/analysis-handle-situation/AnalysisHandleSituation";
import AnalysisAverageTime from "@/components/analysis-average-time/AnalysisAverageTime";
import AnalysisTableModel from "@/views/handle_analysis/c-cpns/AnalysisTableModel";
import {mapMutations,mapState} from "vuex";
import selectConfigModuleByRole from "@/role_button";
export default {
  name: "HandleAnalysis",
  components:{
    ItemMenu,
    AnalysisThreeType,
    AnalysisTotalHandle,
    AnalysisTotalNotice,
    AnalysisTotalTime,
    AnalysisHandleSituation,
    AnalysisAverageTime,
    AnalysisTableModel
  },
  computed:{
    ...mapState({
      analysisObject:'analysis',
      reFresh:'analysisRefresh'
    })
  },
  data(){
    return{
      timeList:[
        {
          id:'1',
          code:'30',
          name:'近一月',
          chosen:false,
          role_button_code:'91a6d17e-111e-4ffb-a809-11af87b4fafa'
        },
        {
          id:'2',
          code:'365',
          name:'近一年',
          chosen:false,
          role_button_code:'4ffac755-c6bc-4576-8956-ae1508520e1a'
        }
      ],
      typeList:[
        {
          id:'1',
          code:'',
          name:'整体情况',
          chosen:true,
          role_button_code:'3e33656a-4cb4-4206-92d0-b2c191792db3'
        },
        {
          id:'2',
          code:'1',
          name:'网办',
          chosen:false,
          role_button_code:'30fd27cc-3287-49a3-bf61-6e36dc999dc5'
        },
        {
          id:'3',
          code:'4',
          name:'全程网办',
          chosen:false,
          role_button_code:'40162c6e-9ba4-410e-b224-f3ef073765d3'
        },
        {
          id:'4',
          code:'2',
          name:'好办',
          chosen:false,
          role_button_code:'5e7f54b4-b150-437e-8d43-23459995803e'
        },
        {
          id:'5',
          code:'3',
          name:'快办',
          chosen:false,
          role_button_code:'063f0834-b441-4290-9aec-3eb4cc4f912c'
        },
      ],
      unitList:[
        {
          id:'1',
          code:'1',
          name:'住建委',
          chosen:false,
          role_button_code:'cc833acd-8342-45bb-8435-7473dc2d9574'
        },
        {
          id:'2',
          code:'2',
          name:'房管局',
          chosen:false,
          role_button_code:'25a5fd09-bf07-4925-a569-ae06a856418b'
        },
      ],
      isModelShow:false,
    }
  },
  mounted() {
    selectConfigModuleByRole(this);
    if(this.reFresh){
      this.analysisSingleChange([
        {
          name:'analysisUrgeType',
          value:'SL_TX'
        },
        {
          name:'analysisTimer',
          value:'30'
        },
      ])
    }
  },
  methods:{
    timeChangeOrigion(code){
      for(let i=0;i<this.timeList.length;i++){
        if(code==this.timeList[i].code){
          this.timeList[i].chosen = true
        }else{
          this.timeList[i].chosen = false
        }
      }
    },
    timeChange(code){
      for(let i=0;i<this.timeList.length;i++){
        if(code==this.timeList[i].code){
          this.analysisSingleChange([
            {
              name:'analysisTimer',
              value:this.timeList[i].code
            },
            {
              name:'analysisForthLevel',
              value:''
            },
          ])
          this.timeList[i].chosen = true
        }else{
          this.timeList[i].chosen = false
        }
      }
    },
    unitChange(item){
      for(let i=0;i<this.unitList.length;i++){
        if(item.id==this.unitList[i].id){
          this.analysisSingleChange([
            {
              name:'analysisSecondLevel',
              value:this.unitList[i].code
            },
            {
              name:'analysisThirdLevel',
              value:''
            },
            {
              name:'analysisForthLevel',
              value:''
            },
          ])
          this.unitList[i].chosen = true
        }else{
          this.unitList[i].chosen = false
        }
      }
    },
    unitChangeOrigion(item){
      for(let i=0;i<this.unitList.length;i++){
        if(item.id==this.unitList[i].id){
          this.unitList[i].chosen = true
        }else{
          this.unitList[i].chosen = false
        }
      }
    },
    typeChange(code){
      for(let i=0;i<this.typeList.length;i++){
        if(code==this.typeList[i].code){

          this.analysisSingleChange([
            {
              name:'analysisFirstLevel',
              value:this.typeList[i].code
            },
            {
              name:'analysisSecondLevel',
              value:''
            },
            {
              name:'analysisThirdLevel',
              value:''
            },
            {
              name:'analysisForthLevel',
              value:''
            },
          ])
          this.typeList[i].chosen = true
        }else{
          this.typeList[i].chosen = false
        }
      }
    },
    typeChangeOrigion(code){
      for(let i=0;i<this.typeList.length;i++){
        if(code==this.typeList[i].code){
          this.typeList[i].chosen = true
        }else{
          this.typeList[i].chosen = false
        }
      }
    },
    ...mapMutations(['analysis','analysisRefresh','analysisSingleChange'])
  },
  watch:{
    analysisObject(val){
      this.timeChangeOrigion(val['analysisTimer']);
      this.unitChangeOrigion(val['analysisSecondLevel'])
      this.typeChangeOrigion(val['analysisFirstLevel']);
    },
  }
}
</script>

<style scoped lang="scss">
#handleAnalysis{
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  justify-content: space-between;
  @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;
  width:99%;
  margin-left: 0.5%;
  .left{
    width:2%;
    padding-left: 0.55%;
    padding-top: 70px;
    height:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .singleButton{
      cursor: pointer;
      width:34px;
      height:144px;
      border-radius: 4px;
      border: none;
      padding-top: 10px;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      color: #25a9ee;
      .little_span{
        width:18px;
      }
      .little_active{
        color: #fff;
      }
    }
    .top_button{
      background:url("../../assets/imgs/住建委.png") no-repeat;
      background-size: 100%;
    }
    .middle_button{
      background:url("../../assets/imgs/房管局.png") no-repeat;
      background-size: 100%;
    }
    .singleButton:focus,
    .singleButton:hover {
      color: #fff;
    }
  }
  .right{
    width:100%;
    height:100%;

    .right_header{
      width: 97%;
      height: 12%;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      .right_header_left{
        cursor: pointer;
        width: 30%;
        height: 20px;
        color: #FFF;
        font-size: 16px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        .button_top{
          padding-right: 10px;
          color: #71d7ff;
        }
        .button_top_chosen,.button_top:hover{
          padding-right: 10px;
          color: #fdbf00;
        }
      }
      .right_header_right{
        cursor: pointer;
        width: 30%;
        height: 20px;
        color: #71d7ff;
        font-size: 16px;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        .button_top{
          color: #71d7ff;
        }
        .button_top_chosen,.button_top:hover{
          color: #fdbf00;
        }
      }
      .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%;
      padding-left: 2%;
      height: 90%;
      display: flex;
      flex-direction: row;

      .left_part{
        width: 33%;
        height: 92%;
      }
      .right_part{
        width: 66%;
        height: 92%;
        display: flex;
        flex-wrap: wrap;
        padding: 0 10px;
        justify-content: space-between;
        >div{
          @media screen and (max-height: 980px) {
            background: url("../../assets/imgs/框2.png") no-repeat;
          }

          @media screen and (min-height: 980px) {
            background: url("../../assets/imgs/框1.png") no-repeat;
          }
          background-size: 100% !important;
          width: 49.5%;
          height: 33.33%;
          box-sizing: border-box;
          padding: 0px 10px;
        }
      }
    }
  }
}

</style>
