<template>
  <div class="render-element" style="width: 100%; height: 100%;">
    <ai-dv-display v-if="data.type === 'display'" :title="data.title" :list="data[data.dataType]"></ai-dv-display>
    <ai-dv-panel
      style="height: 100%; width: 100%;"
      v-if="data.type !== 'display'"
      :title="data.title"
      :border="data.border || ''">
      <AiDvSummary v-if="data.type === 'summary'" :summaryTitle="data.summaryTitle" :key="`summary${index}`" :type="data.display" :data="data[data.dataType]"/>
      <AiSwiper v-else-if="data.type === 'swiper'" :heigth="'100%'" :data="data[data.dataType]"/>
      <dv-scroll-board
        v-if="data.type === 'table'"
        :class="'dvScrollBoard' + theme"
        :config="formatTable(data[data.dataType], data.isShowIndex, data.rowNum)"
        :key="data.height"
        :theme="theme"
        :style="{height: data.height + 'px', width: '100%'}" />
      <ai-echart
        v-else-if="data.type === 'barChart1'"
        style="height: 100%; width: 100%;"
        :ref="'chart' + index"
        :key="`chart${index}`"
        :theme="theme"
        :data="data[data.dataType]"
        :ops="data.config"/>
      <ai-echart
        v-else-if="data.type === 'barChart2'"
        style="height: 100%; width: 100%;"
        :ref="'chart' + index"
        :theme="theme"
        :key="`chart${index}`"
        :data="data[data.dataType]"
        :ops="data.config"/>
      <ai-echart
        v-else-if="data.type === 'barChart3'"
        style="height: 100%; width: 100%;"
        :ref="'chart' + index"
        :key="`chart${index}`"
        :theme="theme"
        :data="data[data.dataType]"
        :ops="data.config"/>
      <ai-echart
        v-else-if="data.type === 'barChart5'"
        style="height: 100%; width: 100%;"
        :ref="'chart' + index"
        :key="`chart${index}`"
        :theme="theme"
        :data="data[data.dataType]"
        :ops="data.config"/>
      <ai-echart
        v-else-if="data.type === 'barChart7'"
        style="height: 100%; width: 100%;"
        :ref="'chart' + index"
        :key="`chart${index}`"
        :theme="theme"
        :data="data[data.dataType]"
        :ops="data.config"/>
      <ai-echart
        v-else-if="data.type === 'barChart8'"
        style="height: 100%; width: 100%;"
        :ref="'chart' + index"
        :key="`chart${index}`"
        :theme="theme"
        :data="data[data.dataType]"
        :ops="data.config"/>
      <ai-echart
        v-else-if="data.type === 'barChart9'"
        style="height: 100%; width: 100%;"
        :ref="'chart' + index"
        :key="`chart${index}`"
        :theme="theme"
        :data="data[data.dataType]"
        :ops="data.config"/>
      <ai-echart
        v-else-if="data.type === 'lineChart1'"
        style="height: 100%; width: 100%;"
        :ref="'chart' + index"
        :key="`chart${index}`"
        :theme="theme"
        :data="data[data.dataType]"
        :ops="lineChart1"/>
      <ai-echart
        v-else-if="data.type === 'lineChart2'"
        style="height: 100%; width: 100%;"
        :ref="'chart' + index"
        :key="`chart${index}`"
        :theme="theme"
        :data="data[data.dataType]"
        :ops="lineChart2"/>
      <ai-echart
        v-else-if="data.type === 'lineChart3'"
        style="height: 100%; width: 100%;"
        :ref="'chart' + index"
        :key="`chart${index}`"
        :theme="theme"
        :data="data[data.dataType]"
        :ops="data.config"/>
      <ai-echart
        v-else-if="data.type === 'lineChart4'"
        style="height: 100%; width: 100%;"
        :ref="'chart' + index"
        :key="`chart${index}`"
        :theme="theme"
        :data="data[data.dataType]"
        :ops="data.config"/>
      <ai-echart
        v-else-if="data.type === 'lineChart5'"
        style="height: 100%; width: 100%;"
        :ref="'chart' + index"
        :key="`chart${index}`"
        :theme="theme"
        :data="data[data.dataType]"
        :ops="lineChart5"/>
      <ai-echart
        v-else-if="data.type === 'pieChart'"
        style="height: 100%; width: 100%;"
        :ref="'chart' + index"
        :key="`chart${index}`"
        :theme="theme"
        :data="data[data.dataType]"
        :ops="pieChart"/>
      <ai-echart
        v-else-if="data.type === 'pieChart1'"
        style="height: 100%; width: 100%;"
        :ref="'chart' + index"
        :key="`chart${index}`"
        :theme="theme"
        :data="data[data.dataType]"
        :ops="pieChart1"/>
      <ai-echart
        v-else-if="data.type === 'pieChart3'"
        style="height: 100%; width: 100%;"
        :ref="'chart' + index"
        :key="`chart${index}`"
        :theme="theme"
        :data="data[data.dataType]"
        :ops="pieChart3"/>
      <ai-map :markers="data[data.dataType]" v-else-if="data.type=='map'" :mask="data.mask === '1'" :areaId="data.areaId || user.info.areaId" map-style="amap://styles/e51987628aee5206d4c9ca8c6e98b4f7"/>
      <ai-monitor :src="data.src" v-else-if="data.type === 'monitor'" :type="data.monitorType"></ai-monitor>
      <video style="width: 100%; height: 100%; object-fit: fill;" loop :src="data.src" autoplay v-else-if="data.type === 'video'"></video>
    </ai-dv-panel>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import AiSwiper from './AiSwiper.vue'
  import pieChart from 'dvcp-dv-ui/components/AiEchart/template/pie/pieChart2'
  import pieChart1 from 'dvcp-dv-ui/components/AiEchart/template/pie/pieChart1'
  import pieChart3 from 'dvcp-dv-ui/components/AiEchart/template/pie/pieChart3'
  import lineChart1 from 'dvcp-dv-ui/components/AiEchart/template/line/lineChart1'
  import lineChart2 from 'dvcp-dv-ui/components/AiEchart/template/line/lineChart2'
  import lineChart5 from 'dvcp-dv-ui/components/AiEchart/template/line/lineChart5'

  export default {
    name: 'RenderElement',

    props: ['data', 'index', 'theme'],

    components: {
      AiSwiper
    },

    data () {
      return {
        lineChart1,
        lineChart2,
        lineChart5,
        pieChart,
        pieChart1,
        pieChart3
      }
    },

    computed: {
      ...mapState(['user'])
    },

    methods: {
      formatTable(data, isShowIndex, rowNum) {
        if (!data.length) {
          return {
            header: [],
            data: []
          }
        }

        let rows = []
        const header = data.map(v => {
          return v[Object.keys(v)[0]]
        })

        Object.keys(data[0]).forEach((item, index) => {
          if (index !== 0) {
            rows.push(item)
          }
        })

        return {
          header: header,
          data: rows.map(item => {
            return data.map(v => {
              return v[item]
            })
          }),
          headerBGC: 'transparent',
          evenRowBGC: 'transparent',
          oddRowBGC: 'rgba(0, 133, 255, 0.2)',
          headerHeight: 42,
          rowNum: rowNum || 7,
          index: isShowIndex === '1',
          carousel: 'page',
          indexHeader: '排名',
          align: ['center', 'center', 'center', 'center', 'center']
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .render-element {
    ::v-deep .dvScrollBoard1 {

      .header {
        background: rgba(0, 0, 0, 0.1)!important;

        .header-item {
          color: #FFBB73!important;
          font-size: 16px!important;
          font-weight: 600;
        }
      }


      .rows {
        font-size: 16px;
        font-weight: 600;
        color: #FFFFFF;
        line-height: 21px;
        text-shadow: 0px 2px 4px rgba(117, 9, 9, 0.5);
        background: linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

        & > div:nth-of-type(2n) {
          background: rgba(0, 0, 0, 0.1)!important;
        }

        .index {
          color: #fff;
          text-shadow: none;
          background: transparent;
          background-color: #BD4921!important;
          -webkit-background-clip: inherit;
          -webkit-text-fill-color: #fff;
        }
      }
    }
  }
</style>
