<template>
  <div class="county">
    <div class="county_div">
      <img class="county_div_leftButton" :src="scrollImgLeft" @click="scrollToElement('left')" />
      <div ref="countyList" class="county_div_list">
        <div v-for="item in list" :key="item.id" :id="item.id" @click="clickCounty(item)">
          <span v-if="!item.isClick" class="county_div_list_span_nochoose">{{ item.name }}</span>
          <img
            class="county_div_list_nochoose"
            v-if="!item.isClick"
            src="/statistical/left_county_nochoose.png"
          />
          <span v-if="item.isClick" class="county_div_list_span_choose">{{ item.name }}</span>
          <img
            class="county_div_list_choose"
            v-if="item.isClick"
            src="/statistical/left_county_choose.png"
          />
        </div>
      </div>
      <img class="county_div_rightButton" :src="scrollImgRight" @click="scrollToElement('right')" />
    </div>
    <div>
      <img
        src="/statistical/left_decorative_bottom.png"
        :style="{
          width: '840px',
        }"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted, onUnmounted, computed, defineEmits, watch } from 'vue';
  import { getChildrenTree } from '@/api/demo/system';
  import { message } from 'ant-design-vue';

  // emit
  const emit = defineEmits(['countyClick']);
  const props = defineProps(['bi']);

  // 按键控制滚动条
  let countyWidth: number = 110;
  const countyList = ref<HTMLElement | null>(null);
  const scrollImgLeft = ref('/statistical/left_direction_left1.png');
  const scrollImgRight = ref('/statistical/left_direction_right2.png');
  const scrollToElement = async (type) => {
    if (countyList.value) {
      if (type == 'left') {
        countyList.value.scrollLeft = countyList.value.scrollLeft - countyWidth;
      }
      if (type == 'right') {
        countyList.value.scrollLeft = countyList.value.scrollLeft + countyWidth;
      }
      if (countyList.value.scrollLeft == 0) {
        scrollImgLeft.value = '/statistical/left_direction_left1.png';
      } else {
        scrollImgLeft.value = '/statistical/left_direction_left2.png';
      }
      if (countyList.value.scrollLeft > 7 * countyWidth) {
        scrollImgRight.value = '/statistical/left_direction_right1.png';
      } else {
        scrollImgRight.value = '/statistical/left_direction_right2.png';
      }
    }
  };

  // 选择区县
  function clickCounty(record) {
    list.value.forEach((item) => {
      if (item.cascadeId == record.cascadeId) {
        item.isClick = true;
      } else {
        item.isClick = false;
      }
    });
    emit('countyClick', record);
  }

  // 初始数据
  const list = ref();
  async function getOptions() {
    const data = await getChildrenTree({
      parentId: 371300,
    });
    data.forEach((item) => {
      item.isClick = false;
    });
    list.value = data;
    let linyishi = {
      id: '',
      name: '临沂市',
    };
    list.value.unshift(linyishi);
    clickCounty(linyishi);
  }

  onMounted(() => {
    getOptions();
  });
</script>

<style lang="less" scoped>
  .county {
    cursor: pointer;

    &_div {
      display: flex;
      position: relative;
      width: 840px;
      bottom: 10px;

      &_leftButton {
        position: relative;
        top: 42px;
        left: -4px;
        height: 31px;
        width: 31px;
      }

      &_list {
        display: flex;
        overflow: hidden;
        width: 770px;

        &_span_nochoose {
          position: relative;
          top: 30px;
          width: 110px;
          z-index: 999;
          display: inline-flex;
          align-items: center;
          text-align: center;
          justify-content: center;
          font-family: Alibaba PuHuiTi;
          font-size: 15px;
          color: rgba(255, 255, 255, 0);
          background: linear-gradient(0deg, #6f81d4 0.146484375%, #ffffff 86.7919921875%);
          opacity: 0.6;
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
          color: #fff;
          font-weight: 10000;
        }

        &_nochoose {
          position: relative;
          top: -7px;
          width: 87px;
          margin-left: 11.5px;
          margin-right: 11.5px;
        }

        &_span_choose {
          position: relative;
          top: 30px;
          width: 110px;
          z-index: 999;
          display: inline-flex;
          align-items: center;
          text-align: center;
          justify-content: center;
          font-family: Alibaba PuHuiTi;
          font-weight: bold;
          font-size: 14px;
          color: #014ce2;
        }

        &_choose {
          position: relative;
          width: 110px;
        }
      }

      &_rightButton {
        position: relative;
        top: 42px;
        left: 4px;
        height: 31px;
        width: 31px;
      }
    }
  }
</style>
