<template>
  <div class="flex">
    <div class="row" style="height: 5%">
      <div class="col-sm-10">
        <label class="font_normal_body">报表名称:</label>
        <v-select multiple
                  :value.sync="modelinfo.f_report_name"
                  class="select_list select"
                  v-model="modelinfo.f_report_name"
                  :options='reportNames' placeholder='请选择'
                  @keyup.enter="chaxun()"
        ></v-select>
      </div>
      <div class="col-sm-2">
        <button class="button_search left" @click="chaxun()">查询</button>
        &nbsp;&nbsp;
      </div>
    </div>
    <partial-view v-ref:pv>
      <div class="span" v-show="!filtrate && !reportHistory">
        <p class="bg-info text-center" style="padding: 8px;background: #5ac0d9;color: white;border-radius:10px 10px 0 0">
          <button class="button_search-3 button_spacing border-right" @click="showReportHistory()">历史报表</button>
          <button class="button_search-3 button_spacing border-right" @click="$dispatch('save-report-html')">保存报表</button>
        </p>
        <p class="bg-info text-center"
           style="padding: 8px;background: #5ac0d9;color: white;border-radius:10px 10px 0 0">报表类型
          <button class="button_search-3 button_spacing border-right" v-if="this.$login.r.includes('报表配置权限')"
                  @click="saveReport()">新增
          </button>
        </p>
        <div style="height: 87%;overflow: auto;width: 104%">
          <div style="padding:3px" :style="{background: index===row ? '#dfedfb' : 'white'}"
               :class="styles=='2'?'col-sm-6 auto':'col-sm-12 auto'" v-for="(index,type) in types"
               @click="$dispatch('select-type',index, type),changecolor(index,type,'0')"
               :id="'div-'+index">
            <div class="row auto"><img :src="type.f_image_path" alt="图片加载失败" class="img-rounded" style="width: 60px;">
            </div>
            <div style="height:40px" class="row auto">{{ index + 1 }}、
              <span @click="changecolor(index,type,'1')"
                    title="点击报表名称可对该报表配置进行修改！注：需要权限【报表配置权限】">{{ type.f_report_name }}</span></div>
          </div>
        </div>
      </div>
      <div class="span" v-show="filtrate && !reportHistory">
        <p class="bg-info text-center"
           style="padding: 8px;background: #5ac0d9;color: white;border-radius:10px 10px 0 0">
          <!--true新增，false修改-->
          {{ saveflag ? '新增报表' : '修改报表配置' }}
        </p>
        <div style="height: 94%;overflow: auto;width: 104%">
          <table style="border-style: none;width: 95%;">

            <tr style="display:block;margin:15px 0;" v-for="(key,value) in infos">
              <td style="text-align: left;">
                <label class="font_normal_body" style="text-align: right;">{{ key }}:</label>
                <input type="text" style="width: 70%;" class="input_search" v-model="value"
                       v-bind:title="[key =='报表状态'?'1表示显示其他表示不显示':'']"/>
              </td>
            </tr>
            <tr style="display:block;margin:15px 0;">
              <td style="text-align: right;width: 50%;">
                <button class="button_clear  button_spacing" @click="clear(true)">清空</button>
              </td>
              <!--修改的保存-->
              <td style="text-align: right;width: 25%;" v-if="!saveflag">
                <button class="button_clear  button_spacing" @click="saveOrUpdate(1)">保存</button>
              </td>
              <!--新增的保存-->
              <td style="text-align: left;width: 25%;" v-if="saveflag">
                <button class="button_search button_spacing" @click="saveOrUpdate(2)">保存</button>
              </td>
              <td style="text-align: left;width: 25%;">
                <button class="button_search button_spacing" @click="goback">返回</button>
              </td>
            </tr>
          </table>
        </div>
      </div>

      <div style="overflow: auto;width: 104%" v-show="reportHistory">
        <criteria-paged :model="model" v-ref:paged>
          <criteria partial='criteria' @condition-changed='search' v-ref:criteria>
            <p class="bg-info text-center" style="padding: 8px;">报表历史纪录</p>
            <div novalidate class="form-horizontal select-overspread container-fluid auto" partial >
              <div class="row">
                <div class="col-sm-6 form-group" >
                  <input placeholder='报表名' type="text" class="form-control" v-model="model.f_files_name" condition="f_files_name like '%{}%'">
                </div>
                <div class="col-sm-3 form-group">
                  <button class="button_search button_spacing" @click="search">查询</button>
                </div>
                <div class="col-sm-3 form-group">
                  <button class="button_search button_spacing" @click="$parent.$parent.$parent.goback">返回</button>
                </div>
              </div>
            </div>
          </criteria>
          <data-grid :model="model" partial='list' v-ref:grid id="test" >
            <template partial='head'>
              <tr>
                <th>表名</th>
                <th>保存人</th>
                <th>保存时间</th>
                <th>操作</th>
              </tr>
            </template>
            <template partial='body' >
              <td>{{row.f_files_name}}</td>
              <td>{{row.f_operator}}</td>
              <td>{{row.f_operate_date}}</td>
              <td><button type="button" class="btn btn-link" @click.stop="$dispatch('delete-history-row', row)">删除</button></td>
            </template>
          </data-grid>
        </criteria-paged>
      </div>
    </partial-view>
  </div>
</template>

<script>
import {HttpResetClass, PagedList} from "vue-client";

export default {
  title: '报表选项',
  props: {
    inindex: {}
  },
  data () {
    return {
      model: new PagedList('api/af-revenue/sql/manage_singleTable', 50, {items: '"*"', tablename: '"t_report_record"', orderitem: '"f_operate_date desc"'}),
      reportHistory: false,
      saveflag: false,
      types: [],
      row: null,
      infos: {
        '报表名称': '',
        '连接页面': '',
        '报表类型': '',
        '图片路径': '',
        '添  加  人': '',
        '报表状态': ''
      },
      styles: this.$appdata.getSingleValue('报表样式') ? this.$appdata.getSingleValue('报表样式') : '2',
      saveinfo: {},
      filtrate: false,
      modelinfo: {
        f_report_name: '',
        f_report_type: '',
        f_rank: '1'
      },
      config: {
        f_report_name: '报表名称',
        f_report_path: '连接页面',
        f_report_type: '报表类型',
        f_image_path: '图片路径',
        f_operator: '添  加  人',
        f_rank: '报表状态'
      },
      conditionStr: '1=1',
      reportNames: [],
      reportTypes: [],
      reportState: [{label: '全部', value: ''}, {label: '显示', value: '1'}, {label: '未显示', value: 'null'},],
      tablename: 't_report_type'
    }
  },
  ready () {
    this.$on('delete-history-row', (row) => this.delete(row))
    // 获取所有报表类型
    this.getReportInfo(null, '1=1 and f_rank=1')
    this.getReportName()
    this.getReportType()
  },
  methods: {
    search () {
      this.$refs.paged.$refs.criteria.search()
    },
    showReportHistory () {
      this.reportHistory = true
      this.model.search('1=1')
    },
    delete (row) {
      this.$resetpost('api/af-revenue/logic/deletereport', {id: row.id}, {resolveMsg: '删除成功', rejectMsg: '删除失败'}).then((res) => {
        this.$dispatch('delect-report', '删除计划', row)
        this.search()
      })
    },
    getReportInfo (tname, cond) {
      this.$resetpost('api/af-revenue/sql/manageSingleTable',{data: {
          tablename: tname ? tname : this.tablename,
          condition: cond ? cond : this.conditionStr
        }},{rejectMsg:null,resolveMsg:null}).then((res) => {
        console.log('sssss:', res.data)
        this.types = res.data
      }).catch((error) => {
      })
    },
    // 返回
    goback () {
      this.chaxun()
    },
    // 保存
    saveReport () {
      for (let key in this.infos) {
        this.infos[key] = ''
      }
      this.saveflag = true
      this.filtrate = true
    },
    // 查询
    chaxun () {
      this.getReportInfo()
      this.filtrate = false
      this.reportHistory = false
    },
    changecolor (index, type, int) {
      this.row = index

      if (this.$login.r.includes('报表配置权限') && int === '1') {
        this.saveflag = false
        this.filtrate = !this.filtrate
      }
    },
    async getReportName () {
      let HttpReset = new HttpResetClass()
      var data = await HttpReset.load('POST', 'api/af-revenue/sql/singleTable_Final', {
        data: {
          condition: this.conditionStr,
          tablename: this.tablename,
          groupitem: 'f_report_name',
          orderitem: 'f_report_name',
          items: 'f_report_name'
        }
      }, {resolveMsg: null, rejectMsg: '获取报表名称失败!'})
      let nameArr = [{label: '全部', value: ''}]
      for (let row of data.data) {
        nameArr.push({label: row.f_report_name, value: row.f_report_name})
      }
      this.reportNames = nameArr
    },
    clear (val) {
      if (val) {
        for (let key in this.infos) {
          this.infos[key] = ''
        }
      } else {
        for (let key in this.modelinfo) {
          this.modelinfo[key] = []
        }
      }
    },
    async getReportType () {
      let HttpReset = new HttpResetClass()
      var data = await HttpReset.load('POST', 'api/af-revenue/sql/singleTable_Final', {
        data: {
          condition: this.conditionStr,
          tablename: this.tablename,
          groupitem: 'f_report_type',
          orderitem: 'f_report_type',
          items: 'f_report_type'
        }
      }, {resolveMsg: null, rejectMsg: '获取报表类型失败!'})
      let typeArr = [{label: '全部', value: ''}]
      for (let row of data.data) {
        typeArr.push({label: row.f_report_type, value: row.f_report_type})
      }
      this.reportTypes = typeArr
    },
    saveOrUpdate (val) {
      // let sv={}
      for (let [key, value] of Object.entries(this.config)) {
        let vl = this.infos[value]
        this.saveinfo[key] = vl
      }
      this.saveinfo['type'] = val

      this.$resetpost('api/af-revenue/logic/saveReport', this.saveinfo, {
        resolveMsg: '恭喜！提交成功！',
        rejectMsg: '提交错误！'
      }).then((res) => {
        this.$showAlert('保存成功', 'success', 3000)
        this.getReportInfo(null, '1=1 and f_rank=1')
        this.filtrate = !this.filtrate
      })
      console.log('this.saveinfo+++++', this.saveinfo)
    }
  },
  watch: {
    'modelinfo': {
      deep: true,
      handler (val) {
        let c = '1=1 '
        for (let [key, value] of Object.entries(val)) {
          if (value && value != '') {
            if (key == 'f_rank' && value == 'null') {
              c += 'and ' + key + " is " + value + ' or ' + key + " = ''"
            } else {
              c += 'and ' + key + " in ('" + value.toString().replace(new RegExp(',', 'g'), "','") + "') "
            }

          }
        }
        this.conditionStr = c
      }
    },
    'inindex' (val) {
      this.infos = {}
      this.saveinfo = this.types[val]
      let flag = {}
      for (let [key, value] of Object.entries(this.saveinfo)) {
        let name = this.config[key]
        if (name != null) {
          flag[name] = value
        }
      }
      this.infos = flag
    }
  }
}
</script>
