<template>
  <div id="unit" class="flex-row binary">
    <div class="three-left" :style="{width:'18%'}">
      <div class="flex">
        <report-items @select-type="showReportType" @save-report-html="saveReportHtml" @select-changed="showReport" :inindex="index"></report-items>
        <!--        <report-history @select-changed="showReport" v-ref:history></report-history>-->
      </div>
    </div>
    <!-- 使用动态页签
    <dynamic :comps='[]' name='report'></dynamic> -->
    <!-- 使用路由切换 -->
    <div :style="{width:'82%'}">
      <div class="flex" v-if="$refs.route.cards.length === 0">
        <echarts-box></echarts-box>
      </div>
      <route v-ref:route @save-success="$refs.history.search" v-show="!($refs.route.cards.length === 0)"></route>
    </div>

    <modal :show.sync="show" v-ref:modal small backdrop="false">
      <header slot="modal-header" class="modal-header">
        <h4 class="modal-title">输入文件名称</h4>
      </header>
      <article slot="modal-body" class="modal-body">
        <div class="form-group">
          <input type="text" class="form-control" v-model="filename" placeholder='保存的文件名'>
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button v-show="show" type="button" class="btn btn-default" @click='close'>取消</button>
        <button v-show="show" type="button" class="btn btn-success" @click='confirm(filename)'>确认</button>
      </footer>
    </modal>
  </div>
</template>

<script>
export default {
  title: '报表汇总',
  data () {
    return {
      filename: '',
      show: false,
      row: null,
      comp: [],
      index: ''
    }
  },
  methods: {
    async confirm () {
      if (!this.filename) {
        this.$showAlert('无法保存，文件名不能为空', 'warning', 3000)
        return
      }
      if (this.$refs.route.$children.length <= 0) {
        this.$showAlert('无法保存，请选择一个报表并查询', 'warning', 3000)
        return
      }
      // 验证文件是否重名
      let count = await this.$resetpost('api/af-revenue/sql/manageSingleTable',
        {data: {tablename: 't_report_record', condition: `f_files_name = '${this.filename}'`}},
        {resolveMsg: null, rejectMsg: null})
      if (count.data.length > 0) {
        this.$showAlert('无法保存，文件名重名', 'warning', 3000)
        return
      }
      try {
        this.$refs.route.$children[0].$refs.paged.$els.handcollect.innerHTML
      } catch (e) {
        this.$showAlert('当前报表无法保存, 请联系管理员', 'warning', 3000)
        return
      }
      const param = {
        f_files_name: this.filename,
        f_files_content: this.$refs.route.$children[0].$refs.paged.$els.handcollect.innerHTML,
        f_files_type: this.row.f_report_type,
        f_component_name: this.row.f_report_path,
        f_query_month: `${this.$refs.route.$children[0].model.model.startDate}-${this.$refs.route.$children[0].model.model.endDate}`,

        f_operator: this.$login.f.name,
        f_operator_id: this.$login.f.id,
        f_orgid: this.$login.f.orgid,
        f_orgname: this.$login.f.orgs,
        f_depid: this.$login.f.depids,
        f_depname: this.$login.f.deps,
      }
      let saveBack = await this.$resetpost('rs/logic/saveReportHtml', param)
      if (saveBack.data.status === 'succeed') {
        this.show = false
        this.filename = ''
        // 后台保存完成，通知刷新
        this.$showAlert('保存成功!', 'success', 3000)
      }
    },
    close () {
      this.show = false
    },
    // 保存当前的报表
    saveReportHtml () {
      this.show = true
      this.filename = this.row.f_report_name + this.$login.toStandardDateString()
    },
    // 根据选择的数据直接显示保存的报表
    showReport (row) {
      this.$refs.route.init('report-history-show', {data: row.val})
    },
    // 根据报表的类型选择显示报表
    showReportType (index, row) {
      let m = document.getElementsByName('style')
      console.log(m.length)
      for (let i = 0; i < m.length; i++) {
        m[i].style.backgroundColor = "#ffffff"
        m[i].style.borderColor = "#000000"
        m[i].style.color = "#000000"

        if (i == index) {
          m[i].style.backgroundColor = "#0688ce"
          m[i].style.borderColor = "#0688ce"
          m[i].style.color = "#ffffff"
        }
      }
      this.index = index
      this.row = row
      this.$refs.route.init(row.f_report_path, {data: row})
    }
  }
}
</script>
<style>
. mystyle {
  background-color: #05c3c7;
}
</style>
