<template>
    <div class="flex-row" v-if="!showdetail">
        <div id='app1' class="basic-main" v-show="(!echarts)&&(!isActiveTotalForm)">
            <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">
                            <div class="col-sm-2 form-group">
                                <label style="width:35%" class="font_normal_body">客户编号</label>
                                <input style="width:60%" type="text" class="input_search"
                                       v-model="model.f_userinfo_code"
                                       placeholder='客户编号'
                                       @keyup.enter="search"
                                       condition="f_userinfo_code like '%{}%'"
                                       v-el:xq v-next-el='f_userinfo_code'
                                       v-el:username>
                            </div>
                            <div class="col-sm-2 form-group">
                                <label style="width:35%" class="font_normal_body">客户名称</label>
                                <input style="width:60%" type="text" class="input_search"
                                       v-model="model.username"
                                       @keyup.enter="search"
                                       placeholder='客户名称'
                                       condition="username like '%{}%'"
                                       v-el:xq v-next-el='username'
                                       v-el:username>
                            </div>
                            <div class="col-sm-2 form-group">
                                <label style="width:35%" class="font_normal_body">客户地址</label>
                                <input style="width:60%" type="text" class="input_search"
                                       v-model="model.address" placeholder='地址'
                                       condition="address like '%{}%'"
                                       @keyup.enter="search"
                                       v-el:xq v-next-el='address' v-el:area
                                >
                            </div>
                            <div class="col-sm-2 form-group">
                                <label style="width:35%" class="font_normal_body">&nbsp;&nbsp;&nbsp;表号&nbsp;&nbsp;&nbsp;</label>
                                <input style="width:60%" type="text" class="input_search"
                                       v-model="model.f_meternumber" placeholder='表号'
                                       @keyup.enter="search"
                                       condition="f_meternumber like '%{}%'"
                                       v-next-el='meternumber' v-el:meternumber>
                            </div>
                            <div style="float:right">
                                <button class="button_search button_spacing" @click="search()">查询</button>
                                <button class="button_clear button_spacing" @click="$parent.$parent.clearmsg">清空</button>
                                <export-excel :data="$parent.$parent.getCondition" class="button_export button_spacing"
                                              :field="$parent.$parent.getfield"
                                              sqlurl="rs/logic/exportfile" sql-name="DrillErrorByUserinfo" template-name='异常分析'
                                              :choose-col="true"></export-excel>
                                <!--<button class="button_export button_spacing" style="width: max-content" @click="$parent.$parent.showTotalForm()">显示汇总</button>-->
                                <!--                <button class="button_search button_spacing" @click="$parent.$parent.showEcharts()">显示图表</button>-->
                                <div style="float: right"  class="button_spacing" :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"    @click="$parent.$parent.hidden()"></div>
                            </div>
                        </div>
                        <div class="row" v-show="$parent.$parent.criteriaShow">
                            <div class="col-sm-2 form-group">
                                <label style="width:35%" class="font_normal_body">&nbsp;&nbsp;&nbsp;公司&nbsp;&nbsp;&nbsp;</label>
                                <right-tree @re-res="$parent.$parent.getorg"
                                            :initresid='$parent.$parent.org'></right-tree>
                            </div>
                            <div class="col-sm-2 form-group">
                                <label style="width:35%" class="font_normal_body">余额&nbsp;&nbsp;大于</label>
                                <input style="width:60%" type="number" class="input_search"
                                       v-model="model.f_balance_amount_sta" placeholder='账户余额'
                                       condition="f_balance_amount>{}"
                                       @keyup.enter="search"
                                       v-el:xq v-next-el='f_day' v-el:area
                                >
                            </div>
                            <div class="col-sm-2 form-group">
                                <label style="width:35%" class="font_normal_body">小于</label>
                                <input style="width:60%" type="number" class="input_search"
                                       v-model="model.f_balance_amount_end" placeholder='账户余额'
                                       condition="f_balance_amount < {}"
                                       @keyup.enter="search"
                                       v-el:xq v-next-el='f_day' v-el:area
                                >
                            </div>
                            <div class="col-sm-2 form-group">
                                <label style="width:35%" class="font_normal_body">气表品牌</label>
                                <v-select :value.sync="model.f_balance_amount"
                                          v-model="model.f_meter_brand"
                                          :options='$parent.$parent.meterbrands' placeholder='请选择'
                                          condition="f_meter_brand = '{}'"
                                          close-on-select></v-select>
                            </div>
                            <div class="col-sm-2 form-group">
                                <label style="width:35%" class="font_normal_body">上报区间</label>
                                <datepicker style="width:60%" id="startdate" placeholder="开始时间"
                                            v-model="model.startDate"
                                            :value.sync="model.startDate"
                                            :disabled-days-of-Week="[]"
                                            :format="'yyyy-MM-dd HH:mm:ss'"
                                            condition="f_insert_date >= to_date('{}','yyyy-mm-dd hh24:mi:ss')"
                                            :show-reset-button="reset">
                                </datepicker>
                            </div>
                            <div class="col-sm-2 form-group">
                                <label style="width:35%" class="font_normal_body" style="word-break:keep-all;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;</label>
                                <datepicker style="width:60%" id="enddate" placeholder="结束日期"
                                            v-model="model.endDate"
                                            :value.sync="model.endDate"
                                            :format="'yyyy-MM-dd HH:mm:ss'"
                                            :disabled-days-of-Week="[]"
                                            condition="f_insert_date <= to_date('{}','yyyy-mm-dd hh24:mi:ss')"
                                            :show-reset-button="reset">
                                </datepicker>
                            </div>
                            <div class="col-sm-2 form-group">
                                <label style="width:35%" class="font_normal_body">未抄表天数&nbsp;></label>
                                <input style="width:60%" type="number" class="input_search"
                                       v-model="model.f_day" placeholder='未抄表天数'
                                       condition="ROUND(TO_NUMBER(sysdate - f_hand_date))>{}"
                                       @keyup.enter="search"
                                       v-el:xq v-next-el='f_day' v-el:area
                                >
                            </div>
                            <div class="col-sm-2 form-group">
                                <label style="width:35%" class="font_normal_body">电池电量&nbsp;&nbsp;大于</label>
                                <input style="width:60%" type="number" class="input_search"
                                       v-model="model.f_batterylevel_sta" placeholder='电池电量'
                                       condition="f_batterylevel>{}"
                                       @keyup.enter="search"
                                       v-el:xq v-next-el='f_day' v-el:area
                                >
                            </div>
                            <div class="col-sm-2 form-group">
                                <label style="width:35%" class="font_normal_body">小于</label>
                                <input style="width:60%" type="number" class="input_search"
                                       v-model="model.f_batterylevel_end" placeholder='电池电量'
                                       condition="f_batterylevel < {}"
                                       @keyup.enter="search"
                                       v-el:xq v-next-el='f_day' v-el:area
                                >
                            </div>


                        </div>
                    </div>
                </criteria>
                <data-grid id="lostuserlist" :model="model" class="list_area table_sy" partial='list' v-ref:grid>
                    <template partial='head'>
                        <tr>
                            <th style="text-align:center">
                                <nobr>序号</nobr>
                            </th>
                            <th style="text-align:center">
                                <nobr>客户编号</nobr>
                            </th>
                            <th style="text-align:center">
                                <nobr>客户名称</nobr>
                            </th>
                            <th style="text-align:center">
                                <nobr>小区</nobr>
                            </th>
                            <th style="text-align:center">
                                <nobr>客户地址</nobr>
                            </th>
                            <th style="text-align:center">
                                <nobr>账户余额</nobr>
                            </th>
                            <th style="text-align:center">
                                <nobr>联系电话</nobr>
                            </th>
                            <th style="text-align:center">
                                <nobr>表号</nobr>
                            </th>
                            <th style="text-align:center">
                                <nobr>气表品牌</nobr>
                            </th>
                            <th style="text-align:center">
                                <nobr>抄表日期</nobr>
                            </th>
                            <th style="text-align:center">
                                <nobr>最后一次通讯时间</nobr>
                            </th>
                            <th style="text-align:center">
                                <nobr>电池电量</nobr>
                            </th>
                            <th style="text-align:center">
                                <nobr>信号强度</nobr>
                            </th>
                            <th style="text-align:center">
                                <nobr>磁干扰异常</nobr>
                            </th>
                            <th style="text-align:center">
                                <nobr>阀门状态</nobr>
                            </th>
                            <th style="text-align:center">
                                <nobr>分公司</nobr>
                            </th>

                        </tr>

                    </template>
                    <template partial='body'>
                        <td style="text-align:center">
                            <nobr>{{$index+1}}</nobr>
                        </td>
                        <td style="text-align: center;"><nobr>
                            <span @click="$parent.$parent.$parent.showmsg(row)"><a>{{row.f_userinfo_code}}</a></span>
                        </nobr> </td>
                        <td style="text-align:center"><nobr>{{row.username}}</nobr></td>
                        <td style="text-align:center"><nobr>{{row.f_residential_area}}</nobr></td>
                        <td>
                            <nobr>{{row.address}}</nobr>
                        </td>
                        <td style="text-align:center">{{row.f_balance_amount}}</td>
                        <td style="text-align:center">{{row.f_user_phone}}</td>
                        <td style="text-align:center"><nobr>{{row.f_meternumber}}</nobr></td>
                        <td style="text-align:center">
                            <nobr>{{row.f_meter_brand}}</nobr>
                        </td>
                        <td style="text-align:center">
                            <nobr>{{row.f_hand_date}}</nobr>
                        </td>
                        <td style="text-align:center">
                            <nobr>{{row.f_insert_date}}</nobr>
                        </td>
                        <td style="text-align:center">
                            <nobr>{{row.f_batterylevel}}</nobr>
                        </td>
                        <td style="text-align:center">
                            <nobr>{{row.f_signal}}</nobr>
                        </td>
                        <td style="text-align:center">
                            <nobr>{{row.f_magneticInterference}}</nobr>
                        </td>
                        <td style="text-align:center">
                            <nobr>{{row.f_valveState}}</nobr>
                        </td>
                        <td style="text-align:center">
                            <nobr>{{row.f_orgname}}</nobr>
                        </td>
                    </template>
                </data-grid>
            </criteria-paged>
        </div>
        <!--<div style="height: 40px;width: 100%;" v-show="echarts">
          <div style="display: inline-block;width: 20%;">
            <button class="button_search button_spacing" v-show="echarts" @click="notShowEcharts()">隐藏图表</button>
            <button class="button_search button_spacing" v-show="isActiveTotalForm" @click="notShowTotalForm()">隐藏汇总</button>
          </div>
          &lt;!&ndash;图显示模板&ndash;&gt;
          <div class="mystyle" style="display: inline-block;" >
            <label class="font_normal_body">图表统计项</label>
            <v-select style="width:60%"  id="groupname" v-model="groupname"
                      placeholder='分组项'
                      value-single="true"
                      :value.sync="groupname"
                      :options='getgroupname'
                      close-on-select></v-select>
          </div>
        </div>
        <div v-show="echarts" style="width: 100%;height: 90%;">
          <new-exception-echarts :condition="condition" :startdate="startDate" :groupname="groupname[0]"
                                 :enddate="endDate" :echarts="echarts"></new-exception-echarts>
        </div>
        <div v-show="isActiveTotalForm" style="width: 100%;height: 90%;">
          <new-exception-eform-total :condition="condition" :startdate="startDate"
                               :enddate="endDate"></new-exception-eform-total>
        </div>-->
    </div>
    <div  class="basic-main" v-if="showdetail">
        <user-info-detail-manage :f_userinfo_id="rowdata.f_userinfo_id" @cancel-main="cancel"></user-info-detail-manage>
    </div>
</template>

<script>
    import {HttpResetClass, PagedList} from 'vue-client'
    import * as Util from '../../../../Util'
    import getLodop from '../../../../plugins/LodopFuncs'
    import plugin from 'system-clients/src/plugins/GetLoginInfoService'

    let readySomething = async function (self) {
        await self.$MagLoadParams.loadParam()
        self.initParams()
    }
    export default {
        title: '异常查看',
        props: ['data'],
        data() {
            return {
                model: new PagedList('rs/sql/getExceptionList', 20),
                reportStr: null,
                show: false,
                startDate: '',
                endDate: '',
                meterbrands: [],
                f_error_type:'',
                groupname: ['year'],
                getgroupname: [
                    {label: '年份', value: 'year'},
                    {label: '月份', value: 'month'},
                    {label: '周', value: 'week'},
                    {label: '日', value: 'day'}
                ],
                getfield:{
                    "f_userinfo_code":"客户编号", "f_user_name":"客户名称", "f_address":"客户地址","f_user_type":"客户类型","f_gasproperties":"用气性质",
                    "f_meternumber":"表号","f_meter_brand":"气表品牌","f_insert_date":"上报时间","f_error_level":"异常级别","f_error_type":"异常类型",
                    "f_error_msg":"异常描述","f_orgname":"组织机构"
                },
                outlets: [],
                operator: [],
                showdetail:false,
                rowdata:{},
                filename: '',
                criteriaShow: false,
                echarts: false,
                searchshow: false,
                isActiveTotalForm: false,
                GetErrorLevel:[],
                GetErrorType:[],
                condition: '1=1',
                org:[this.$login.f.orgid],
                orgCondtionStr: ` and f_orgid = ${this.$login.f.orgid}`
            }
        },
        ready() {
            readySomething(this)
            this.$refs.paged.$refs.cri.model.startDate = Util.toStandardDateString() + ' 00:00:00'
            this.$refs.paged.$refs.cri.model.endDate = Util.toStandardDateString() + ' 23:59:59'
            // console.log("type:"+this.$refs.paged.$refs.cri.model.f_error_type)
            this.getErrorInfo('f_error_level')
            // console.log("type:"+this.$refs.paged.$refs.cri.model.f_error_type)
            this.$refs.paged.$refs.cri.search()

        },
        methods: {
            showmsg(obj){
                this.rowdata=obj
                this.showdetail=true
            },
            cancel() {
                this.showdetail = false
            },
            getorg(obj) {
                if (obj.resids.length>0) {
                    this.orgCondtionStr = " and f_orgid in " + plugin.convertToIn(obj.resids)
                }else
                {
                    this.orgCondtionStr = " and f_orgid = " + this.$login.f.orgid
                }
            },
            initParams () {
                let arr = []
                this.$MagGetSaleParam.getGasbrand().forEach((item) => {
                    let temp = {}
                    if(item.value.f_meter_type==='物联网表'){
                        temp.label = item.label
                        temp.value = item.value.f_meter_brand
                        arr.push(temp )
                    }

                })
                this.meterbrands = [{label: '全部', value: ''}, ...arr]
            },
            hidden(){
                this.criteriaShow = !this.criteriaShow
            },
            clickshow() {
                this.searchshow = !this.searchshow
            },
            getErrorInfo(items){
                let self = this
                let f_error_level=''
                if (items!='f_error_level') {
                    if(this.$refs.paged.$refs.cri.model.f_error_level){
                        f_error_level=this.$refs.paged.$refs.cri.model.f_error_level[0]
                    }
                }
                let load = new HttpResetClass()
                load.load('POST', 'rs/sql/singleTableParam', {
                    data: {
                        items:items+' f_type',
                        tablename:'t_exception',
                        condition:items=='f_error_level'?'1=1 group by '+items:`f_error_level='${f_error_level}' group by `+items
                    }
                },{warnMsg:null,resolveMsg:null}).then((res) => {
                    let i = 0
                    let rows=res.data
                    let array1=[]
                    array1.push({label: '全部', value: ''})
                    console.log("rows========",rows)
                    for (i = 0; i < rows.length; i++) {
                        let dr = {label: '全部', value: ''}
                        dr.label=rows[i].f_type
                        dr.value=rows[i].f_type
                        array1.push(dr)
                        console.log("rows[i]========",rows[i],dr)
                    }
                    console.log("array1========",array1)
                    if (items=='f_error_level'){
                        self.GetErrorLevel=array1
                    }else {
                        self.GetErrorType=array1
                    }
                })

            },
            search(args) {
                this.startDate = this.$refs.paged.$refs.cri.model.startDate
                this.endDate = this.$refs.paged.$refs.cri.model.endDate
                this.f_error_type=this.$refs.paged.$refs.cri.model.f_error_type
                console.log('1231321312312321')
                /* if (this.endDate == '' || this.startDate == '') {
                   return this.$showMessage("时间区间的开始和结束时间不能为空！")
                 }*/
                this.condition = this.$refs.paged.$refs.cri.condition +  this.orgCondtionStr

                args.condition = this.condition
                this.model.search(args.condition, args.model)
            },
            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 = {}
            },
            close() {
                this.show = false
            },
            // 显示柱状图
            showEcharts() {
                this.echarts = true
                this.isActiveTotalForm = false
            },
            notShowTotalForm() {
                this.echarts = false
                this.isActiveTotalForm = false
            },
            // 不显示柱状图
            notShowEcharts() {
                this.echarts = false
                this.isActiveTotalForm = false
            },
            // 显示汇总数据表格
            showTotalForm() {
                this.echarts = false
                this.isActiveTotalForm = true
            }
        },
        watch: {
            'data'(val) {
                if (val.f_files_path) {
                    this.getFileContent(val.f_files_path)
                } else {
                    this.reportStr = null
                }
            }
        },
        computed: {
            // usertypes () {
            //   return this.$appdate.getParams("客户类型")
            // },
            getCondition() {
                let condition=this.$refs.paged.$refs.cri.condition + this.orgCondtionStr
                return {
                    condition: condition  ,
                    startDate:`${this.$refs.paged.$refs.cri.model.startDate}`,
                    endDate:`${this.$refs.paged.$refs.cri.model.endDate}`
                }

            },
            usertypes() {
                return [{label: '全部', value: ''}, ...this.$appdata.getParam('用户类型')]
            },
            Gasproperties() {
                return [{label: '全部', value: ''}, ...this.$appdata.getParam('用气性质')]
            }

        }
    }
</script>
<style>
    .form-input-group label {
        text-align: right;
        width: auto;
    }

    .mystyle {
        float: right;
        padding-right: 10%;
    }

    .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>
