<template>
  <div id="unit" class="flex-row">
    <div class="basic-main" @keyup.enter="search" v-if="!show">
      <div class="flex">
        <div class="flex" style="flex:1;" v-show="!echarts">
          <criteria-paged :model="model" :pager='true' v-ref:paged>
            <criteria @condition-changed='$parent.search' partial='criteria' v-ref:cri>
              <div class="form-horizontal select-overspread container-fluid auto" novalidate partial>
                <div class="row" width="100%">

                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">客户编号</label>
                    <input style="width:60%" class="input_search" condition="info.f_userinfo_code = '{}'"
                           placeholder='客户编号' type="text"
                           v-el:meternumber v-model="model.f_userinfo_code" v-next-el='f_userinfo_code'
                    >
                  </div>
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">客户名称</label>
                    <input style="width:60%" class="input_search" condition="info.f_user_name like '%{}%'"
                           placeholder='客户名称' type="text"
                           v-el:username v-model="model.f_username" v-next-el='userid'>
                  </div>
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">客户地址</label>
                    <input style="width:60%" class="input_search" condition="a.f_address like '%{}%'" placeholder='地址'
                           type="text"
                           v-el:area v-el:xq v-model="model.f_address" v-next-el='address'
                    >
                  </div>
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">表&emsp;&emsp;号</label>
                    <input style="width:60%" class="input_search" condition="uf.f_meternumber = '{}'"
                           placeholder='表钢号' type="text"
                           v-el:meternumber v-model="model.f_meternumber" v-next-el='meternumber'
                    >
                  </div>
                  <div class="span" style="float:right;">
                    <button @click="search()" class="button_search button_spacing">查询</button>
                    <button @click="$parent.$parent.clearmsg" class="button_clear button_spacing">清空</button>
                    <export-excel :data="$parent.$parent.getCondition" class="button_export button_spacing"
                                  :field="$parent.$parent.getfield"
                                  sqlurl="api/af-revenue/logic/openapi/exportfile" sql-name="webmeter_PriceInstructDetail"
                                  template-name='调价分析'
                                  :choose-col="true"></export-excel>
                    <!--                    <button @click="$parent.$parent.showEcharts()" class="button_export button_spacing">显示图表</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 class="font_normal_body">组织机构</label>-->
                    <!--                    <res-select :initresid="$parent.$parent.orgid"-->
                    <!--                                @res-select="$parent.$parent.getRes"-->
                    <!--                                restype='organization'style="width: 60%">-->
                    <!--                    </res-select>-->
                    <label class="font_normal_body">公&emsp;&emsp;司</label>
                    <right-tree @re-res="$parent.$parent.getRes"
                                :initresid='$parent.$parent.orgid'></right-tree>
                  </div>
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">用户类型</label>
                    <v-select :options='$parent.$parent.usertypes'
                              :value.sync="model.f_user_type"
                              close-on-select
                              style="width:60%"
                              condition="uf.f_user_type = '{}'"
                              @change="$parent.$parent.userTypeChange()"
                              id="f_user_type"
                              placeholder='用户类型'
                              v-model="model.f_user_type">
                    </v-select>
                  </div>
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body">用气性质</label>
                    <v-select :options='$parent.$parent.gasproperties'
                              :value.sync="model.f_gasproperties"
                              close-on-select
                              style="width:60%"
                              condition="uf.f_gasproperties = '{}'"
                              id="f_gasproperties"
                              placeholder='用气性质'
                              v-model="model.f_gasproperties">
                    </v-select>
                  </div>
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body" style="word-break:keep-all;">调价时间</label>
                    <datepicker :format="'yyyy-MM-dd HH:mm:ss'"
                                :value.sync="model.startDate"
                                style="width:60%"
                                placeholder="起始时间"
                                v-model="model.startDate"
                    ></datepicker>
                  </div>
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body" style="word-break:keep-all;">&emsp;&ensp;至&emsp;</label>
                    <datepicker :format="'yyyy-MM-dd HH:mm:ss'"
                                :value.sync="model.endDate"
                                placeholder="结束时间"
                                style="width:60%"
                                v-model="model.endDate"
                    ></datepicker>
                  </div>
                  <div class="col-sm-2 form-group">
                    <label class="font_normal_body" style="word-break:keep-all;">指令状态</label>
                    <v-select :options='$parent.$parent.instruct_states'
                              :value.sync="model.instruct_state"
                              close-on-select
                              style="width:60%"
                              condition="{}"
                              placeholder='指令状态'
                              v-model="model.instruct_state">
                    </v-select>
                  </div>

                </div>
              </div>
            </criteria>
            <data-grid :model="model" id="reportgas" partial='list' class="list_area table_sy" 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>
                </tr>
              </template>
              <template partial='body' partial='list' v-ref:grid>
                <tr>
                  <td :class="row.f_user_state !== '正常'? 'back-red' : 'back-blue'" style="text-align: center;">
                    <nobr>
                      <span @click="$parent.$parent.$parent.showmsg(row)"><a
                        style="cursor:pointer;">{{ row.f_userinfo_code }}</a></span>
                    </nobr>
                  </td>
                  <td :class="row.f_user_state !== '正常'? 'back-red' : 'back-blue'" style="text-align: center;">
                    <nobr>{{ row.f_meternumber }}</nobr>
                  </td>
                  <td :class="row.f_user_state !== '正常'? 'back-red' : 'back-blue'" style="text-align: center;">
                    <nobr>{{ row.f_meter_brand }}</nobr>
                  </td>
                  <td :class="row.f_user_state !== '正常'? 'back-red' : 'back-blue'" style="text-align: center;">
                    <nobr>{{ row.f_meter_style }}</nobr>
                  </td>
                  <td :class="row.f_user_state !== '正常'? 'back-red' : 'back-blue'" style="text-align: center;">
                    <nobr>{{ row.f_table_state }}</nobr>
                  </td>
                  <td :class="row.f_user_state !== '正常'? 'back-red' : 'back-blue'" style="text-align: center;">
                    <nobr>{{ row.f_gasproperties }}</nobr>
                  </td>
                  <td :class="row.f_user_state !== '正常'? 'back-red' : 'back-blue'" style="text-align: center;">
                    <nobr>{{ row.f_price_name }}</nobr>
                  </td>
                  <td :class="row.f_user_state !== '正常'? 'back-red' : 'back-blue'" style="text-align: center;">
                    <nobr>{{ row.f_user_name }}</nobr>
                  </td>
                  <td :class="row.f_user_state !== '正常'? 'back-red' : 'back-blue'" style="text-align: center;">
                    <nobr>{{ row.f_address }}</nobr>
                  </td>
                  <td :class="row.f_user_state !== '正常'? 'back-red' : 'back-blue'" style="text-align: center;">
                    <nobr>{{ row.f_residential_area }}</nobr>
                  </td>
                  <td :class="row.f_user_state !== '正常'? 'back-red' : 'back-blue'" style="text-align: center;">
                    <nobr>{{ row.f_user_phone }}</nobr>
                  </td>
                  <td :class="row.f_user_state !== '正常'? 'back-red' : 'back-blue'" style="text-align: center;">
                    <nobr>{{ row.f_instruct_state }}</nobr>
                  </td>
                </tr>
              </template>
              <template partial='foot'></template>
            </data-grid>
          </criteria-paged>
        </div>
      </div>
    </div>
    <div class="basic-main" style="width:99%;height:98%;margin-bottom:0px" v-if="show">
      <user-info-detail-manage-new :f_userinfo_id="rowdata.f_userinfo_id"
                                   @cancel-main="cancel"></user-info-detail-manage-new>
    </div>
  </div>
</template>
<script>
import {PagedList} from 'vue-client'
import * as Util from '../../../Util'
import plugins from '../../../plugins/GetLoginInfoService'
import plugin from 'system-clients/src/plugins/GetLoginInfoService'

export default {
  title: '调价分析',
  data() {
    return {
      model: new PagedList('api/af-revenue/sql/webmeter_PriceInstructDetail', 100, {
        startDate: 'this.model.startDate',
        endDate: 'this.model.endDate'
      }),
      condition: '1=1',
      startDate: '',
      gasproperties: [{label: '全部', value: ''}],
      instruct_states: [
        {label: '全部', value: ''},
        {label: '已发送', value: ` ins.f_instruct_state = '已发送' `},
        {label: '执行成功', value: ` ins.f_instruct_state = '执行成功' `},
        {label: '执行失败', value: ` ins.f_instruct_state = '执行失败' `},
        {label: '忽略冗余', value: ` ins.f_instruct_state = '忽略冗余' `},
        {label: '指令生成失败', value: ` ins.f_instruct_state is null `}
      ],
      endDate: '',
      getfield: {
        "f_userinfo_code": "用户编号",
        "f_meternumber": "表号",
        "f_meter_brand": "气表品牌",
        "f_meter_style": "气表型号",
        "f_table_state": "气表状态",
        "f_gasproperties": "用气性质",
        "f_price_name": "气价名称",
        "f_user_name": "用户名称",
        "f_address": "用户地址",
        "f_residential_area": "用户小区",
        "f_user_phone": "联系方式",
        "f_instruct_state": "指令状态"
      },
      criteriaShow: false,
      echarts: false,
      show: false,
      condition_bl: false,
      rowdata: {},
      searchshow: false,
      orgCondtionStr: '(' + this.$login.f.orgid + ')',
      orgid: [this.$login.f.orgid]
    }
  },
  ready() {
    this.$refs.paged.$refs.cri.model.startDate = Util.addDate(new Date(), -6).substring(0, 10) + ' 00:00:00'
    this.$refs.paged.$refs.cri.model.endDate = Util.toStandardDateString() + ' 23:59:59'
    this.getdata()
  },
  methods: {
    userTypeChange() {
      this.gasproperties = [{label: '全部', value: ''}]
      if (this.$refs.paged.$refs.cri.model !== null) {
        this.$refs.paged.$refs.cri.model.f_gasproperties = ''

        console.log(this.$refs.paged.$refs.cri.model.f_user_type[0])
        this.gasproperties = this.$appdata.getParam(this.$refs.paged.$refs.cri.model.f_user_type[0])
      } else {
        this.gasproperties = [{label: '全部', value: ''}]
      }
    },
    search1() {
      this.$refs.paged.$refs.cri.search()
    },
    // 查询开关
    hidden() {
      this.criteriaShow = !this.criteriaShow
    },
    getdata() {
      this.startDate = this.$refs.paged.$refs.cri.model.startDate
      this.endDate = this.$refs.paged.$refs.cri.model.endDate
      if (this.orgCondtionStr)
        this.condition = this.$refs.paged.$refs.cri.condition + 'and uf.f_orgid in ' + this.orgCondtionStr
      this.$refs.paged.$refs.cri.search()
    },
    // 显示柱状图
    showEcharts() {
      this.echarts = !this.echarts
    },
    close() {
      this.show = false
    },
    clearmsg() {
      Object.keys(this.$refs.paged.$refs.cri.model).forEach((key) => {
        this.$refs.paged.$refs.cri.model[key] = []
      })
    },
    wai_search(obj) {
      console.log(obj)
      this.$refs.paged.$refs.cri.model.startDate = obj.startDate
      this.$refs.paged.$refs.cri.model.endDate = obj.endDate
      this.condition = obj.condition
      this.condition_bl = true
      this.$refs.paged.$refs.cri.search()
    },
    async search(args) {
      this.startDate = this.$refs.paged.$refs.cri.model.startDate
      this.endDate = this.$refs.paged.$refs.cri.model.endDate
      if (this.endDate == '' || this.startDate == '') {
        return this.$showMessage("时间区间的开始和结束时间不能为空！")
      }
      if (this.condition_bl) {
        args.condition = this.condition
      } else {
        if (this.orgCondtionStr)
          args.condition = `${args.condition}` + 'and uf.f_orgid in ' + this.orgCondtionStr
        this.condition = args.condition
      }
      await this.model.search(args.condition, args.model)
      this.condition_bl = false
    },
    getRes(obj) {
      this.orgCondtionStr = plugins.convertToIn(obj.resids) ? plugin.convertToIn(obj.resids) : '(' + this.$login.f.orgid + ')'
    },
    cancel(obj) {
      this.show = false
    },
    showmsg(obj) {
      this.rowdata = obj
      this.show = true
    }
  },
  computed: {
    getCondition() {
      var con = `${this.condition} and uf.f_orgid in  ${this.orgCondtionStr}`
      return {
        condition: con,
        startDate: `${this.$refs.paged.$refs.cri.model.startDate}`,
        endDate: `${this.$refs.paged.$refs.cri.model.endDate}`
      }
    },
    usertypes() {
      return [{label: '全部', value: ''}, ...this.$appdata.getParam('用户类型')]
    },
    Getuserstyle() {
      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>
