<template>
  <div id="unit" class="flex-row">
    <div class="basic-main" @keyup.enter="search">
      <div novalidate class="form-horizontal select-overspread container-fluid auto">
        <div class="row">
          <div class="col-sm-5 form-group">
            <label class="font_normal_body">客户状态</label>
            <v-select :options='userstates' :value.sync="userState"
                      close-on-select condition="ui.f_user_state='{}'" value-single
                      placeholder='客户状态' v-model="userState"></v-select>
          </div>
          <div class="col-sm-7 form-group button-range">
            <button class="button_search button_spacing" @click="search()">查询</button>
            <export-excel :data="getCondition"
                          :field="[]"
                          :header="other"
                          :footer="footer"
                          sqlurl="rs/rcEasyExcel/rcAreaSummaryExport" sql-name="areaBuildingDetailInfo"
                          template-name='小区楼栋信息汇总表'
                          :choose-col="true"></export-excel>
            <button class="button_search button_spacing" @click="cancel()">返回</button>
          </div>
        </div>
      </div>
      <div class="my-table">
        <table class="table table-striped table-bordered" style="width: 100%;">
          <thead>
          <tr>
            <th style="white-space: nowrap;text-align:center">
              <nobr>小区名称</nobr>
            </th>
            <th style="white-space: nowrap;text-align:center">
              <nobr>楼栋数</nobr>
            </th>
            <th style="white-space: nowrap;text-align:center">
              <nobr>楼栋</nobr>
            </th>
            <th style="white-space: nowrap;text-align:center">
              <nobr>楼栋用户数</nobr>
            </th>
            <th style="white-space: nowrap;text-align:center">
              <nobr>地址状态</nobr>
            </th>
            <th style="white-space: nowrap;text-align:center">
              <nobr>分项用户数</nobr>
            </th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="row in dataArray">
            <td style="white-space: nowrap;text-align:center"
                :rowspan="row.f_residential_areaspan" :class="{hidden: row.f_residential_areadis}">
              <nobr>{{ row.f_residential_area }}</nobr>
            </td>
            <td style="white-space: nowrap;text-align:center"
                :rowspan=" row.f_building_numspan" :class="{hidden: row.f_building_numdis}">
              <nobr>{{ row.f_building_num }}</nobr>
            </td>
            <td style="white-space: nowrap;text-align:center"
                :rowspan="row.f_buildingspan" :class="{hidden: row.f_buildingdis}">
              <nobr>{{ row.f_building }}</nobr>
            </td>
            <td style="white-space: nowrap;text-align:center"
                :rowspan=" row.f_user_numspan" :class="{hidden: row.f_user_numdis}">
              <nobr>{{ row.f_user_num }}</nobr>
            </td>
            <td style="white-space: nowrap;text-align:center">
              <nobr>{{ row.f_address_state }}</nobr>
            </td>
            <td style="white-space: nowrap;text-align:center">
              <nobr>{{ row.f_num }}</nobr>
            </td>
          </tr>
          </tbody>
        </table>
      </div>


      <table class="table-hover">
        <tr style="position: relative" class="table-bordered">
          <td
            style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;color: #5CB95C;font-weight: bold">
            {{ sumsmodel.f_residential_area }}汇总信息
          </td>
          <td
            style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
            小区总用户数:&emsp;{{ (sumsmodel.f_user_num) }}
          </td>
          <td
            style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
            已开户用户数:&emsp;{{ (sumsmodel.f_open_num) }}
          </td>
          <td
            style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
            已通气用户数:&emsp;{{ (sumsmodel.f_gas_num) }}
          </td>
          <td
            style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
            未通气用户数:&emsp;{{ (sumsmodel.f_nogas_num) }}
          </td>
          <td
            style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;font-weight: bold">
            空户用户数:&emsp;{{ (sumsmodel.f_empty_num) }}
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import defaultPrint from '../../components/sale/config/DefaultPrint'
import exportConfig from './exportConfig'

export default {
  title: '小区信息详情',
  data () {
    return {
      other: [],
      footer: [],
      conditionStr: '1=1',
      defaultfield: [],
      config: {
        defaultPrint: []
      },
      // 合计数据
      sumsmodel: {},
      criteriaShow: false,
      dataArray: [],
      len: 0
    }
  },
  props: {
    row: {
      type: Object
    },
    userState: {
      type: String
    }
  },
  ready () {
    this.search()
  },
  methods: {
    getotherfooter () {
      this.other = []
      this.footer = []
      let otherInData = []
      otherInData.push(`导出时间: ${this.$login.toStandardTimeString()}`)
      let footerData = [], exportfield = this.getExportField
      footerData.push('合计')
      let self = this
      for (var field in self.sumsmodel) {
        footerData.push(`${exportfield[field]}合计:${self.sumsmodel[field]}`)
      }
      this.footer.push(footerData)
      this.other.push(otherInData)
    },
    search () {
      if (this.conditionStr === '1=1') {
        if (this.userState) {
          this.conditionStr = '1=1 and ui.f_user_state=' + '\'' + this.userState + '\''
        }
      }
      this.getData()
    },
    combineCell (list) {
      for (let field in list[0]) {
        let k = 0
        while (k < list.length) {
          list[k][field + 'span'] = 1
          list[k][field + 'dis'] = false
          let i
          for (i = k + 1; i <= list.length - 1; i++) {
            if (list[k][field] === list[i][field] && list[k][field] !== '') {
              list[k][field + 'span']++
              list[k][field + 'dis'] = false
              list[i][field + 'span'] = 1
              list[i][field + 'dis'] = true
            } else {
              break
            }
          }
          k = i
        }
      }
      return list
    },
    selfSearch (args) {
      this.conditionStr = args.condition
      args.model.parentRow = this.row
      this.getData()
    },
    getData () {
      let data = {
        parentRow: this.row,
        condition: this.conditionStr
      }
      this.$resetpost('rs/logic/areaBuildingDetailInfo', {data: data}, {resolveMsg: null, rejectMsg: '获取小区详细信息出错！！'})
        .then(res => {
          this.dataArray = this.combineCell(res.data.data)
          this.sumsValues()
        })
    },
    sumsValues () {
      let data = {
        f_user_num: 0,
        f_open_num: 0,
        f_gas_num: 0,
        f_nogas_num: 0,
        f_empty_num: 0
      }
      data.f_user_num = this.row.f_user_num
      data.f_open_num = this.row.f_open_num
      data.f_gas_num = this.row.f_gas_num
      data.f_nogas_num = this.row.f_nogas_num
      data.f_empty_num = this.row.f_empty_num
      this.sumsmodel = data
    },
    cancel () {
      this.$dispatch('clean')
    },
    showmsg (obj) {
      this.rowdata = obj
      this.show = true
    },
    print () {
      this.$refs.print.PrintAsFile()
      this.printshow = false
    }
  },
  watch: {
    'row' (val) {
      console.log('看看传进来的值：' + val)
      this.row = val
      if (val) {
        this.search()
      }
    },
    sumsmodel: {
      handler: function (val) {
        this.getotherfooter()
      },
      deep: true
    },
    'modelval.length' () {
      this.put()
    }
  },
  computed: {
    getCondition () {
      return {condition: this.conditionStr, parentRow: this.row}
    },
    getfield () {
      let data = {}
      this.bodyData.forEach((value, index) => {
        data[this.bodyData[index]] = this.headData[index]
      })
    },

    userstates () {
      return [{label: '全部', value: ''}, ...this.$appdata.getParam('客户状态')]
    },
    getExportField () {
      return exportConfig.areaBuildingInfoSum
    }
  }
}
</script>
<style>
.my-table {
  width: 100%;
  max-height: 90%; /* 设置最大高度 */
  overflow-y: auto; /* 添加垂直滚动条 */
}

.my-table thead th {
  position: sticky;
  top: 0;
}
</style>
