<template>
  <el-dialog :visible.sync="visibleSync" :title="title" :width="dialogWidth" append-to-body
    custom-class="tech-drill-dialog" :close-on-click-modal="false" @closed="handleClosed">
    <component :is="currentComponent" v-bind="componentProps" />
  </el-dialog>
</template>

<script>
import BillingAnalysis from './kpi-drill/billing-analysis.vue'
import ConsumeAnalysis from './kpi-drill/consume-analysis.vue'
import NetAnalysis from './kpi-drill/net-analysis.vue'
import TargetAnalysis from './kpi-drill/target-analysis.vue'
import TkAnalysis from './kpi-drill/tk-analysis.vue'
import RefundAnalysis from './kpi-drill/refund-analysis.vue'

export default {
  name: 'KpiDrillDialog',
  components: {
    BillingAnalysis,
    ConsumeAnalysis,
    NetAnalysis,
    TargetAnalysis,
    TkAnalysis,
    RefundAnalysis
  },
  props: {
    visible: { type: Boolean, default: false },
    title: { type: String, default: '数据穿透' },
    type: { type: String, default: 'billing' }, // billing | consume | refund | target | net | tk
    filters: {
      type: Object,
      default: () => ({ startTime: null, endTime: null, storeIds: [], month: null })
    },
    extra: { type: Object, default: () => ({}) },
    storeOptions: { type: Array, default: () => [] }
  },
  data() {
    return {
      visibleSync: false
    }
  },
  watch: {
    visible: {
      immediate: true,
      handler(v) {
        this.visibleSync = v
      }
    }
  },
  computed: {
    dialogWidth() {
      return '1360px'
    },
    currentComponent() {
      const componentMap = {
        billing: 'BillingAnalysis',
        consume: 'ConsumeAnalysis',
        net: 'NetAnalysis',
        target: 'TargetAnalysis',
        tk: 'TkAnalysis',
        refund: 'RefundAnalysis'
      }
      return componentMap[this.type] || 'BillingAnalysis'
    },
    componentProps() {
      return {
        filters: this.filters,
        extra: this.extra,
        storeOptions: this.storeOptions
      }
    }
  },
  methods: {
    handleClosed() {
      this.$emit('update:visible', false)
      this.$emit('closed')
    }
  }
}
</script>

<style lang="scss" scoped>
.tech-drill-dialog {
  .el-dialog {
    border-radius: 14px;
    overflow: hidden;
  }

  .el-dialog__header {
    padding: 16px 20px;
    border-bottom: 1px solid #ebeef5;
  }

  .el-dialog__body {
    padding: 20px;
    background: #f5f7fa;
    color: #303133;
    overflow-y: auto;
    max-height: calc(90vh - 100px);
  }
}
</style>
