antissoft / lvqianmeiye_ERP

  <template>

    <el-dialog :visible.sync="visibleSync" :title="title" :width="dialogWidth" append-to-body top="8vh"

      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>

    ::v-deep .el-dialog {

      border-radius: 14px;

    }

  .tech-drill-dialog {
    // .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>