<template>
  <box
    ref="box"
    componentkey="LinkState"
    title="全链路监测状态"
  >
    <div
      class="l-flex--row center c-info wrapper"
      :class="{ full }"
    >
      <div
        v-if="loaded"
        class="linkState"
        :style="scaleFun"
      >
        <div
          v-for="item in items"
          :key="item.key"
          :class="['co', item.key]"
          :style="getImg(item.key)"
        >
          <div
            v-if="Array.isArray(item.label)"
            class="ctext"
          >
            <div>{{ item.label[0] }}</div>
            <div>{{ item.label[1] }}</div>
          </div>
          <div
            v-else
            class="ctext"
          >
            {{ item.label }}
          </div>
        </div>
        <div class="co led">
          <video
            ref="player"
            class="o-video__player o-simple-video"
            style="width:100%;height:100%"
            muted
            autoplay
            controls
            :poster="poster"
          />
          <div class="ctext">led大屏</div>
        </div>
        <div
          v-for="line in lines"
          :key="line.key"
          :class="[
            'line',
            line.type,
            line.class,
            {
              closed:
                lineToItem[line.key] &&
                linkStateForm[lineToItem[line.key]] !== 0,
              trafficCameraUnbound:
                line.key === 5 && linkStateForm.trafficCamera === 2,
            },
          ]"
        >
          <svg
            v-if="
              lineToItem[line.key] && linkStateForm[lineToItem[line.key]] === 0
            "
            class="svg"
          >
            <polyline
              class="polyline"
              :points="line.points"
              style="fill: none; stroke: #0ab4ff; stroke-width: 1px"
              :style="{
                strokeDasharray: line.length + 'px',
                strokeDashoffset: line.length + 'px',
                animation: line.animation,
              }"
            />
            <ellipse
              v-if="line.type !== 'col'"
              :rx="full ? 4 : 2"
              cx="0"
              :ry="full ? 2 : 1"
              cy="0"
              fill="#0AB4FF"
            >
              <animateMotion
                dur="2s"
                repeatCount="indefinite"
                :path="line.path"
              />
            </ellipse>
            <ellipse
              v-else
              :ry="full ? 4 : 2"
              cy="0"
              :rx="full ? 2 : 1"
              cx="0"
              fill="#0AB4FF"
            >
              <animateMotion
                dur="2s"
                repeatCount="indefinite"
                :path="line.path"
              />
            </ellipse>
          </svg>
        </div>
      </div>
    </div>
  </box>
</template>

<script>
import videoPoster from '@/assets/image_no_program.svg'
import Box from './Box'
import { getBoundThirdPartyDevices } from '@/api/external'
import { ScreenshotCache } from '@/utils/cache'
import videoback from './mixin/videoback'
export default {
  name: 'LinkState',
  components: {
    Box
  },
  mixins: [videoback],
  props: {
    device: {
      type: Object,
      required: true
    },
    full: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      poster: videoPoster,
      scale: 1,
      items: [
        {
          label: '浪潮屏媒安播云平台',
          key: 'msr'
        },
        {
          label: ['浪潮超高清媒体', '播控器'],
          key: 'device'
        },
        {
          label: '浪潮物联网关',
          key: 'gateway'
        },
        {
          label: '发送控制设备',
          key: 'sending_device'
        },
        {
          label: '人流量监测摄像头',
          key: 'trafficCamera'
        },
        {
          label: ['LED屏画面监测', '摄像头'],
          key: 'ledCamera'
        },
        {
          label: '接收卡',
          key: 'receive_card'
        }
        // {
        //   label: 'LED大屏',
        //   key: 'led'
        // }
      ],
      lines: Array.from({ length: 8 }, (v, index) => {
        // M4,0 L4,95
        let map
        if (this.full) {
          map = [
            {
              points: '0,4 150,4',
              path: 'M0,4 L150,4',
              length: 150,
              animation: this.getAnimation(150)
            },
            {
              points: '0,4 150,4',
              path: 'M0,4 L150,4',
              length: 150,
              animation: this.getAnimation(150)
            },
            {
              points: '0,4 150,4',
              path: 'M0,4 L150,4',
              length: 150,
              animation: this.getAnimation(150)
            },
            {
              points: '4,0 4,137',
              path: 'M4,0 L4,137',
              type: 'col',
              length: 137,
              animation: this.getAnimation(137)
            },
            {
              points: '0,50 350,50 350,0 400,0',
              path: 'M0,50 L350,50 L350 0 L400,0',
              type: 'polygon',
              length: 450,
              animation: this.getAnimation(450)
            },
            {
              points: '0,51 350,51 350,100 400,100',
              path: 'M0,51 L350,51 L350,100 L400,100',
              type: 'polygon',
              length: 449,
              animation: this.getAnimation(449)
            },
            {
              points: '0,4 494,4',
              path: 'M0,4 L494,4',
              length: 494,
              animation: this.getAnimation(494)
            },
            {
              points: '4,0 4,78',
              path: 'M4,0 L4,78',
              type: 'col',
              length: 78,
              animation: this.getAnimation(78)
            }
          ]
        } else {
          map = [
            {
              points: '0,4 22,4',
              path: 'M0,4 L22,4',
              length: 22,
              animation: this.getAnimation(22)
            },
            {
              points: '0,4 22,4',
              path: 'M0,4 L22,4',
              length: 22,
              animation: this.getAnimation(22)
            },
            {
              points: '0,4 22,4',
              path: 'M0,4 L22,4',
              length: 22,
              animation: this.getAnimation(22)
            },
            {
              points: '4,0 4,95',
              path: 'M4,0 L4,95',
              type: 'col',
              length: 95,
              animation: this.getAnimation(95)
            },
            {
              points: '0,18 80,18 80 0 105 0',
              path: 'M0,18 L80,18 L80 0 L105 0',
              type: 'polygon',
              length: 123,
              animation: this.getAnimation(123)
            },
            {
              points: '0,19 80,19 80 36 105 36',
              path: 'M0,19 L80,19 L80 36 L105 36',
              type: 'polygon',
              length: 122,
              animation: this.getAnimation(122)
            },
            {
              points: '0,4 119,4',
              path: 'M0,4 L119,4',
              length: 119,
              animation: this.getAnimation(119)
            },
            {
              points: '4,0 4,92',
              path: 'M4,0 L4,92',
              type: 'col',
              length: 92,
              animation: this.getAnimation(92)
            }
          ]
        }

        return {
          key: index + 1,
          class: `l${index + 1}`,
          ...map[index]
        }
      }),
      lineToItem: {
        1: 'msr',
        2: 'device',
        3: 'sending_device',
        8: 'receive_card',
        4: 'msr',
        7: 'gateway',
        5: 'trafficCamera',
        6: 'ledCamera'
      },
      linkStateForm: {
        // 0 开启 1 关闭 2未绑定
        msr: 0,
        device: 0,
        gateway: 0,
        sending_device: 0,
        ledCamera: 0,
        trafficCamera: 0,
        receive_card: 0,
        led: 0
      },
      loaded: false,
      base64: null
    }
  },
  // created () {
  //   ScreenshotCache.watch(this.device, this.onScreenshotUpdate, 10000)
  // },
  computed: {
    scaleFun () {
      return `transform:scale(${this.scale})`
    }
  },
  created () {
    // this.getBoundThirdPartyDevices();
    this.loaded = true
    ScreenshotCache.watch(this.device, this.onScreenshotUpdate, 60 * 60 * 1000)
  },
  mounted () {
    const width = this.$refs.box.$el.clientWidth - 10
    this.scale = Math.round((width / 316) * 10) / 10
    if (this.full) {
      this.scale = 1
    }
  },
  beforeDestroy () {
    ScreenshotCache.unwatch(this.device.id)
  },
  methods: {
    getAnimation (length, gap, dur = 2, mode = 'linear') {
      // let style = {
      //   strokeDasharray: undefined,
      //   strokeDashoffset: undefined,
      //   animation: undefined,
      // };
      // let str = "",
      //   i = 0;
      // gap = 4;
      // while (i + gap <= length) {
      //   i = i + gap;
      //   str = str + gap + "px ";
      // }
      // str = str + length + "px";
      // style.strokeDasharray = str;
      // style.strokeDashoffset = length + "px";
      // style.animation = `${dur}s linkLength${length} ${mode} infinite`;
      // return style;
      return `${dur}s linkLength${length} ${mode} infinite`
    },
    handleClick () {
      this.$emit('full')
    },
    onScreenshotUpdate ({ waiting, base64 }) {
      // console.log('waiting', waiting)
      // console.log('base64', base64)
      this.base64 = !waiting && base64 ? base64 : null
    },
    getBoundThirdPartyDevices () {
      getBoundThirdPartyDevices(this.device.id, true)
        .then(({ data, success }) => {
          if (!success) {
            return
          }
          const map = {
            0: 'gateway',
            1: 'receive_card',
            2: 'sending_device',
            // 3: 'led'
            4: 'ledCamera',
            5: 'trafficCamera'
          }
          const form = {
            device:
              this.device.onlineStatus === 1 && this.device.activate === 2
                ? 0
                : 1,
            gateway: 2,
            sending_device: 2,
            ledCamera: 2,
            trafficCamera: 2,
            receive_card: 2,
            led:
              this.device.onlineStatus === 1 && this.device.activate === 2
                ? 0
                : 1,
            msr: 0
          }
          for (const item of data) {
            form[map[item.deviceType]] = item.status === 1 ? 0 : 1
          }
          this.linkStateForm = form
        })
        .catch(err => {
          console.log('err', err)
        })
        .finally(() => {
          this.loaded = true
        })
    },
    getImg (key) {
      const value = this.linkStateForm[key]
      let background = ''
      let params = {}
      switch (key) {
        case 'msr':
          background = `url("${require('@/assets/linkState/icon_msr.svg')}")`
          break
        case 'led':
          value === 0
            ? (background = `url("${
              this.base64
                ? this.base64
                : require('@/assets/image_no_program.svg')
            }")`)
            : (params = { backgroundColor: '#333333' })
          break
        default:
          if (value === 2) {
            background = `url("${require('@/assets/linkState/icon_unbound.svg')}")`
          } else {
            background = `url("${require(`@/assets/linkState/icon_${
              key === 'trafficCamera' || key === 'ledCamera' ? 'camera' : key
            }_${value === 0 ? 'online' : 'offline'}.svg`)}")`
          }
          break
      }
      return { backgroundImage: background, ...params }
    }
  }
}
</script>

<style lang="scss" scoped>
@mixin getPosition($left, $top, $width, $height) {
  left: $left;
  top: $top;
  width: $width;
  height: $height;
}
.wrapper {
  width: 100%;
  height: 100%;
}
.linkState {
  width: 316px;
  height: 316px;
  position: relative;
  transform-origin: center;
  .co {
    z-index: 1;
    position: absolute;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .line {
    position: absolute;
    background: #a1c9ff;
    &.closed {
      background: #d5d9e4;
    }
  }

  .svg {
    width: 100%;
    height: 8px;
    position: absolute;
    top: -4px;
    left: 0;
  }
  .col {
    .svg {
      width: 8px;
      height: 100%;
      position: absolute;
      left: -4px;
      top: 0;
    }
  }
  .polygon {
    .svg {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  .ctext {
    height: 15px;
    line-height: 15px;
    white-space: nowrap;
    text-align: center;
    width: 100%;
    bottom: -20px;
    position: absolute;
    color: #fff;
    font-size: 12px;
    transform: scale(0.8);
    transform-origin: left top;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .msr {
    @include getPosition(9px, 20px, 90px, 90px);
    .ctext {
      left: 12px;
    }
  }
  .device {
    @include getPosition(117px, 57px, 40px, 40px);
    .ctext {
      // left: -13px;
    }
  }
  .sending_device {
    @include getPosition(175px, 57px, 40px, 40px);
    .ctext {
      left: 8px;
    }
  }
  .receive_card {
    @include getPosition(233px, 53px, 45px, 45px);
    .ctext {
      left: 4px;
    }
  }
  .trafficCamera {
    @include getPosition(150px, 127px, 40px, 40px);
    .ctext {
      left: 10px;
      bottom: -10px;
    }
  }
  .ledCamera {
    @include getPosition(150px, 165px, 40px, 40px);
    .ctext {
      left: -10px;
      bottom: -10px;
    }
  }
  .gateway {
    @include getPosition(34px, 200px, 40px, 40px);
    .ctext {
      left: 7px;
    }
  }
  .led {
    @include getPosition(191px, 188px, 96px, 54px);
    .ctext {
      left: 12px;
    }
  }
  .l1 {
    @include getPosition(97px, 83px, 22px, 1px);
  }
  .l2 {
    @include getPosition(155px, 83px, 22px, 1px);
  }
  .l3 {
    @include getPosition(213px, 83px, 22px, 1px);
  }
  .l4 {
    @include getPosition(54px, 108px, 1px, 95px);
  }
  .l5 {
    @include getPosition(54px, 142px, 105px, 36px);
    clip-path: polygon(
      0 18px,
      80px 18px,
      80px 0,
      105px 0,
      105px 1px,
      81px 1px,
      81px 19px,
      0 19px
    );
  }
  .l6 {
    @include getPosition(54px, 142px, 105px, 36px);
    clip-path: polygon(
      0 19px,
      81px 19px,
      81px 35px,
      105px 35px,
      105px 36px,
      80px 36px,
      80px 20px,
      0 20px
    );
  }
  .l7 {
    @include getPosition(72px, 226px, 119px, 1px);
  }
  .l8 {
    @include getPosition(255px, 96px, 1px, 92px);
  }
}
.full {
  .linkState {
    width: 1040px;
    height: 580px;
    position: relative;
    transform-origin: center;
    .co {
      z-index: 1;
      position: absolute;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
    }
    .line {
      position: absolute;
      background: #a1c9ff;
      &.closed {
        background: #d5d9e4;
      }
    }
    //   .polyline{
    //     animation: 2s line linear infinite
    //   }
    //   @keyframes line {
    //   0%{
    //     stroke-dashoffset: 360px;
    //   }
    //   100% {
    //     stroke-dashoffset: 0px;
    //   }
    // }
    .svg {
      width: 100%;
      height: 8px;
      position: absolute;
      top: -4px;
      left: 0;
    }
    .col {
      .svg {
        width: 8px;
        height: 100%;
        position: absolute;
        left: -4px;
        top: 0;
      }
    }
    .polygon {
      .svg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
    }
    .ctext {
      height: 25px;
      line-height: 25px;
      white-space: nowrap;
      text-align: center;
      width: 100%;
      bottom: -30px;
      position: absolute;
      color: #fff;
      font-size: 18px;
      transform-origin: left top;
      transform: scale(1);
      display: flex;
      flex-direction: column;
      align-items: center;
      left: 0;
      right: 0;
    }
    .msr {
      @include getPosition(9px, 30px, 250px, 250px);
      .ctext {
      }
    }
    .device {
      @include getPosition(398px, 148px, 90px, 90px);
      .ctext {
        // left: -13px;
      }
    }
    .sending_device {
      @include getPosition(631px, 148px, 90px, 90px);
      .ctext {
      }
    }
    .receive_card {
      @include getPosition(863px, 148px, 90px, 90px);
      .ctext {
      }
    }
    .trafficCamera {
      @include getPosition(520px, 243px, 90px, 90px);
      .ctext {
        bottom: -20px;
      }
    }
    .ledCamera {
      @include getPosition(520px, 338px, 90px, 90px);
      .ctext {
        bottom: -12px;
      }
    }
    .gateway {
      @include getPosition(89px, 407px, 90px, 90px);
      .ctext {
      }
    }
    .led {
      @include getPosition(669px, 309px, 370px, 208px);
      .ctext {
      }
    }
    .l1 {
      @include getPosition(252px, 207px, 150px, 1px);
    }
    .l2 {
      @include getPosition(484px, 208px, 150px, 1px);
    }
    .l3 {
      @include getPosition(718px, 208px, 150px, 1px);
    }
    .l4 {
      @include getPosition(133px, 276px, 1px, 137px);
    }
    .l5 {
      @include getPosition(134px, 268px, 400px, 100px);
      clip-path: polygon(
        0 50px,
        350px 50px,
        350px 0,
        400px 0,
        400px 1px,
        351px 1px,
        351px 51px,
        0 51px
      );
    }
    .l6 {
      @include getPosition(134px, 268px, 400px, 100px);
      clip-path: polygon(
        0 51px,
        351px 51px,
        351px 99px,
        400px 99px,
        400px 100px,
        350px 100px,
        350px 52px,
        0 52px
      );
    }
    .l7 {
      @include getPosition(175px, 466px, 494px, 1px);
    }
    .l8 {
      @include getPosition(908px, 231px, 1px, 78px);
    }
  }
}
video::-webkit-media-controls {
  display:none !important;
}
</style>
<style lang="scss">
$linkLengthArr: 22, 119, 92, 95, 122, 123, 150, 137, 450, 449, 494,78;
@each $item in $linkLengthArr {
  @keyframes linkLength#{$item} {
    0% {
      stroke-dashoffset: $item + px;
    }
    100% {
      stroke-dashoffset: 0px;
    }
  }
}
</style>
