<template>
  <div class="flex">
    <partial-view v-ref:pv>
      <div class="span" v-show="!filtrate">
        <p class="bg-info text-center" style="padding: 8px;background: #5ac0d9;color: white;border-radius:10px 10px 0 0" title="选中报表后双击查看报表的配置信息" @dblclick="Update()">报表类型</p>
        <div style="height: 94%;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)"
               :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}}、{{type.f_report_name}}</div>
            </div>
        </div>

      </div>
      <div class="span" v-show="filtrate">
        <p class="bg-info text-center" style="padding: 8px;" @dblclick="filtrate=!filtrate">相关配置</p>
        <div style="height: 94%;overflow: auto;width: 104%">
          <table style="border-style: none;width: 95%;">
            <tr style="display:block;margin:15px 0;">
              <td style="text-align: left">
                <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='请选择'
                  close-on-select></v-select>
              </td>
            </tr>
            <tr style="display:block;margin:15px 0;">
              <td style="text-align: left">
                <label class="font_normal_body">报表类型:</label>
                <v-select
                  :value.sync="modelinfo.f_report_type"
                  :search="false"
                  class="select_list select"
                  v-model="modelinfo.f_report_type"
                  :options='reportTypes' placeholder='请选择'
                  close-on-select></v-select>
              </td>
            </tr>
            <tr style="display:block;margin:15px 0;">
              <td style="text-align: left">
                <label class="font_normal_body">报表状态:</label>
                <v-select
                  :value.sync="modelinfo.f_rank"
                  :search="false"
                  class="select_list select"
                  v-model="modelinfo.f_rank"
                  :options='reportState' placeholder='请选择'
                  close-on-select></v-select>
              </td>
            </tr>
            <tr style="display:block;margin:15px 0;">
              <td style="text-align: right;width: 50%;"><button class="button_clear  button_spacing" @click="filtrate=!filtrate">返回</button></td>
              <td style="text-align: right;width: 25%;"><button class="button_clear  button_spacing" @click="clear()">清空</button></td>
              <td style="text-align: left;width: 25%;"><button class="button_search button_spacing" @click="chaxun()">查询</button></td>
            </tr>
            <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="saveOrUpdate(1)">修改</button></td>
              <td style="text-align: right;width: 25%;"><button class="button_clear  button_spacing" @click="clear(true)">清空</button></td>
              <td style="text-align: left;width: 25%;"><button class="button_search button_spacing" @click="saveOrUpdate(2)">保存</button></td>
            </tr>
          </table>
        </div>

      </div>
    </partial-view>
  </div>
</template>

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

export default {
  title: '报表选项',
  props: {
    inindex:{}
  },
  data () {
    return {
      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.getReportInfo(null,'1=1 and f_rank=3')
    this.getReportName()
    this.getReportType()
  },
  methods: {
    getReportInfo(tname,cond){
      this.$refs.pv.load('api/af-revenue/sql/manageSingleTable', {
        data: {
          tablename: tname ? tname:this.tablename,
          condition: cond ? cond:this.conditionStr
        }
      }).then((res) => {
        console.log('sssss:',res.data)
        this.types = res.data
      }).catch((error) => {

      })
    },
    chaxun(){
      this.getReportInfo()
      this.filtrate = !this.filtrate
    },
    changecolor(index,type){
      this.row=index
    },
    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
    },
    Update(){
      if (this.$login.r.includes('报表配置权限')) {
        this.filtrate=!this.filtrate
      } else {
        this.$showMessage('您没有【报表配置权限】,若要进行报表配置，请联系管理员获取权限！')
      }
    },
    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('rs/logic/saveReport', this.saveinfo, {resolveMsg: '恭喜！提交成功！', rejectMsg: '提交错误！'}).then((res) => {
        this.$showAlert('保存成功', 'success', 3000)
        this.getReportInfo(null,'1=1 and f_rank=3')
        this.filtrate=!this.filtrate
      })
    }
  },
  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>
