<template>
  <div class="auto">
    <modal  :show.sync="show"  title="详细信息" style="height:auto;width:100%" large backdrop="false">
      <article slot="modal-body"  class="modal-body" style="height:100%;width:100%">
        <div class="basic-main" style="height: auto">
          <partial-view v-ref:pv>
          <div class="row">
            <div class="col-xs-3">
              <label type="text" class="font_normal_body" >姓名:</label>
              <label type="text" class="font_normal_body "> {{rowdata.f_user_name}}</label>
            </div>
            <div class="col-xs-3">
              <label type="text" class="font_normal_body" >电话:</label>
              <label type="text" class="font_normal_body"> {{rowdata.f_user_phone}}</label>
            </div>
            <div class="col-xs-6">
              <label type="text" class="font_normal_body" >地址:</label>
              <label type="text" class="font_normal_body "> {{rowdata.f_address}}</label>
            </div>
          </div>
          </partial-view>
        </div>
        <div class="flex-row" id="unit" style="height: 500px">
          <div class="binary-left" style="width:15%">
            <button :class="getclass[0].val" style="margin-top:10px;width: 100px" @click="showquery(0)">表具查询</button>
            <button :class="getclass[1].val" style="margin-top:10px;width: 100px" @click="showquery(1)">设备查询</button>
            <button :class="getclass[2].val" style="margin-top:10px;width: 100px" @click="showquery(2)">收费查询</button>
            <button :class="getclass[3].val" style="margin-top:10px;width: 100px" @click="showquery(3)">流水查询</button>
            <button :class="getclass[4].val" style="margin-top:10px;width: 100px" @click="showquery(4)">换表查询</button>
            <button :class="getclass[5].val" style="margin-top:10px;width: 100px" @click="showquery(5)">抄表查询</button>
            <button :class="getclass[6].val" style="margin-top:10px;width: 100px" @click="showquery(6)">过户查询</button>
            <button :class="getclass[7].val" style="margin-top:10px;width: 100px" @click="showquery(7)">其他收费查询</button>
<!--            <button class="button_export" style="margin-top:10px;width: 100px" @click="showquery(5)">补卡查询</button>-->
<!--            <button class="button_export" style="margin-top:10px;width: 100px" @click="showquery(5)">补气查询</button>-->
<!--            <button class="button_export" style="margin-top:10px;width: 100px" @click="showquery(5)">收费抄表</button>-->
<!--            <button class="button_export" style="margin-top:10px;width: 100px" @click="showquery(5)">启用查询</button>-->
<!--            <button class="button_export" style="margin-top:10px;width: 100px" @click="showquery(5)">停用查询</button>-->
<!--            <button class="button_export" style="margin-top:10px;width: 100px" @click="showquery(5)">黑名单查询</button>-->

          </div>

          <div class="binary-right" style="height: auto;width: 85%" >
            <meter-query-detail :showquery="query[0].show" v-if="query[0].show" :f_userinfo_id="f_userinfo_id"></meter-query-detail>
            <equipment-query-detail v-if="query[1].show" :f_userinfo_id="f_userinfo_id"></equipment-query-detail>
            <charge-query-detail v-if="query[2].show" :f_userinfo_id="f_userinfo_id"></charge-query-detail>
            <record-query-detail v-if="query[3].show" :f_userinfo_id="f_userinfo_id"></record-query-detail>
            <change-meter-query-detail v-if="query[4].show" :f_userinfo_id="f_userinfo_id"></change-meter-query-detail>
            <meter-hand-query-detail v-if="query[5].show" :f_userinfo_id="f_userinfo_id"></meter-hand-query-detail>
            <meter-transfer-query-detail v-if="query[6].show" :f_userinfo_id="f_userinfo_id"></meter-transfer-query-detail>

            <other-charge-query-detail v-if="query[7].show" :f_userinfo_id="f_userinfo_id"></other-charge-query-detail>
<!--            <fill-card-query-detail v-if="query[5]" :f_userinfo_id="f_userinfo_id"></fill-card-query-detail>-->
<!--            <fill-gas-query-detail v-if="query[6]" :f_userinfo_id="f_userinfo_id"></fill-gas-query-detail>-->
<!--            <selling-hand-detail v-if="query[7]" :f_userinfo_id="f_userinfo_id"></selling-hand-detail>-->
<!--            <enable-query-detail v-if="query[8]" :f_userinfo_id="f_userinfo_id"></enable-query-detail>-->
<!--            <disable-query-detail v-if="query[9]" :f_userinfo_id="f_userinfo_id"></disable-query-detail>-->
<!--            <backlist-query-detail v-if="query[10]" :f_userinfo_id="f_userinfo_id"></backlist-query-detail>-->

          </div>
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">

      </footer>
    </modal>
  </div>
</template>
<script>

  import MeterQueryDetail from './MeterQueryDetail.vue'
  import DeviceQueryDetail from './DeviceQueryDetail.vue'
  import ChargeQueryDetail from './ChargeQueryDetail.vue'
  import RecordQueryDetail from './RecordQueryDetail.vue'
  import ChangeMeterQueryDetail from './ChangeMeterQueryDetail.vue'
  import HandQueryDetail from './HandQueryDetail.vue'
  import TransferQueryDetail from './TransferQueryDetail.vue'
  import OtherChargeQueryDetail from './OtherChargeQueryDetail.vue'

  // import FillCardQueryDetail from './FillCardQueryDetail.vue'
  // import FillGasQueryDetail from './FillGasQueryDetail.vue'
  // import SellingHandDetail from './SellingHandDetail.vue'
  // import EnableQueryDetail from './EnableQueryDetail.vue'
  // import DisableQueryDetail from './DisableQueryDetail.vue'
  // import BlackListQueryDetail from './BlackListQueryDetail.vue'
  export default {
    components:{
      'meter-query-detail':MeterQueryDetail,
      'equipment-query-detail':DeviceQueryDetail,
      'charge-query-detail':ChargeQueryDetail,
      'record-query-detail':RecordQueryDetail,
      'change-meter-query-detail':ChangeMeterQueryDetail,
      'meter-hand-query-detail':HandQueryDetail,
      'meter-transfer-query-detail':TransferQueryDetail,
      'other-charge-query-detail':OtherChargeQueryDetail
      // 'fill-card-query-detail':FillCardQueryDetail,
      // 'fill-gas-query-detail':FillGasQueryDetail,
      // 'selling-hand-detail':SellingHandDetail,
      // 'enable-query-detail':EnableQueryDetail,
      // 'disable-query-detail':DisableQueryDetail,
      // 'blacklist-query-detail':BlackListQueryDetail

    },
    title: '详细信息',
    data() {
      return {
        rowdata:{},
        model: {},
        query: [{show:true}, {show:false}, {show:false}, {show:false}, {show:false}, {show:false}, {show:false},{show:false}],
        getclass:[{val:"button_search"}, {val:"button_export"}, {val:"button_export"}, {val:"button_export"}, {val:"button_export"}, {val:"button_export"}, {val:"button_export"}, {val:"button_export"}]
        // query:[],
        // getclass:[]
      }
    },
    props: ['show','f_userinfo_id'],
    ready() {
      this.getuserinfo(this.f_userinfo_id)

    },
    methods:{
      async getuserinfo(userinfoid){
        let res = await this.$refs.pv.load('api/af-revenue/sql/filesQuery', {data: {condition: `f_userinfo_id ='${userinfoid}'`}})
        this.rowdata=res.data[0]
      },
      showquery(index){
        for (let i = 0; i < this.query.length; i++) {
          if(index === i){
            this.query[i].show=true
            this.getclass[i].val="button_search"
          }else{
            this.query[i].show=false
            this.getclass[i].val="button_export"
          }
        }
      }
    },
    watch: {
      'show'(){
        if(this.show===false){
          for (let i = 0; i <  this.query.length; i++) {
            this.query[i].show=false
            this.getclass[i].val="button_export"
          }
          this.query[0].show=true
          this.getclass[0].val="button_search"
        }
      },
      'f_userinfo_id' (val) {
        this.getuserinfo(val)
      }

    }

  }

</script>
