<template>
  <div class="left_bottom">
    <div class="left_bottom-title flex">
      <div class="flex items-center">
        <img src="@/assets/img/home/title_arrow.png" alt="">
        预警热点
      </div>
      <el-dropdown @command="handleCommand">
        <el-button type="primary" link>
          {{ areaText }}
          <el-icon class="el-icon--right">
            <arrow-down/>
          </el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-for="item in areaList" :key="item.value" :command="item">{{ item.name }}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="left_bottom-content">
      <template v-if="list.length">
        <div class="left_bottom-content-item" v-for="item in list" :key="item.hotspotId">
          <span class="left_bottom-content-item-title text-ellipsis text-no-wrap" style="display:inline-block;max-width: 100px" :title="item.hotspotName">{{ item.hotspotName }}</span>
          <div class="left_bottom-content-item-content">
            <b>
              <CountUp :endVal="item.sumCount" :duration="3"/>
            </b>件
          </div>
          <img src="@/assets/img/home/zhui.png" alt="">
        </div>
      </template>
      <template v-else>
        <EmptyCom class="mt-10"></EmptyCom>
      </template>
    </div>
  </div>
</template>
<script setup lang="ts">
import {onMounted, reactive, ref, watch} from "vue";
import {ArrowDown} from '@element-plus/icons-vue'
import CountUp from "@/components/count-up";
import {hotSpot} from "@/api/home";
import dayjs from "dayjs";
import EmptyCom from "@/components/empty-com";

const props = defineProps({
  dateArray: {
    type: Array,
    default: () => []
  }
})

const areaList = ref([
  {
    name: '宜宾市',
    value: '511500'
  },
  {
    name: '翠屏区',
    value: '511502'
  },
  {
    name: '南溪区',
    value: '511503'
  },
  {
    name: '叙州区',
    value: '511504'
  },
  {
    name: '江安县',
    value: '511523'
  },
  {
    name: '长宁县',
    value: '511524'
  },
  {
    name: '高县',
    value: '511525'
  },
  {
    name: '珙县',
    value: '511526'
  },
  {
    name: '筠连县',
    value: '511527'
  },
  {
    name: '兴文县',
    value: '511528'
  },
  {
    name: '屏山县',
    value: '511529'
  }
]);
const date = ref([]);
watch(() => props.dateArray, (val: any) => {
  date.value = val;
}, {immediate: true})

watch(() => props.dateArray, (val: any) => {
  getData();
})
const areaCode = ref('511500');
const areaText = ref('宜宾市');
const list = ref<any>([]);
const getData = async () => {
  try {
    const {result} = await hotSpot({
      StartDate: dayjs(date.value[0]).format('YYYY-MM-DD'),
      EndDate: dayjs(date.value[1]).format('YYYY-MM-DD'),
      AreaCode: areaCode.value
    });
    list.value = result;
  } catch (e) {
    console.log(e);
  }
}
// 选择省市区
const handleCommand = (command: any) => {
  areaCode.value = command.value;
  areaText.value = command.name;
  getData();
}
onMounted(() => {
  getData();
});
</script>
<style scoped lang="scss">
.left_bottom {
  padding: 0 30px;

  &-title {
    font-size: 20px;
    color: #fff;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
  }

  &-content {
    display: flex;

    &-item {
      color: #B4D7EC;
      text-align: center;

      &-title {
        font-size: 18px;
        font-weight: bold;
      }

      &-content {
        font-size: 14px;

        b {
          font-size: 24px;

        }
      }

      &:nth-child(1) {
        margin-top: 40px;

        img {
          transform: scale(.9);
        }
      }

      &:nth-child(2) {
        margin-top: 45px;
      }

      &:nth-child(3) {
        img {
          transform: scale(1.3);
        }
      }

      &:nth-child(4) {
        margin-top: 50px;

        img {
          transform: scale(1.1);
        }
      }

      &:nth-child(5) {
        margin-top: 30px;

        img {
          transform: scale(.8);
        }
      }
    }

  }
}

.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.count-up-wrap {
  display: inline-block;
}
</style>