<!-- 放大 -->
<template>
  <j-modal
    :okButtonProps="{ class:{'jee-hidden': true} }"
    :title='cardInfo.title'
    :visible='visible'
    :width='width'
    cancelText='关闭'
    fullscreen
    @cancel='handleCancel'>

    <!-- 任务完成情况 -->
    <task-status
      v-if='cardInfo.type === 1'
      ref='taskStatus'
      :dataType='queryForm.dataType'
      :queryData='queryForm' />
    <!-- 分日数据消耗分析 -->
    <ConsumptionRanking
      v-if='cardInfo.type === 2'
      ref='ConsumptionRanking'
      :queryData='queryForm'
      :rangeDate='queryForm.rangeDate'
    />
    <!--分时消耗对比趋势-->
    <ComparisonTrend
      v-if='cardInfo.type=== 3'
      ref='ComparisonTrend'
      :queryData='queryForm'
      :time='queryForm.time'
    />
    <!-- 在投二代与广告主个数 -->
    <ConsumptionTrend
      v-if='cardInfo.type=== 4'
      ref='ConsumptionTrend'
      :dayType='queryForm.dayType'
      :queryData='queryForm'
      :rangeTime='queryForm.rangeTime'
      :userType='queryForm.userType'
    />
  </j-modal>
</template>

<script>
import taskStatus from './TaskStatus'
import ConsumptionRanking from './ConsumptionRanking'
import ComparisonTrend from './ComparisonTrend'
import ConsumptionTrend from './ConsumptionTrend'

export default {
  name: 'ScaleModal',
  components: {
    taskStatus,
    ConsumptionRanking,
    ComparisonTrend,
    ConsumptionTrend
  },
  props: {},
  data() {
    return {
      title: '',
      width: 800,
      visible: false,
      disableSubmit: false,
      cardInfo: {},
      queryForm: {}
    }
  },
  methods: {
    handleCancel() {
      this.visible = false
      this.cardInfo = {}
      this.$emit('cancel')
    },
    open(info, query) {
      this.visible = true
      this.cardInfo = info
      this.queryForm = query
      switch (this.cardInfo.type) {
        case 1:
          this.$nextTick(() => {
            this.$refs.taskStatus.handleQuery()
          })
          break
        case 2:
          this.$nextTick(() => {
            this.$refs.ConsumptionRanking.handleQuery()
          })
          break
        case 3:
          this.$nextTick(() => {
            this.$refs.ComparisonTrend.handleQuery()
          })
          break
        case 4:
          this.$nextTick(() => {
            this.$refs.ConsumptionTrend.handleQuery()
          })
          break
      }
    }
  }
}
</script>