<template>
  <div v-if="permission != 'n'" class="ht-charts">
    <chart
      ref="chart"
      :id="id"
      :key="`${id}chart`"
      :alias="alias"
      :chart-key="`${id}chart`"
      :full-screen="false"
      :is-more-url="isMoreUrl"
      :is-process-chart="isProcessChart"
      :option="option"
      :is-public="isPublic"
      :width="width"
      :select-list="selectList"
      :height="height"
      @openFullScreen="openFullScreen"
    />
    <template v-if="isMobile && permission != 'n'">
      <PopupChart
        ref="PopupChart"
        :chart-id="id"
        :chart-key="`${id}popupChart`"
        :full-screen="true"
        :is-process-chart="isProcessChart"
        :option="option"
        :name="name"
        :select-list="selectList"
        :is-public="isPublic"
        @openFullScreen="openFullScreen"
      ></PopupChart>
    </template>
  </div>
</template>

<script>
  import permission from '@/mixins/permission.js'
  import mobileMode from '@/mixins/mobileMode.js'
  import PopupChart from './popupChart.vue'
  import Chart from './Chart.vue'
  export default {
    name: 'HtChart',
    components: {
      PopupChart,
      Chart,
    },
    mixins: [permission, mobileMode],
    props: {
      id: {
        type: [String, Number],
        required: true,
      },
      alias: {
        type: [String, Number],
        default: '',
      },
      width: {
        type: [String, Number],
        default: '',
      },
      height: {
        type: [String, Number],
        default: '',
      },
      selectList: {
        type: String,
        default: '',
      },
      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: '',
      },
    },
    data() {
      return {}
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    destroyed() {},
    methods: {
      openFullScreen(countQuery) {
        this.$refs.PopupChart.showDialog(countQuery)
      },
      refresh() {
        this.$refs.chart.initData()
      },
    },
  }
</script>

<style scoped lang="scss">
  .ht-charts {
    position: relative;
    /*  border-bottom: 10px solid #f6f6f6; */
    .full-screen-icon {
      position: absolute;
      top: 2px;
      right: 2px;
      font-size: 22px;
      color: #8c8c8c;
    }
  }
  .el-col {
    > .ht-charts {
      margin-top: 20px;
    }
  }
</style>
