<script>
const w = 12, h = 10, r = 200
export default {
  name: "AiDvSvg",
  data() {
    return {
      border: "",
      box: {},
      height: 0,
      width: 0
    }
  },
  methods: {
    init() {
      let {width, height} = this.$el.getBoundingClientRect()
      width -= 13 * 2
      height -= 13 * 2
      this.width = width
      this.height = height
      this.getBorder(width, height)
      const vv = width - w, hh = height - h
      this.box = {
        top: `m${vv - r + 33},${13 + h}l7,0l-2.5,-3l-7,0l2.5,3zm-1.5,0l-4.5,-5.5l-7,0l4.5,5.5l7,0zm-21,-7l6,7l7,0l-6,-7l-7,0z`,
        leftBottom: `m46.5,${height + 10}l7,0l-2.5,-3l-7,0l2.5,3zm-1.5,0l-4.5,-5.5l-7,0l4.5,5.5l7,0zm-21,-7l6,7l7,0l-6,-7l-7,0z`,
        rightBottom: `m${vv - 8},${height + 8}l-2.5,3l7,0l2.5,-3l-7,0zm17.5,-2.5l-7,0l-4.5,5.5l7,0l4.5,-5.5zm-3.5,5.5l7,0l6,-7l-7,0l-6,7z`,
      }
    },
    getBorder(cw, ch) {
      const vv = cw - w, hh = ch - h
      this.border = `${w} 0,${cw - w * 2 - r} 0,${cw - w - r} ${h}, ${vv} ${h},${cw} ${h * 2},${cw} ${hh}, ${vv} ${ch},${w} ${ch},0 ${hh},0 ${h}`
    },
  },
  mounted() {
    this.$nextTick(() => this.init())
  }
}
</script>

<template>
  <section class="AiDvSvg">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
      <defs>
        <polygon :points="border" id="path-1"/>
        <filter id="filter-2" filterUnits="objectBoundingBox" height="105.6%" width="108.5%" y="-3.3%" x="-4.2%">
          <feGaussianBlur result="shadowBlurOuter1" in="shadowOffsetOuter1" stdDeviation="6"/>
        </filter>
        <linearGradient id="linearGradient-3" y2="50.1547687%" x2="23.733%" y1="49.6234888%" x1="23.7333333%">
          <stop offset="0%" stop-color="#0D5B8C"/>
          <stop offset="61.81%" stop-opacity="0.18" stop-color="#1275B3"/>
          <stop offset="100%" stop-opacity="0.01" stop-color="#137ABA"/>
        </linearGradient>
        <linearGradient id="linearGradient-4" y2="50%" x2="100%" y1="50%" x1="0%">
          <stop offset="0%" stop-opacity="0" stop-color="#4ACCED"/>
          <stop offset="48.88%" stop-color="#4ACCED"/>
          <stop offset="100%" stop-opacity="0" stop-color="#49CDEE"/>
        </linearGradient>
        <linearGradient id="linearGradient-5" y2="50%" x2="100%" y1="50%" x1="0%">
          <stop offset="0%" stop-opacity="0" stop-color="#A4EEEF"/>
          <stop offset="48.88%" stop-color="#A4EEEF"/>
          <stop offset="100%" stop-opacity="0" stop-color="#A4EEEF"/>
        </linearGradient>
        <linearGradient id="linearGradient-6" y2="50%" x2="100%" y1="50%" x1="0%">
          <stop offset="0%" stop-color="#21EDED"/>
          <stop offset="100%" stop-color="#276269"/>
        </linearGradient>
        <linearGradient id="linearGradient-7" y2="50%" x2="0%" y1="50%" x1="100%">
          <stop offset="0%" stop-color="#21EDED"/>
          <stop offset="100%" stop-color="#276269"/>
        </linearGradient>
        <linearGradient id="linearGradient-8" y2="50%" x2="100%" y1="50%" x1="0%">
          <stop offset="0%" stop-opacity="0" stop-color="#0061AB"/>
          <stop offset="51.39%" stop-color="#0061AB"/>
          <stop offset="100%" stop-opacity="0" stop-color="#0062AB"/>
        </linearGradient>
      </defs>
      <g>
        <g fill-rule="evenodd" fill="none" id="未央区">
          <g id="弹窗6备份">
            <g id="编组-11">
              <g stroke-dasharray="0,0" id="路径">
                <use id="svg_1" x="13" y="17" xlink:href="#path-1" filter="url(#filter-2)" fill="black"/>
                <use id="svg_2" x="13" y="17" xlink:href="#path-1" fill-rule="evenodd" fill="#0A2234" fill-opacity="0.88" stroke="#22D3D4"/>
              </g>
              <!--              <path fill="url(#linearGradient-3)" id="路径" d="m497,46.5l-15,-14l-250.5,0l-16.5,-15.5l-188.5,0l-13.5,15.5l0,26.5l484,0l0,-12.5z"/>-->
              <line stroke-dasharray="0,0" stroke-width="2" stroke="url(#linearGradient-4)" id="路径-3" y2="17.5" x2="175" y1="17.5" x1="26.5"/>
              <line stroke-dasharray="0,0" stroke-width="2" stroke="url(#linearGradient-5)" id="路径-3" y2="17.5" x2="149.5" y1="17.5" x1="58"/>
              <path fill="url(#linearGradient-6)" id="上部拼合图形" :d="box.top"/>
              <path fill="url(#linearGradient-6)" id="左下拼合图形" :d="box.leftBottom"/>
              <path fill="url(#linearGradient-7)" id="右下拼合图形" :d="box.rightBottom"/>
              <line stroke-dasharray="0,0" stroke-width="2" stroke="url(#linearGradient-8)" id="底部亮线" :y2="height+10" :x2="width/2+110" :y1="height+10" :x1="width/2-110+26"/>
              <line stroke-dasharray="0,0" stroke-width="2" stroke="url(#linearGradient-8)" id="标题下划线" y2="65" x2="248" y1="65" x1="23"/>
            </g>
          </g>
        </g>
      </g>
    </svg>
    <div class="close" @click="$emit('close')"/>
    <div class="content">
      <div class="header">慧智会言</div>
      <slot/>
    </div>
  </section>
</template>

<style scoped lang="scss">
.AiDvSvg {
  position: relative;
  width: max(400px, 100%);
  height: auto;

  & > svg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }

  .content {
    width: 100%;
    height: 100%;
    padding: 14px 33px;

    .header {
      padding: 16px 0;
      font-weight: bold;
    }
  }

  .close {
    background-image: url("./assets/close.png");
    width: 24px;
    height: 24px;
    position: absolute;
    right: 20px;
    top: 35px;
    z-index: 6;
  }
}
</style>
