<template>
  <div class="fullheight">
    <ht-sidebar-dialog
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      :show-close="false"
      width="100%"
      :close-on-click-modal="false"
      v-loading="loading"
    >
      <el-page-header @back="back" content="视图列表" />
      <div style="margin: 10px 0">
        <ht-input v-model="data.name" />&nbsp;
        <el-button @click="edit()">添加报表</el-button>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button v-if="data.type !== '1' && data.id" @click="publish"
          >发布</el-button
        >
      </div>
      <div v-for="(option, index) in options" :key="index" v-cloak>
        <el-button size="mini" type="primary" @click="edit(option.id, index)"
          >编辑</el-button
        >
        <el-button size="mini" type="danger" @click="remove(option.id)"
          >删除</el-button
        >
        <el-button size="mini" type="warning" @click="refresh(option.id, index)"
          >刷新</el-button
        >
        <el-button size="mini" type="info" @click="exportData(index)"
        >导出</el-button
        >
        <chart
          v-if="dialogVisible"
          :option="option"
          :index="index"
          :is-convert-option="true"
        />
      </div>
    </ht-sidebar-dialog>
    <report-setting
      ref="reportSetting"
      :id="selectedId"
      v-if="dialogVisible"
      :report="selectedReport"
      @after-save="afterSave"
    />
  </div>
</template>

<script>
import flow from '@/api/flow.js'
const chart = () => import('@/components/form/chart/Chart.vue')
const reportSetting = () => import('@/components/form/chart/ReportSetting.vue')
import { export_json_to_excel } from '@/vendor/Export2Excel.js'

export default {
  components: {
    chart,
    reportSetting
  },
  data() {
    return {
      reportChartId: '',
      dialogVisible: false,
      data: {},
      options: [],
      selectedId: '',
      index: '',
      selectedReport: {},
      loading: true
    }
  },
  methods: {
    //返回
    back() {
      this.$emit('save-report')
      this.dialogVisible = false
    },
    handleOpen(id) {
      this.loading = true
      this.reportChartId = id
      this.dialogVisible = true
      this.options = []
      this.getReportChartData()
    },
    async getReportChartData() {
      if (this.reportChartId) {
        await flow.getReportList(this.reportChartId).then(data => {
          if (data) {
            this.data = data
          } else {
            this.data = {}
          }
        })
        await flow.getEchartsData(this.reportChartId).then(data => {
          if (this.options) {
            this.options = data.value
          } else {
            this.options = []
          }
        })
      } else {
        this.data = {}
        this.options = []
      }
      setTimeout(() => {
        this.loading = false
      }, 50)
    },
    edit(id, index) {
      this.selectedReport = {
        id: this.data.id,
        name: this.data.name,
        alias: this.data.alias
      }
      if (id) {
        this.index = index
        this.selectedId = id
      } else {
        this.selectedId = ''
        this.index = ''
      }
      this.$refs.reportSetting.handleOpen()
    },
    remove(id) {
      this.$confirm('确定删除吗？')
        .then(() => {
          flow.removeAct(id).then(data => {
            this.$message.success('删除成功')
            this.getReportChartData(this.reportChartId)
          })
        })
        .catch(() => {})
    },
    afterSave() {
      this.getReportChartData()
    },
    save() {
      if (this.data.name.length == 0) {
        this.$message('视图列表名称必填!')
        return
      }

      let data = {
        name: this.data.name,
        alias: this.data.alias,
        type: this.data.type,
        id: this.data.id,
        createBy: this.data.createBy,
        createName: this.data.createName,
        createOrgId: this.data.createOrgId,
        orgName: this.data.orgName
      }
      flow.saveReport(data).then(data => {
        if (data.state) {
          this.data.id = data.value
          this.$message.success(data.message)
          this.$emit('save-report')
          this.dialogVisible = false
        } else {
          this.$message.error(data.message)
        }
      })
    },
    publish() {
      flow.publishReport(this.data.id).then(data => {
        if (data.state) {
          this.$message.success('发布成功')
          this.data.type = '1'
          this.$emit('after-save', {})
        } else {
          this.$message.error(data.message)
        }
      })
    },
    refresh(id, index) {
      flow.getSingleEchartsData(id).then(data => {
        this.options.splice(index, 1)
        this.options.splice(index, 0, data.value)
      })
    },
    /**
     * 导出图表数据
     * @param index 多个图表的索引
     * @returns {ElMessageComponent}
     */
    exportData(index) {
      if (!this.options.length) {
        return this.$message.warning('未获取到流程图表信息，请核对后再试！')
      }

      const option = this.options[index]
      //头部，第一格放入空行占位
      const header = ['类型', ...option['xAxis']]
      const series = option['series']
      const body = []
      if (series && series.length) {
        series.forEach((item) => {
          if (item.name && item.data && item.data.length) {
            body.push([ item.name, ...item.data ])
          }
        })
      }

      //导出参数
      if (!body.length) {
        return this.$message.warning('未获取到流程图表数据！')
      }
      const exportParam = { header, data: body, filename: option['subtext'], sheetName: option['name'] }
      export_json_to_excel(exportParam)
    }
  }
}
</script>

<style lang="scss" scoped>
.fullheight {
  overflow: auto;
}
[v-cloak] {
  display: none;
}
</style>