<template>
  <div id="flex">
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='search' v-ref:criteria>
        <div novalidate class="form-inline auto" partial>
          <div class="form-group">
            <!--<input type="text" class="form-control" v-model="" id="f_usertype" placeholder="用户类型"-->
            <!--condition=" f_usertype='{}'"-->
            <!--defaultvalue="'13'">-->
            <!--<input type="text" class="form-control" v-model="" id="f_gastype" placeholder="用气类型"-->
            <!--condition=" f_gastype= '{}'"-->
            <!--defaultvalue="'13'">-->
            <v-select  v-ref:f_user_type
                       v-model="model.f_user_type"
                       placeholder='用户类型'
                       :value.sync="model.f_user_type"
                       :options='$parent.$parent.userTypes'
                       condition="f_user_type='{}'"
                       close-on-select clear-button>
            </v-select>
            <v-select  v-ref:f_gas_type
                       v-model="model.f_gas_type"
                       placeholder='气表类型'
                       :value.sync="model.f_gas_type"
                       :options='$parent.$parent.meterTypes'
                       condition="f_meter_type='{}'"
                       close-on-select clear-button>
            </v-select>
            <!--<v-select  v-ref:f_card_type-->
                       <!--v-model="model.f_cost_type"-->
                       <!--placeholder='缴费类型'-->
                       <!--:value.sync="model.f_cost_type"-->
                       <!--:options='$parent.$parent.costTypes'-->
                       <!--condition="f_cost_type='{}'"-->
                       <!--close-on-select clear-button>-->
            <!--</v-select>-->

            <!--<label for="startDate">开始日期:</label>-->
            <!--<datepicker id="startDate" placeholder="开始日期"-->
            <!--v-model="model.startDate"-->
            <!--condition="f_check_date>=to_date('{} 00:00:00','yyyy-MM-dd hh24:mi:ss')"-->
            <!--:value.sync="model.startDate"-->
            <!--:disabled-days-of-Week="[]"-->
            <!--:format="'yyyy-MM-dd'"-->
            <!--:show-reset-button="reset">-->
            <!--</datepicker>-->
            <!--<label for="endDate">结束日期:</label>-->
            <!--<datepicker id="endDate" placeholder="结束日期"-->
            <!--v-model="model.endDate"-->
            <!--condition="f_check_date<=to_date('{} 00:00:00','yyyy-MM-dd hh24:mi:ss')"-->
            <!--:value.sync="model.endDate"-->
            <!--:disabled-days-of-Week="[]"-->
            <!--:format="'yyyy-MM-dd'"-->
            <!--:show-reset-button="reset">-->
            <!--</datepicker>-->
            <button class="btn btn-default" @click="$parent.$parent.search">查询</button>
            <button class="btn btn-default"  v-if="!$parent.$parent.echarts" @click="$parent.$parent.showEcharts">显示图表</button>
            <button class="btn btn-default"  v-if="$parent.$parent.echarts" @click="$parent.$parent.showEcharts">隐藏图表</button>
            <!--<export-excel :data="{startDate: this.model.startDate, endDate: this.model.endDate, userid: this.model.F_USERID, username: this.model.f_username}"-->
            <!--:total="[{-->
            <!--1: '小计', 2: null, 3: null,-->
            <!--4: $parent.$parent.model.sums.f_pregas_all,-->
            <!--5: $parent.$parent.model.sums.f_preamount_all,-->
            <!--6: $parent.$parent.model.sums.f_pregas,-->
            <!--7: $parent.$parent.model.sums.f_preamount,-->
            <!--8: $parent.$parent.model.sums.f_grossproceeds,-->
            <!--9: $parent.$parent.model.sums.f_zhye}]"-->
            <!--sqlurl="/rs/excel/report/gongye_fee/用户工业用气明细"></export-excel>-->
          </div>
        </div>
      </criteria>


      <data-grid :model="model"  partial='list'>
        <template partial='head'>
          <tr>
            <th colspan='9'>
              <h1 align="center">明细表</h1>
            </th>
          </tr>
          <tr>
            <th>序号</th>
            <th>用户类型</th>
            <th>地址</th>
            <th>气表类型</th>
          </tr>
        </template>
        <template partial='body'>
          <tr>
            <td style="text-align: center;">{{$index+1}}</td>
            <td style="text-align: center;">{{row.f_user_type}}</td>
            <td style="text-align: center;">{{row.f_address}}</td>
            <td style="text-align: center;">{{row.f_meter_type}}</td>
          </tr>
        </template>
        <!--<template partial='foot'>-->
        <!--<tr>-->
        <!--<td style="text-align: center;">小计</td>-->
        <!--<td style="text-align: center;"></td>-->
        <!--<td style="text-align: center;"></td>-->
        <!--<td style="text-align: center;">{{model.sums.f_pregas_all.toFixed(2)}}</td>-->
        <!--<td style="text-align: center;">{{model.sums.f_preamount_all.toFixed(2)}}</td>-->
        <!--<td style="text-align: center;">{{model.sums.f_pregas.toFixed(2)}}</td>-->
        <!--<td style="text-align: center;">{{model.sums.f_preamount.toFixed(2)}}</td>-->
        <!--<td style="text-align: center;">{{model.sums.f_grossproceeds.toFixed(2)}}</td>-->
        <!--<td style="text-align: center;">{{model.sums.f_zhye.toFixed(2)}}</td>-->
        <!--</tr>-->
        <!--</template>-->
      </data-grid>
    </criteria-paged>
  </div>
</template>
<script>
  import * as Util from '../Util'
  import { PagedList } from 'vue-client'
  // import AppData from '../stores/AppData'

  export default {
    name: 'list',
    props: {
      condition: String,
      startdate: {
        type: String,
        default: Util.toStandardDateString()
      },
      enddate: {
        type: String,
        default: Util.toStandardDateString()
      }
    },
    // props: ['total', 'condition', 'startdate', 'enddate'],
    data () {
      return {
        model: new PagedList('rs/sql/testList',10,{data:  {condition:'1=1'}}),
        detailcondition:'', //钻取的字段对应的值
        barparam:'',
        echarts:false
      }
    },
    methods: {
      query (param,barparam,type) {
        console.log(this.$refs.paged.$refs.criteria.$refs.f_user_type,"this.$refs.paged.$refs.criteria.$refs.f_user_type")
        this.barparam = barparam.toString()
        console.log(this.$refs.paged.$refs.criteria.model,"this.$refs.paged.$refs.criteria.model")
        if(param.toString() == ''){
          this.$refs.paged.$refs.criteria.model.f_user_type = [ '' ]
          this.$refs.paged.$refs.criteria.model.f_gas_type = [ '' ]
          // this.$refs.paged.$refs.criteria.model.f_cost_type = [ '' ]
          console.log("选项清空")
        }else{
          if(type.toString() == this.$refs.paged.$refs.criteria.$refs.f_user_type.placeholder){
            this.$refs.paged.$refs.criteria.model.f_user_type = [ this.barparam]
          }else if(type.toString() == this.$refs.paged.$refs.criteria.$refs.f_gas_type.placeholder){
            this.$refs.paged.$refs.criteria.model.f_gas_type = [ this.barparam]
          }
          // else if(type.toString() == this.$refs.paged.$refs.criteria.$refs.f_card_type.placeholder){
          //   this.$refs.paged.$refs.criteria.model.f_card_id = [ this.barparam]
          // }
        }
        this.detailcondition = param.toString()
        //list钻取数据的condition
        console.log("列表开始钻取数据")
        this.condition ='1=1 '+ this.detailcondition
        this.model.search(this.condition)
        console.log(this.model,"model")
        //condition条件清零
        this.condition = '1=1 '
        this.$emit('condition-changed', this.detailcondition)
      },
      conditionChanged (condition) {
        this.condition = condition.condition
        console.log(condition)
        this.$emit('condition-changed', this.condition)
        // this.$refs.search.search(condition)
      },
      searchdata () {
        // this.$emit('total', this.total)
      },
      search(){
        console.log("list执行search方法")
        this.$refs.paged.$refs.criteria.search()
        this.condition = 'and '+this.$refs.paged.$refs.criteria.condition
        this.$emit('condition-changed', this.condition)
      },
      showEcharts(){
        this.echarts = !this.echarts
        this.$emit('echarts-changed',this.echarts)
      }
    },
    computed:{
      userTypes(){
        return  [{label: '全部', value: ''}, ...this.$appdata.getParam("用户类型")]
      },
      meterTypes(){
        return [{label: '全部', value: ''}, ...this.$appdata.getParam("气表类型")]
      },
      // costTypes(){
      //   return [{label:'全部',value: ''},...this.$appdata.getParam("缴费类型")]
      // }
    },
    ready () {
      console.log(this.$refs.paged.$refs.criteria,"this.$refs.paged.$refs.criteria")
      this.$refs.paged.$refs.criteria.search()
      console.log(this.model, 'model')
      // this.searchdata()
      console.log("this.userTypes:",this.userTypes)
    }
  }
</script>

