<template>
  <div id="unit" @keyup.enter="search" class="flex-row">
    <div class="basic-main" @keyup.enter="search">
      <div class="flex">
        <criteria-paged :model="model" 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="form-group col-sm-2">
                  <label class="font_normal_body">用户编号</label>
                  <input class="input_search" condition="f_userinfo_code like '%{}%'" placeholder="用户编号" style="width:60%"
                         type="text" v-model="model.ename"
                  />
                </div>
                <div class="form-group col-sm-2">
                  <label class="font_normal_body">用户姓名</label>
                  <input  class="input_search" condition="f_user_name = '{}'" placeholder="用户姓名" style="width:60%"
                          type="text" v-model="model.name"
                  />
                </div>
                <div class="form-group col-sm-2">
                  <label class="font_normal_body">地&emsp;&emsp;址</label>
                  <input  :size="model.f_address ? model.f_address.length * 2 : 4" class="input_search" condition="f_address like '%{}%'" placeholder='用户地址' style="width:60%"
                          type="text"
                          v-model="model.f_address">
                </div>
                <div class="form-group col-sm-2">
                  <label class="font_normal_body">电&emsp;&emsp;话</label>
                  <input :size="model.f_user_phone ? model.f_user_phone.length : 2" class="input_search" condition="f_user_phone = '{}'" placeholder='电话' style="width:60%"
                         type="text"
                         v-model="model.f_user_phone">
                </div>
                <div class="form-group col-sm-3 button-range" style="padding-right: 10px">
                  <button @click="$parent.$parent.search()" class="button_search button_spacing" style="width:80px;margin-left:30px;" v-el:cx>查询</button>
                  <export-excel
                    :data="$parent.$parent.getCondition"
                    :field="$parent.$parent.getfield"
                    sqlurl="rs/logic/saleExport" progress="saleGetExportProgress" sql-name="sale_blackRecordQuery" template-name='重点用户操作记录导出'
                    :choose-col="true">
                  </export-excel>
                  <div
                    :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"
                    @click="$parent.$parent.hidden()" class="button_spacing" style="float: right"></div>
                </div>
              </div>
              <div class="row" v-if="$parent.$parent.criteriaShow">
                <res-select-group  :show-component="['company']" :initres="$parent.$parent.initres"  @re-res="$parent.$parent.getorg" v-ref:sel></res-select-group>
                <div class="form-group col-sm-2">
                  <label class="font_normal_body">表&emsp;&emsp;号</label>
                  <input  :size="model.f_meternumber ? model.f_meternumber.length * 2 : 4" class="input_search" condition="f_meternumber = '{}'" placeholder='表号' style="width:60%"
                          type="text"
                          v-model="model.f_meternumber">
                </div>
                <div class="form-group col-sm-2">
                  <label class="font_normal_body">卡&emsp;&emsp;号</label>
                  <input  :size="model.f_card_id ? model.f_card_id.length * 2 : 4" class="input_search" condition="f_card_id = '{}'" placeholder='卡号' style="width:60%"
                          type="text"
                          v-model="model.f_card_id">
                </div>
                <div class="form-group col-sm-2">
                  <label class="font_normal_body">操作日期</label>
                  <datepicker placeholder="开始日期"
                              style="width:60%"
                              class="datepicker"
                              v-model="model.startDate"
                              :value.sync="model.startDate"
                              :format="'yyyy-MM-dd'"
                              condition="f_operate_date >= '{} 00:00:00'">
                  </datepicker>
                </div>
                <div class="form-group col-sm-2">
                  <label class="font_normal_body">操作日期</label>
                  <datepicker placeholder="结束日期"
                              style="width:60%"
                              class="datepicker"
                              v-model="model.endDate"
                              :value.sync="model.endDate"
                              :format="'yyyy-MM-dd'"
                              condition="f_operate_date <= '{} 23:59:59'">
                  </datepicker>
                </div>
                <div class="form-group col-sm-2">
                  <label class="font_normal_body">操作类型</label>
                  <v-select :value.sync="model.f_operat_type"
                            v-model="model.f_operat_type"
                            style="width: 60%"
                            condition="f_operat_type = '{}'"
                            :options='$parent.$parent.operateType' placeholder='操作类型'
                            close-on-select>
                  </v-select>
                </div>
                <div class="form-group col-sm-2">
                  <label class="font_normal_body">审核状态</label>
                  <v-select :value.sync="model.f_black_state"
                            v-model="model.f_black_state"
                            style="width: 60%"
                            condition="f_black_state = '{}'"
                            :options='$parent.$parent.states' placeholder='审核状态'
                            close-on-select>
                  </v-select>
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">审&nbsp;核&nbsp;人</label>
                  <input  class="input_search" condition="f_audit_operator = '{}'" placeholder='审核人' style="width:60%"
                          type="text"
                          v-model="model.f_audit_operator">
                </div>
                <div class="col-sm-2 form-group"  :class="{'col-sm-2':!$parent.$parent.$parent.isdetail, 'col-sm-3':$parent.$parent.$parent.isdetail}" >
                  <label  class=" font_normal_body">移入原因</label>
                  <v-select search min-width="260px"
                    :value.sync="model.f_black_comments"
                    v-model="model.f_black_comments"
                    :options="$parent.$parent.fcomments"
                    placeholder='请选择'
                    condition="f_comments = '{}'"
                    close-on-select
                  >
                  </v-select>
                </div>
                <div class="col-sm-2 form-group"  :class="{'col-sm-2':!$parent.$parent.$parent.isdetail, 'col-sm-3':$parent.$parent.$parent.isdetail}" title="参数名称：【移出重点用户原因】">
                  <label  class=" font_normal_body">移出原因</label>
                  <v-select
                    :value.sync="model.f_black_comments1"
                    v-model="model.f_black_comments1"
                    :options="$parent.$parent.fcomments1"
                    placeholder='请选择'
                    condition="f_comments = '{}'"
                    close-on-select
                  >
                  </v-select>
                </div>
                <div class="form-group" :class="{'col-sm-2':!$parent.$parent.$parent.isdetail, 'col-sm-3':$parent.$parent.$parent.isdetail}">
                  <label class="font_normal_body">备&emsp;&emsp;注</label>
                  <input  :size="model.f_remark ? model.f_remark.length * 2 : 4" class="input_search" condition="f_remark like '%{}%'" placeholder='备注' style="width:60%"
                          type="text"
                          v-model="model.f_remark">
                </div>
                <div class="form-group col-sm-2">
                  <label class="font_normal_body">限购次数</label>
                  <input type="text" style="width:30%" class="input_search" title="大于等于" v-model="model.f_limit_times_small"
                         condition="f_limit_times >= '{}' " placeholder="大于等于">
                  <input type="text" style="width:30%" class="input_search" title="小于等于" v-model="model.f_limit_times_big"
                         condition="f_limit_times <= '{}' " placeholder="小于等于">
                </div>
                <div class="col-sm-2 form-group">
                  <label  class=" font_normal_body">限购类型</label>
                  <v-select
                    :value.sync="model.f_limit_type"
                    v-model="model.f_limit_type"
                    :options="$parent.$parent.limitTypes"
                    placeholder='请选择'
                    condition="f_limit_type = '{}'"
                    close-on-select
                  >
                  </v-select>
                </div>
                <div class="form-group col-sm-2">
                  <label class="font_normal_body">气量/金额</label>
                  <input type="text" style="width:30%" class="input_search" title="大于等于" v-model="model.f_limit_amount_small"
                         condition="f_limit_amount >= '{}' " placeholder="大于等于">
                  <input type="text" style="width:30%" class="input_search" title="小于等于" v-model="model.f_limit_amount_big"
                         condition="f_limit_amount <= '{}' " placeholder="小于等于">
                </div>
<!--                <div class="col-sm-2 form-group">-->
<!--                  <label class="font_normal_body col-sm-4">操作状态</label>-->
<!--                  <input type="text" v-show="false" v-model="KeyModel.f_opr_state" >-->
<!--                  <v-select style="width: 60%"-->
<!--                            v-model="KeyModel.f_opr_state"-->
<!--                            :value.sync="KeyModel.f_opr_state"-->
<!--                            :options="fstate"-->
<!--                            condition="f_opr_state = '{}'"-->
<!--                            :value-single="true"-->
<!--                            close-on-select></v-select>-->
<!--                </div>-->
<!--                <div class="col-sm-2 form-group">-->
<!--                  <label class="font_normal_body col-sm-4">管控级别</label>-->
<!--                  <v-select style="width: 60%"-->
<!--                            v-model="KeyModel.f_level"-->
<!--                            :value.sync="KeyModel.f_level"-->
<!--                            :options="flevel"-->
<!--                            condition="f_level = '{}'"-->
<!--                            :value-single="true"-->
<!--                            close-on-select></v-select>-->
<!--                </div>-->
              </div>
            </div>
          </criteria>

          <data-grid :model="model" class="list_area table_sy" partial='list' v-ref:grid>
            <template partial='head'>
              <tr>
                <th style="text-align: center;">序号</th>
                <th style="text-align: center;">用户编号</th>
                <th style="text-align: center;">姓名</th>
                <th style="text-align: center;">表号</th>
                <th style="text-align: center;">卡号</th>
                <th style="text-align: center;">电话</th>
                <th style="text-align: center;">地址</th>
                <th style="text-align: center;">操作日期</th>
                <th style="text-align: center;">操作类型</th>
                <th style="text-align: center;">操作人</th>
                <th style="text-align: center;">移入（移出）原因</th>
                <th style="text-align: center;">备注</th>
                <th style="text-align: center;">限购次数</th>
                <th style="text-align: center;">限购类型</th>
                <th style="text-align: center;">气量/金额</th>
                <th style="text-align: center;">管控级别</th>
                <th style="text-align: center;">限制功能</th>
                <th style="text-align: center;">操作状态</th>
                <th style="text-align: center;">操作记录状态</th>
                <th style="text-align: center;">审核人</th>
                <th style="text-align: center;">审核时间</th>
                <th style="text-align: center;">审核状态</th>
                <th style="text-align: center;">审核备注</th>

              </tr>
            </template>
            <template partial='body'>
              <td style="text-align: center;">{{$index+1}}</td>
              <td style="text-align: center;">{{row.f_userinfo_code}}</td>
              <td style="text-align: center;">{{row.f_user_name}}</td>
              <td style="text-align: center;">{{row.f_meternumber}}</td>
              <td style="text-align: center;">{{row.f_card_id}}</td>
              <td style="text-align: center;">{{row.f_user_phone}}</td>
              <td style="text-align: center;">{{row.f_address}}</td>
              <td style="text-align: center;">{{row.f_operate_date}}</td>
              <td style="text-align: center;">{{row.f_operat_type}}</td>
              <td style="text-align: center;">{{row.f_operator}}</td>
              <td style="text-align: center;">{{row.f_comments}}</td>
              <td style="text-align: center;">{{row.f_remark}}</td>
              <td style="text-align: center;">{{row.f_limit_times}}</td>
              <td style="text-align: center;">{{row.f_limit_type}}</td>
              <td style="text-align: center;">{{row.f_limit_amount}}</td>
              <td style="text-align: center;">{{row.f_level}}</td>
              <td style="text-align: center;">{{$parent.$parent.$parent.formatFunction(row.f_function)}}</td>
              <td style="text-align: center;">{{row.f_opr_state}}</td>
              <td style="text-align: center;">{{row.f_state}}</td>
              <td style="text-align: center;">{{row.f_audit_operator}}</td>
              <td style="text-align: center;">{{row.f_audit_date}}</td>
              <td style="text-align: center;">{{row.f_black_state}}</td>
              <td style="text-align: center;">{{row.f_audit_comments}}</td>
            </template>
            <template partial='foot'></template>
          </data-grid>
        </criteria-paged>
      </div>
    </div>
  </div>
</template>

<script>
  import {PagedList} from 'vue-client'

  export default {
    data () {
      return {
        fcomments: this.$appdata.getParam('移入原因') ? [ ...this.$appdata.getParam('移入原因')] : [],
        fcomments1: this.$appdata.getParam('移出重点用户原因') ? [ ...this.$appdata.getParam('移出重点用户原因')] : [],
        KeyModel: {
          f_opr_state: '移入',
          f_comments: '',
          f_function: '',
          f_level: '',
          f_remark: ''
        },
        initres: {
          org: [this.$login.f.orgid]
        },
        criteriaShow: false,
        model: new PagedList('rs/sql/sale_blackRecordQuery', 20),
        // 公司下拉
        curorgid: [this.$login.f.orgid],
        f_orgid: '',
        getfield: {
          'f_userinfo_code': '用户编号',
          'f_user_name': '用户姓名',
          'f_meternumber': '表号',
          'f_card_id': '卡号',
          'f_user_phone': '用户电话',
          'f_address': '用户地址',
          'f_operate_date': '操作日期',
          'f_operat_type': '操作类型',
          'f_operator': '操作人',
          'f_comments': '移入（移出）原因',
          'f_state': '操作记录状态',
          'f_audit_operator': '审核人',
          'f_audit_date': '审核时间',
          'f_black_state': '审核状态',
          'f_audit_comments': '审核备注',
          'f_limit_times': '限购次数',
          'f_limit_type': '限购类型',
          'f_limit_amount': '气量(金额)',
          'f_level': '管控级别',
          'f_function': '限制功能',
          'f_opr_state': '操作状态',
          'f_remark': '备注'
        },
        operateType: [{label: '全部', value: ''}, {label: '移入重点用户 ', value: '移入重点用户'}, {label: '移出重点用户', value: '移出重点用户'}],
        fstate: [{label: '移入', value: '移入'}, {label: '移出', value: '移出'}],
        flevel: [{label: '高', value: '高'}, {label: '中', value: '中'}, {label: '低', value: '低'}],
        limitTypes: [{label: '全部', value: ''}, {label: '气量', value: '气量'}, {label: '金额', value: '金额'}]
      }
    },
    props: {
      row: {},
      ispartial: false
    },
    ready () {
      this.$refs.paged.$refs.cri.model.startDate = this.data ? this.data.startDate : this.$login.toStandardDateString()
      this.$refs.paged.$refs.cri.model.endDate = this.data ? this.data.endDate : this.$login.toStandardDateString()
      this.search()
    },
    methods: {
      formatFunction (functionString) {
        if (!functionString) return ''
        try {
          // 解析 JSON 字符串为数组
          let functionArray = JSON.parse(functionString)
          // 将数组转换为用逗号分隔的字符串
          return functionArray.join(', ')
        } catch (e) {
          // 如果解析失败，返回原始字符串
          return functionString
        }
      },
      async getRes (condition, obj) {
        console.log('condition =', condition)
        console.log('obj =', obj)
      },
      hidden () {
        this.criteriaShow = !this.criteriaShow
      },
      search () {
        this.$refs.paged.$refs.cri.search()
        this.$dispatch('search')
      },
      getorg (val) {
        this.f_orgid = val
      },
      selfSearch (args) {
        if (!this.f_orgid) {
          this.getorg('and f_orgid in' + '(\'' + [this.$login.f.orgid] + '\')')
        }
        console.log('查询。。。', this.f_orgid)
        if (this.f_orgid) {
          args.condition = `${args.condition}  ${this.f_orgid} `
        }

        this.model.search(args.condition, args.model)
      }
    },
    watch: {
      'model.rows.length' (val) {
        if (val === 1) {
          this.$refs.paged.$refs.grid.select(this.model.rows[0])
        }
      }
    },
    computed: {
      states () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('黑名单审核状态')]
      },
      getCondition () {
        return {condition: `${this.$refs.paged.$refs.cri.condition}` + this.f_orgid}
      }
    }
  }
</script>
