<template>
  <div class="barrack">
    <div
      class="item"
      v-for="(dataItem, dataIndex) in filterData"
      :key="dataIndex"
      :class="dataIndex % 2 == 0 ? 'div_image1' : 'div_image2'"
    >
      <div class="text1">
        <div class="titleDiv">
          <span class="titleSpan1">{{ dataItem.name }}</span>
          <span class="titleSpan2">{{ dataItem.distance }}km </span>
          <span class="titleSpan3">预计到达时间：{{ dataItem.estimatedTime }}</span>
        </div>
        <div class="buttonDiv">
          <n-button class="button" size="small" @click="moveLocation(dataItem)">
            <Button1 :dataStyle="props.dataStyle" /> <span class="buttonSpan">定位</span>
          </n-button>
          <n-button class="button" size="small" @click="roamLocation(dataItem)">
            <Button2 :dataStyle="props.dataStyle" /> <span class="buttonSpan">漫游</span>
          </n-button>
        </div>
      </div>
      <div
        class="rate"
        :style="{
          width: '100%',
          height: '3px',
          marginTop: '10px',
          marginBottom: '10px',
          background: `linear-gradient(90deg, 
                    ${props.dataStyle.barrackLineStartColor} 0%, 
                    ${props.dataStyle.barrackLineEndColor} 100%)`,
        }"
      />
      <div class="text2"> 装备情况： {{ dataItem.situation }} </div>
      <div
        class="rate"
        :style="{
          width: '100%',
          height: '3px',
          marginTop: '10px',
          marginBottom: '10px',
          background: `linear-gradient(90deg, 
                    ${props.dataStyle.barrackLineStartColor} 0%, 
                    ${props.dataStyle.barrackLineEndColor} 100%)`,
        }"
      />
      <div class="text2"> 队伍驻地： {{ dataItem.teamLocation }} </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed, PropType, toRefs, watch, reactive, ref } from 'vue';
  import dayjs from 'dayjs';
  import { cloneDeep } from 'lodash-es';
  import Button1 from './button1.vue';
  import Button2 from './button2.vue';

  const props = defineProps(['dataset', 'dataStyle', 'header', 'h', 'filterDivHeight']);
  const emit = defineEmits(['moveLocation', 'roamLocation']);

  function moveLocation(dataItem) {
    emit('moveLocation', [dataItem.lng, dataItem.lat]);
  }
  function roamLocation(dataItem) {
    emit('roamLocation', [dataItem.lng, dataItem.lat]);
  }

  // 筛选后的数据
  const filterData = computed(() => {
    let data = props.dataset.filter((item) => item.type == 2);
    switch (props.dataStyle.distanceradio) {
      case '1':
        data = data.filter((d) => parseFloat(d.distance) <= 1);
        break;
      case '2':
        data = data.filter((d) => parseFloat(d.distance) <= 5);
        break;
      case '3':
        data = data.filter((d) => parseFloat(d.distance) <= 10);
        break;
      case '4':
        data = data.filter((d) => parseFloat(d.distance) <= 20);
        break;
      case '5':
        data = data;
        break;
    }
    return data;
  });
</script>

<style lang="scss" scoped>
  .barrack {
    overflow-y: auto;
    height: v-bind(
      '`${props.h -props.filterDivHeight - props.dataStyle.filterMarginTop  - props.dataStyle.barrackMarginTop}px`'
    );
    margin-top: v-bind('`${props.dataStyle.barrackMarginTop}px`');
    padding-left: v-bind('`${props.dataStyle.barrackMarginLeft}px`');
    padding-right: v-bind('`${props.dataStyle.barrackMarginLeft}px`');
  }
  .barrack::-webkit-scrollbar {
    display: none;
  }
  .barrack {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .div_image1 {
    background: #165f58;
  }
  .div_image2 {
    background: #147c73;
  }

  .item {
    padding-top: v-bind('`${props.dataStyle.barrackDivMarginTop}px`');
    padding-bottom: v-bind('`${props.dataStyle.barrackDivMarginTop}px`');
    padding-left: v-bind('`${props.dataStyle.barrackDivMarginLeft}px`');
    padding-right: v-bind('`${props.dataStyle.barrackDivMarginLeft}px`');
  }

  .text1 {
    width: 100%;
    position: relative;
    display: inline-flex;

    .titleDiv {
      .titleSpan1 {
        font-size: v-bind('`${props.dataStyle.barrackTitleFontSize1}px`');
        font-weight: 800;
        color: v-bind('`${props.dataStyle.barrackTitleFontColor1}`');
        margin-right: 20px;
      }
      .titleSpan2 {
        font-size: v-bind('`${props.dataStyle.barrackTitleFontSize2}px`');
        font-weight: 400;
        color: v-bind('`${props.dataStyle.barrackTitleFontColor2}`');
        margin-right: 30px;
      }
      .titleSpan3 {
        font-size: v-bind('`${props.dataStyle.barrackTitleFontSize3}px`');
        font-weight: 400;
        color: v-bind('`${props.dataStyle.barrackTitleFontColor3}`');
        margin-right: 30px;
      }
    }

    .buttonDiv {
      display: flex;
      justify-content: right;
      text-align: right;
      align-items: right;
      gap: 10px;
    }
    .button {
      display: inline-flex;
      background: v-bind('`${props.dataStyle.barrackButtonBackgroud}`');
      font-size: v-bind('`${props.dataStyle.barrackButtonFontSize}px`');
      color: v-bind('`${props.dataStyle.barrackButtonFontColor}`');

      span {
        margin-left: 5px;
      }
    }
  }

  .text2 {
    font-size: v-bind('`${props.dataStyle.barrackTextFontSize}px`');
    color: v-bind('`${props.dataStyle.barrackTextFontColor}`');
  }
</style>
