<template>
  <van-popup
    ref="popupChart"
    v-model="popupChartVisible"
    class="popup-chart"
    get-container="body"
    position="left"
    style="width: 100vw; height: 100vh"
    :close-on-click-overlay="false"
    :overlay="true"
    @click-overlay="closeDialog"
  >
    <template v-if="popupChartVisible">
      <chart
        :id="chartId"
        key="popupChart"
        :chart-key="chartId"
        :full-screen="true"
        :is-process-chart="isProcessChart"
        :option="option"
        :name="name"
        :select-list="selectList"
        :popup-count-query="countQuery"
        :is-public="isPublic"
      />
      <i class="icon-shouqi2" @click="closeDialog"></i>
    </template>
  </van-popup>
</template>

<script>
  import Chart from './Chart.vue'
  import popupMode from '@/mixins/popupMode.js'
  export default {
    name: 'PopupChart',
    components: {
      Chart,
    },
    mixins: [popupMode('popupChartVisible')],
    props: {
      chartId: {
        type: [String, Number],
        required: true,
      },
      chartKey: {
        type: [String, Number],
        required: true,
      },
      fullScreen: {
        type: Boolean,
        default: false,
      },
      isMoreUrl: {
        type: Boolean,
        default: false,
      },
      option: {
        type: Object,
        default: () => {},
      },
      //是否是流程图表
      isProcessChart: {
        type: Boolean,
        default: false,
      },
      name: {
        type: String,
        default: '',
      },
      isPublic: {
        type: Number,
      },
      selectList: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        popupChartVisible: false,
        countQuery: {},
      }
    },
    watch: {},
    methods: {
      closeDialog() {
        this.popupChartVisible = false
      },
      showDialog(countQuery) {
        this.countQuery = countQuery
        this.popupChartVisible = true
      },
    },
  }
</script>

<style lang="scss" scoped>
  .icon-shouqi2 {
    position: absolute;
    right: 16px;
    top: 12px;
    font-size: 22px;
    color: #8c8c8c;
  }
</style>
