<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 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 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 <= to_date('{} 23:59:59','yyyy-mm-dd hh24:mi:ss')">
                  </datepicker>
                </div>
                <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="span" style="float:right;">
                  <button class="button_search button_spacing" @click="search()">查询</button>
                  <export-excel :data="$parent.$parent.getCondition"
                                :field="$parent.$parent.getfield"
                                sqlurl="rs/logic/exportfile" sql-name="paymentnotice" template-name='缴费通知单'
                                ></export-excel>
                  <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">客户名称</label>
                    <input type="text" style="width:60%" class="input_search" v-model="model.f_user_name"
                           condition="u.f_user_name like '%{}%'" 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_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>

            </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>

             </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_address}}</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_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: {},

        model: new PagedList('rs/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: [],
        orgname: '',
        depname: '',
        operatorname: '',
        orgCondtionStr: '1=1',
        defaultfield: ['number','f_building','f_unit','floor_room','f_address','f_userinfo_code','f_user_name',
          'f_last_date','f_last_tablebase','f_input_date','f_tablebase','f_oughtfee','f_oughtamount'
          ,'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: {

      async  getaddress(){
        console.log('开始获取小区')
        let HttpReset = new HttpResetClass()
        var data = await HttpReset.load('POST', 'rs/sql/manage_getarealist', {
          data: {
            condition: '1=1 '
          }
        }, {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.model.params.endDate =this.$refs.paged.$refs.cri.model.endDate + ' 23:59:59'
        //抄表员查询条件
        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.model.search(args.condition, 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 {condition: `${this.$refs.paged.$refs.cri.condition}` + this.orgCondtionStr,
          endDate: this.$refs.paged.$refs.cri.model.endDate + ' 23:59:59'
        }
      },

      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_address':'地址','f_userinfo_code':'用户编码','f_user_name':'姓名/名称',
          'f_last_tablebase' :'上次抄码','f_last_date':'上次抄表日期','f_tablebase':'本次抄码',
          'f_hand_date':'本次抄表日期','f_oughtfee' :'用气量','f_oughtamount'  :'用气金额','f_balance' :'账户金额','yinshou' :'合计应收',
          'f_curbalance' :'本月结余','f_charge_state':'收费状态','lswjd':'历史未交单'
        }
      }
    }
  }
</script>
