<!--
 * @Date: 2024-04-02 17:03:26
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-05-17 16:37:21
 * @FilePath: /custom_dashboard/src/views/test.vue
 * @Description: 文件描述
-->
<template>
  <div style="">
    <!--<svg width="500" height="500" viewBox="0 0 900 900">
      <!~~ 定义裁剪路径 ~~>
      <defs>
        <clipPath id="clippath">
          <!~~ 使用有效的路径来定义裁剪形状 ~~>
          <path d="M0 0 L300 0 L300 110 A40 40 180 0 1 300 190 L300 300 L190 300 A40 40 180 0 0 110 300 L0 300 Z" />
        </clipPath>
      </defs>

      <!~~ 应用遮罩和裁剪路径到图像 ~~>
      <image width="900" height="900" :href="imageSrc" style="clip-path: url(#clippath); filter: grayscale(100%);" mask="url(#mask)" />
    </svg>-->
    <!--<div style="width: 100%; height: 100%;" class="boxer" >
    <!~~ <div style="width: 100%; height: 100%;" > ~~>
      <svg width="100%" height="100%" viewBox="0 0 100 100">
        <!~~ 图像 ~~>
        <!~~ <image style="width: 100%; height: 100%;" :href="imageSrc" /> ~~>

        <!~~ 第一个格子的遮罩层 ~~>
        <polygon points="0,0 20,0 20,20 0,20" fill="black" opacity="0.5" />

        <!~~ 第二个格子的遮罩层 ~~>
        <polygon points="10,10 30,10 30,30 10,30 10,20 20,20 20,10 10,10" fill="black" opacity="0.5" />
      </svg>
    </div>-->

    <!-- <button @click="changeColor">改变颜色</button> -->

    <!-- <div class="container-t"> -->
        <!-- <div class="shape shape-t">
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti recusandae fugiat dicta ipsam ex non sunt maiores, nisi animi repellendus fugit facilis. Vitae pariatur cupiditate totam laboriosam optio! Qui, enim.
        </div> -->
        <!-- <div class="shape shape1"></div>
        <div class="shape shape2"></div>
        <div class="shape shape3"></div>
        <div class="shape shape4"></div> -->
    <!-- </div> -->
    <!-- <div class="container">
      <img src="https://cdn.ipadbiz.cn/tmp/fx_park/s1.png" class="img">
    </div>
    <div class="container">
      <img src="https://cdn.ipadbiz.cn/tmp/fx_park/s2.png" class="img">
    </div>
      <div class="container">
        <img src="https://cdn.ipadbiz.cn/tmp/fx_park/s3.png" class="img">
    </div>
    <div class="container">
      <img src="https://cdn.ipadbiz.cn/tmp/fx_park/s4.png" class="img">
    </div>
    <div class="container">
      <img src="https://cdn.ipadbiz.cn/tmp/fx_park/s5.png" class="img">
    </div>
    <div class="container">
      <img src="https://cdn.ipadbiz.cn/tmp/fx_park/s6.png" class="img">
    </div> -->
    <geo-chart></geo-chart>

  </div>
</template>

<script>
import mixin from 'common/mixin';
import GeoChart from '@/components/GeoChart.vue';
/*
如果希望 <polygon> 的位置和形状能够相对于图片保持不变，
可以考虑使用 viewBox 和 viewBox 中的坐标系来定义 <polygon> 的顶点坐标。
这样，无论图片大小如何改变，<polygon> 的位置和形状都会相对于图片保持不变。
使用 viewBox 和 viewBox 中的坐标系来定义 <polygon> 的顶点坐标：
*/

export default {
  components: {
    GeoChart
  },
  mixins: [mixin.init],
  data () {
    return {
      imageSrc: 'https://picsum.photos/500/500',
      svg_color: 'black',
    }
  },
  mounted () {
  },
  methods: {
    changeColor () {
      this.svg_color = this.svg_color === 'black' ? 'white' : 'black';
    }
  }
}
</script>

<style lang="less" scoped>
.boxer {
  background-image: url('https://picsum.photos/375/729');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.container-t {
    width: 100%;
    height: 100vh;
    background-image: url('https://picsum.photos/375/729');
    background-size: cover;
    position: relative;
    overflow: hidden; /* 确保超出容器部分被隐藏 */
}
.container {
    width: 100%;
    height: 100%;
    background-size: contain;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
}
.container1 {
    width: 100%;
    height: 100%;
    background-size: contain;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
}
.container2 {
    width: 100%;
    height: 100%;
    background-size: contain;
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    background-repeat: no-repeat;
}
.container3 {
    width: 100%;
    height: 100%;
    // background-image: url('https://cdn.ipadbiz.cn/tmp/fx_park/s3.png');
    background-size: contain;
    position: absolute;
    // overflow: hidden; /* 确保超出容器部分被隐藏 */
    z-index: 10;
    top: 0;
    right: 0;
    background-repeat: no-repeat;
}
.container4 {
    width: 100%;
    height: 100%;
    // background-image: url('https://cdn.ipadbiz.cn/tmp/fx_park/s4.png');
    background-size: contain;
    position: absolute;
    // overflow: hidden; /* 确保超出容器部分被隐藏 */
    z-index: 10;
    top: 0;
    right: 0;
    background-repeat: no-repeat;
}
.container5 {
    width: 100%;
    height: 100%;
    // background-image: url('https://cdn.ipadbiz.cn/tmp/fx_park/s5.png');
    background-size: contain;
    position: absolute;
    // overflow: hidden; /* 确保超出容器部分被隐藏 */
    z-index: 10;
    top: 0;
    right: 0;
    background-repeat: no-repeat;
    background-position: left;
}
.container6 {
    width: 100%;
    height: 100%;
    // background-image: url('https://cdn.ipadbiz.cn/tmp/fx_park/s6.png');
    background-size: contain;
    position: absolute;
    // overflow: hidden; /* 确保超出容器部分被隐藏 */
    z-index: 10;
    bottom: 0;
    right: 0;
    background-repeat: no-repeat;
    background-position: right;
}

.img {
  position: absolute; top: 0; left: 0; width: 100%; object-fit: cover;
}

.mask {
  mask: linear-gradient(to right, transparent, rgb(0, 0, 0));
}

.shape {
    position: absolute;
}

.shape-t {
    clip-path: polygon(52% 6.67%, 77.67% 10.67%, 90% 28.33%, 94% 54.67%, 86.33% 91%, 51.67% 94%, 22.67% 88.67%, 16.67% 64%, 13.33% 32.33%, 26% 11%);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(119, 119, 119, 0.5);
    border: 1px solid rgba(119, 119, 119, 0.5);
}

.shape1 {
    clip-path: polygon(50% 0%, 74% 31%, 54% 82%, 33% 100%, 0 100%, 0% 60%, 0 0);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(119, 119, 119, 0.5);
    border: 1px solid rgba(119, 119, 119, 0.5);
}

.shape2 {
    clip-path: polygon(50% 0%, 74% 31%, 54% 82%, 33% 100%, 100% 100%, 100% 54%, 100% 0);
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background-color: rgba(20, 120, 119, 0.5);
}
</style>