<template>
  <ResizeDraggablePanel
    ref="resizePanel"
    :panel-style="panelStyle"
  >
    <div class="content">
      <div class="p-l-10 p-r-10 m-t-16">
        <el-select
          class="thematic-selector"
          v-model="curType"
          placeholder="请选择"
          clearable
          @change="search"
          style="width: 100%"
        >
          <el-option
            class="applications-list-options"
            key="floor"
            label="floor（楼层）"
            value="floor"
          />
          <el-option
            class="applications-list-options"
            key="specialty"
            label="specialty（专业）"
            value="specialty"
          />
          <el-option
            class="applications-list-options"
            key="categoryName"
            label="category（种类）"
            value="categoryName"
          />
          <el-option
            class="applications-list-options"
            key="family"
            label="family（族类）"
            value="family"
          />
        </el-select>
      </div>
      <Echarts v-if="dataStatistic.length > 0" :data="option" />
      <el-row type="flex">
        <el-col
          v-for="(i, index) in result"
          :key="i.value"
          :span="11"
          :offset="index % 2 === 1 ? 1 : 0"
          @click="showOrHideData(i)"
          :class="i.value === 0 && 'grey'"
        >
          <div class="grid-l" :title="i.name">
            <span :style="{ background: color[index % 9] }" class="icon-l" />
            {{ i.name }}
          </div>
          <div class="grid-r">{{ i.value }}</div>
        </el-col>
      </el-row>
    </div>
  </ResizeDraggablePanel>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'
import ResizeDraggablePanel  from '@/components/ResizeDraggablePanel/index.vue'
import Echarts from '@/components/CommonChart/index.vue'
import { getPropValueList, getElementsConditional } from '@/api/model'
// import { singleModels } from '@/enums/single-model-enums'
import axios from 'axios'

let resizePanel = ref(null)
const option = ref(null)
const curType = ref('floor')
const propertyMap:any = {
  floor:[],
  specialty:[],
  categoryName:[],
  family:[]
}
const dataStatistic = ref([])
const result = ref([])
const panelStyle = ref(
  { top: 240, right: 23, width:320, height: 590 }
)
const singleModels:any = ref(null)

const color = ref([
  '#5470c6',
  '#91cc75',
  '#fac858',
  '#ee6666',
  '#73c0de',
  '#3ba272',
  '#fc8452',
  '#9a60b4',
  '#ea7ccc'
])

const getPropertyValueList = async () => {
  let res = await axios.get('/data.json')
  singleModels.value = res.data.singleModels[0]
  console.log('singleModels.value', singleModels.value)
  let result = await getPropValueList(Object.keys(propertyMap).join(','), singleModels.value.value)
  if(result.data.code == 'success'){
    for(let item of result.data.data){
      propertyMap[item.property] = item.values
    }
  }
}

const showOrHideData = item => {
  dataStatistic.value.forEach(i => {
    if (item.name === i.name) {
      if (i.value === 0) {
        i.value = i.amount
      } else {
        i.value = 0
      }
    }
  })
  setOption(dataStatistic)
}

const getData = async(property: string) => {
  let valueList = propertyMap[property]
  if(valueList.length > 0){
    for(let item of valueList){
      let params = {
        targetType: 'file',
        targetIds: [
          singleModels.value.value
        ],
        query: {
          contain:{
            [property]: item
          }
        }
      }
      getElementsConditional(params).then((res) =>{
        if(res.data.code == 'success'){
          let itemParam = {
            value: res.data.data[0].elementIds.length,
            name: item
          }
          dataStatistic.value.push(itemParam)
        }
      })   
    } 
    result.value = dataStatistic.value
    setOption(dataStatistic.value)
  }
}

const setOption = (data:Array<any>) => {
  option.value = {
    tooltip:{
      show: true
    },
    backgroundColor:'rgba(0, 0, 0, 0.8)',
    legend: {
      type: 'scroll',
      bottom: '0%',
      left: 'center',
      width: 300,
      itemWidth: 10,
      itemHeight: 10,
      show: false,
      formatter: (name: any) => {
        if (!data) return name
        let defaultVal
        for (let i = 0; i < data.length; i++) {
          if (data[i].name == name) {
            defaultVal = data[i].value
          }
        }
        return `${name}  ${defaultVal}`
      }
    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: ['55%', '80%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'bottom'
        },
        labelLine: {
          show: false
        },
        data
      }
    ]
  }
}

const search = (property:string) => {
  dataStatistic.value = []
  getData(property)
}

function changePanelPos(){
  if(resizePanel.value){
    resizePanel.value.changePanelPos()
  }
}

onMounted(async() => {
  await getPropertyValueList()
  getData('floor')
  window.addEventListener('resize', changePanelPos)
})

onUnmounted(() => {
  window.removeEventListener('resize', changePanelPos)
})
</script>

<style lang="scss" scoped>
.el-select{
  --el-select-input-color: #fff;
}
:deep(.el-select__wrapper){
  background-color: transparent;
}
:deep(.el-select__selected-item){
  color: #fff
}
.common-chart {
  height: 380px !important;
  margin: 0 !important;
}
.el-row {
  padding: 0 10px 10px;
  margin-left: 0 !important;
  // height: 180px;
  // overflow: scroll;
}
.el-col {
  display: flex;
  justify-content: space-between;
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  margin-bottom: 8px;
  cursor: pointer;
}
.grey {
  color: #bababb;
}
.grid-l {
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.icon-l {
  width: 10px;
  height: 10px;
  display: inline-block;
  margin-right: 5px;
}
</style>

<style lang="scss">
.el-select-dropdown__wrap{
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  .el-select-dropdown__item{
    color: #fff;
  }
  .el-select-dropdown__item.is-selected{
    background-color: rgba(10, 10, 10, 0.5);;
  }
  .el-select-dropdown__item.is-hovering{
    background-color: rgba(0, 0, 10, 0.2);
  }
}
</style>