<template>
  <div class="layer-group">
    <modulen>
      <template #title>投诉咨询统计</template>
      <div class="w-full" v-if="eventList && eventList.length">
        <div class="top-box">

          <div
            class="top-box-item"
            v-for="(item, index) in eventList"
            :key="`order_${index}`"
          >
            <span>{{ item.value }}</span>
            <div class="flex items-center">
              <img :src="TOP_ICON" class="w-2.5 h-2.5" />
              <span class="f-title">{{ item.name }}</span>
            </div>
          </div>

        </div>
        <div style="height: 190px;width:100%">
<!-- <vue-seamless-scroll :data="eventList" v-if="eventList && eventList.length">
        <div class="work-order">
          <div class="work-order-item" v-for="(item, index) in eventList" :key="index">
            <di class="el-icon-caret-right"></di>
            <div class="work-order-type">投诉</div>
            <span class="truncate work-order-content"
              >{{item.sectionName}}</span
            >
            <span class="work-order-action flex-shrink-0">{{item.replyDt}}</span>
          </div>
        </div>
        </vue-seamless-scroll>
        <empty v-else />
         -->
        <Ect  class="ect" :options="ectOpts" :default='1' />
        </div>
        
      </div>
      <empty v-else />
    </modulen>
  </div>
</template>

<script setup lang="ts">
// import vueSeamlessScroll from '@/components/vueSeamlessScroll/index.vue'
import TOP_ICON from "@/assets/images/newLayerContrl/curing-s.png";
import { ref,computed,watch,onUnmounted } from "vue";
import { formatYearMonth } from "@/utils/util";
import { useStore } from "vuex";
import { key } from "@/store";
import { getcomplaintsAdvisoryCount } from '@/api/operationMonitor';
import { left } from "@popperjs/core";
const store = useStore(key);
import { useRequest } from 'vue-request'
// import {  getComplainList} from '@/api/operationMonitor.js'
const selectLevel = computed(() => store.state.road?.selectLevel);
const selectRoadId = computed(() => store.state.road?.selectRoadId);
const appDate = computed(() => formatYearMonth(store.state.appDate));
const query = ref({
  level:selectLevel.value,
  dimension:  selectRoadId.value[selectLevel.value - 1]
})
const total = ref(0)
const params = computed(
  () => selectLevel.value + "&" + selectRoadId.value[selectLevel.value - 1]
);


//  const queryParam=computed(()=>{
//    return {
//       level:selectLevel.value,
//         dimension: selectRoadId.value[selectLevel.value - 1],
//         queryDate:appDate.value
//    }
//  })
  
 const { data, refresh: complainRefresh } =useRequest<any>(() =>
    getcomplaintsAdvisoryCount(query.value)
  )

 const eventList=computed(()=>{
  total.value = 0
  for (let index = 0; index < data.value?.msgContent.length; index++) {
   total.value +=  data.value?.msgContent[index].value;
  }
	return data.value?.msgContent
 })
  
  

watch(params, () => {
  query.value.level= store.state.road?.selectLevel
  query.value.dimension=  selectRoadId.value[selectLevel.value - 1]
  complainRefresh()
});



const ectOpts = computed(() => {
  // let options={
  //     tooltip: {
  //   trigger: 'item'
  // },
  //   color:[ '#91cc75','#5470c6','#fac858'],
  //    legend: {
  //   orient: 'vertical',
  //   left:20,
  //   top:50,
  //   textStyle:{
  //     color:'white'
  //   }
  // },
  // series: [
  //   {
  //     type: 'pie',
  //     radius: '60%',
  //     data:eventList?.value,
  //     // data:eventList,
  //     emphasis: {
  //       itemStyle: {
  //         shadowBlur: 10,
  //         shadowOffsetX: 0,
  //         shadowColor: 'rgba(0, 0, 0, 0.5)'
  //       }
  //     }
  //   }
  // ]
  // }
  let options = {
  tooltip: {
    trigger: 'item'
  },
  color:[ '#91cc75','#FFF','#fac858'],
	title: {
						text:total.value,
						left: "center",
						top: "55%",
						textStyle: {
							textAlign: "center",
              fill: "#fff",
							fontSize: 18,
							fontWeight: 400,
                 color:'#fff'
						}
					},
					graphic: {
						type: "text",
						left: "center",
						top: "40%",
						style: {
							text: "来电数量",
							textAlign: "center",
							fill: "#fff",
							fontSize: 20,
              color:'#fff'
						}
					},

  legend: {
    top:"30%",
    left:"-5%",
    orient: 'vertical',
    textStyle:{
    color:"#fff",
    }
  },
  textStyle:{
    color:[ '#91cc75','#ffffff','#fac858'],
    },
    
  series: [
    {
      type: 'pie',
      radius: ['60%', '80%'],
      avoidLabelOverlap: false,
      itemStyle: {
        normal: {
          label: {
              show: false,
            },
            shadowBlur: 10,
            borderRadius: 10,
            borderWidth: 2,
          },
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: false,
          fontSize: '16',
          fontWeight: 'bold'
        }
      },
   
      labelLine: {
        show: false
      },
      data:eventList?.value,
    }
  ]
};
  return options
})




</script>

<style lang="postcss" scoped>
.layer-group {
  width: 100%;
  height: 320px;
}
.top-box {
  width: 100%;
  @apply flex justify-around items-center mt-2 pb-2;
}
.top-box-item {
  color: #fff;
  background: url("@/assets/images/newLayerContrl/curing.png") no-repeat;
  background-size: 100% 100%;
  width: 80px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 16px;
}
.f-title {
  font-size: 12px;
  color: #fff;
  margin-left: 6px;
}
.work-order {
  width: 100%;
}
.work-order-item {
  width: 100%;
  height: 32px;
  background: rgba(17, 51, 103, 0.45);
  padding-left: 16px;
  padding-right: 7.5px;
  border-left: 2px solid rgba(73, 154, 255, 0.5);
  @apply flex items-center justify-between;
  margin-bottom: 5px;
}
.work-order-item:hover {
  height: 52px;
  border-left: 2px solid #499aff;
  /* &.work-order-type {
		background: url('@/assets/images/newLayerContrl/banner-active.png')
			no-repeat;
		background-size: 100% 100%;
		border: none;
	} */
}
.work-order-item:hover > .work-order-type {
  padding: 15px 13px;
  border-radius: 26px;
  background: url("@/assets/images/newLayerContrl/banner-active.png") no-repeat;
  background-size: 100% 100%;
  border: none;
}
.work-order-item:hover > .work-order-content {
  font-size: 15px;
}
.work-order-type {
  border: 1px solid #275895;
  border-radius: 26px;
  padding: 2px 13px;
  box-sizing: border-box;
  transform: scale(0.83);
}
.work-order-content {
  width: 180px;
  font-size: 14px;
}
.work-order-action {
  width: 100px;
  transform: scale(0.83);
  color: #3da5ff;
}

.work-order-item:hover > .el-icon-caret-right {
  visibility:inherit
}
.el-icon-caret-right {
  color: #ffecb0;
  margin-left: -15px;
  margin-right: -10px;
  visibility: hidden;
}
.ect{
  margin-top: 90px;
  margin-left: 30px;
}
</style>
