<template>
  <div class="app-bg row" style="padding: 10px">
    <div class="row app-row" style="height: 8%">
        <div class="col-xs-3" style="margin-bottom: 6px">
          <img src="../../assets/chaobiao.png" style="width: 20px;margin-bottom: 5px" alt="">
          <span class="text-left font">抄表单条数</span>
        </div>
        <div class="col-xs-3 input-font " >
          <p class="text-info">总数：{{handcount}}</p>
        </div>
      <div class="col-xs-3 input-font " >
        <p class="text-suucess"> 已抄：{{hadcount}}</p>
      </div>
      <div class="col-xs-3 input-font " >
        <p class="text-danger">未抄：{{leftcount}}</p>
      </div>
    </div>
    <div class="row  col-xs-12 col-sm-12 col-md-12" style="height: 90%">
      <div class="col-xs-4 col-sm-4 col-md-4 select-form auto" >
        <label for=""> 街道</label>
      </div>
      <div class="col-xs-4 col-sm-4 col-md-4 select-form auto" >
        <label for=""> 用气单位</label>
      </div>
      <div class="col-xs-4 col-sm-4 col-md-4 select-form auto" >
        <label for=""> 用气点</label>
      </div>
      <div class="col-xs-4 col-sm-4 col-md-4  " style="overflow: auto">
        <div class="row auto select-row" v-for="street in data.streetArr" >
          <p :class="{active: street === data.f_street}" @click="selectStreet(street)"> {{street}}</p>
        </div>
      </div>
      <div class="col-xs-4 col-sm-4 col-md-4  " style="overflow: auto">
        <!--<label for=""> 用气单位</label>-->
        <div class="row auto select-row" v-for="gasarr in data.gasArr"  >
          <p :class="{active: gasarr === data.f_gas_area}" @click="selectGasArea(gasarr)"> {{gasarr}}</p>
        </div>
      </div>
      <div class="col-xs-4 col-sm-4 col-md-4  " class="text-center"  style="overflow: auto">
        <!--<label for=""> 用气点</label>-->
        <div class="row auto select-row" v-for="pointarr in data.pointArr" >
            <p  :class="{active: pointarr === data.f_point_name}" @click="selectePointName(pointarr)"> {{pointarr}}</p>

        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import * as Util from '../Util'
  import AppData from '../../stores/AppData'
  import Vue from 'vue'

  export default {
    title: '抄表管理',
    props: {
      data: {
        type: Object,
      },
      name:{
        type:String,
        default:'抄表列表'
      }
    },
    data () {
      return {
        model: {},
        show: false,

        handcount: 0,
        userInfo: {},
        currentPage: 1,
        leftcount:0,
        hadcount:0,
        totalPage: 0,
        pageSize: 100,
        startNumer: AppData.params.f_userinfo_id
      }
    },
    // init(){
    //   window.alert('init')
    // },
    ready () {

      this.userInfo = Object.assign({}, this.userInfo, Vue.user)
      this.model.startDate = `${Util.toStandardYearMonth()}-01`
      this.model.endDate = Util.toStandardDateString()
      this.search()
    },

    methods: {
      initStreet () {
        if (this.data && this.data.returnData) {
          let arr = [], res = new Map()
          this.data.streetArr = []
          for (let i = 0; i < this.data.returnData.length; i++) {
            arr.push(this.data.returnData[i].f_street)
          }
          let obj = {}
          for (let i of arr) {
            if (!obj[i]) {
              this.data.streetArr.push(i)
              obj[i] = 1
            }
          }
          if(arr.length<1){
            this.data.gasArr = []
            this.data.pointArr = []
          }
        }
      },

      selectStreet (row) {
        this.data.pointArr = []
        this.data.f_street = row
        let arr = [], res = new Map()
        this.data.gasArr = []
        if (this.data.f_street) {
          for (let i = 0; i < this.data.returnData.length; i++) {
            if (this.data.returnData[i].f_street === this.data.f_street) {
              arr.push(this.data.returnData[i].f_gas_area)
            }
          }
        }
        this.data.gasArr = arr.filter((a) => !res.has(a) && res.set(a, 1))
      },
      selectGasArea (row) {
        this.data.f_gas_area = row
        let arr = [], res = new Map()
        this.data.pointArr = []
        if (this.data.f_street) {
          for (let i = 0; i < this.data.returnData.length; i++) {
            if (this.data.returnData[i].f_gas_area === this.data.f_gas_area) {
              arr.push(this.data.returnData[i].f_point_name)
            }
          }
        }
        this.data.pointArr = arr.filter((a) => !res.has(a) && res.set(a, 1))
        console.log(this.pointArr)
      },
      selectePointName (row) {
        this.data.f_point_name = row
        this.$dispatch('changepage', this.data, 'selectpoint')
      },
      switchPage (type) {
        if (type === 'last' && this.currentPage > 1) {
          this.currentPage--
          this.search()
          return
        }
        if (type === 'next' && this.currentPage < this.totalPage) {
          this.currentPage++
          this.search()
          return
        }
      },
      confirm () {
        this.currentPage = 1
        this.search()
      },
      search () {
        let condition = '1=1 and f_meter_state =  \'未抄表\''
        for (let item in this.model) {
          if (this.model[item] !== '' && item !== 'startDate' && item !== 'endDate' && item !== 'f_address') {
            condition += `and ${item} = '${this.model[item]}'`
          }
        }
        if (this.model.f_address !== '') {
          condition += `and f_address like '${this.model.f_address}%'`
        }
        if (AppData.params.f_userinfo_id !== undefined) {
          condition += `and f_userinfo_id >= '${AppData.params.f_userinfo_id}'`
        }
        if (this.model.startDate === '') {
          this.model.startDate = `${Util.toStandardYearMonth()}-01`
        }
        if (this.model.endDate === '') {
          this.model.endDate = Util.toStandardDateString()
        }
        console.log(condition, 'condition')
        condition = '1=1 and f_meter_state =  \'未抄表\''

        console.log('测试环境'+Vue.isTest)
       // PC端
       //  this.$androidUtil.bzLogic('getUnHandMeterInfo', {
       //    data: {
       //      currentPage: this.currentPage,
       //      pageSize: this.pageSize,
       //      startDate: `${this.model.startDate}`,
       //      endDate: `${this.model.endDate}`,
       //      condition: condition,
       //      f_inputtor: `${this.userInfo.name}`
       //    }
       //  }).then((res) => {
       //    this.show = true
       //    let pages = parseInt(res.data.totalSize / this.pageSize)
       //    this.totalPage = parseInt(res.data.totalSize % this.pageSize) !== 0 ? pages + 1 : pages
       //    this.handcount = res.data.totalSize
       //    this.leftcount = res.data.leftSize
       //    this.hadcount = parseInt(this.handcount) - parseInt(this.leftcount)
       //    this.handinfo = [...res.data.data]
       //    this.data.returnData = res.data.data
       //    // this.mode.returnData = res.data.data
       //    this.initStreet()
       //  })



        //安卓端
          let res = this.$androidUtil.bzLogic('getUnHandMeterInfo', {
            data: {
              startDate: `${this.model.startDate}`,
              endDate: `${this.model.endDate}`,
              condition: condition,
              f_inputtor: `${this.userInfo.name}`
            }
          })
          if (res.code === 200) {
            // console.log(JSON.stringify(res.data))
            let pages = parseInt(res.data.length / this.pageSize)
            this.totalPage = parseInt(res.data.totalSize % this.pageSize) !== 0 ? pages + 1 : pages

         this.handcount = res.totalSize
        this.leftcount = res.leftSize
        this.hadcount = parseInt(this.handcount) - parseInt(this.leftcount)
            this.handinfo = [...res.data]
            this.data.returnData = res.data
            this.initStreet()
          }


      },
      events: {
        'select' (val) {
          this.$dispatch('changepage', val, 'save')
        }

      },
      watch: {
        'data.streetArr'(val){
          if(this.data.streetArr.length=0){
            this.data.gasArr = []
            this.data.pointArr= []
            this.data.streetArr = []
          }
        },
        'data.returnData'(val){
          this.userInfo = Object.assign({}, this.userInfo, Vue.user)
          this.model.startDate = `${Util.toStandardYearMonth()}-01`
          this.model.endDate = Util.toStandardDateString()
          this.search()
          // this.initStreet()
        }
      }
    }
  }
</script>
<style scoped>
  .search_input {
    border: 0;
    outline: none;
  }
  .container{
    /*padding: 10px 10px 6px 10px;*/
    /*border: 1px solid rgba(235, 235, 235, 0.5);*/
  }
  .select-form {
    border: 1px solid white;
    border-radius: 2px;
    /*padding: 0.25em;*/
    /*margin: 10px;*/
    background-color: #65b0e9;
  }

  .select-row p {
    border-radius: 0.5em;
    padding: 0.25em;
    text-align: center;
    background-color: #97a8be;

  }
  p.active{
    background: #499edf;
  }
  /*.select-form p:hover {*/
    /*background-color: ;*/
  /*}*/

  .select-form p, label {
    /*margin: 10 auto;*/

    display: block;
    vertical-align: middle;
    cursor: pointer;
    text-align: center;
  }

  .row {
    background-color: white;
    padding: 10px 10px 3px 10px;
    border-bottom: 1px solid rgba(235, 235, 235, 0.5);
  }

  .font {
    font: 15px PingFang-SC-Medium;
    color: #666666;
  }

  .btn-font {
    font: 600 16px PingFang-SC-Bold;
    color: #499EDF;
  }

  .btn-color {
    background-color: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #499EDF;
  }

  .input-font {
    font: 15px PingFang-SC-Medium;
    color: #333333;
  }

</style>
