<template>
  <div class="flex" style="justify-content: space-between;" v-if="!openInsertKeyUser" >
    <div @keyup.enter="search">
      <criteria-paged :model="model" v-ref:paged>
        <criteria @condition-changed='$parent.search' partial='criteria' v-ref:criteria>
          <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>
                <datepicker :format="'yyyy-MM-dd'" :value.sync="model.f_start_date"
                            class="datepicker"
                            condition="f_parameter_value >= '{} 00:00:00' "
                            placeholder="起始时间"
                            style="width:60%"
                            v-model="model.f_start_date"
                ></datepicker>
              </div>
              <div class="col-sm-2 form-group" >
                <label class="font_normal_body" >结束时间</label>
                <datepicker :format="'yyyy-MM-dd'" :value.sync="model.f_end_date"
                            class="datepicker"
                            condition="f_parameter_value <= '{} 23:59:59' "
                            placeholder="结束时间"
                            style="width:60%"
                            v-model="model.f_end_date"
                ></datepicker>
              </div>
              <div style="float: right">
                <button @click="search()" class="button_search" style="margin-right: 10px" v-el:cba>查询</button>
                <button class="btn btn-success" @click="$parent.$parent.clear()" v-el:cx>清空</button>
                <button  @click.stop="$parent.$parent.insertKeyUser()" class="button_search" style="margin-right: 10px" v-el:cba>添加重点用户</button>
              </div>
            </div>
          </div>
        </criteria>
        <data-grid :model="model" class="list_area table_sy" partial='list' v-ref:grid>
          <template partial='head'>
            <tr>
              <th><nobr>序号</nobr></th>
              <th><nobr>用户编号</nobr></th>
              <th><nobr>用户姓名</nobr></th>
              <th><nobr>用户地址</nobr></th>
              <th><nobr>电话</nobr></th>
              <th><nobr>表号</nobr></th>
              <th><nobr>卡号</nobr></th>
              <th><nobr>移入原因</nobr></th>
              <th><nobr>管控级别</nobr></th>
              <th><nobr>限制功能</nobr></th>
              <th><nobr>备注</nobr></th>
              <th><nobr>审核状态</nobr></th>
              <th><nobr>操作状态</nobr></th>
              <th><nobr>操作时间</nobr></th>
              <th><nobr>操作人</nobr></th>
            </tr>
          </template>
            <template partial='body' partial='list' v-ref:grid>
              <tr  v-for="(row, index) in model.items" :key="index">
                <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_address}}</td>
                <td style="text-align:center">{{row.f_user_phone}}</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_comments}}</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_remark}}</td>
                <td style="text-align:center">{{row.f_state}}</td>
                <td style="text-align:center">{{row.f_opr_state}}</td>
                <td style="text-align:center">{{row.f_operate_date}}</td>
                <td style="text-align:center">{{row.f_operator}}</td>
                <td style="text-align:center;display:none;" >{{row.f_userinfo_id}}
                </td>
              </tr>
            </template>
        </data-grid>
      </criteria-paged>
    </div>
  </div>
  <insert-key-user v-if="openInsertKeyUser"
                   :f_userinfo_id="selectedUserId"
                   @cancel="handleCancel"
                   :userOperationState="userOperationState"
                   @updateUserOperationState="updateUserOperationState"
  ></insert-key-user>

</template>
<script>
import {PagedList} from "vue-client"
import insertKeyUser from './insertKeyUser.vue'
export default {
  title: '用户重点记录',
  components: {
    insertKeyUser
  },
  data () {
    return {
      userOperationState: '',
      selectedUserId: null,
      openInsertKeyUser: false,
      condition: '1=1',
      model: new PagedList('/rs/sql/sale_blackRecordQuery', 20),
      searchValue: this.$appdata.getSingleValue('综合条件查询') ? this.$appdata.getSingleValue('综合条件查询') : 'f_userfiles_id',
    }
  },
  props: ['row'],
  methods: {
    formatFunction(functionString) {
      if (!functionString) return ''
      try {
        // 解析 JSON 字符串为数组
        let functionArray = JSON.parse(functionString)
        // 将数组转换为用逗号分隔的字符串
        return functionArray.join(', ')
      } catch (e) {
        // 如果解析失败，返回原始字符串
        return functionString
      }
    },
    handleCancel() {
      this.openInsertKeyUser = false
    },
    clear () {
      Object.keys(this.$refs.paged.$refs.criteria.model).forEach((key) => {
        this.$refs.paged.$refs.criteria.model[key] = []
      })
    },
    async search () {
      this.condition = `${this.$refs.paged.$refs.criteria.condition} and ${this.searchValue} = '${this.row[this.searchValue]}'`
      this.model.search(this.condition, this.model)
    },
    insertKeyUser () {
      this.openInsertKeyUser = true
      this.selectedUserId = this.row.f_userinfo_id
      console.log('看看传进来没',this.selectedUserId)
    },
    updateUserOperationState(state) {
      this.userOperationState = state;
    }
  },
  ready () {
    this.$refs.paged.$refs.criteria.search()
  },
  computed: {

  }

}
</script>
<style scoped>
</style>
