<template>
  <div class="flex-row" v-if="!showDetail">
    <div id='app1' class="basic-main">
      <criteria-paged :model="model" :pager='true' 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="$parent.$parent.styles">
                <label 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 = '{}'"
                       v-el:xq v-next-el='f_userinfo_code'
                       v-el:username>
              </div>
              <div :class="$parent.$parent.styles">
                <label class="font_normal_body">客户名称</label>
                <input style="width:60%" type="text" class="input_search"
                       v-model="model.f_user_name"
                       @keyup.enter="search"
                       placeholder='客户名称'
                       condition="f_user_name like '%{}%'"
                       v-el:xq v-next-el='username'
                       v-el:username>
              </div>
              <div :class="$parent.$parent.styles">
                <label class="font_normal_body">客户地址</label>
                <input style="width:60%" type="text" class="input_search"
                       v-model="model.f_area" placeholder='地址'
                       condition="f_address like '%{}%'"
                       @keyup.enter="search"
                       v-el:xq v-next-el='address' v-el:area
                >
              </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>
                <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="$parent.$parent.styles" >
                <label class="font_normal_body">组织机构</label>
                <res-select :initresid='$parent.$parent.curorgid'
                            @res-select="$parent.$parent.getorg"
                            class="select select_list"
                            restype='organization'
                            style="width: 60%">
                </res-select>
              </div>
              <div :class="$parent.$parent.styles">
                <label 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 :class="$parent.$parent.styles">
                <label class="font_normal_body">客户类型</label>
                <v-select style="width:60%" id="f_user_type"
                          v-model="model.f_user_type"
                          placeholder='客户类型'
                          @change="$parent.$parent.userTypeChange()"
                          :value.sync="model.f_user_type"
                          :options='$parent.$parent.usertypes'
                          condition="f_user_type = '{}'"
                          close-on-select>
                </v-select>
              </div>
              <div :class="$parent.$parent.styles">
                <label class="font_normal_body">用气性质</label>
                <v-select style="width:60%" id="f_gasproperties"
                          v-model="model.f_gasproperties"
                          placeholder='用气性质'
                          @keyup.enter="search"
                          :value.sync="model.f_gasproperties"
                          :options='$parent.$parent.gasProperties'
                          condition="f_gasproperties = '{}'"
                          close-on-select>
                </v-select>
              </div>
              <div :class="$parent.$parent.styles">
                <label class="font_normal_body">气表品牌</label>
                <v-select placeholder='气表品牌'
                          :value.sync="model.f_meter_brand"
                          v-model="model.f_meter_brand"
                          :options='$parent.$parent.meterBrand'
                          close-on-select
                          condition="f_meter_brand='{}'">
                </v-select>
              </div>
              <div :class="$parent.$parent.styles">
                <label 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 >= '{}'"
                            :show-reset-button="reset">
                </datepicker>
              </div>
              <div :class="$parent.$parent.styles">
                <label 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 <= '{}'"
                            :show-reset-button="reset">
                </datepicker>
              </div>
              <div :class="$parent.$parent.styles">
                <label class="font_normal_body">异常类型</label>
                <v-select style="width:60%"
                          v-model="model.f_error_type"
                          placeholder='异常类型'
                          :value.sync="model.f_error_type"
                          :options='$parent.$parent.errorTypes'
                          condition="f_error_type = '{}'"
                          close-on-select>
                </v-select>
              </div>
              <div :class="$parent.$parent.styles">
                <label class="font_normal_body">账户余额</label>
                <input type="text" style="width:30%" class="input_search" title="大于等于"
                       v-model="model.f_balance_amount_small"
                       condition="f_balance_amount >= '{}' " placeholder="大于等于">
                <input type="text" style="width:30%" class="input_search" title="小于等于"
                       v-model="model.f_balance_amount_big"
                       condition="f_balance_amount <= '{}' " placeholder="小于等于">
              </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>
            </tr>
          </template>
          <template partial='body'>
            <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.f_user_name }}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.f_user_phone }}</nobr>
            </td>
            <td>
              <nobr>{{ row.f_address }}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.f_user_type }}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.f_gasproperties }}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.f_meternumber }}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.f_balance_amount }}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.f_meter_brand }}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.f_insert_date }}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.f_error_type }}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{ row.f_error_msg }}</nobr>
            </td>
            <td style="text-align: center;"><nobr>
              <button style=" height: 28px;line-height: 16px;" class="button_search button_spacing width-60" @click.stop="$parent.$parent.$parent.IssueWorkOrder(row)">下发工单</button>
            </nobr></td>
          </template>
        </data-grid>
      </criteria-paged>
    </div>
  </div>
  <div class="flex" v-if="showDetail">
    <user-info-detail-manage-new :f_userinfo_id="rowData.f_userinfo_id" @cancel-main="cancel">
    </user-info-detail-manage-new>
  </div>
</template>

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

let readySomething = async function (self) {
  self.$refs.paged.$refs.cri.model.startDate = Util.toStandardDateString() + ' 00:00:00'
  self.$refs.paged.$refs.cri.model.endDate = Util.toStandardDateString() + ' 23:59:59'
  await self.$LoadParams.loadParam()
  await self.initQueryParam()
  this.search()
}
export default {
  title: '异常分析',
  props: ['styles', 'errorTypes'],
  data () {
    return {
      model: new PagedList('rs/sql/sale_getUserExceptionList', 20),
      reportStr: null,
      show: false,
      startDate: '',
      endDate: '',
      f_error_type: '',
      meterBrand: [],
      gasProperties: [{label: '全部', value: ''}],
      showDetail: false,
      rowData: {},
      criteriaShow: false,
      GetErrorLevel: [],
      GetErrorType: [],
      // 公司下拉
      curorgid: [this.$login.f.orgid],
      condition: '1=1',
      f_orgid: ''
    }
  },
  ready () {
    readySomething(this)
  },
  methods: {
    userTypeChange () {
      this.gasProperties = [{label: '全部', value: ''}]
      if (this.$refs.paged.$refs.cri.model !== null) {
        this.$refs.paged.$refs.cri.model.f_gasproperties = ''
        if (this.$refs.paged.$refs.cri.model.f_user_type) {
          console.log(this.$refs.paged.$refs.cri.model.f_user_type)
          this.gasProperties = this.$appdata.getParam(this.$refs.paged.$refs.cri.model.f_user_type[0])
        }
      }
    },
    IssueWorkOrder (row) {
      this.$dispatch('issue-work-order', row)
    },
    showmsg (obj) {
      this.rowData = obj
      this.showDetail = true
    },
    cancel () {
      this.showDetail = false
    },
    getorg (val) {
      this.f_orgid = this.$login.convertToIn(val)
      this.$parent.f_orgid = this.f_orgid
    },
    initQueryParam () {
      let arr = []
      this.$GetSaleParam.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.meterBrand = [{label: '全部', value: ''}, ...arr]
    },
    hidden () {
      this.criteriaShow = !this.criteriaShow
    },
    search () {
      this.$refs.paged.$refs.cri.search()
    },
    selfSearch (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
      if (!this.f_orgid) {
        this.getorg([this.$login.f.orgid])
      }
      if (this.f_orgid) {
        args.condition = `f_orgid in ${this.f_orgid} and ${args.condition}`
      }
      this.condition = args.condition
      this.model.search(args.condition, args.model)
      this.$dispatch('search')
    },
    clearmsg () {
      Object.keys(this.$refs.paged.$refs.cri.model).forEach((key) => {
        this.$refs.paged.$refs.cri.model[key] = []
      })
    }
  },
  watch: {},
  computed: {
    usertypes () {
      return [{label: '全部', value: ''}, ...this.$appdata.getParam('用户类型')]
    },
    userstate () {
      return [{label: '全部', value: ''}, ...this.$appdata.getParam('用户状态')]
    }
  }
}
</script>
<style>
.form-input-group label {
  text-align: right;
  width: auto;
}

</style>
