<template>
  <div class="wrapper">
    <div ref="wrapRef" :style="{ height, width }"> </div>
    <div class="right-wrap">
      <BasicForm @register="registerForm">
        <template #device>
          <div class="flex justify-between">
            <a-input v-model:value="deviceValue" placeholder="请输入设备名称" style="width: 70%" />
            <a-button color="success" @click="handleReset" class="w-1/4">复位查询</a-button>
          </div>
        </template>
      </BasicForm>
      <div>
        <RadioGroup v-model:value="deviceStatus">
          <Radio :value="1">全部</Radio>
          <Radio :value="2">在线</Radio>
          <Radio :value="3">离线</Radio>
          <Radio :value="4">报警</Radio>
        </RadioGroup>
        <div class="scroll-wrap">
          <ScrollContainer ref="scrollRef">
            <template v-for="item in 10" :key="item">
              <div class="flex" style="border-bottom: 1px solid #ccc">
                <div>
                  <div class="flex">
                    <div class="font-bold ml-5">名称 </div>
                    <div class="ml-5">发动机{{ item }}</div>
                  </div>
                  <div class="flex">
                    <div class="font-bold ml-5">位置 </div>
                    <div class="ml-5 font-bold">四川省成都市高新区{{ item }}</div>
                  </div>
                </div>
                <div class="self-center ml-10"><Tag color="default">离线</Tag></div>
              </div>
            </template>
          </ScrollContainer>
        </div>
        <div class="flex justify-end">
          <Pagination v-model:current="current" :total="50" size="small" show-less-items />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, nextTick, unref, onMounted } from 'vue';
  import { useScript } from '/@/hooks/web/useScript';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { formSchema } from './config.data';
  import { RadioGroup, Radio, Tag, Pagination } from 'ant-design-vue';
  import { ScrollContainer, ScrollActionType } from '/@/components/Container/index';
  export default defineComponent({
    name: 'BaiduMap',
    components: {
      BasicForm,
      RadioGroup,
      Radio,
      Tag,
      ScrollContainer,
      Pagination,
    },
    props: {
      width: {
        type: String,
        default: '100%',
      },
      height: {
        type: String,
        default: 'calc(100vh - 78px)',
      },
    },

    setup() {
      const BAI_DU_MAP_URL =
        'https://api.map.baidu.com/getscript?v=3.0&ak=7uOPPyAHn2Y2ZryeQqHtcRqtIY374vKa';
      const wrapRef = ref<HTMLDivElement | null>(null);
      const scrollRef = ref<Nullable<ScrollActionType>>(null);
      const { toPromise } = useScript({ src: BAI_DU_MAP_URL });
      async function initMap() {
        await toPromise();
        await nextTick();
        const wrapEl = unref(wrapRef);
        const BMap = (window as any).BMap;
        if (!wrapEl) return;
        const map = new BMap.Map(wrapEl);
        const point = new BMap.Point(116.14282, 35.19515);
        map.centerAndZoom(point, 15);
        map.enableScrollWheelZoom(true);
      }
      onMounted(() => {
        initMap();
      });

      const deviceValue = ref('');
      const deviceStatus = ref(1);
      const current = ref(2);
      const [registerForm] = useForm({
        labelWidth: 90,
        schemas: formSchema,
        showActionButtonGroup: false,
      });
      const handleReset = () => {
        deviceValue.value = '';
      };
      return { wrapRef, registerForm, deviceValue, deviceStatus, handleReset, scrollRef, current };
    },
  });
</script>

<style scoped>
  .wrapper {
    position: relative;
  }
  .right-wrap {
    padding-top: 10px;
    width: 20%;
    height: 80%;
    position: absolute;
    right: 5%;
    top: 10%;
    background-color: #f3f8fe;
  }
  .scroll-wrap {
    height: 450px;
    background-color: #f3f8fe;
  }
</style>