<template>
  <div class="county">
    <div class="county_div">
      <img class="county_div_leftButton" :src="scrollImgLeft" @click="scrollToElement('left')" />

      <div ref="countyList" id="scrollContainer" 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, defineExpose } from 'vue';
  import { getChildrenTree } from '@/api/demo/system';
  import { message } from 'ant-design-vue';
  import { getUserOrgs } from '@/api/tiankongdi';

  // 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_right1.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 < countyWidth) {
      //   scrollImgLeft.value = '/statistical/left_direction_left1.png';
      // } else {
      //   scrollImgLeft.value = '/statistical/left_direction_left2.png';
      // }
      // if (countyList.value.scrollLeft > (list.value.length - 7 - 1) * countyWidth) {
      //   scrollImgRight.value = '/statistical/left_direction_right1.png';
      // } else {
      //   scrollImgRight.value = '/statistical/left_direction_right2.png';
      // }
    }
  };

  // 获取用户可以访问的机构信息
  async function handlerGetOrgs() {
    let orgs = await getUserOrgs({});
    let isLevel = orgs.find((item, index) => {
      return item.name == '临沂市' || item.parentId == 0 || item.parentName == '根节点';
    });
    if (isLevel) {
      // 市级
      getOptions();
    } else {
      // 县区级
      let levesl = orgs.filter((item, index) => {
        return item.parentName == '临沂市' || item.parentId == 371300;
      });
      list.value = levesl;
    }
    // clickCounty(list.value[0])
  }

  //
  function selectCounty() {}
  // 选择区县
  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;

    list.value.sort((a, b) => a.id - b.id);

    let linyishi = {
      id: '',
      name: '临沂市',
    };

    console.log('listValue', list.value);
    list.value.unshift(linyishi);
    clickCounty(linyishi);
  }

  onMounted(() => {
    handlerGetOrgs();

    let scrollContainer = document.getElementById('scrollContainer');

    scrollContainer?.addEventListener('wheel', (evt) => {
      evt.preventDefault();
      scrollContainer?.scrollBy({
        left: evt.deltaY * 5,
        behavior: 'smooth',
      });
    });
  });

  defineExpose({
    selectCounty,
  });
</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;
        max-width: 770px;
        margin: 0px auto;
        overflow-x: auto;
        scroll-behavior: smooth;
        &::-webkit-scrollbar {
          display: none;
        }
        div {
          width: 110px;
        }

        &_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;
          text-shadow:
            -1px -1px 0 #000,
            1px -1px 0 #000,
            -1px 1px 0 #000,
            1px 1px 0 #000;
          font-weight: 10000;
        }

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

        &_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>
