<!--
 * canvas静态路径
  -->
<script lang="ts" setup>
import { onMounted, reactive } from 'vue';
import Com from 'src/components';

const state = reactive({
  data: [
    {
      data: [
        { x: 10, y: 10 },
        { x: 200, y: 150 },
        { x: 400, y: 150 },
        { x: 400, y: 400 },
        { x: 650, y: 400 },
        { x: 650, y: 500 },
        { x: 300, y: 500 },
        { x: 300, y: 250 },
        { x: 50, y: 250 },
        { x: 50, y: 100 },
        { x: 10, y: 100 },
      ],
      style: {
        lineWidth: 10,
        strokeStyle: 'pink',
        lineJoin: 'round',
        lineCap: 'round',
        step: 20,
      },
    },
  ] as any,
  width: 700,
  height: 700,
  bgWidth: 500,
  bgHeight: 500,
});
onMounted(() => {
  //
});

function onChangeData() {
  state.data = [
    {
      data: [
        { x: 650, y: 400 },
        { x: 650, y: 500 },
        { x: 300, y: 500 },
        { x: 300, y: 250 },
      ],
    },
    {
      data: [
        { x: 100, y: 300 },
        { x: 300, y: 700 },
      ],
      style: {
        lineWidth: 20,
        strokeStyle: 'pink',
        step: 30,
      },
    },
  ];
}

function onChangeSize() {
  state.width = 600;
  //   state.height = 600;
}

function onChangeBgSize() {
  state.bgWidth = 1000;
  state.bgHeight = 800;
}
</script>

<template>
  <div class="fit">
    <q-btn label="改变数据" color="primary" @click="onChangeData" />
    <q-btn label="改变box大小" color="primary" @click="onChangeSize" />
    <q-btn label="改变背景图片大小" color="primary" @click="onChangeBgSize" />
    <div class="canvas-box">
      <Com.CanvasStaticRoute
        :width="state.width"
        :height="state.height"
        :border="false"
        :data="state.data"
        center
        drag
        zoom
      />
      <!-- 
        :bg-url="require('./imgs/bg.png')"
        :bg-width="state.bgWidth"
        :bg-height="state.bgHeight"
       -->
    </div>
  </div>
</template>

<style lang="scss" scoped>
.canvas-box {
  border: 1px solid red;
  width: fit-content;
}
</style>