<template>
  <div id="flex">
    <div class="title-2" :class="{'title-21':tableshow}">
      <p align="center">明细表</p>
      <div class="title-21" id="excel">
        <export-excel :data="excelsql"
                      :field="filename"
                      sqlurl="rs/logic/exportfile" :sql-name="sqlname" :template-name='templatename'
                      :choose-col="true" :class="{execlshow:$parent.listenlistshow}"></export-excel>
      </div>
      <div v-show="!$parent.listenlistshow" class="title-22" @click="biglist"><img
        src="../../../../static/ManageHomePic/图层1510.png">展开
      </div>
      <div v-show="$parent.listenlistshow" class="title-23" @click="biglist"><img
        src="../../../../static/ManageHomePic/图层1566.png">折叠
      </div>
    </div>
    <div class="div-1">
      <criteria-paged :model="model" v-ref:paged style="overflow-x: auto; overflow-y: auto;" id="childrencriteriastyle">
        <data-grid :model="model" partial='list' v-ref:grid :classname="$parent.classname" id="childrendatagridstyle"
                   :customize="$parent.trvisited">
          <template partial='head'>
            <!--<th>-->
            <!--<h4 align="center">详情表</h4>-->
            <!--</th>-->
            <th v-for=" a in $parent.$parent.$parent.headdata" class="thstyle">
              {{a}}
            </th>
          </template>
          <template partial='body'>
            <tr class="tr-1">
              <td class="td-1" style="text-align: center;" v-for=" columnname in $parent.$parent.$parent.param">
                {{row[columnname]}}
              </td>
            </tr>
          </template>
        </data-grid>
      </criteria-paged>

    </div>
  </div>
</template>
<script>
  import * as Util from '../../../Util'
  import {PagedList} from 'vue-client'

  export default {
    name: 'list',
    props: {
      condition: String,
      startdate: {
        type: String,
        default: Util.toStandardDateString()
      },
      enddate: {
        type: String,
        default: Util.toStandardDateString()
      },
      listsqldata: {
        urlcarrydata: Array,
        headData: Array,
        bodyData: Array,
      },
      templatename: String,
    },
    // props: ['total', 'condition', 'startdate', 'enddate'],
    data() {
      return {
        model: new PagedList(),
        detailcondition: '', //钻取的字段对应的值
        barparam: '',
        echarts: false,
        pageurl: [],
        classname: 'table',
        param: '',
        colspan: '',
        headdata: '',
        trvisited: false,
        tableshow: false,
        show: false,
        filename: {},
        excelsql: {},
        sqlname: '',
      }
    },
    methods: {
      close() {
        this.show = false
      },
      query() {
        this.trvisited = true
        this.param = this.listsqldata.bodyData
        this.colspan = this.listsqldata.bodyData.length + 1
        this.headdata = this.listsqldata.headData
        //console.log(this.echartslist,'headdata')
        // console.log(this.echartslist.detailurl,"list传参")
        if (this.listsqldata.urlcarrydata.length > 1) {
          this.pageurl = this.listsqldata.urlcarrydata
          //console.log(this.pageurl,"list传参guan")
          //  this.pageurl[2]= {drillterm:'"f_state= \'有效\' and f_operate_date>=\'2018-12-07 00:00:00 \'and f_operate_date<=\'2018-12-07 23:59:59 \' and f_user_type is not null  "'}
          //   console.log(this.pageurl[2],'明细查询')
          this.model = new PagedList('/rs/sql/jyd'+this.pageurl[0], this.pageurl[1], this.pageurl[2])
          this.model.search()
          //console.log(this.model.paramSource,'观察断点')
        }
      },
      //列表伸缩
      biglist() {
        this.$parent.listenlistshow = !this.$parent.listenlistshow
        this.show = !this.show
      },
      reovechar(source, chars) {
        var reg = new RegExp(chars, 'gi')
        var result = source.replace(reg, ' ')
        return result
      },
      //导出列名
      exportnam() {
        this.filename = {}
        this.excelsql = {}
        for (var i = 0; i < this.listsqldata.headData.length; i++) {
          this.filename[this.listsqldata.bodyData[i]] = this.listsqldata.headData[i]
        }
        // var items = this.listsqldata.urlcarrydata[2].items.toString()
        // items = this.reovechar(items, '\'')
        // var tablename = this.listsqldata.urlcarrydata[2].tablename.toString()
        // tablename = this.reovechar(tablename, '\"')
        // var condition = this.listsqldata.urlcarrydata[2].condition.toString()
        // condition = this.reovechar(condition, '\'')
        // var orderitem = this.listsqldata.urlcarrydata[2].orderitem.toString()
        // orderitem = this.reovechar(orderitem, '\'')
        // this.excelsql = {
        //   items: items,
        //   tablename: tablename,
        //   condition: condition,
        //   orderitem: orderitem
        // }
        this.excelsql = this.listsqldata.urlcarrydata[2]
        var s = '/rs/sql/jdy'+this.listsqldata.urlcarrydata[0]
        let str = s.toString().split('/')
        this.sqlname = str[str.length - 1]
      }

    },

    watch: {
      'listsqldata': {
        deep: true,
        handler(val) {
          if (this.listsqldata.urlcarrydata.length > 0) {
            console.log(this.listsqldata, "明细表")
            this.exportnam()
            this.query()
          }
        },
        immediate: true
      },

    },
    ready() {

    }
  }
</script>
<style>
  #excel div div div {
    color: #FFFFFF;
    font-weight: normal;
    background-color: #013e48;
  }
  #excel button{
    color: #FFFFFF;
    margin-right: 1%;
    background-color: #013e48;
    border-radius: 6px;
    border: solid 1px #40cfc3;
  }
  #excel button:hover{
    background-color: #40cfc3;
    border: 1px solid #00ffea;
    border-radius: 6px;
  }
  #excel div div div button{
    color: #FFFFFF;
    margin-right: 1%;
    background-color: #013e48;
    border-radius: 6px;
    border: solid 1px #40cfc3;
  }
  #excel div div div button:hover {
    background-color: #40cfc3;
    border: 1px solid #00ffea;
    border-radius: 6px;
  }
  #childrendatagridstyle table tr:hover {
    background-color: #013e48;
    color: #ffffff;
  }

  #childrendatagridstyle table tr:hover {
    background-color: #013e48;
    color: #ffffff;
  }

  #childrendatagridstyle table .customizestyle {
    background-color: #013e48 !important;
    color: #ffffff !important;
  }

  #childrencriteriastyle nav ul {
    background-color: #013e48 !important;
    color: #02fbe6 !important;
  }

  #childrencriteriastyle nav ul li {
    color: #02fbe6 !important;
  }

  #childrencriteriastyle nav ul input {
    margin: 0% 1%;
    background-color: #0fa397 !important;
    color: #ffffff !important;
  }

  #childrencriteriastyle nav ul a {
    border: #02fbe6 1px solid;
    border-radius: 4px;
    color: #02fbe6 !important;
  }

  #childrencriteriastyle nav ul a:visited {
    background-color: #0fa397 !important;
  }

  #childrencriteriastyle nav ul a:hover {
    border: 1px solid #65d2bc;
  }
</style>
<style scoped>
  .div-1 {
    height: 85%;
    width: 100%;
  }

  .title-2 {
    margin-top: 3%;
    padding: 0% 2%;
    font-size: 1.4em;
    color: #fff;
    height: 10%;
    width: 100%;
  }

  .title-21 {
    margin-top: -6%;
    height: 8%;
    width: auto;
    float: right;
    margin-right: 10%;
    font-size: 0.8em;
    color: #333333;
  }

  .title-22 {
    margin-top: -3%;
    padding: 0% 1%;
    height: 10%;
    float: right;
    font-size: 0.65em;
  }

  .title-23 {
    margin-top: -1.6%;
    padding: 0% 1%;
    height: 9%;
    float: right;
    font-size: 0.65em;
  }

  .thstyle {
    background-color: #05525f;

    color: #06ecd8;
  }

  .td-1 {
    border: solid 1px #6fd9d0;
    color: #ffffff;
  }

  .tr-1:hover {
    background-color: #013e48;
    color: #ffffff;
  }

  .div-2 {
    margin-top: -3%;
    color: #40cfc3;
    font-size: 0.65em;
  }

  .div-3 {
    margin-top: -1.4%;
    color: #40cfc3;
    font-size: 0.65em;
  }

  img {
    width: 20px;
    margin-right: 3px;
  }

  .title-2 span {

  }
  .execlshow{
    margin-top: -1%;
  }
  /*.criteria-paged .pager */
</style>
