<template>
    <div id='app' class="flex datapanel" v-show="!echarts">
        <criteria-paged :model="model" :pager='true' v-ref:paged>
            <criteria partial='criteria' @condition-changed='$parent.search' v-ref:cri>
                <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
                    <div class="row" width="100%">
                        <div>
                            <div class="col-sm-2 form-group form-input-group">
                                <label class="control-label">1组织机构</label>
                                <right-tree :userid.sync='$parent.$parent.obj.userid'
                                            :source.sync='$parent.$parent.obj.source'
                                            :multiple="true"
                                            @re-res="$parent.$parent.getRes"></right-tree>
                            </div>
                            <div v-if="$parent.$parent.searchshow">
                                <div class="col-sm-2 form-group form-input-group">
                                    <label class="control-label">表&nbsp;钢&nbsp;号&nbsp;</label>
                                    <input type="text" class="form-control" v-model="model.f_meternumber"
                                           placeholder='表钢号'
                                           condition="uf.f_meternumber like '%{}%'" v-next-el='meternumber'
                                           v-el:meternumber
                                    >
                                </div>
                                <div class="col-sm-2 form-group form-input-group">
                                    <label class="control-label">&nbsp;用&nbsp;户&nbsp;号</label>
                                    <input type="text" class="form-control" v-model="model.f_userinfo_code"
                                           placeholder='用户号'
                                           condition="u.f_userinfo_code like '%{}%'" v-next-el='f_userinfo_code'
                                           v-el:meternumber
                                    >
                                </div>
                                <div class="col-sm-2 form-group form-input-group">
                                    <label class="control-label">用户姓名</label>
                                    <input type="text" class="form-control" v-model="model.f_username"
                                           placeholder='用户姓名'
                                           condition="u.f_user_name like '%{}%'" v-next-el='userid' v-el:username>
                                </div>
                                <div class="col-sm-2 form-group form-input-group">
                                    <label class="control-label">用户类型</label>
                                    <v-select id="f_user_type"
                                              v-model="model.f_user_type"
                                              placeholder='用户类型'
                                              value-single="true"
                                              :value.sync="model.f_user_type"
                                              :options='$parent.$parent.usertypes'
                                              condition="uf.f_user_type = '{}'"
                                              close-on-select>
                                    </v-select>
                                </div>
                                <div class="col-sm-2 form-group form-input-group">
                                    <label class="control-label">用气性质</label>
                                    <v-select id="f_gasproperties"
                                              v-model="model.f_gasproperties"
                                              placeholder='用气性质'
                                              value-single="true"
                                              :value.sync="model.f_gasproperties"
                                              :options='$parent.$parent.gasproperties'
                                              condition="uf.f_gasproperties = '{}'"
                                              close-on-select>
                                    </v-select>
                                </div>

                              <div class="col-sm-2 form-group form-input-group">
                                <label class="control-label">气表品牌</label>
                                <v-select
                                  placeholder='气表品牌'
                                  :value.sync="model.f_meter_brand1"
                                  v-model="model.f_meter_brand1"
                                  :options='$parent.$parent.WarningType'
                                  @change="$parent.$parent.getMeterType"
                                  close-on-select
                                  condition="gb.f_meter_brand='{}'">
                                </v-select>
                              </div>
<!--                              <div class="col-sm-2 form-group form-input-group">-->
<!--                                <label class="control-label">气表型号</label>-->
<!--                                <v-select v-if="$parent.$parent.styles"-->
<!--                                          placeholder='气表型号'-->
<!--                                          :value.sync="model.f_meter_style"-->
<!--                                          v-model="model.f_meter_style"-->
<!--                                          :options='$parent.$parent.Warningstyle'-->
<!--                                          close-on-select-->
<!--                                          condition="gm.f_meter_style='{}'">-->
<!--                                </v-select>-->
<!--                                <v-select v-if="!$parent.$parent.styles"-->
<!--                                          placeholder='气表型号'-->
<!--                                          :value.sync="model.f_meter_style"-->
<!--                                          v-model="model.f_meter_style"-->
<!--                                          :options='$parent.$parent.Warningstyles'-->
<!--                                          close-on-select-->
<!--                                          condition="gm.f_meter_style='{}'">-->
<!--                                </v-select>-->
<!--                              </div>-->
                                <div class="col-sm-2 form-group form-input-group">
                                    <label class="control-label" style="word-break:keep-all;">上报时间</label>
                                    <datepicker placeholder="起始时间"
                                                :value.sync="model.startDate"
                                                v-model="model.startDate"
                                                :format="'yyyy-MM-dd HH:mm:ss'"
                                    ></datepicker>
                                </div>
                                <div class="col-sm-2 form-group form-input-group">
                                    <label class="control-label" style="word-break:keep-all;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;</label>
                                    <datepicker placeholder="结束时间"
                                                :value.sync="model.endDate"
                                                v-model="model.endDate"
                                                :format="'yyyy-MM-dd HH:mm:ss'"
                                    ></datepicker>
                                </div>
                              <div class="col-sm-2 form-group form-input-group">
                                <label class="control-label">用户地址</label>
                                <input type="text" class="form-control" v-model="model.f_address" placeholder='地址'
                                       condition="a.f_address like '%{}%'" v-el:xq v-next-el='address' v-el:area
                                >
                              </div>
                            </div>
                            <div class="col-sm-2 form-group">
                                <label class="control-label"></label>
                                <button class="btn btn-success" @click="search()">查询</button>
                                <label class="control-label"></label>
                                <button class="btn btn-default" @click="$parent.$parent.clearmsg">清空</button>
                                <label class="control-label" v-if="!$parent.$parent.excelTable">超过十万条限制导出</label>
                                <export-excel v-if="$parent.$parent.excelTable"
                                        :data="{condition: $parent.$parent.condition,startDate: model.startDate, endDate: model.endDate}"
                                        :field="$parent.$parent.getfield"
                                        sqlurl="rs/logic/webmeter_exportfile" sql-name="webmeter_getNewHandChanceList"
                                        template-name='usegasALL'
                                        :choose-col="true"></export-excel>
                            </div>
<!--                            <div class="col-sm-3 form-group">-->
<!--                                <label class="control-label"></label>-->
<!--                                <button class="btn btn-success" @click="$parent.$parent.showEcharts()">显示图表</button>-->
<!--                            </div>-->
                            <div v-show="!$parent.$parent.searchshow" @click="$parent.$parent.seachchange"
                                 style="position: relative;float: right;margin-right: 1%;">
                                <img src="../../../static/webMeter/shousuo.png"><span>展开</span>
                            </div>
                            <div v-show="$parent.$parent.searchshow" @click="$parent.$parent.seachchange"
                                 style="position: relative;float: right;margin-right: 1%;">
                                <img src="../../../static/webMeter/shangsheng.png"><span>收缩</span>
                            </div>
                        </div>
                    </div>
                </div>
            </criteria>
            <data-grid id="reportgas" :model="model" partial='list' v-ref:grid>
                <template partial='head'>
                    <tr>
                        <th style="text-align:center">序号</th>
                        <th style="text-align:center">
                            <nobr>上报日期</nobr>
                        </th>
                        <th style="text-align:center" title="安装户数=正常户数+停用户数+未注册户数">
                            <nobr>安装户数</nobr>
                        </th>

                        <th style="text-align:center" title="停用户数:表具状态为停用的用户数">
                            <nobr>停用户数</nobr>
                        </th>
                        <th style="text-align:center" title="在用户数:表具状态为正常的用户数">
                            <nobr>在用户数</nobr>
                        </th>

                        <th style="text-align:center" title="用户使用率=在用户数/正常户数">
                            <nobr>用户使用率</nobr>
                        </th>
                        <th style="text-align:center">
                            <nobr>抄表成功户数</nobr>
                        </th>
                        <th style="text-align:center">
                            <nobr>总用气量</nobr>
                        </th>
                        <th style="text-align:center" title="日均户均用气量=总用气量/抄表成功户数">
                            <nobr>日均户均用气量(成功)</nobr>
                        </th>
                        <th style="text-align:center" title="日均户均用气量=总用气量/在用户数">
                            <nobr>日均户均用气量(在用)</nobr>
                        </th>
                        <th style="text-align:center" title="抄表成功率=抄表成功户数/在用户数">
                            <nobr>抄表成功率</nobr>
                        </th>
                      <th style="text-align:center" title="抄表失败户数=在用户数-抄表成功户数">
                        <nobr>抄表失败户数</nobr>
                      </th>
                    </tr>
                </template>
                <template partial='body' v-ref:grid>
                    <tr>
                        <td style="text-align:center">{{$index + 1}}</td>
                        <td style="text-align:center;width: 170px;">
                            <nobr>{{row.f_insert_date}}</nobr>
                        </td>
                        <td style="text-align:center">{{row.anzhuang}}</td>

                        <th style="text-align:center">{{row.c0}}</th>
                        <td style="text-align:center">
                            <nobr>{{row.c}}</nobr>
                        </td>

                        <td style="text-align:center">
                            <nobr>{{row.user_bv}}%</nobr>
                        </td>
                        <td style="text-align:center">{{row.c1}}</td>
                        <td style="text-align:center">{{row.f_gas_all}}</td>
                        <td style="text-align:center">{{row.f_gas}}</td>
                        <td style="text-align:center">{{row.f_gas1}}</td>
                        <td style="text-align:center">{{row.f_bv1}}%</td>
                        <td style="text-align:center">{{row.c-row.c1}}</td>
                    </tr>
                </template>
                <template partial='foot'></template>
            </data-grid>
        </criteria-paged>
    </div>
    <div style="height: 6%;width: 100%;" v-show="echarts">
        <button class="btn btn-success" @click="showEcharts()">隐藏图表</button>
    </div>
    <!--图显示模板-->
    <div class="span " v-show="echarts" style="width: 100%;height: 90%;">
        <cr-user-gas-echarts-list :condition="condition" :startdate="startDate"
                               :enddate="endDate" :echarts="echarts"></cr-user-gas-echarts-list>
    </div>
</template>
<script>
    import {PagedList} from 'vue-client'
    import UserGasEcharts from './UserGasEchartsList'
    import * as Util from '../../Util'
    import getLodop from '../../plugins/LodopFuncs'
    import {HttpResetClass} from 'vue-client'

    let readyGen = async function (self) {
        self.getfield = self.config.excelHeaders
    }

    export default {
        title: '抄表分析',
        props: ['data'],
        components: {UserGasEcharts},
        data() {
            return {
                model: new PagedList('rs/sql/webmeter_getNewHandChanceList', 50, {
                    startDate: 'this.model.startDate',
                    endDate: 'this.model.endDate'
                }),
                condition: '1=1',
                filialeCodeStr: '',
                startDate: '',
                endDate: '',
              WarningType: [
                {label: '全部', value: ''}
              ],
              Warningstyle: [
                {label: '全部', value: ''}
              ],
              Warningstyles: [
                {label: '全部', value: ''}
              ],
                styles: false,
                meterbrands: [],
                excelTable:true,
                getfieGroup: {
                    'f_insert_date': '上报日期',
                    'anzhuang': '安装户数',
                    'c0': '停用户数',
                    'c': '在用户数',
                    'user_bv': '用户使用率',
                    'c1': '抄表成功户数',
                    'f_gas_all': '总用气量',
                    'f_gas': '日均户均用气量(成功)',
                    'f_gas1': '日均户均用气量(在用)',
                    'f_bv1': '抄表成功率'
                },
                getfield: {},
                config: {
                    excelHeaders: {
                        'f_insert_date': '上报日期',
                        'anzhuang': '安装户数',
                        'c0': '停用户数',
                        'c': '在用户数',
                        'user_bv': '用户使用率',
                        'c1': '抄表成功户数',
                        'f_gas_all': '总用气量',
                        'f_gas': '日均户均用气量(成功)',
                        'f_gas1': '日均户均用气量(在用)',
                        'f_bv1': '抄表成功率'
                    }
                },
                echarts: false,
                searchshow: false,
                obj: {
                    userid: this.$login.f.id,
                    source: `tool.getFullTree(this.getRights().where(row.getType() == $organization$))`,
                    res: this.$login.f.f_fengongsi,
                    resids: this.$login.f.f_orgids
                }
            }
        },
        ready() {
            this.$refs.paged.$refs.cri.model.startDate = Util.toStandardDateString() + ' 00:00:00'
            this.$refs.paged.$refs.cri.model.endDate = Util.toStandardDateString() + ' 23:59:59'
            //初始化气表品牌下拉框
            this.getMeterTypeAndBrand('f_meter_brand', '1=1')
            this.getdata()
            readyGen(this)
        },
        watch:{
            'model.state'(val) {
                if (val === '正确') {
                    if (this.model.count <= 100000) {
                        this.excelTable = true
                    } else {
                        this.excelTable = false
                    }
                }
            }
        },
        methods: {
          getMeterType() {
            this.Warningstyle = [{label: '全部', value: ''}]
            this.styles = false
            let f_meter_brand = this.$refs.paged.$refs.cri.model.f_meter_brand1
            this.getMeterTypeAndBrand('f_meter_style', `f_meter_brand='${f_meter_brand}'`)
          },
          getMeterTypeAndBrand(groupname, condition) {
            condition = `${condition} and ui.f_filialeids like '${this.obj.resids}%'`
            let self = this
            let load = new HttpResetClass()
            load.load('POST', 'rs/sql/getMeterStyleAndBrand', {
              data: {
                condition: condition,
                groupname: groupname
              }
            }, {warnMsg: null, resolveMsg: null}).then((res) => {
              let dr = {label: '', value: ''}
              let i = 0
              for (i = 0; i < res.data.length; i++) {
                dr = {label: '', value: ''}
                if (groupname == 'f_meter_brand') {
                  dr.label = res.data[i].f_meter_brand
                  dr.value = res.data[i].f_meter_brand
                  //气表品牌
                  self.WarningType[i + 1] = dr
                } else if (groupname == 'f_meter_style') {
                  dr.label = res.data[i].f_meter_style
                  dr.value = res.data[i].f_meter_style
                  //气表类型
                  self.Warningstyle[i + 1] = dr
                }
              }
              if (self.Warningstyle.length > 1) {
                self.showMeterStyle()
              }
            })

          },
          showMeterStyle() {
            this.styles = true
          },
            // 查询开关
            seachchange() {
                this.searchshow = !this.searchshow
            },
            getdata() {
                this.startDate = this.$refs.paged.$refs.cri.model.startDate
                this.endDate = this.$refs.paged.$refs.cri.model.endDate
                this.$refs.paged.$refs.cri.search()
                this.condition = this.$refs.paged.$refs.cri.condition
            },
            // 显示柱状图
            showEcharts() {
                this.echarts = !this.echarts
                console.log(this.echarts)
            },
            close() {
                this.show = false
            },
            SaveAsFile(str) {
                this.$showMessage('您是否需要导出本页数据？', ['confirm', 'cancel']).then((res) => {
                    if (res === 'confirm') {
                        let style = '<style>' +
                            'td {border-width: 1px;padding: 2px;border-style: solid; border-color:black; border-collapse:collapse;} .tdright{text-align: right;}  .tdcenter{text-align: center;}</style>';
                        let strHtml = style + document.getElementById(str).innerHTML;
                        console.log(strHtml);
                        let LODOP = getLodop();
                        LODOP.PRINT_INIT('');
                        LODOP.ADD_PRINT_TABLE(5, 5, '99%', '100%', strHtml);
                        LODOP.SAVE_TO_FILE('抄表统计.xls')
                    }
                })
            },
            clearmsg() {
                this.$refs.paged.$refs.cri.model = {}
            },
            search(args) {
                let start = this.$refs.paged.$refs.cri.model.startDate
                let end = this.$refs.paged.$refs.cri.model.endDate
                if (start == null || start == '' || end == null || end == '') {
                    return this.$showMessage("上报时间的开始和结束时间不能为空！")
                }
                this.startDate = start
                this.endDate = end
                const filialeCondition = this.filialeCodeStr || this.getDefaultOrgCondition()
                if (filialeCondition) {
                  args.condition = `${args.condition} and ${filialeCondition}`
                }
                this.condition = args.condition
                this.model.search(args.condition, args.model)
            },
            getRes(obj) {
                this.obj.res = obj.res
                this.obj.resids = obj.resids
                const ids = (obj.resids || '').split(',').map(item => item.trim()).filter(item => item)
                if (ids.length <= 1) {
                  this.filialeCodeStr = ids[0] ? `uf.f_filialeids like '${ids[0]}%'` : ''
                } else {
                  const parts = ids.map(code => `uf.f_filialeids like '${code}%'`)
                  this.filialeCodeStr = `(${parts.join(' or ')})`
                }
            },
            getDefaultOrgCondition () {
              const defaultOrg = this.$login.f.f_orgids || ''
              return defaultOrg ? `uf.f_filialeids like '${defaultOrg}%'` : ''
            },
            uniq(array) {
                array.sort();
                let arraytype = [{label: '全部', value: ''}]
                let dr = {label: '', value: ''}
                if (array[0] == 'n') {
                    dr = {label: '空值', value: 'is null'}
                } else {
                    dr = {label: array[0], value: "='" + array[0] + "'"}
                }
                arraytype.push(dr)
                let temp = [array[0]];
                console.log(array[0] + "array[0]")
                for (var i = 1; i < array.length; i++) {
                    if (array[i] !== temp[temp.length - 1]) {
                        if (array[i] == 'n') {
                            dr = {label: '空值', value: 'is null'}
                        } else {
                            dr = {label: array[i], value: "='" + array[i] + "'"}
                        }
                        arraytype.push(dr);
                        temp.push(array[i]);
                    }
                }
                /*console.log(arraytype[1].label + "label")
                console.log(arraytype[1].value + "value")*/
                return arraytype;
            }
        },
        computed: {
            f_outlets() {
                return [{label: '全部', value: ''}, ...this.$appdata.getParam('网点查询用')]
            },
          metertype () {
            return [{label: '全部', value: ''}, ...this.$appdata.getParam('气表类型')]
          },
          gasproperties () {
            return [{label: '全部', value: ''}, ...this.$appdata.getParam('用气性质')]
          },
            usertypes () {
              return [{label: '全部', value: ''}, ...this.$appdata.getParam('用户类型')]
            }
        }
    }
</script>
<style>
    .mystyle {
        margin-left: 80px;
    }

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