<template>
  <div id="evaluate-info">
    <sta-table-model :dialog-visible.sync="isModelShow" title="好差评统计表"/>
    <common-panel>
      <template #left-c v-if="evaCurrentId === 'ana'">
        <!--      <div class="left">-->
        <!--        <span class="singleButton top_button">-->
        <!--          <span class="little_span" :class="[unitList[0].chosen?'little_active':'']" @click="unitChange(unitList[0])">{{unitList[0].name}}</span>-->
        <!--        </span>-->
        <!--        <span class="singleButton middle_button">-->
        <!--          <span class="little_span" :class="[unitList[1].chosen?'little_active':'']" @click="unitChange(unitList[1])">{{unitList[1].name}}</span>-->
        <!--        </span>-->
        <!--      </div>-->
        <left-tab-control :current-tab-id.sync="currentLId" :data-arr="unitList" @update:currentTabId="unitChange"/>
      </template>
      <template #right-c>
        <div class="right">

          <div class="right_header">
            <div class="right_header_left" v-if="evaCurrentId === 'ana'">
              <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)">{{item.name}}</div>
            </div>
            <tab-control :data-arr="evaluateTabArr" @update:tabId="typeChange" :tab-id.sync="evaCurrentId"/>
            <!--        <div :class="[item.chosen?'botton_top_chosen':'botton_top']" v-for="(item,index) in typeList" :key="index" @click="typeChange(item)">{{item.name}}</div>-->
            <div class="right_header_right" v-if="evaCurrentId === 'ana'">
              <div class="button_top role_button" role_button_code="f0833c9b-8912-4558-9b9c-adfd82b7116c" @click="isModelShow=true">好差评统计表</div>
              <div class="role_button" :role_button_code="item.role_button_code" :class="[item.chosen?'button_top_chosen':'button_top']" v-for="(item,index) in typeList" :key="index" @click="commitChange(item)">{{item.name}}</div>
            </div>
          </div>
          <evaluate-ana v-if="evaCurrentId === 'ana'"/>
          <evaluate-repeat v-if="evaCurrentId === 'repeat'"/>
          <event-handle-situation v-if="evaCurrentId === 'situation'"/>

<!--          <div class="bottom-a h100">-->
<!--            <div class="my-left-c">-->
<!--              <evaluate-situation @clickTableTr="clickTableTr"/>-->
<!--              <bad-evaluate-situation/>-->
<!--            </div>-->
<!--            <div class="my-center-c">-->
<!--              <div class="top-area">-->
<!--                <top-area/>-->
<!--              </div>-->
<!--              <div class="bottom-echarts-a">-->
<!--                <echarts-area/>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="my-right-c">-->
<!--              <review-and-edit :is-detail="isDetail"/>-->
<!--              <evaluate-percent/>-->
<!--              <bad-reason/>-->
<!--            </div>-->

<!--          </div>-->
        </div>
      </template>

    </common-panel>
  </div>


</template>

<script>


import {mapEvaluateState,mapEvaluateMutations} from "@/units/map-units";
import TabControl from "@/components/common-panel/c-cpns/TabControl";
import CommonPanel from "@/components/common-panel/CommonPanel";
import LeftTabControl from "@/components/common-panel/c-cpns/LeftTabControl";
import {evaluateTabArr, unitList} from "@/views/units/local-data";
import EvaluateAna from "@/views/evaluate/EvaluateAna";
import StaTableModel from "@/views/evaluate/c-cpns/StaTableModel";
import EvaluateRepeat from "@/views/evaluate/EvaluateRepeat";
import EventHandleSituation from "@/views/evaluate/EventHandleSituation";
import selectConfigModuleByRole from "@/role_button";

export default {
  name: "Evaluate",
  components:{
    EventHandleSituation,
    EvaluateRepeat,
    StaTableModel,
    EvaluateAna,

    LeftTabControl,
    CommonPanel,
    TabControl,

  },
  computed:{
    ...mapEvaluateState({
      evaCurrentId:'evaluateCurrentId',
      evaFirstLevel:'evaluateFirstLevel'
    }),
    unitList() {
      return unitList
    },
    evaluateTabArr() {
      return evaluateTabArr
    }
  },

  data(){
    return{
      timeList:[
        {
          id:'1',
          code:'1',
          name:'近一月',
          chosen:false,
          role_button_code:'92d53dbd-f345-404f-b5a8-ea8ee8abb4d9'
        },
        {
          id:'2',
          code:'0',
          name:'全部',
          chosen:true,
          role_button_code:'8747ffac-91fe-4cd5-a9da-4415c9d69568'
        }
      ],
      typeList:[
        {
          id:'1',
          code:'1',
          name:'好评',
          chosen:false,
          role_button_code:'b1e285ca-9c43-4257-be11-ad5383e78210'
        },
        {
          id:'2',
          code:'0',
          name:'差评',
          chosen:true,
          role_button_code:'550d0d57-3eaf-480f-96aa-3411eae54178'
        }
      ],
      //currentId:'ana',
      currentLId:null,
      //isDetail: false,
      isModelShow:false,

    }
  },
  mounted() {
    selectConfigModuleByRole(this);
    this.evaluateFirstLevel('');
    this.evaluateSecondLevel('0');
    this.evaluateTimer('0');

  },
  methods:{
    commitChange(item){
      for(let i=0;i<this.typeList.length;i++){
        if(item.id==this.typeList[i].id){
          this.evaluateSecondLevel(this.typeList[i].code);
          this.evaluateThirdLevel("");
          this.typeList[i].chosen = true
        }else{
          this.typeList[i].chosen = false
        }
      }
    },
    timeChange(item){
      for(let i=0;i<this.timeList.length;i++){
        if(item.id==this.timeList[i].id){
          this.evaluateTimer(this.timeList[i].code);
          this.timeList[i].chosen = true
        }else{
          this.timeList[i].chosen = false
        }
      }
    },
    unitChange(id){
      for(let i=0;i<this.unitList.length;i++){
        if(id==this.unitList[i].id){
          this.evaluateFirstLevel(this.unitList[i].code);
        }
      }
    },
    typeChange(id){

      this.evaluateCurrentId(id);
      this.evaluateRepeatId('0');
      this.evaluateThirdLevel('');
    },
    clickTableTr(row, column, event) {
      //this.isDetail = true
      console.log('点击表格,进入详情',row, column, event)
    },
    ...mapEvaluateMutations(['evaluateCurrentId','evaluateFirstLevel','evaluateSecondLevel','evaluateThirdLevel','evaluateTimer','evaluateRepeatId'])
  },
  watch:{
    evaCurrentId(){
      //this.typeChange(val)
    },
  }
}
</script>

<style scoped lang="scss">
#evaluate-info{
  overflow: hidden;
  height: 100%;
}
.right_header_right{
  display: flex;
}
.my-left-c{
  margin-left: 14px;
  display: flex;
  flex-direction: column;
}
.my-center-c{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .bottom-echarts-a{
    height:max-content;
  }
}
.my-right-c{

  display: flex;
  flex-direction: column;
  >div{
    flex: 1;
    overflow: hidden;
  }
}
</style>
