<template>
    <div class="county-container">
        <div class="slider-container" @mousedown="startDrag" @mouseup="endDrag" @mousemove="onDrag"
            @touchstart="startDrag" @touchend="endDrag" @touchmove="onDrag">
        <div class="slider-content" :style="{ transform: `translateX(${translateX}px)` }">
            <!-- 滑动内容项 -->
            <div class="slider-item" v-for="(item, index) in list" :key="index" :style="{background:url('/statistical/left_county_nochoose.png')}">
                <div calss="county-name">{{ item.name }}</div>
            </div>
        </div>
   </div>

    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted, computed, defineEmits, watch, defineExpose } from 'vue';
import { getChildrenTree } from '@/api/demo/system';
import { getUserOrgs } from '@/api/tiankongdi';

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

  // 初始数据
  const list = ref();

    // 获取用户可以访问的机构信息
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])
  }

  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);
  }

    //
    function selectCounty() {}

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


  onMounted(() => {
    handlerGetOrgs();
  });

  defineExpose({
    selectCounty,
  });
const isDragging = ref(false);
const startX = ref(0);
const translateX = ref(0);
const currentTranslateX = ref(0);
const items = ref(['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'])
function startDrag(event) {
      isDragging.value = true;
      startX.value = event.type.includes('mouse') ? event.clientX : event.touches[0].clientX;
      currentTranslateX.value = translateX.value;
}

function endDrag() {
    isDragging.value = false;
    currentTranslateX.value = translateX.value;
}

function onDrag(event) {
    if (!isDragging.value) return;
    const currentX = event.type.includes('mouse') ? event.clientX : event.touches[0].clientX;
    const deltaX = currentX - startX.value;
    translateX.value = currentTranslateX.value + deltaX;
}

</script>
<style type="less" scoped>
.county-container{
    position:absolute;
    bottom:50px;
    left:300px;
    z-index:999999;
    width:840px;
    height:80px;
    background:rgba(0,0,0,0.4);
    .slider-container {
        width: 100%;
        overflow: hidden;
        position: relative;
        cursor: grab;
      }
      
      .slider-content {
        display: flex;
        transition: transform 0.3s ease;
      }
      
      .slider-item {
        min-width: 100px;
        margin: 0px 0px;
        background-color: #ddd;
        padding: 20px;
        text-align: center;
      }
}
</style>