<template lang="html">
  <div class="span " id="table1">
    <p class="bg-info text-center " style="padding: 8px;">{{loseDaysTypeName}}失联分析汇总</p>
    <div class="mystyle2 ">
      <label class="control-label">汇总项</label>
      <input type="checkbox" id="u.f_user_type" value="u.f_user_type" v-model="nameForSql"/>
      <label for="u.f_user_type">用户类型</label>
      <input type="checkbox" id="u.f_gasproperties" value="u.f_gasproperties" v-model="nameForSql"/>
      <label for="u.f_gasproperties">用气性质</label>
      <input type="checkbox" id="u.f_filiale" value="u.f_filiale" v-model="nameForSql"/>
      <label for="u.f_filiale">组织机构</label>
      <button class="btn btn-success" @click="searchData">查询</button>
      <span style="float: right">
        <export-excel
          :data="{condition: condition,groupname:groupNameForSql,
          days:losedaystype,startDate:startdate,endDate:enddate,orderName:orderName}"
          :field="getfield"
          sqlurl="rs/logic/webmeter_exportfile" sql-name="webmeter_getNewLoseGroup"
          template-name='LostContactEform'
          :choose-col="true"></export-excel>
      </span>
    </div>
    <table class="table table-bordered padding-top: 10px;">
      <thead class="text-left">
      <tr>
        <th v-if="nameForSql.includes('u.f_user_type')" style="text-align:center">用户类型</th>
        <th v-if="nameForSql.includes('u.f_gasproperties')" style="text-align:center">用气性质</th>
        <th v-if="nameForSql.includes('u.f_filiale')" style="text-align:center">组织机构</th>
        <th style="text-align:center">
          <nobr>5天之内</nobr>
        </th>
        <th style="text-align:center">
          <nobr>5天到7天</nobr>
        </th>
        <th style="text-align:center">
          <nobr>7天到15天</nobr>
        </th>
        <th style="text-align:center">
          <nobr>15天到30天</nobr>
        </th>
        <th style="text-align:center">
          <nobr>30天到60天</nobr>
        </th>
        <th style="text-align:center">
          <nobr>60天以上</nobr>
        </th>
        <th style="text-align:center">
          <nobr>未上报</nobr>
        </th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="item in model2">

        <td style="text-align:center" v-if="nameForSql.includes('u.f_user_type')">{{item.f_user_type}}</td>
        <td style="text-align:center" v-if="nameForSql.includes('u.f_gasproperties')">{{item.f_gasproperties}}</td>
        <td style="text-align:center" v-if="nameForSql.includes('u.f_filiale')">{{item.f_filiale}}</td>
        <td style="text-align:center">{{item._five}}</td>
        <td style="text-align:center">{{item.five_seven}}</td>
        <td style="text-align:center">{{item.seven_fifteen}}</td>
        <td style="text-align:center">{{item.fifteen_thirty}}</td>
        <td style="text-align:center">{{item.thirty_sixty}}</td>
        <td style="text-align:center">{{item.sixty_}}</td>
        <th style="text-align:center">
          <nobr>{{item._one}}</nobr>
        </th>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  import {PagedList} from 'vue-client'
  import * as Util from '../../Util'
  import {all, HttpResetClass} from 'vue-client'

  export default {
    props: {
      condition: '1=1',
      startdate: {
        type: String,
        default: Util.toStandardDateString()
      },
      enddate: {
        type: String,
        default: Util.toStandardDateString()
      },
      losedaystype: {
        type: String,
        default: 'max_days'
      },
      // condition: {
      //   type: String,
      //   default: '1=1'
      // },
      // groupNameByDate: {
      //   type: [],
      //   default:['year']
      // }
    },
    data() {
      return {
        enddate: '',
        startdate: '',
        model2: null,
        conditionForSql: '1=1',
        nameForSql: [],
        orderName:'',
        groupNameForSql: '',
        getfield:{},
        loseDaysTypeName: '最长'
      }
    },
    ready() {
    },
    methods: {
      async searchData() {
        if (this.groupNameForSql) {
          this.orderName=this.groupNameForSql.replace(/u.f/g,'f')
          this.getfield = {
            '_five': '5天之内',
            'five_seven': '5天到7天',
            'seven_fifteen': '7天到15天',
            'fifteen_thirty': '15天到30天',
            'thirty_sixty': '30天到60天',
            'sixty_': '60天以上',
            '_one': '未上报'
          }
          this.getfields()
          let load = new HttpResetClass()
          let res = await load.load('POST', 'rs/sql/webmeter_getNewLoseGroup',
            {
              data: {
                condition: this.condition,
                groupname: this.groupNameForSql,
                days:this.losedaystype,
                startDate: this.startdate,
                orderName:this.orderName,
                endDate: this.enddate
              }
            },
            {resolveMsg: null, rejectMsg: null})
          console.log('res返回', res)
          this.model2 = res.data
          console.log('res返回123', this.model2)
        } else {
          window.alert("请选择汇总项")
        }
      },
      getfields() {
        if (this.groupNameForSql.search("f_user_type") != -1) {
          this.getfield['f_user_type'] = '用户类型'
        }
        if (this.groupNameForSql.search("f_gasproperties") != -1) {
          this.getfield['f_gasproperties'] = '用气性质'
        }
        if (this.groupNameForSql.search("f_gasproperties2") != -1) {
          this.getfield['f_gasproperties2'] = '用气属性'
        }
        if (this.groupNameForSql.search("f_filiale") != -1) {
          this.getfield['f_filiale'] = '组织机构'
        }
      },
      //拼接groupName1
      getGroupName1() {
        console.log("this.nameForSql.length：" + this.nameForSql.length)
        let str = ''
        let i = 0
        for (; i < this.nameForSql.length - 1; i++) {
          str += this.nameForSql[i] + ','
        }
        str += this.nameForSql[i]
        this.groupNameForSql = str.trim()
      },


    },
    watch: {
      'nameForSql'() {
        // this.nameForSql =this.groupNameByDate;
        this.getGroupName1()
      },
      'startdate'(val) {
        this.startdate = val
      },
      'enddate'(val) {
        this.enddate = val
      },
      'condition'(val) {
        this.conditionForSql = val
      },
      'losedaystype'(val) {
        this.losedaystype=val
        console.log(this.losedaystype+"losedaystype")
        if (val == 'max_days') {
          this.loseDaysTypeName = '最长'
        } else if (val == 'all_days') {
          this.loseDaysTypeName = '合计'
        } else {
          this.loseDaysTypeName = '最新'
        }
      }
    }
  }
</script>

<style scoped>
  .mystyle2 {
    width: 100%;
    height: 35px;
    /*background: #00A3F0;*/
    padding-left: 15px;
    float: left;
  }

  .datapanel {
    color: #333;
    background-color: white;
    box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px;
    padding: 10px 30px 10px 30px;
    border-radius: 15px;
  }

</style>
