<template>
  <div id="unit" class="flex-row">
    <div class="basic-main">
      <div class="flex" v-if="!show">
        <criteria-paged :model="model" v-ref:paged>
          <criteria partial='criteria' v-ref:criteria  @condition-changed='$parent.search'>
            <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
              <div class="row" >
                <div class="col-sm-2">
                  <label class="font_normal_body">组织机构</label>
                  <res-select :initresid="$parent.$parent.org"
                              style="width:60%"
                              @res-select="$parent.$parent.getorg"
                              :is-mul=false
                              restype='organization'>
                  </res-select>
                </div>
                <div class="col-sm-2">
                  <label class="font_normal_body">表&nbsp;钢&nbsp;号&nbsp;</label>
                  <input @keyup.enter="search"  style="width:60%"  type="text" class="input_search" v-model="model.f_meternumber" placeholder='表钢号'
                         condition="m.f_meternumber = '{}'" v-next-el='meternumber' v-el:meternumber
                  >
                </div>
                <div class="col-sm-2">
                  <label class="font_normal_body">客户编号</label>
                  <input @keyup.enter="search"  style="width:60%"  type="text" class="input_search" v-model="model.f_userinfo_code" placeholder='客户编号'
                         condition="ui.f_userinfo_code = '{}'" v-next-el='f_userinfo_code' v-el:meternumber
                  >
                </div>
                <div class="col-sm-2">
                  <label class="font_normal_body">客户名称</label>
                  <input @keyup.enter="search"  style="width:60%"  type="text" class="input_search" v-model="model.f_username" placeholder='客户名称'
                         condition="ui.f_user_name like '%{}%'" v-next-el='userid' v-el:username>
                </div>

                <div class="span" style="float:right;margin-top:10px">
                  <button class="button_search button_spacing" @click="search()">查询</button>
                  <button class="button_clear button_spacing" @click="$parent.$parent.clearmsg">清空</button>
                  <export-excel :data="$parent.$parent.getCondition" class="button_export button_spacing"
                                :field="$parent.$parent.getfield"
                                sqlurl="api/af-revenue/logic/openapi/exportfile" sql-name="manage_getReportDetail" template-name='上报数据明细'
                                :choose-col="true"></export-excel>
                  <div style="float: right"  class="button_spacing" :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"    @click="$parent.$parent.hidden()"></div>
                </div>
              </div>
              <div class="row" v-show="$parent.$parent.criteriaShow">
                <div class="col-sm-2">
                  <label class="font_normal_body">客户地址</label>
                  <input @keyup.enter="search"  style="width:60%"  type="text" class="input_search" v-model="model.f_address" placeholder='客户地址'
                         condition="ua.f_address like '%{}%'" v-next-el='userid' v-el:username>
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">客户类型</label>
                  <v-select :value.sync="model.f_user_type"
                            @change="$parent.$parent.userTypeChange()"
                            :options='$parent.$parent.usertypes' placeholder='请选择' v-model="model.f_user_type"
                            condition="uf.f_user_type = '{}'"
                            close-on-select></v-select>
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">用气性质</label>
                  <v-select :value.sync="model.f_gasproperties" v-model="model.f_gasproperties"
                            :options='$parent.$parent.gasproperties' placeholder='请选择'
                            condition="uf.f_gasproperties = '{}'"
                            closfe-on-select></v-select>
                </div>

                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">气表品牌</label>
                  <v-select :value.sync="model.f_meter_brand"
                            v-model="model.f_meter_brand"
                            :options="$parent.$parent.meterbrands"
                            condition="br.f_meter_brand = '{}'"
                            close-on-select></v-select>
                </div>
                <div class="col-sm-2 form-group" >
                  <label class="font_normal_body" >开始时间</label>
                  <datepicker style="width: 60%" placeholder="大于等于"
                              :value.sync="model.f_start_date"
                              v-model="model.f_start_date"
                              :format="'yyyy-MM-dd HH:mm:ss'"
                              condition="m.f_hand_date >= '{}'"
                  ></datepicker>
                </div>
                <div class="col-sm-2 form-group" >
                  <label class="font_normal_body">结束时间</label>
                  <datepicker style="width: 60%" placeholder="小于等于"
                              :value.sync="model.f_end_date"
                              v-model="model.f_end_date"
                              :format="'yyyy-MM-dd HH:mm:ss'"
                              condition="m.f_hand_date <= '{}'"
                  ></datepicker>
                </div>
              </div>
            </div>
          </criteria>
          <data-grid :model="model" partial='list' v-ref:grid class="list_area table_sy">
            <template partial='head'>
              <tr>
                <th style="text-align: left;" v-for="(key,value) in $parent.$parent.$parent.ReportDetailListConfig"><nobr>{{value}}</nobr></th>
              </tr>
            </template>
            <template partial='body' partial='list'>
              <tr >
                <td style="text-align: left;" v-for="(key,value) in $parent.$parent.$parent.ReportDetailListConfig"><nobr>{{row[key]}}</nobr></td>
              </tr>
            </template>
            <template partial='foot'></template>
          </data-grid>
        </criteria-paged>
        <table class="table-hover">
        </table>
      </div>
    </div>

  </div>
</template>

<script>
  import {HttpResetClass, PagedList} from 'vue-client'
  import plugins from '../../../plugins/GetLoginInfoService'
  import * as Util from '../../../Util'

  let readySomething = async function (self) {
    await self.$MagLoadParams.loadParam()
    self.initParams()
  }
  export default {
    title: '上报数据明细',
    data () {
      return {
        show:false,
        detail24: false,
        org:[this.$login.f.orgid],
        orgcondition: ' and m.f_orgid = ' + this.$login.f.orgid,
        detaillist: [],
        meterbrands: [],
        prices: [],
        gasproperties:[],
        condition:'',
        rowdata:{},
        sumsmodel: {},
        ReportDetailListConfig: {
          'f_userinfo_code': '客户编号', 'f_meternumber': '表号', 'f_user_name': '客户姓名', 'f_user_phone': '客户电话', 'f_address': '客户地址',
          'f_hand_date': '上报日期', 'f_meter_brand': '气表品牌', 'f_readdata1': '上传协议版本号', 'f_readdata2': '通信信号值', 'f_readdata3': '铭牌号',
          'f_readdata4': '通信模式', 'f_readdata5': 'IC卡编号', 'f_readdata6': '购气次数','f_readdata7': '剩余金额/量', 'f_readdata8': '总累计用气量',
          'f_readdata9': '总累计用气金额','f_readdata10': '总累计购气金额/量', 'f_readdata11': '计费周期累计用气量', 'f_readdata12': '当前透支金额/量', 'f_readdata13': '阀门状态',
          'f_readdata14': '主电电压','f_readdata15': '备电电压', 'f_readdata16': '软件版本', 'f_readdata17': '硬件版本', 'f_readdata18': '当前rtc时钟'
        },
        orgid:[this.$login.f.orgid],
        criteriaShow:false,
        orgCondtionStr: '',
        model: new PagedList('api/af-revenue/sql/manage_getReportDetail', 50,{startDate: 'this.model.f_start_date', endDate: 'this.model.f_end_date'})
      }
    },
    ready () {
      // this.$refs.paged.$refs.criteria.search()
      readySomething(this).then(() => {
        this.$emit('ready')
      }).catch((error) => {
        this.$emit('error', error)
      })
      this.$refs.paged.$refs.criteria.model.f_start_date = Util.addDate(new Date(),-1).substring(0,10) + ' 00:00:00'
      this.$refs.paged.$refs.criteria.model.f_end_date = Util.addDate(new Date(),-1).substring(0,10) + ' 23:59:59'
    },
    methods: {
      initParams() {
        // 初始化气表品牌
        let brandArr = []
        this.$MagGetSaleParam.getGasbrand().forEach((item) => {
          let temp = {}
          if(item.value.f_meter_type==='物联网表'){
            temp.label = item.label
            temp.value = item.value.f_meter_brand
            brandArr.push(temp )
          }

        })
        this.meterbrands = [{label: '全部', value: ''}, ...brandArr]
        //初始化气表价格
        this.prices = this.$MagGetSaleParam.getPrices();
      },
      async updateParams() {
        await this.$MagLoadParams.loadParam(this.f_filialeid)
        this.initParams()
      },
      getorg(obj) {
        if(plugins.convertToIn(obj)!==null&&plugins.convertToIn(obj)!==''){
          this.orgcondition = " and m.f_orgid  in " + plugins.convertToIn(obj)
        }else{
          this.orgcondition = " and m.f_orgid  = " + this.$login.f.orgid
        }

      },
      userTypeChange () {
        this.gasproperties=[]
        if(this.$refs.paged.$refs.criteria.model !==null) {
          this.$refs.paged.$refs.criteria.model.f_gasproperties=''
          this.gasproperties = this.$appdata.getParam(this.$refs.paged.$refs.criteria.model.f_user_type[0])
        }
        else{
          this.gasproperties =[{label: '全部', value: ''}]
        }
      },
      hidden(){
        this.criteriaShow = !this.criteriaShow
      },
      cancel() {
        this.show = false
      },
      clearmsg () {
        Object.keys(this.$refs.paged.$refs.criteria.model).forEach((key) => {
          this.$refs.paged.$refs.criteria.model[key] = []
        })
      },
      getRes (obj) {
        this.orgCondtionStr = condition
        this.orgname = obj.orgnames[0]
        this.depname = obj.depnames[0]
      },
      showmsg(obj){
        this.rowdata=obj
        this.show=true
      },

      search (args) {
        args.condition =  `${args.condition}`+this.orgcondition
        console.log(args.condition+"args.condition")
        this.condition = args.condition
        this.model.search(args.condition, args.model)
      }
    },
    watch: {
      'orgCondtionStr'(val) {
        let res = val.match(/'(.*?)'/)
        console.log('正则提取:',res && res[1])
        if (res) {
          this.f_filialeid = res[1]
          // this.updateParams()
        }
      }
    },
    computed: {
      getPricenames() {
        let f_user_type = this.$refs.paged.$refs.criteria.model.f_user_type;
        let f_gasproperties = this.$refs.paged.$refs.criteria.model.f_gasproperties;
        let pricetype = this.$refs.paged.$refs.criteria.model.pricetype;
        console.log("打印一下:",f_user_type,f_gasproperties,pricetype,this.f_filialeid,this.prices)
        console.log("查看f_orgid:",this.$login.f.f_orgid)
        if(this.$refs.paged.$refs.criteria.model !==null) {
          let rs = []
          let priceArr = []
          if ( pricetype.length >0) {
            let params = {
              f_price_type: pricetype[0],
              filter: this.org[0],
              prices: this.prices
            }
            console.log("打印一下params:",params)
            this.$MagGetSaleParam.getPrice(params).forEach((item) => {
              console.log("====================================》")
              let temp = {}
              temp.label = item.label
              temp.value = item.value.f_price_name
              priceArr.push(temp)
              console.log("打印一下temp:",temp)
            })

            rs = [{label: '全部', value: ''}, ...priceArr]
          }
          if (rs.length === 0) {
            console.log('rs读出来是空')
            this.$refs.paged.$refs.criteria.model.f_price_name = ''
          }
          return rs
        }
      },
      getfield () {
        return this.ReportDetailListConfig
      },
      usertypes() {
        return [{label: ' 全部 ', value: ''}, ...this.$appdata.getParam('用户类型')]
      },
      pricetypes() {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('气价类型')]
      },
      getCondition () {
        var con = ""
        if (this.orgCondtionStr) {
          con = `${this.$refs.paged.$refs.criteria.condition} `+this.orgcondition
        }
        else {
          con = `${this.$refs.paged.$refs.criteria.condition} `+this.orgcondition
        }
        return {
          startDate: this.$refs.paged.$refs.criteria.model.f_start_date,
          endDate: this.$refs.paged.$refs.criteria.model.f_end_date,
          condition: con
        }
      }
    }
  }
</script>

<style>
  .mystyle{
    margin-left:80px;
  }
  .datapanel {
    color: #333;
    background-color: white;
    box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px ;
    padding: 10px 10px 10px 10px;
    border-radius:15px;
  }
</style>
