<template>
  <div class="table-box">
    <div class="card table-search" style="overflow: hidden;display: flex;justify-content: space-between;">
      <el-form :inline="true" label-width="auto">
        <el-form-item label="自动站：" prop="station">
          <el-select v-model="searchParam.station" placeholder="请选择" style="width: 200px">
            <el-option v-for="item in stationOptions" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="所属基地：" prop="base">
          <el-select v-model="searchParam.base" placeholder="请选择" style="width: 200px">
            <el-option v-for="item in baseOptions" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <div class="lan-state">台站总数5</div>
        </el-form-item>
        <el-form-item>
          <div class="lv-state">设备正常3</div>
        </el-form-item>
        <el-form-item>
          <div class="hong-state">设备故障2</div>
        </el-form-item>
        <el-form-item>
          <div class="cheng-state">危险天气1</div>
        </el-form-item>
        <el-form-item>
          <el-popover
            v-model="visible"
            @show="handleShowChange"
            @hide="handleHideChange"
            placement="bottom"
            :width="200"
            trigger="click">
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="街道地图" value="街道地图" style="width: 100%"/>
              <el-checkbox label="站名" value="站名" style="width: 100%"/>
              <el-checkbox label="框选" value="框选" style="width: 100%"/>
              <el-checkbox label="九宫格" value="九宫格" style="width: 100%"/>
            </el-checkbox-group>
            <template #reference>
              <div :class="visible?'hei-state-primary':'hei-state'">基本信息</div>
            </template>
          </el-popover>
        </el-form-item>
      </el-form>
      <div class="header-button-ri">
        <el-popover
          class="tab-pane"
          :width="400"
          v-model="visible2"
          @show="handleShowChange2"
          @hide="handleHideChange2"
          placement="bottom-start"
          trigger="click">
          <el-tabs tab-position="right" class="demo-tabs">
            <el-tab-pane>
              <template #label>
                <div class="gis-c">
                  <span>气温</span>
                  <img class="gis-icon" src="../../../assets/images/temperature.svg">
                </div>
              </template>
            </el-tab-pane>
            <el-tab-pane>
              <template #label>
                <div class="gis-c">
                  <span>气压</span>
                  <img class="gis-icon" src="../../../assets/images/pressure.svg">
                </div>
              </template>
            </el-tab-pane>
            <el-tab-pane>
              <template #label>
                <div class="gis-c">
                  <span>湿度</span>
                  <img class="gis-icon" src="../../../assets/images/humidity.svg">
                </div>
              </template>
            </el-tab-pane>
            <el-tab-pane>
              <template #label>
                <div class="gis-c">
                  <span>风</span>
                  <img class="gis-icon" src="../../../assets/images/wind.svg">
                </div>
              </template>
            </el-tab-pane>
            <el-tab-pane>
              <template #label>
                <div class="gis-c">
                  <span>降雨</span>
                  <img class="gis-icon" src="../../../assets/images/rainfall.svg">
                </div>
              </template>
            </el-tab-pane>
            <el-tab-pane>
              <template #label>
                <div class="gis-c">
                  <span>云量</span>
                  <img class="gis-icon" src="../../../assets/images/cloud.svg">
                </div>
              </template>
            </el-tab-pane>
            <el-tab-pane>
              <template #label>
                <div class="gis-c">
                  <span>能见度</span>
                  <img class="gis-icon" src="../../../assets/images/visibility.svg">
                </div>
              </template>
            </el-tab-pane>
            <el-tab-pane>
              <template #label>
                <div class="gis-c">
                  <span>天气现象</span>
                  <img class="gis-icon" src="../../../assets/images/phenomenon.svg">
                </div>
              </template>
            </el-tab-pane>
          </el-tabs>
          <template #reference>
            <slot name="toolButton">
              <div style="cursor: pointer">
                <img :class="visible2?'gis-icon-type2':'gis-icon-type1'"  src="@/assets/images/classify.svg"/>
              </div>
            </slot>
          </template>
        </el-popover>

      </div>
    </div>
    <div style="flex-grow: 1;">

    </div>
    <div class="gis-bottom-box">
      <div class="gis-bottom-item">
        <div class="button-bg" @click="isPlay=!isPlay">
          <img v-if="isPlay" class="button-bg-c" style="margin-left: 3px"  src="../../../assets/images/stop.svg"/>
          <img v-else class="button-bg-c"  src="../../../assets/images/play.svg"/>
        </div>
        <div style="margin-left: 2px" class="gis-bottom-text">{{isPlay?'暂停':'播放'}}</div>
      </div>
      <div class="gis-bottom-item" @click="handleBack">
        <div class="button-bg">
          <img class="button-bg-c"  src="../../../assets/images/back.svg"/>
        </div>
        <div style="margin-left: 2px" class="gis-bottom-text">上一个</div>
      </div>
      <div class="gis-bottom-item">
        <el-date-picker
          style="margin-top: 5px"
          v-model="value1"
          type="date"
          placeholder="请选择时间"
        />
      </div>
      <div class="gis-bottom-item">
        <el-slider
          :min="0"
          :max="1439"
          :step="10"
          :format-tooltip="formatTooltip"
          v-model="value2"
          style="width: 720px;margin: 0px 0px 0px 10px" />
        <img src="../../../assets/images/scale.svg" style="width: 720px;margin-top: -10px"/>
      </div>
      <div class="gis-bottom-item">
        <div class="button-bg" @click="handleForward">
          <img class="button-bg-c"  src="../../../assets/images/forward.svg"/>
        </div>
        <div style="margin-left: 2px" class="gis-bottom-text">下一个</div>
      </div>
      <div class="gis-bottom-item">
        <div class="gis-bottom-hei-state">当前时间 {{formatTooltip(value2)}}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="gis">
import {reactive, ref} from "vue";
const value1 = ref('')
const value2 = ref(0)
const visible = ref(false)
const visible2 = ref(false)
const checkList = ref(['Value selected and disabled', 'Value A'])
const isPlay = ref(true)
const handleShowChange = () => {
  visible.value = true
};
const handleBack = () => {
  value2.value = value2.value-10
}

const handleForward = () => {
  value2.value = value2.value+10
}
const formatTooltip = (value) => {
  const hours = Math.floor(value / 60);
  const minutes = value % 60;
  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
};

const handleHideChange = () => {
  visible.value = false
};
const handleShowChange2 = () => {
  visible2.value = true
};
const handleHideChange2 = () => {
  visible2.value = false
};
const searchParam = reactive({
  base: undefined,
  station: undefined,
})

interface Mark {
  label: string
}

const baseOptions = ref([{
  value: 0,
  label: '基地1',
},
  {
    value: 1,
    label: '基地2',
  }])

const stationOptions = ref([{
  value: 0,
  label: 'M1986',
},
  {
    value: 1,
    label: 'M1987',
  }])
</script>

<style scoped>
</style>
