<template>
  <div style="flex:1;" class="flex">
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri >
        <div novalidate class="auto form-horizontal select-overspread container-fluid auto" partial>
          <div class="row" v-show="$parent.$parent.criteriaShow">
            <div class="col-sm-2 form-group form-fix-width" >
              <label class="font_normal_body _zoom4">卡号</label>
              <input  type="text" class="form-control _zoom6" v-numfilter v-model="model.f_card_id"
                      condition="f_card_id = '{}' " placeholder="卡号">
            </div>
            <div class="col-sm-2 form-group form-fix-width" >
              <label class="font_normal_body _zoom4">业务类型</label>
              <v-select :value.sync="model.type"
                        v-model="model.type"
                        multiple
                        :options='$parent.$parent.ywtype' placeholder='请选择'
                        condition="f_operat_type in {}"
              ></v-select>
            </div>
            <div class="col-sm-2 form-group form-fix-width" >
              <label class="font_normal_body _zoom4">状态</label>
              <v-select :value.sync="model.f_state"
                        v-model="model.f_state"
                        :options='$parent.$parent.charge_state' placeholder='请选择'
                        condition="f_state = '{}'"
                        close-on-select></v-select>
            </div>
            <div class="col-sm-2 form-group form-fix-width" >
              <label for="startDate" class="font_normal_body _zoom4">开始日期</label>
              <datepicker id="startDate" placeholder="开始日期" class="_zoom6"
                          v-model="model.startDate"
                          :value.sync="model.startDate"
                          :format="'yyyy-MM-dd'"
                          :show-reset-button="true"
                          condition="f_operate_date >= to_date('{} 00:00:00','yyyy-mm-dd hh24:mi:ss')">
              </datepicker>
            </div>
            <div class="col-sm-2 form-group form-fix-width" >
              <label for="endDate" class="font_normal_body _zoom4">结束日期</label>
              <datepicker id="endDate" placeholder="结束日期" class="_zoom6"
                          v-model="model.endDate"
                          :value.sync="model.endDate"
                          :format="'yyyy-MM-dd'"
                          :show-reset-button="true"
                          condition="f_operate_date <= to_date('{} 23:59:59','yyyy-mm-dd hh24:mi:ss')">
              </datepicker>
            </div>
            <div class="col-sm-2 form-group form-fix-width" >
              <label class="font_normal_body _zoom4">售气单位</label>
              <v-select :value.sync="model.f_filiale"
                        v-model="model.f_filiale"
                        :options='$parent.$parent.filialelist' placeholder='请选择'
                        condition="f_filiale = '{}'"
                        close-on-select></v-select>
            </div>
            <div class="col-sm-2 form-group form-fix-width" >
              <label class="font_normal_body _zoom4">售气部门</label>
              <v-select :value.sync="model.f_outlets"
                        v-model="model.f_outlets"
                        :options='$parent.$parent.selldep' placeholder='请选择'
                        condition="f_outlets = '{}'"
                        close-on-select></v-select>
            </div>
            <div class="col-sm-2 form-group form-fix-width" >
              <label class="font_normal_body _zoom4">售气站点</label>
              <input  type="text" class="form-control _zoom6" v-model="model.op_spot"
                      condition="op_spot = '{}'" placeholder="售气站点">
            </div>
            <div class="col-sm-2 form-group form-fix-width" >
              <label class="font_normal_body _zoom4">操作人</label>
              <input  type="text" class="form-control _zoom6" v-model="model.f_operator"
                      condition="f_operator like '%{}%' " placeholder="操作人">
            </div>
          </div>
          <div class="row">
            <div  style = "float:right;margin-top:10px">
              <button class="btn btn-success" @click="search()">查询</button>
              <button class="btn btn-default" @click="$parent.$parent.clear()">清空</button><!--
              <export-excel :data="$parent.$parent.getCondition"
                            :field="$parent.$parent.getfield"
                            sqlurl="rs/logic/exportfile" sql-name="chargeQuery" template-name='收费查询导出'  :choose-col="true"></export-excel>

              <print-data :model="$parent.model" :field="$parent.$parent.getfield" :defaultfield="$parent.$parent.defaultfield" print-name="收费查询" :sumsmodel="$parent.$parent.sumsmodel" ></print-data>-->
              <div
                :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"
                @click="$parent.$parent.hidden()" class="button_spacing" style="float: right"></div>
            </div>
          </div>
        </div>
      </criteria>

      <data-grid  :model="model" partial='list' v-ref:grid >
        <template partial='head'>
          <tr>
            <th><nobr>卡号</nobr></th>
            <th><nobr>业务类型</nobr></th>
            <th><nobr>状态</nobr></th>
            <th><nobr>售气单位</nobr></th>
            <th><nobr>售气部门</nobr></th>
            <th><nobr>售气站点</nobr></th>
            <th><nobr>操作人</nobr></th>
            <th><nobr>操作时间</nobr></th>
            <th><nobr>原因</nobr></th>
            <th><nobr>描述</nobr></th>
            <th><nobr>操作</nobr></th>
          </tr>
        </template>
        <template partial='body'>
          <td style="text-align: center;"><nobr>
            <span @click="$parent.$parent.$parent.dealmsg(row)"><a>{{row.f_card_id}}</a></span></nobr>
          </td>
          <td style="text-align: center;"><nobr>{{row.type}}</nobr></td>
          <td style="text-align: center;"><nobr>{{row.f_state}}</nobr></td>
          <td style="text-align: center;"><nobr>{{row.f_filiale}}</nobr></td>
          <td style="text-align: center;"><nobr>{{row.f_outlets}}</nobr></td>
          <td style="text-align: center;"><nobr>{{row.op_spot}}</nobr></td>
          <td style="text-align: center;"><nobr>{{row.f_operator}}</nobr></td>
          <td style="text-align: center;"><nobr>{{row.f_operate_date}}</nobr></td>
          <td style="text-align: center;"><nobr>{{row.f_reason}}</nobr></td>
          <td style="text-align: center;"><nobr>{{row.f_describe}}</nobr></td>
          <td style="text-align: center;"><nobr>
            <span @click="$parent.$parent.$parent.look(row)"><a>查看</a></span>
            </nobr></td>
        </template>
      </data-grid>
    </criteria-paged>
    <modal :show.sync="showinfo"  v-ref:modal large backdrop="false">
      <header slot="modal-header" class="modal-header">
        <button type="button" class="close" @click="cancel"><span>&times;</span></button>
        <h4 class="modal-title">详细记录查看</h4>
      </header>
      <article slot="modal-body" class="modal-body">
        <erasegas-detail v-if="infodata.type === '擦除蓄气'" :data="infodata"></erasegas-detail>
        <salecardgas-detail v-if="infodata.type === '发卡售气'" :data="infodata"></salecardgas-detail>
        <cardmetercenter-detail v-if="infodata.type === '卡表收费'" :data="infodata"></cardmetercenter-detail>
        <disablemanage-detail v-if="infodata.type === '停用'" :data="infodata"></disablemanage-detail>
        <enablemanage-detail v-if="infodata.type === '启用'" :data="infodata"></enablemanage-detail>
        <replacecardmanage-detail v-if="infodata.type === '补卡'" :data="infodata"></replacecardmanage-detail>
        <othercharge-detail v-if="infodata.type === '其他收费'" :data="infodata"></othercharge-detail>
        <inputtorchange-detail v-if="infodata.type === '抄表员变更'" :data="infodata"></inputtorchange-detail>
        <overuserchange-detail v-if="infodata.type === '超用收费'" :data="infodata"></overuserchange-detail>
        <adduser-detail v-if="infodata.type === '新增户档案'" :data="infodata"></adduser-detail>
        <gaspricechange-detail v-if="infodata.type === '气价变更'" :data="infodata"></gaspricechange-detail>
        <userchange-detail v-if="infodata.type === '档案变更'" :data="infodata"></userchange-detail>
        <changemeter-detail v-if="infodata.type === '换表'" :data="infodata"></changemeter-detail>
        <cardoveruser-detail v-if="infodata.type === '卡表超用'" :data="infodata"></cardoveruser-detail>
        <cancellation-detail v-if="infodata.type === '销户'" :data="infodata"></cancellation-detail>
        <refund-detail v-if="infodata.type === '退费'" :data="infodata"></refund-detail>
        <change-meter-cancel v-if="infodata.type === '换表撤销'" :data="infodata"></change-meter-cancel>
        <autoaccounts-cancel-detail v-if="infodata.type === '自动下账撤销'" :data="infodata"></autoaccounts-cancel-detail>
        <transfermanage-cancel-detail v-if="infodata.type === '过户撤销'" :data="infodata"></transfermanage-cancel-detail>
        <cardmetercenter-cancel-detail v-if="infodata.type === '卡表收费撤销'||infodata.type ==='发卡售气撤销'" :data="infodata"></cardmetercenter-cancel-detail>
        <machinemetercenter-cancel-detail v-if="infodata.type === '机表收费撤销'"
                                          :data="infodata"></machinemetercenter-cancel-detail>
        <othercharge-cancel-detail v-if="infodata.type === '其他收费撤销'" :data="infodata"></othercharge-cancel-detail>
        <replacecardmanage-cancel-detail v-if="infodata.type === '补卡撤销'" :data="infodata"></replacecardmanage-cancel-detail>
        <iotmetercenter-cancel-detail v-if="infodata.type === '物联网收费撤销'" :data="infodata"></iotmetercenter-cancel-detail>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button  type="button" class="btn btn-default" @click='cancel'>取消</button>
      </footer>
    </modal>
  </div>
</template>

<script>
  import { PagedList } from 'vue-client'
  import defaultPrint from '../config/DefaultPrint'
  import exportConfig from '../config/exportConfig'

  let readySomething = async function (self) {
    console.log('收费查询获取默认配置', self.config)
    self.defaultfield = [...self.defaultfield, ...self.config.defaultPrint]
    self.$refs.paged.$refs.cri.model.startDate = self.$login.toStandardDateString()
    self.$refs.paged.$refs.cri.model.endDate = self.$login.toStandardDateString()
    await self.$MagLoadParams.loadParam(self.$login.f)
    self.initParams()
    /* await self.$refs.paged.$refs.cri.search()
     self.sumsmodel = self.$refs.paged.$refs.grid.model.sums*/
  }
  export default {
    data() {
      return {
        infodata:{},
        showinfo: false,
        data: {},
        model: new PagedList('rs/sql/getRecord', 20, {items: "'*'", tablename: "'t_record'", orderitem: "'id desc'" }),
        criteriaShow: true,
        filialeNameStr: null,
        modelval: [],
        printshow: false,
        all: false,
        fields: {},
        thead: '',
        // 下拉框
        meterbrands: [],
        pricenames: [],
        ywtype: this.$appdata.getParam('业务类型') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('业务类型')] : [],
        filialelist: this.$appdata.getParam('售气单位') ? [{label: '全部', value: ''},...this.$appdata.getParam('售气单位')] : [],
        charge_state: [{label: '全部', value: ''},{label: '有效', value: '有效'},{label: '无效', value: '无效'}],
        //合计数据
        defaultfield: [],
        sumsmodel: {}
      }
    },
    ready(){
      readySomething(this).then(() => {
        this.$emit('ready')
      }).catch((error) => {
        this.$emit('error', error)
      })
    },
    methods: {
      cancel  () {
        this.showinfo=false
        this.infodata = {}
      },
      initParams () {

        // 初始化气表品牌
        let brandArr = []
        this.$MagGetSaleParam.getGasbrand().forEach((item) => {
          let temp = {}
          temp.label = item.label
          temp.value = item.value.f_meter_brand
          brandArr.push(temp)
        })
        this.meterbrands = [{label: '全部', value: ''}, ...brandArr]

        // 初始化气价信息
        console.log('初始化气价。。', this.$MagGetSaleParam.getPrice())

        let priceArr = []
        this.$MagGetSaleParam.getPrice().forEach((item) => {
          let temp = {}
          temp.label = item.label
          temp.value = item.value.f_price_name
          priceArr.push(temp)
        })

        this.pricenames = [{label: '全部', value: ''}, ...priceArr]


      },
      selfSearch (args) {
        this.model.search(args.condition, args.model)
        this.sumsmodel = this.$refs.paged.$refs.grid.model.sums
      },
      clear(){
        Object.keys(this.$refs.paged.$refs.cri.model).forEach((key) => {
          this.$refs.paged.$refs.cri.model[key] = []
        })

      },
      dealmsg (val) {
        console.log('---------------dealmsg')
        val.model = this.model.model
        this.$dispatch('deal-msg',val)
      },
      look (val) {
        this.infodata = val
        this.showinfo=true
      },
      show(){
        this.criteriaShow = true
      },
      hidden(){
        this.criteriaShow = !this.criteriaShow
      },
      stamp () {
        this.all = false
        //默认选择要打印的列
        this.modelval = defaultPrint.config
        this.fields = this.getfield
        console.log('所有打印字段',this.fields)
        this.printshow = true
        this.put()
      },
      put () {
        // 对Modelval进行排序
        this.sortModelval()
        this.thead = `<tr><th colspan=${this.modelval.length}>收费查询统计报表</th></tr><tr>`
        for (let key of this.modelval) {
          this.thead += '<th>' + this.fields[key] + '</th>'
        }
        this.thead += '</tr>'
      },
      print () {
        this.$refs.print.PrintAsFile()
        this.printshow = false
      },
      close () {
        this.printshow = false
        this.all = false
      },
      // 对选择的列进行排序
      sortModelval () {
        let sortModel = []
        Object.keys(this.fields).forEach((key) => {
          if (this.modelval.includes(key)) {
            sortModel.push(key)
          }
        })
        this.modelval = sortModel
        console.log('选择的打印的字段', this.modelval)
      }
    },
    watch:{
      'all' (val) {
        if (val) {
          this.modelval = this.bodyData
        } else {
          this.modelval = defaultPrint.config
          this.put()
        }
      },
      'modelval.length' () {
        this.put()
      },
    },
    computed:{
      getCondition(){
        return {condition: `${this.$refs.paged.$refs.cri.condition} `}
      },
      getfield(){
        return exportConfig.chargeConfig
      },
      selldep () {
        let rs = []
        if(this.$refs.paged.$refs.cri.model.f_filiale){
          this.$refs.paged.$refs.cri.model.f_outlets = ''
          return [{label: '全部', value: ''}, ...this.$appdata.getParam(this.$refs.paged.$refs.cri.model.f_filiale) ]
        }
        else {
          return [{label: '全部', value: ''}]
        }
      },
      gasproperties () {
        let rs = []
        if (this.$refs.paged.$refs.cri.model.f_user_type.length === 1) {
          rs = this.$appdata.getParam(this.$refs.paged.$refs.cri.model.f_user_type[0])
        }
        return [{label: '全部', value: ''}, ...rs]
      },
    }
  }
</script>
