<template>
  <div  class="go-title-xuncha">
    <div class="selbox">
      <!-- <n-tree-select
        v-model:value="areaValue" 
        :options="areaOptions"
        label-field="name"
        key-field="id"
        children-field="children"
        placeholder="请选择行政区划"
        clearable
        style="width: 240px"
      /> -->
      <el-tree-select
        v-model="areaValue"
        :data="areaOptions"
        check-strictly
        label-field="name"
        node-key="name"
        :render-after-expand="false"
        placeholder="请选择行政区划"
        clearable
      />
    </div>
    <div class="searchbox flex ai-c">
      <div class="inpbox">
        <n-input
          size="small"
          v-model:value="searchValue"
          placeholder="请输入搜索关键字"
        />
      </div>
      <div class="flex">
        <div class="searchbtn cursor flex ai-c jc-c" @click="getListData">
          <img class="img" src="@/assets/images/chart/xunchaguiji/btnicons01.png" />
          <span class="span">搜索</span>
        </div>
        <!-- <div class="tongjibtn cursor flex ai-c jc-c">
          <img class="img" src="@/assets/images/chart/xunchaguiji/btnicons02.png" />
          <span class="span">统计</span>
        </div>
        <div class="xunjianbtn cursor flex ai-c jc-c">
          <img class="img" src="@/assets/images/chart/xunchaguiji/btnicons03.png" />
          <span class="span">巡检</span>
        </div> -->
      </div>
    </div>
    <div class="contentbox">
      <div class="contentli flex" v-for="(item,index) in dataset" @click="lisClick(item)">
        <div class="icons01"></div>
        <div class="flex column jc-c seclisbox">
          <div class="header flex ai-c">
            <div class="label">打卡点名称</div>
            <div>{{ item.PointName }}</div>
          </div>
          <div class="clockdetail">
            <div class="flex ai-c">
              <span class="span"></span>
              <div class="label">创建时间</div>
              <div>{{ item.CreateTime }}</div>
            </div>
            <div class="flex ai-c">
              <span class="span"></span>
              <div class="label">负责人员</div>
              <div>{{ item.CreateUserName }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { PropType, toRefs, ref, onMounted } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { EventBus } from '@/utils/eventBus'
import axios from 'axios'
import { getAppEnvConfig } from '@/utils/env'
var { VITE_GLOB_API_URL } = getAppEnvConfig();

const props = defineProps({
  chartConfig: {
    type: Object as PropType<CreateComponentType>,
    required: true
  }
})

const { w, h } = toRefs(props.chartConfig.attr)
const {
  textColor,
  textSize,
  textColor1,
  textSize1,
  areaOptions,
} = toRefs(props.chartConfig.option)

const areaValue = ref()
const searchValue = ref()
const dataset = ref([])
const optionsData = ref([])

const getListData=()=>{
  console.log('areaValue',areaValue)
  axios({
      method: "get",
      url: VITE_GLOB_API_URL + '/api/FireGrid/GetCheckPointList',
      params: {
        page: 1,
        limit: 9999,
        pointName: searchValue.value
      },
      headers: {
          'X-Token': localStorage.getItem("X-Token")
      }
  }).then(res => {
      let rel = res.data.result.items
      dataset.value = rel
  })
}
const getAreaListData=(id)=>{
  axios({
      method: "get",
      url: VITE_GLOB_API_URL + '/api/Orgs/LoadChildren',
      params: {
        parentId: id
      },
      headers: {
          'X-Token': localStorage.getItem("X-Token")
      }
  }).then(res => {
      let rel = res.data.result
      rel.forEach(item =>{
        if(item.level == 1){
          item.children = []
          optionsData.value.push(item)
          getAreaListData(item.id)
        }
        if(item.level == 2){
          optionsData.value.forEach(val =>{
            if(val.id == item.parentId){
              val.children.push(item)
            }
          })
        }
      })
      props.chartConfig.option.areaOptions = optionsData.value
  })
}
const lisClick=(item)=>{
  EventBus.emit('clockinlistsenddata' , item);
}
onMounted(() => {
  getListData()
  getAreaListData(371300)
})

</script>

<style lang="scss" scoped>
@include go('title-xuncha') {
  position: relative;
  .cursor{
    cursor: pointer;
  }
  .flex{
    display: flex;
  }
  .column{
    flex-direction: column;
  }
  .ai-c{
    align-items: center;
  }
  .jc-c{
    justify-content: center;
  }
  .selbox{
    width: 150px;
    height: 35px;
    background: #05231A;
    border-radius: 3px;
    border: 1px solid #00611A;
  }
  .searchbox{
    height: 35px;
    margin-top: 5px;
    .inpbox{
      width: 150px;
      height: 100%;
      background: url("@/assets/images/chart/xunchaguiji/gjinputbg.png");
      background-size: 100% 100%;
      margin-right: 4px; 
    }
    .img{
      width: 20px;
      height: 20px;
    }
    .span{
      color: #FFFFFF;
      font-size: 14px;
      margin-left: 5px;
    }
    .searchbtn{
      width: 72px;
      height: 30px;
      background: linear-gradient( 95deg, #00C16B 0%, #008E39 100%), #000000;
      border-radius: 3px;
      margin-right: 4px; 
    }
    .tongjibtn{
      width: 72px;
      height: 30px;
      background: linear-gradient( 277deg, #C14000 0%, #FF8849 100%), #000000;
      border-radius: 3px;
      margin-right: 4px; 
    }
    .xunjianbtn{
      width: 72px;
      height: 30px;
      background: linear-gradient( 277deg, #125FE3 0%, #1C9DCA 100%), #000000;
      border-radius: 3px;
    }
  }
  .contentbox{
    height: calc(100% - 80px);
    margin-top: 10px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    .contentli{
      width: 100%;
      height: 82px;
      background: url("@/assets/images/chart/xunchaguiji/lisbg01.png");
      background-size: 100% 100%;
      margin-bottom: 10px;
      .icons01{
        width: 41px;
        height: 36px;
        background: url("@/assets/images/chart/xunchaguiji/libgsicon.png");
        background-size: 100% 100%;
        margin: 23px 19px 23px 18px;
      }
      .seclisbox{
        .header{
          width: 265px;
          height: 23px;
          background: url("@/assets/images/chart/xunchaguiji/clockintitlebg.png");
          background-size: 100% 100%;
          color: v-bind('textColor');
          font-size: v-bind('textSize+"px"');
          .label{
            width: 40%;
            text-align: center;
            margin-right: 10px;
          }
        }
        .clockdetail{
          color: v-bind('textColor1');
          font-size: v-bind('textSize1+"px"');
          margin-top: 5px;
          .span{
            width: 3px;
            height: 3px;
            background: #C9FFC7;
            box-shadow: 0px 0px 5px 1px rgba(0,255,80,0.6);
            border: 0px solid rgba(255,255,255,0.34);
            margin-right: 10px;
          }
          .label{
            width: 60px;
          }
        }
      }   
    }
  }
  :deep(.n-input){
    background: none;
    margin-left: 5px;
  }
  :deep(.n-input__state-border){
    border-color: none;
  }
  :deep(.n-input .n-input__input-el, .n-input .n-input__textarea-el){
    color: #fff;
  }
  :deep(.n-input .n-input__border, .n-input .n-input__state-border){
    border: none;
  }
  :deep(.n-input:not(.n-input--disabled).n-input--focus .n-input__state-border){
    border: none !important;
    box-shadow: none !important;
  }

  :deep(.n-base-selection .n-base-selection-label .n-base-selection-input){
    background: none;
    color: #fff;
  }
  :deep(.n-base-selection .n-base-selection-label){
    background: none;   
  }
  :deep(.n-base-select-menu){
    background: none; 
  }
  :deep(.n-base-selection .n-base-selection__border, .n-base-selection .n-base-selection__state-border){
    border: none;
  }
  :deep(.el-select__wrapper){
    background: none;   
    box-shadow: none;
  }
  :deep(.el-select__placeholder){
    color: #fff;
  }


   /* 整个滚动条的样式 */
   ::-webkit-scrollbar {
    width: 5px; /* 滚动条宽度 */
  }
  /* 滚动轨道的样式 */
  ::-webkit-scrollbar-track {
    background: #00611A; /* 轨道背景颜色 */
  }
  /* 滚动滑块的样式 */
  ::-webkit-scrollbar-thumb {
    background: #0EB687; /* 滑块背景颜色 */
  }
  /* 当鼠标悬停在滑块上时改变颜色 */
  ::-webkit-scrollbar-thumb:hover {
    background: #34FFE0; /* 鼠标悬停时的滑块颜色 */
  }
}
</style>
