<template>
  <div class="cardCon">
    <el-tabs type="border-card" v-model="activeName">
      <el-tab-pane label="属性" name="first">
        <div id="infobox">
          <div>
            <el-row class="detail-row" v-for="(val, key) in data" :key="key">
              <template
                v-if="!isJSON(val)"
              >
                <el-col
                  :span="12"
                  class="detail-col"
                  v-show="
                    key !== 'mediaFileURLs' &&
                    key !== 'imagedata' &&
                    key !== 'videodata' &&
                    key !== 'id'
                  "
                >{{ key }}</el-col>
                <el-col
                  :span="12"
                  v-show="
                    key !== 'mediaFileURLs' &&
                    key !== 'imagedata' &&
                    key !== 'videodata' &&
                    key !== 'id'
                  "
                  class="detail-col"
                >{{ val }}</el-col>
              </template>
              <template v-else>
                <el-col
                  :span="12"
                  class="detail-col"
                  v-show="
                    key !== 'mediaFileURLs' &&
                    key !== 'imagedata' &&
                    key !== 'videodata' &&
                    key !== 'id'
                  "
                >{{ key }}</el-col>
                <el-col
                  :span="12"
                  class="detail-col"
                >
                  <el-table :data="parseJSON(val)" style="width: 100%">
                    <el-table-column prop="value" label="名称"></el-table-column>
                    <el-table-column prop="key" label="值"></el-table-column>
                  </el-table>
                </el-col>
              </template>
            </el-row>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="图片" name="second">
        <el-image
          v-if="imageshow"
          style="width: 100%; height: 370px"
          :src="data.imagedata[0] ? data.imagedata[0] : null"
          fit="contain"
          :preview-src-list="data.imagedata"
        ></el-image>
        <div style="height: 370px" v-else>暂无图片</div>
      </el-tab-pane>
      <el-tab-pane label="视频" name="third">
        <el-carousel height="370px" :autoplay="false" v-if="videoshow">
          <el-carousel-item v-for="(item, i) in data.videodata" :key="i">
            <div style="margin: auto 0; margin-top: 85px">
              <video-player
                class="video-player vjs-custom-skin"
                ref="videoPlayer"
                :playsinline="true"
                :options="{
                  playbackRates: [0.7, 1.0, 1.5, 2.0],
                  preload: 'auto',
                  language: 'zh-CN',
                  aspectRatio: '16:9',
                  fluid: true,
                  sources: [{ type: 'video/mp4', src: item }],
                  notSupportedMessage: '此视频暂无法播放，请稍后再试',
                  controlBar: {
                    timeDivider: true,
                    durationDisplay: true,
                    remainingTimeDisplay: false,
                    fullscreenToggle: true
                  }
                }"
              ></video-player>
            </div>
          </el-carousel-item>
        </el-carousel>
        <div style="height: 370px" v-else>暂无视频</div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'

export default {
  name: 'featureInfo',
  components: {
    videoPlayer
  },
  data () {
    return {
      imageshow: false,
      videoshow: false,
      activeName: 'first',
      imagedata1: []
    }
  },
  props: {
    data: {
      type: Object,
      required: true,
      default: () => {
        return {}
      }
    }
  },
  methods: {
    isJSON (value) {
      try {
        const parsed = JSON.parse(value)
        return Array.isArray(parsed) && parsed.every(item => typeof item === 'object')
      } catch (e) {
        return false
      }
    },
    parseJSON (value) {
      try {
        return JSON.parse(value).map(item => ({ key: item.key, value: item.value }))
      } catch (e) {
        return []
      }
    }
  },
  computed: {},
  created () {},
  watch: {
    data: {
      handler () {
        this.imagedata1 = []
        if (this.data.videodata && this.data.imagedata) {
          if (this.data.videodata.length > 0) {
            this.videoshow = true
          } else {
            this.videoshow = false
          }
          if (this.data.imagedata.length > 0) {
            this.imageshow = true
          } else {
            this.imageshow = false
          }
        }
        for (var key in this.data) {
          if (
            key !== 'mediaFileURLs' &&
            key !== 'imagedata' &&
            key !== 'videodata' &&
            key !== 'id' &&
            this.isJSON(this.data[key])
          ) {
            this.imagedata1.push(...this.parseJSON(this.data[key]))
          }
        }
      },
      deep: true
    }
  }
}
</script>

<style scoped>
.cardCon {
  border: 1px solid #9dbbe7 !important;
  border-radius: 4px;
  width: 95%;
}
#infobox {
  height: 378px;
  width: 100%;
  overflow: auto;
}
#infobox > div {
  width: 100%;
}
.detail-row {
  display: flex;
  flex-flow: row;
}
.detail-col {
  border: 1px solid #cfcece;
  line-height: 200%;
}
.vjs-menu .vjs-menu-content {
  display: none !important;
}
</style>
