<template>
  <div id="unit" class="flex-row">
    <div class="basic-main">
      <div class="flex">
        <criteria-paged :model="model" v-ref:paged>
          <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
            <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
              <div class="row">

                <div class="form-group col-sm-2">
                  <label for="startDate" class="font_normal_body">开始日期</label>
                  <datepicker id="startDate" placeholder="开始日期" style="width:60%"
                              v-model="model.startDate"
                              :value.sync="model.startDate"
                              :format="'yyyy-MM-dd'"
                              :show-reset-button="true"
                              condition="h.f_input_date >= '{} 00:00:00'">
                  </datepicker>
                </div>
                <div class="form-group col-sm-2">
                  <label for="endDate" class="font_normal_body">结束日期</label>
                  <datepicker id="endDate" placeholder="结束日期" style="width:60%"
                              v-model="model.endDate"
                              :value.sync="model.endDate"
                              :format="'yyyy-MM-dd'"
                              :show-reset-button="true"
                              condition="h.f_input_date <= '{} 23:59:59'">
                  </datepicker>
                </div>
                <div class="form-group col-sm-2">
                  <label class="font_normal_body">客户编号</label>
                  <input type="text" style="width:60%" class="input_search" v-model="model.f_userinfo_code"
                         condition="u.f_userinfo_code = '{}' " placeholder="客户编号">
                </div>
                <div class="form-group col-sm-2">
                  <label class="font_normal_body">客户名称</label>
                  <input type="text" style="width:60%" class="input_search" v-model="model.f_user_name"
                         condition="u.f_user_name = '{}'" placeholder="客户名称">
                </div>

                <div class="span" style="float:right;">
                  <button class="button_search button_spacing" @click="search()">查询</button>
                  <export-excel-hand :data="$parent.$parent.getCondition"
                                :field="$parent.$parent.getfield"
                                :other-data="$parent.$parent.other"
                                :footer-data="$parent.$parent.footer"
                                v-ref:exports
                                sqlurl="rs/logic/reportExportfile" sql-name="paymentnotice" template-name='缴费通知单'
                  ></export-excel-hand>
                  <payment-notice-print :countmodel="{model:$parent.$parent.model}" :modelval="$parent.$parent.defaultfield"
                                        :fields="$parent.$parent.getfield"></payment-notice-print>

                  <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 class="row" v-show="$parent.$parent.criteriaShow">
                <div class="form-group col-sm-2">
                  <label class="font_normal_body">&nbsp;&nbsp;&nbsp;小区&nbsp;&nbsp;&nbsp;&nbsp;</label>
                  <v-select :value.sync="model.f_residential_area"
                            class="select_list select"
                            enter-push
                            v-model="model.f_residential_area"
                            style="width: 60%"
                            multiple="true"
                            :options='$parent.$parent.residentialArea' placeholder='选择小区'
                            close-on-select>
                  </v-select>
                </div>
                <div class="form-group col-sm-2">
                  <label class="font_normal_body">客户地址</label>
                  <input type="text" style="width:60%" class="input_search" v-model="model.f_address"
                         condition="a.f_address like '%{}%'" placeholder='客户地址'>
                </div>
                <div class="form-group col-sm-2">
                  <label class="font_normal_body">抄&ensp;表&ensp;员</label>
                  <v-select :value.sync="model.f_inputtor" v-model='model.f_inputtor'
                            style="width:60%"
                            :multiple="true"
                            :options='$parent.$parent.inputtores' placeholder='抄表员'
                            close-on-select
                            v-el:cc></v-select>
                </div>
                <div class="form-group col-sm-2">
                  <label class="font_normal_body">&nbsp;&nbsp;&nbsp;公司&nbsp;&nbsp;&nbsp; </label>
                  <res-select restype='organization'
                              @res-select="$parent.$parent.getRes"
                              :initresid="$parent.$parent.id">
                  </res-select>
                </div>
                <div class="form-group col-sm-2">
                  <label class="font_normal_body">&nbsp;&nbsp;&nbsp;部门&nbsp;&nbsp;&nbsp; </label>
                  <res-select restype='department'
                              @res-select="$parent.$parent.getdep"
                              :parentresid="$parent.$parent.depresid"
                              :initresid='$parent.$parent.depid'>
                  </res-select>
                </div>
                <div class="form-group col-sm-2">
                  <label class="font_normal_body">是否缴费</label>
                  <v-select id="f_whether_pay"
                            v-model="model.f_whether_pay"
                            placeholder='是否缴费'
                            style="width: 60%"
                            :value.sync="model.f_whether_pay"
                            :options='$parent.$parent.whetherPay'
                            condition="f_whether_pay = '{}'"
                            close-on-select></v-select>
                </div>
              </div>
            </div>
          </criteria>
          <data-grid :model="model" partial='list' class="list_area table_sy"  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>
                <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>{{row.number}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_building}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_unit}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.floor_room}}</nobr>
              </td>

              <td style="text-align: center;">
                <nobr>{{row.f_userinfo_code}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_user_name}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_address}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_user_phone}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_inputtor}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_last_tablebase}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_last_date}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_tablebase}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_input_date}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_oughtamount}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_oughtfee}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_balance}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.lswjd}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.yinshou}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_curbalance}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_charge_state}}</nobr>
              </td>

            </template>
            <template partial='foot'>
              <td style="text-align: center;">
              </td>
              <td style="text-align: center;">
                <nobr>合计：</nobr>
              </td>
              <td style="text-align: center;">
              </td>
              <td style="text-align: center;">
              </td>
              <td style="text-align: center;">
              </td>
              <td style="text-align: center;">
              </td>
              <td style="text-align: center;">
              </td>
              <td style="text-align: center;">
              </td>
              <td style="text-align: center;">
              </td>
              <td style="text-align: center;">
              </td>
              <td style="text-align: center;">
              </td>
              <td style="text-align: center;">
                <nobr>{{model.sums.f_oughtamount}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{model.sums.f_oughtfee}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{model.sums.f_balance}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{model.sums.lswjd }}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{model.sums.yinshou}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{model.sums.f_curbalance}}</nobr>
              </td>
              <td style="text-align: center;">
              </td>
            </template>
          </data-grid>

        </criteria-paged>


      </div>

    </div>
  </div>


</template>

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


  let readySomething = async function (self) {
    self.$refs.paged.$refs.cri.model.startDate = self.$login.toStandardDateString()
    self.$refs.paged.$refs.cri.model.endDate = self.$login.toStandardDateString()
    await self.$refs.paged.$refs.cri.search()

    self.sumsmodel = self.$refs.paged.$refs.grid.model.sums
  }
  export default {
    name: "handplan_report",
    title: '缴费通知单',
    data() {
      return {
        data: {},
        other:[],
        footer:[],
        model: new PagedList('api/af-revenue/sql/paymentnotice', 20, {},{
          f_oughtfee:0,f_oughtamount:0,f_balance:0,yinshou:0,f_curbalance:0,lswjd:0}),
        criteriaShow: false,
        show:false,
        id: [this.$login.f.orgid],
        depresid: [],
        userresid: [],
        area: [],
        inputtouPerson: [],
        f_orgid: this.$login.f.orgid,
        f_depid: this.$login.f.depids,
        f_operatorid: this.$login.f.id,
        operatorid: [],
        depid: [],
        //小区
        residentialArea: [],
        conditions: '',
        orgname: '',
        depname: '',
        operatorname: '',
        orgCondtionStr: '1=1',
        whetherPay: [{label:'全部',value:''},{label:'已收',value:'是'},{label:'未收',value:'否'}],
        defaultfield: ['number','f_building','f_unit','floor_room','f_userinfo_code','f_user_name','f_address',
          'f_user_phone','f_inputtor','f_last_date','f_last_tablebase','f_input_date','f_tablebase','f_oughtamount','f_oughtfee'
          ,'f_balance','yinshou','f_curbalance','f_charge_state','lswjd'],
      }
    },
    ready() {
      this.getaddress()

      readySomething(this).then(() => {
        this.$emit('ready')
      }).catch((error) => {
        this.$emit('error', error)
      })
    },
    methods: {
      getotherfooter(){
        this.$refs.paged.$refs.cri.$refs.exports.otherData=[];
        this.$refs.paged.$refs.cri.$refs.exports.footerData=[];
        this.other=[];
        this.footer=[];
        let exportdata = this.getCondition;
        let otherInData=[];
        otherInData.push(`日期: ${exportdata.startDate}-${exportdata.endDate}`);
        let footerData=[],exportfield=this.getfield;
        footerData.push("注意：请用户务必于____天内到经纬燃气公司（山西省运城市盐湖区人民南路东阜花苑3号门面房）或微信公众号缴纳燃气费，联系电话：8810200");
        //let self = this;
        //for(var field in self.sumsmodel){
        //  footerData.push(`${exportfield[field]}合计:${self.sumsmodel[field]}`);
        //}
        this.footer.push(footerData);
        this.other.push(otherInData);
      },
      async  getaddress(){
        console.log('开始获取小区')
        let HttpReset = new HttpResetClass()
        var data = await HttpReset.load('POST', 'api/af-revenue/sql/manage_getarealist', {
          data: {
            condition: `1=1 and s.f_filialeid = '${this.$login.f.orgid}'`
          }
        }, {resolveMsg: null, rejectMsg: '获取小区失败!'})
        console.log('小区',data)
        let house = []
        for (let row of data.data){
          console.log('开始保存小区')
          house.push({label: row.f_residential_area, value: row.f_residential_area})
        }
        this.residentialArea = house
      },
      selfSearch(args){
        this.getotherfooter();
        //抄表员查询条件
        this.inputtouPerson = this.$refs.paged.$refs.cri.model.f_inputtor
        if(this.inputtouPerson.length !== 0){
          let str = JSON.stringify(this.inputtouPerson)
          str = str.replace(/"/g,`'`)
          str = str.replace(/\[/g,``)
          str = str.replace(/\]/g,``)
          // console.log("=====抄表员model22222222222绑定====",str)
          //查询多个抄表员时条件
          args.condition += ` and f.f_inputtor in  ( ${str} )`
        }

        //小区查询条件
        this.area =  this.$refs.paged.$refs.cri.model.f_residential_area
        console.log("=====小区model绑定====",this.area)
        if(this.area.length !== 0){
          let str = JSON.stringify(this.area)
          str = str.replace(/"/g,`'`)
          str = str.replace(/\[/g,``)
          str = str.replace(/\]/g,``)
          // console.log("=====小区model22222222222绑定====",str)
          //查询多个小区时条件
          args.condition += ` and a.f_residential_area in  ( ${str} )`
        }

        this.orgCondtionStr = ` and h.f_orgid = '${this.f_orgid}'`
        args.condition = `${args.condition}` + this.orgCondtionStr
        this.conditions = args.condition
        // console.log("条件查询",this.conditions)
        this.model.search(this.conditions, args.model)
      },
      show() {
        this.criteriaShow = true
      },
      hidden() {
        this.criteriaShow = !this.criteriaShow
      },
      getRes (obj) {
        this.depresid = obj
        this.f_orgid = obj
      },
      getdep (obj, val) {
        // this.depname = val[0]
        this.userresid = obj
        this.f_depid = obj
      }

    },
    computed: {
      getCondition() {
        return {
          startDate: this.$refs.paged.$refs.cri.model.startDate,
          endDate: this.$refs.paged.$refs.cri.model.endDate,
          condition: this.conditions}
      },


      inputtores () {
        // 获取抄表员
        console.log('获取抄表员', this.$login.f)
        let rs = []
        if (this.$login.f.f_gasman.length > 0) {
          for (let i = 0; i < this.$login.f.f_gasman.length; i++) {
            let temp = {
              label: this.$login.f.f_gasman[i].name,
              value: this.$login.f.f_gasman[i].name
            }
            rs.push(temp)
          }
        }

        return [  ...rs]
      },
      getfield() {
        return {
          'number':'序号','f_building':'楼号','f_unit' :'单元','floor_room':'楼层户号',
          'f_userinfo_code':'用户编码','f_user_name':'姓名/名称','f_address':'地址','f_user_phone':'电话',
          'f_inputtor':'抄表员','f_last_tablebase' :'上次抄码','f_last_date':'上次抄表日期','f_tablebase':'本次抄码',
          'f_input_date':'本次抄表日期','f_oughtamount'  :'用气量','f_oughtfee' :'用气金额','f_balance' :'账户金额',
          'lswjd':'历史未交单','yinshou' :'合计应收','f_curbalance' :'本月结余','f_charge_state':'收费状态'
        }
      }
    }
  }
</script>
