<template>
  <div s>
    <h1>绘制飞线</h1>
    <div class="w-flex">
      <w-flying-line
        :width="width"
        :height="height"
        :lines="lines"
        style="outline: solid #000 1px"
        :style="{ width: `${width / 10}rem`, height: `${height / 10}rem` }"
      />
    </div>

    <div class="form">
      <div class="w-flex">
        画布宽度width：<el-input-number
          v-model="width"
          :min="100"
          :max="1000"
          :step="10"
        />
        画布高度height：<el-input-number
          v-model="height"
          :min="100"
          :max="1000"
          :step="10"
        />
      </div>
      <div>
        线条配置lines: path-线条路径, size-线条大小, lineColor-线条颜色,
        flyingColor-飞线颜色，flyingLen-飞线长度, flying-是否绘制飞线,
        dot-是否绘制光点, am-是否启动动画,time-动画周期时间
      </div>
      <div><el-input type="textarea" v-model="json" rows="10" /></div>
      <div>
        <el-button @click="lines = JSON.parse(json)">重绘线条</el-button>
      </div>
      <div>
        默认线段配置:
        <pre style="background-color: var(--w-bg-light); padding: 1rem; margin: .5rem 0; border: solid .1rem var(-w-bg-dark-5); font-size: .8rem; line-height: 1.8; border-radius: .5rem;">{{ JSON.stringify({
  path: `M 10,10 C 200,10,10,200,290,290`,
  size: 1,
  lineColor: "var(--w-bg-dark)",
  flyingColor: "var(--w-main)",
  flyingLen: 20,
  flying: true,
  dot: true,
  am: true,
  time: "5s",
},null,'  ') }}</pre>
      </div>
      

    </div>
  </div>
</template>
<script setup>
const width = ref(300);
const height = ref(300);
const lines = ref([
  {

  },
  {
    path: `M 200,10 Q 290,290,10,290 Z`,
    size: 2,
    lineColor: "#F002",
    flyingColor: "#0F0",
    flyingLen: 20,
    flying: true,
    dot: true,
    am: true,
    time: "30s",
  },
  {
    path: `M 10,100 C 100,0,200,200,290,100`,
    size: 3,
    lineColor: "#00f1",
    flyingColor: "#00f",
    flyingLen: 20,
    flying: true,
    dot: false,
    am: true,
    time: "7s",
  },
  {
    path: `M 10,200 C 100,100,200,300,290,200`,
    size: 4,
    lineColor: "#0a01",
    flyingColor: "#0a0",
    flyingLen: 20,
    flying: false,
    dot: true,
    am: true,
    time: "10s",
  },
  {
    path: `M 5,5 L 295,5 L 295,295 5,295 Z`,
    size: 1,
    lineColor: "#0003",
    am: false,
  },
]);

const json = ref(JSON.stringify(lines.value, null, "  "));
</script>
<style lang="scss" scoped>
.form {
  display: grid;
  padding: 1rem 5rem;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 1rem;
}
</style>