<template>
  <div class="basic-main flex">
    <partial-view v-ref:pv  v-if="showchangeUserInformation">
      <div class="panel panel-info auto" >
        <div class="panel-heading"  style="height: 35px">
          <h4 style="display:inline-block;margin-top: auto">用户信息</h4>
        </div>
      </div>
      <div class="auto info-content row">
        <div class="col-sm-6 form-group">
          <label class="font_normal_body">团体编号</label>
          <label class = "font_normal_body">{{civill.f_customer}}</label>
        </div>
        <div class="col-sm-6 form-group">
          <label class="font_normal_body">客户姓名</label>
          <label class = "font_normal_body">{{civill.f_user_name}}
            <span @click.stop="changeUserInformation('用户姓名')" class="glyphicon glyphicon-pencil clickchange" title="修正客户姓名"></span>
          </label>
        </div>
      </div>
      <div class="auto info-content row">
        <div class="col-sm-6 form-group">
          <label class="font_normal_body">详细地址</label>
          <label class = "font_normal_body">{{civill.f_address}}
            <span @click.stop="changeUserInformation('详细地址')" class="glyphicon glyphicon-pencil clickchange" title="修正客户电话"></span>
          </label>
        </div>
        <div class="col-sm-6 form-group">
          <label class="font_normal_body">联系电话</label>
          <label class = "font_normal_body">{{civill.f_user_phone}}
            <span @click.stop="changeUserInformation('联系电话')" class="glyphicon glyphicon-pencil clickchange" title="修正客户电话"></span>
          </label>
        </div>
      </div>
      <modal v-if="showselectncuserinfo" :show.sync="showselectncuserinfo" width="40%" :title="changeUserList.title" v-ref:modal large backdrop="false">
        <article slot="modal-body" class="modal-body">
          <div class="form-horizontal" >
            <div class="row">
              <div class="col-sm-12 form-group">
                <label class="font_normal_body">{{changeUserList.oldInfoname}}</label>
                <input disabled readonly type="text" style="width:80%" class="input_search" v-model="changeUserList.oldInfoval" :placeholder='changeUserList.oldInfoname'>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-12 form-group">
                <label class="font_normal_body">{{changeUserList.newInfoname}}</label>
                <input type="text" style="width:80%" class="input_search" v-model="changeUserList.newInfoval" :placeholder='changeUserList.newInfoname'>
              </div>
            </div>
          </div>
        </article>
        <footer slot="modal-footer" class="modal-footer">
          <button class="button_search" :disabled='!$m.valid ' @click="modifyUser">确定</button>
          <button type="button" class="button_clear" @click='close'>取消</button>
        </footer>
      </modal>
    </partial-view>

    <div style="height: 400px;background:#E6E6FA; margin-top: 10px;">
      <data-grid :model="owe" class="table_sy" 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>
            <th><nobr>应交气费</nobr></th>
            <th><nobr>违约金</nobr></th>
            <th><nobr>合计欠费</nobr></th>
          </tr>
        </template>
        <template partial='body' >
          <tr >
            <td style="text-align:center;white-space:nowrap;">{{$index+1}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.f_userinfo_code}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.f_user_name}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.f_meter_classify}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.c}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.f_hand_date}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.f_last_tablebase}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.f_tablebase}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.f_oughtamount}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.f_oughtfee}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.f_debt_money}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.f_oughtfee_new}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.overdue}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.f_oughtfee_all}}</td>
          </tr>
        </template>
      </data-grid>
    </div>
  </div>
  <div class="auto" style="margin-top: 1%;">
    <div style="height: auto" class="select-overspread">
      <div class="form-inline" style="height: auto">
        <div class="form-group" v-for="btn in operBtns">
          <button :id="btn.name" type="button" style="color:black" :class="[($index === 0) ? 'btn btn-click' : 'btn btn-un-click']" @click="business(btn)" >
            <span style="color:black">{{btn.name}}</span>
          </button>
        </div>
      </div>
      <div v-show="chargeShow" style="height: auto" class="select-overspread">
        <route v-ref:route></route>
      </div>
    </div>
  </div>
</template>

<script>
  import {HttpResetClass} from 'vue-client'

  export default {
    title: '批量欠费查询',
    data () {
      return {
        owe: {rows: []},
        model: {f_collection: 0},
        civill: null,
        chargeShow: false,
        operBtns: [
          {name: '团体缴费', value: {routeName: 'batch-charge'}},
          {name: '余额退款', value: {routeName: 'group-refund'}},
          {name: '制磁条卡', value: {routeName: 'show-citiao_card'}}
        ],
        showchangeUserInformation: false,
        showselectncuserinfo: false,
        changeUserList: {
          title: '',
          oldInfoname: '',
          oldInfoval: '',
          newInfoname: '',
          newInfoval: '',
          fieldname: ''
        }
      }
    },
    props: ['searchdata', 'f_civill_id', 'row'],
    ready () {
      this.getsalerecord()
    },
    methods: {
      changeUserInformation (val) {
        if (val === '用户姓名') {
          this.changeUserList = {
            title: '修正客户姓名',
            oldInfoname: '客户旧姓名',
            oldInfoval: this.civill.f_user_name,
            newInfoname: '客户新姓名',
            newInfoval: '',
            fieldname: 'f_user_name'
          }
        } else if (val === '详细地址'){
          this.changeUserList = {
            title: '修正客户地址',
            oldInfoname: '客户旧地址',
            oldInfoval: this.civill.f_address,
            newInfoname: '客户新地址',
            newInfoval: '',
            fieldname: 'f_address'
          }
        } else if (val === '联系电话') {
          this.changeUserList = {
            title: '修正客户电话',
            oldInfoname: '客户旧电话',
            oldInfoval: this.civill.f_user_phone,
            newInfoname: '客户新电话',
            newInfoval: '',
            fieldname: 'f_user_phone'
          }
        }
        this.showselectncuserinfo = true
      },
      close () {
        this.showselectncuserinfo = false
        this.changeUserList =  {
          title: '',
          oldInfoname: '',
          oldInfoval: '',
          newInfoname: '',
          newInfoval: '',
          fieldname: ''
        }
      },
      async modifyUser () {
        if (this.changeUserList.newInfoval === '') {
          this.$showMessage('您还未填写需要修正的信息！')
          return
        }

        let areamodel = {}
        areamodel.id =  this.f_civill_id
        let key = this.changeUserList.fieldname
        areamodel[key] = this.changeUserList.newInfoval

        let param = {}
        param.f_operator = this.$login.f.name
        param.f_operatorid = this.$login.f.id
        param.f_orgid = this.$login.f.orgid
        param.f_filialeid = this.$login.f.orgid
        param.f_orgname = this.$login.f.orgs
        param.f_depid = this.$login.f.depids
        param.f_depname = this.$login.f.deps
        param.version = this.civill.version
        param = Object.assign(param, areamodel)
        await this.$resetpost('rs/logic/savencarchives', {param: param}, {resolveMsg: '保存成功', rejectMsg: '保存团缴用户失败!!!'})
        this.civill[key] = this.changeUserList.newInfoval
        this.showselectncuserinfo = false
        this.close()
        this.$dispatch('confirm')
      },
      async getsalerecord () {
        let http = new HttpResetClass()
        if (this.f_civill_id) {
          this.condition = `p.f_civill_id = ${this.f_civill_id}`
        } else {
          let userfiles = Array.from(this.searchdata.keys())
          this.condition = `p.f_userfiles_id in (${userfiles})`
        }
        let record = await http.load('POST', 'rs/logic/batchOwe', {data: {condition: this.condition, f_civill_id: this.f_civill_id}}, {rejectMsg: '欠费查询出错！！', resolveMsg: null})
        this.owe.rows = record.data.owe
        this.model = Object.assign(this.model, record.data.model)
        this.civill = record.data.civill
        this.business(this.operBtns[0])
      },
      business (btn) {
        // 处理按钮样式
        this.styleChange(btn.name)
        this.chargeShow = true
        this.$refs.route.init(btn.value.routeName, {row: this.row, data: this.model, owe: this.owe, civill: this.civill})
        this.showchangeUserInformation = btn.name === '团体缴费'
      },
      styleChange (name) {
        this.operBtns.forEach((res) => {
          if (res.name === name) {
            if (document.getElementById(res.name)) {
              document.getElementById(res.name).style.backgroundColor = '#6aa6e2'
              document.getElementById(res.name).style.color = 'white'
            }
          } else {
            if (document.getElementById(res.name)) {
              document.getElementById(res.name).style.backgroundColor = 'white'
              document.getElementById(res.name).style.color = 'black'
            }
          }
        })
      }
    },
    watch: {
      'searchdata' () {
        this.getsalerecord()
      }
    }
  }
</script>
