<template>
  <m-card :title="title" :no-title="noTitle" :body-style="bodyStyle">
    <template #autoTitle>
      <slot name="autoTitle" :title="title"></slot>
    </template>
    <template v-slot:title>
      <div style="flex: 1" class="d-flex">
        <div style="flex: 1">
          <div class="ml-2" style="width: 28px;">
            <tool-tip right v-if="!!$scopedSlots.subtitle">
              <v-icon color="blue-grey" size="28">mdi-help-circle-outline</v-icon>
              <template #text>
                <slot name="subtitle"></slot>
              </template>
            </tool-tip>
          </div>
        </div>
        <slot name="titleTools"></slot>
        <!-- <div>
          <span style="font-size: 14px;">x轴标题倾斜度 ： </span>
          <v-btn-toggle
            v-model="rotateVal"
            dense
            color="blue accent-3"
          >
            <v-btn v-for="n in btn" :key="n" :value="n">
              {{ n }}°
            </v-btn>
          </v-btn-toggle>
        </div> -->
      </div>
    </template>
    <template v-if="table">
      <slot name="table"></slot>
    </template>
    <template v-else>
      <slot name="search"></slot>
      <template v-if="showEmpty">
        <empty :height="height"></empty>
      </template>
      <template v-else>
        <slot name="tools"></slot>
        <low-code
          ref="outSide"
          :height="height"
          :rotate="rotateVal"
          v-bind="$attrs"
          v-on="$listeners"
          @click="handleClick"
          @finished="$emit('finished')"
        />
      </template>
    </template>
    <template>
      <slot name="drawer"></slot>
    </template>
    <v-navigation-drawer
      v-model="drawer"
      width="70%"
      right
      absolute
      hide-overlay
      temporary
    >
      <m-card
        ref="drillingCard"
        no-elevation
        :title="drillingTitle || drTitle"
      >
        <template v-if="showEmptyCard">
          <empty :height="height"></empty>
        </template>
        <low-code v-else ref="inSide" v-bind="drillingConfig" :height="height" :option="drillingOption" @refresh="handleRefresh" @mousemove="handleMousemove" @click="handleDrillClick"></low-code>
      </m-card>
    </v-navigation-drawer>
  </m-card>
</template>

<script>
import MCard from '@/components/MCard'
import LowCode from '@/charts/lowCode.vue'
import Empty from '@/components/Common/empty'
import ToolTip from '@/components/Tooltip'
export default {
  name: 'chart-template',
  components: { MCard, LowCode, Empty, ToolTip },
  props: {
    bodyStyle: {
      type: String,
      default: ''
    },
    // 是否是表格
    table: {
      type: Boolean,
      default: false
    },
    height: {
      type: [Number, String],
      default: 500
    },
    rotate: {
      type: [String, Number],
      default: 0
    },
    title: {
      type: String,
      default: '标题'
    },
    drillingTitle: {
      type: String,
      default: ''
    },
    noTitle: {
      type: Boolean,
      default: false
    },
    // 是否需要自定义抽屉刷新事件
    customRefreshInside: {
      type: Boolean,
      default: false
    },
    drillingConfig: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      btn: [30, 45, 60, 90],
      rotateVal: null,
      drawer: false,
      drTitle: '',
      drillingOption: {},
      clickArguments: []
    }
  },
  computed: {
    showEmpty () {
      const series = this.$attrs.option?.series
      return this.checkEmpty(series)
    },
    showEmptyCard () {
      const series = this.drillingOption?.series
      return this.checkEmpty(series)
    }
  },
  created () {
    this.rotateVal = this.rotate
  },
  mounted () {
    this.$nextTick(() => {
      if (this.showEmpty) {
        this.$emit('finished')
      }
    })
  },
  methods: {
    // 校验参数是否为空
    checkEmpty (series) {
      if (!series) return true
      if (Array.isArray(series)) {
        if (series.length === 1) {
          return !series[0].data.length
        }
        return !series.length
      }
      return !series?.data || !series.data.length
    },
    getRefs () {
      const outSide = this.$refs.outSide?.getChart() ?? {}
      const inSide = this.$refs.inSide?.getChart() ?? {}
      return {
        outSide,
        inSide
      }
    },
    /**
     * 接收一个钻取的option
     */
    drillingData (option) {
      this.drawer = true
      this.drillingOption = option
    },
    handleClick () {
      // 小气泡钻取
      if (arguments[0].componentType === 'markPoint') {
        arguments[0].name = arguments[0].data.label.name || arguments[0].data.name
        arguments[0].seriesName = arguments[0].data.label.text
      }
      this.clickArguments = [...arguments]
      if (!this.drillingTitle) this.drTitle = `[${arguments[0].name}] [${arguments[0].seriesName}]`
      this.$emit('drilling', {
        params: [...arguments],
        init: this.drillingData
      })
    },
    // 钻取抽屉刷新按钮回传同样的参数给赚取接口，自动重复调用
    handleRefresh () {
      if (this.customRefreshInside) {
        this.$emit('drillingRefresh')
        return
      }
      if (!this.drillingTitle) this.drTitle = `[${this.clickArguments[0].name}] [${this.clickArguments[0].seriesName}]`
      this.$emit('drilling', {
        params: [...this.clickArguments],
        init: this.drillingData
      })
    },
    // 钻取的鼠标经过事件
    handleMousemove () {
      this.$emit('drillingMousemove', [...arguments])
    },
    // 抽屉图表钻取
    handleDrillClick (e) {
      this.$emit('drillClick', e)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
