<template>
  <div class="huiFangArea" >
      <div style="margin-top: 10px;">
          <span style="font-size: 12px">选择回放时间</span>
      </div>
    <div class="cb-time">
      <div>
          <i class="cbt-icon"></i>
          <el-date-picker
                  v-model="timeRange.time1"
                  type="datetime"
                  placeholder="请选择"
                  size="small"
                  popper-class="date-popper"
                  class="date-picker-custom1"
                  value-format="YYYY-MM-DD HH:mm:ss"
          />
      </div>
      <div>
          <i class="cbt-icon"></i>
          <el-date-picker
                  v-model="timeRange.time2"
                  type="datetime"
                  placeholder="请选择"
                  size="small"
                  popper-class="date-popper"
                  class="date-picker-custom1"
                  value-format="YYYY-MM-DD HH:mm:ss"
          />
      </div>
      <div>
          <span @click="onSub(true)" v-if="subStat==0">开始绘制</span>
          <span @click="onSub(false)" v-else>关闭</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'huiFangArea'
}
</script>

<script setup>
    import {reactive, ref} from "vue";
  import { ElDatePicker,ElMessage } from 'element-plus'
  import 'element-plus/es/components/message/style/css'
  import 'element-plus/es/components/date-picker/style/css'

  import {drawArea} from '@/utils/map/Boat'
    import { useDateFormat } from '@vueuse/core'
  const timeRange = reactive({
      time1: useDateFormat((new Date).getTime() - 15* 60 * 1000, 'YYYY-MM-DD HH:mm:00').value,
      time2: useDateFormat((new Date).getTime(), 'YYYY-MM-DD HH:mm:00').value
  })

    const subStat = ref(0)
    function onSub(type) {
      if (type){
          subStat.value=1
      }else {
          subStat.value=0
      }

        drawArea(timeRange.time1,timeRange.time2,type)
    }
</script>

<style lang="scss" scoped>
.huiFangArea{
  position: absolute;
  top: 10vh;
  right: 30vh;
  width: 20vh;
  height: 200px;
  background: url('@/assets/imgs/area/bg.png') no-repeat;
  background-size: 100% 100%;
  .cb-time {
    width: 100%;
    height: 25%;
    div{
      margin: 0 auto;
      height: 100%;
      width: 80%;
      display: flex;
      align-items: center;
      align-content: center;
      .cbt-icon{
          display: block;
          width: 20px;
          height: 13px;
          background: url('@/assets/imgs/area/time.png') no-repeat;
          background-size: 100% 100%;
         }
    }
    span{
      margin: 0 auto;
      height: 30px;
      width: 40%;
        text-align: center;
      line-height:30px;
      font-size: 11px;
      background: url('@/assets/imgs/area/button.png') no-repeat;
      background-size: 100% 100%;
    }

  }
}
</style>