<template>
  <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="col-sm-2">
              <label class="font_normal_body">小区名称</label>
              <input type="text" class="input_search" style="width:60%" v-model="model.f_residential_area" placeholder='小区名称'
                     condition="f_residential_area like '%{}%'" v-next-el="cx" v-el:qjmc>
            </div>
            <!--            <div class="col-sm-2">-->
            <!--              <label class="font_normal_body">计划名称</label>-->
            <!--              <input type="text" class="input_search" style="width:60%" v-model="model.f_plan_name" placeholder='计划名称'-->
            <!--                     condition="f_plan_name like '%{}%'" v-next-el="cx" v-el:qjmc>-->
            <!--            </div>-->
            <div  class="col-sm-2">
              <label class="font_normal_body">计划名称</label>
              <v-select
                placeholder='计划名称'
                class="select select_list"
                style="width: 60%"
                :value-single="true"
                v-model='model.f_plan_name'
                :value.sync="model.f_plan_name"
                :options='$parent.$parent.f_plan_namex'
                v-next-el="cx" v-el:qjmc
                condition="f_plan_name = '{}'"
                close-on-select clear-button> </v-select>
            </div>
            <div class="col-sm-4">
              <role-selector
                role-name="安检员"
                role-lable="安&nbsp;检&nbsp;员&nbsp;"
                @re-res="$parent.$parent.getRes"
                :value.sync="model.f_checker_id"
                v-model="model.f_checker_id"
                v-next-el="cx" v-el:qjmc>
              </role-selector>
            </div>
            <div  class="col-sm-2">
              <label class="font_normal_body">用气性质</label>
              <v-select
                placeholder='用气性质'
                class="select select_list"
                style="width: 60%"
                :value-single="true"
                v-model='model.f_gasproperties'
                :value.sync="model.f_gasproperties"
                :options='$parent.$parent.f_gaspropertieses'
                v-next-el="cx" v-el:qjmc
                condition="f_gasproperties = '{}'"
                close-on-select clear-button> </v-select>
            </div>
            <div class="span" style="float:left;">
              <button id="btnaaa" class="button_search" @click="$parent.$parent.getGroupName1(),search() ,$parent.$parent.$parent.isdetail=false,$parent.$parent.listflag=false" v-el:cx>查询</button>
              <button class="button_search" @click="$parent.$parent.exportexcel()" v-el:cx>导出Excel</button>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-2">
              <label class="font_normal_body">计划年份</label>
              <input type="text" class="input_search" style="width:60%" v-model="model.f_plan_year" placeholder='计划年份'
                     v-next-el="cx" v-el:qjmc>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12">
              <label class="control-label" style="color: #c7254e">汇 总 项</label>
              <input type="checkbox" id="f_plan_month" value="f_plan_month"  v-model="$parent.$parent.nameForSql"/>
              <label for="f_plan_month">计划月份</label>
              <input type="checkbox" id="f_no_checkplan" value="f_no_checkplan" v-model="$parent.$parent.nameForSql"/>
              <label for="f_no_checkplan">计划类型</label>
              <input type="checkbox" id="f_residential_area" value="f_residential_area" v-model="$parent.$parent.nameForSql"/>
              <label for="f_residential_area">小区名称</label>
              <input type="checkbox" id="f_plan_name" value="f_plan_name" v-model="$parent.$parent.nameForSql"/>
              <label for="f_plan_name">计划名称</label>
              <input type="checkbox" id="f_checker_name" value="f_checker_name" v-model="$parent.$parent.nameForSql"/>
              <label for="f_checker_name">安检员</label>
              <input type="checkbox" id="f_user_number" value="f_user_number" v-model="$parent.$parent.nameForSql"/>
              <label for="f_checker_name">档案数量</label>
              <input type="checkbox" id="f_year_number" value="f_year_number" v-model="$parent.$parent.nameForSql"/>
              <label for="f_checker_name">应检数</label>
              <input type="checkbox" id="f_gasproperties" value="f_gasproperties" v-model="$parent.$parent.nameForSql"/>
              <label for="f_checker_name">用气性质</label>
            </div>
          </div>
        </div>

      </criteria>
      <data-grid :model="model" partial='list'  class="list_area table_sy"  v-ref:grid id="planid">
        <template partial='head'>
          <tr>
            <th>
              <nobr>序号</nobr>
            </th>
            <th v-if="$parent.$parent.$parent.nameForSql.includes('f_plan_month')"><nobr>计划月份</nobr></th>
            <th v-if="$parent.$parent.$parent.nameForSql.includes('f_no_checkplan')"><nobr>计划类型</nobr></th>
            <th v-if="$parent.$parent.$parent.nameForSql.includes('f_residential_area')"><nobr>小区名称</nobr></th>
            <th v-if="$parent.$parent.$parent.nameForSql.includes('f_plan_name')"><nobr>计划名称</nobr></th>
            <th v-if="$parent.$parent.$parent.nameForSql.includes('f_checker_name')"><nobr>安检员</nobr></th>
            <th v-if="$parent.$parent.$parent.nameForSql.includes('f_user_number')"><nobr>档案数量</nobr></th>
            <th v-if="$parent.$parent.$parent.nameForSql.includes('f_year_number')"><nobr>应检数</nobr></th>
            <th v-if="$parent.$parent.$parent.nameForSql.includes('f_gasproperties')"><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">{{$index + 1}}</td>
            <td style="text-align:center" :class="{'td-0':row.f_plan_month==undefined,'td-1':model.rows.length!=($index+1)&&row.f_plan_month.indexOf('*&')==-1,'td-2':model.rows.length!=($index+1)&&row.f_plan_month.indexOf('*&')!=-1,'td-3':model.rows.length==($index+1)&&row.f_plan_month.indexOf('*&')!=-1,'td-4':model.rows.length==($index+1)&&row.f_plan_month.indexOf('*&')==-1}" v-if="$parent.$parent.$parent.nameForSql.includes('f_plan_month')">{{row.f_plan_month.indexOf('*&')!=-1?'':row.f_plan_month}}</td>
            <td style="text-align:center" :class="{'td-0':row.f_no_checkplan==undefined,'td-1':model.rows.length!=($index+1)&&row.f_no_checkplan.indexOf('*&')==-1,'td-2':model.rows.length!=($index+1)&&row.f_no_checkplan.indexOf('*&')!=-1,'td-3':model.rows.length==($index+1)&&row.f_no_checkplan.indexOf('*&')!=-1,'td-4':model.rows.length==($index+1)&&row.f_no_checkplan.indexOf('*&')==-1}" v-if="$parent.$parent.$parent.nameForSql.includes('f_no_checkplan')">{{row.f_no_checkplan.indexOf('*&')!=-1?'':row.f_no_checkplan}}</td>
            <td style="text-align:center" :class="{'td-0':row.f_residential_area==undefined,'td-1':model.rows.length!=($index+1)&&row.f_residential_area.indexOf('*&')==-1,'td-2':model.rows.length!=($index+1)&&row.f_residential_area.indexOf('*&')!=-1,'td-3':model.rows.length==($index+1)&&row.f_residential_area.indexOf('*&')!=-1,'td-4':model.rows.length==($index+1)&&row.f_residential_area.indexOf('*&')==-1}" v-if="$parent.$parent.$parent.nameForSql.includes('f_residential_area')">{{row.f_residential_area.indexOf('*&')!=-1?'':row.f_residential_area}}</td>
            <td style="text-align:center" :class="{'td-0':row.f_plan_name==undefined,'td-1':model.rows.length!=($index+1)&&row.f_plan_name.indexOf('*&')==-1,'td-2':model.rows.length!=($index+1)&&row.f_plan_name.indexOf('*&')!=-1,'td-3':model.rows.length==($index+1)&&row.f_plan_name.indexOf('*&')!=-1,'td-4':model.rows.length==($index+1)&&row.f_plan_name.indexOf('*&')==-1}" v-if="$parent.$parent.$parent.nameForSql.includes('f_plan_name')">{{row.f_plan_name.indexOf('*&')!=-1?'':row.f_plan_name}}</td>
            <td style="text-align:center" :class="{'td-0':row.f_checker_name==undefined,'td-1':model.rows.length!=($index+1)&&row.f_checker_name.indexOf('*&')==-1,'td-2':model.rows.length!=($index+1)&&row.f_checker_name.indexOf('*&')!=-1,'td-3':model.rows.length==($index+1)&&row.f_checker_name.indexOf('*&')!=-1,'td-4':model.rows.length==($index+1)&&row.f_checker_name.indexOf('*&')==-1}" v-if="$parent.$parent.$parent.nameForSql.includes('f_checker_name')">{{row.f_checker_name.indexOf('*&')!=-1?'':row.f_checker_name}}</td>
            <td style="text-align:center" v-if="$parent.$parent.$parent.nameForSql.includes('f_user_number')">{{row.f_user_number}}</td>
            <td style="text-align:center" v-if="$parent.$parent.$parent.nameForSql.includes('f_year_number')">{{row.f_year_number}}</td>
            <td style="text-align:center" v-if="$parent.$parent.$parent.nameForSql.includes('f_gasproperties')">{{row.f_gasproperties}}</td>
            <td style="text-align:center">{{row.ruhu_num}}</td>
            <td style="text-align:center">{{row.daohu_num}}</td>
            <td style="text-align:center">{{(row.f_year_number - row.daohu_num) >=0 ? (row.f_year_number - row.daohu_num) : ''}}</td>
            <td style="text-align:center"><nobr>{{row.f_buyu}}</nobr></td>
            <td style="text-align:center">{{row.f_jujian}}</td>
            <td style="text-align:center"><nobr>{{row.f_check_bv}}</nobr></td>
            <td style="text-align:center">{{row.weixiafahushu}}</td>
            <!--<td style="text-align: center;">-->
            <!--<button class="btn btn-link" @click.stop="$parent.$parent.$parent.showhistory(row)">查看</button>-->
            <!--</td>-->
          </tr>
        </template>
        <template partial='foot'></template>
      </data-grid>
    </criteria-paged>
  </div>
</template>

<script>
/**
 *阶梯气价查询列表
 */
import {PagedList,HttpResetClass} from 'vue-client'
import XLSX from 'xlsx';

export default {
  data () {
    return {
      model: new PagedList('api/af-safecheck/sql/getCheckPlanAreaList', 9999),
      // 公司下拉
      curorgid: [this.$login.f.orgid],
      row: {},
      planAll:[],
      f_orgid: '',
      nameForSql: [],
      groupNameForSql: '',
      listflag:false,
      f_plan_namex:[],
      nameflag:false,
      f_gaspropertieses: [{label:"全部",value:""},{label:"商业用气",value:"商业用气"},{label:"民用用气",value:"民用用气"},{label:"工业用气",value:"工业用气"}]
    }
  },
  props: {
    row: {},
    config: {},
    ispartial: false,
    f_filialeid: {
      type: String
    }
  },
  ready () {
    this.$refs.paged.$refs.cri.model.f_plan_year = new Date().getFullYear()
    //写一个方法  向后台发送请求，查询当前登陆人所在分公司的所有安检计划
    //返回计划名称数组，组装数据   [{label:'',value:''},{label:'',value:''}]
    new HttpResetClass().load('POST', '/api/af-safecheck/sql/safe_singleTable_OrderBy', {
      data: {
        items: 'f_plan_name,f_checker,id,f_filialeid',
        tablename: 't_check_plan',
        condition: '1=1',
        orderitem:'f_filialeid'
      }
    }, {resolveMsg: null, rejectMsg: null}).then((res=>{
      this.planAll=res.data
    }))
    this.nameForSql = ['f_residential_area','f_plan_name','f_year_number']
    this.groupNameForSql = 'f_residential_area,f_plan_name,f_year_number'
    this.search()
  },
  methods: {
    // 前台Excel导出
    exportexcel(){
      // 以上四行也可以直接一行搞定，如果不需要对表格数据进行修改的话
      let workbook = XLSX.utils.table_to_book(document.getElementById('planid'))
      try {
        XLSX.writeFile(workbook, '安检情况汇总导出.xlsx');
      } catch(e) {
      }
    },
    getplan(resids){
      this.f_plan_namex=[]
      this.planAll.forEach(plan => {
        if (resids.indexOf(plan.f_filialeid) != -1) {
          if (!plan.f_checker){
            plan.f_checker='共享计划'
          }
          this.f_plan_namex.push({label: plan.f_plan_name+":"+plan.f_checker, value: plan.f_plan_name})
        }
      })
    },
    search () {
      this.$refs.paged.$refs.cri.search()
      this.$dispatch('search')

    },
    getRes(obj) {
      this.f_orgid = this.$login.convertToIn(obj.resids);
      this.getplan(this.f_orgid)
    },
    getorg (val) {
      this.f_orgid = this.$login.convertToIn(val)
      this.f_filialeid = val[0]
      if(this.f_orgid){
        //this.getplan(this.f_orgid)
      }

      // for(var i=0;i<val.length;i++){
      //   var getcurorg = val[i].f_filialeid.toString();
      // }
    },
    selfSearch (args) {
      if (!this.f_orgid) {
        this.getorg([this.$login.f.orgid])
      }
      if (this.f_orgid) {
        args.condition = `f_filialeid  in ${this.f_orgid} and ${args.condition}`
      }
      this.$refs.paged.$refs.grid.$el.scrollTop = 0
      if (this.groupNameForSql=='undefined'){
        this.$showMessage("请至少选择一项进行汇总")
        return
      }
      if (this.$refs.paged.$refs.cri.model.f_checker_id) {
        args.condition += `AND (f_checker_name = '${ this.$refs.paged.$refs.cri.model.f_checker_id}' OR f_checker = '${this.$refs.paged.$refs.cri.model.f_checker_id}')`
      }
      let f_plan_year = 0
      if (this.$refs.paged.$refs.cri.model.f_plan_year){
         f_plan_year = this.$refs.paged.$refs.cri.model.f_plan_year
      }
      this.model.paramSource = {
        groupName : `'${this.groupNameForSql}'`,
        f_plan_year : f_plan_year,
      }
      this.model.search(args.condition, args.model)
    },
    // 拼接groupName1
    getGroupName1 () {
      var temp=['f_plan_month','f_no_checkplan','f_residential_area','f_plan_name','f_checker_name','f_user_number','f_year_number','f_gasproperties']
      var newtemp=[]

      for (var i=0;i<temp.length;i++){

        for (var j=0;j<this.nameForSql.length;j++){
          if(temp[i]==this.nameForSql[j]){
            newtemp.push(this.nameForSql[j])
          }
        }
      }
      let str = ''

      for (var i=0;i < newtemp.length - 1; i++) {
        str += newtemp[i] + ','
      }
      str += newtemp[i]
      this.groupNameForSql = str.trim()
    }
  },
  watch: {
    'nameForSql' () {
      var e = document.createEvent("MouseEvents");
      e.initEvent("click", true, true);
      document.getElementById("btnaaa").dispatchEvent(e);
    },
    'f_orgid' (resids) {
      //this.getplan(resids)
    },
    'model.rows'(){
      if(this.listflag){
        return;
      }
      this.listflag=true
      var temp=['f_plan_month','f_no_checkplan','f_residential_area','f_plan_name','f_checker_name','f_user_number']
      var newtemp=[]
      for (var i=0;i<temp.length;i++){
        for (var j=0;j<this.nameForSql.length;j++){
          if(temp[i]==this.nameForSql[j]){
            newtemp.push(this.nameForSql[j])
          }
        }
      }
      if((newtemp.includes('f_user_number')&&newtemp.length==2)||(!newtemp.includes('f_user_number')&&newtemp.length==1)){
        return
      }
      var temp=JSON.parse(JSON.stringify(this.model.rows))

      for (var i=0;i<newtemp.length-1;i++){
        if(newtemp[i]=='f_user_number'){
          return;
        }

        var ss=''
        for (var j=0;j<temp.length;j++){

          if(j>0&&i>0){
            var flag=false
            for(var t=i-1;t>-1;t--){
              if(temp[j-1][newtemp[t]]!=temp[j][newtemp[t]]&&temp[j][newtemp[t]].indexOf('*&')==-1){
                flag=true
                break
              }
            }
            if(flag){
              ss=temp[j][newtemp[i]]
              continue
            }

          }

          //  if(j>0&&(temp[j-1][newtemp[i-1]]!=temp[j][newtemp[i-1]]&&temp[j][newtemp[i-1]].indexOf('*&')==-1)){
          //    ss=temp[j][newtemp[i]]
          //    continue;
          //  }
          // if(j>0&&i>1&&(temp[j-1][newtemp[i-1]]==temp[j][newtemp[i-1]]&&temp[j][newtemp[i-1]].indexOf('*&')==-1)&&(temp[j-1][newtemp[i-1]]==temp[j][newtemp[i-1]]&&temp[j][newtemp[i-1]].indexOf('*&')==-1)){
          //   ss=temp[j][newtemp[i]]
          //   continue;
          // }
          if(temp[j][newtemp[i]]==ss){
            temp[j][newtemp[i]]=temp[j][newtemp[i]]+'*&'
          }else {
            ss=temp[j][newtemp[i]]
          }

        }
      }
      this.model.rows=JSON.parse(JSON.stringify(temp))
    }
  }
}
</script>

<style scoped>

.td-0{
  border: 1px solid #000000;
}

.td-1{
  border: none;
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
}

.td-2{
  border: none;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
}
.td-4{
  border: none;
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
}
.td-3{
  border: none;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
}
</style>
