<style scoped>
.bg {
  background-color: blue;
  height: 1px;
  border: 0;
}
.app-row {
  background-color: white;
  padding: 10px 10px 0 10px;
  border-bottom: 1px solid rgba(235, 235, 235, 0.5);
}
.search_input {
  border: 0;
  outline: none;
}
.font{
  font: 15px PingFang-SC-Medium;
  color: #666666;
}
.input-font{
  font: 15px PingFang-SC-Medium;
  color: #333333;
}
.btn-font{
  font:600 16px PingFang-SC-Bold;
  color: #499EDF;
}
.btn-color{
  background-color: #FFFFFF;
  border-radius: 10px ;
  border: 1px solid #499EDF;
}
.app-text {
  font-size: 12px;
}
.panel-self{
  border-radius: 10px;
  border:1px solid #499EDF;
  background-color: #F8F8F8;
}
.yybtn-color{
  background-color:#499edf;
  border-radius: 4px ;
  border: 1px solid #499EDF;
  color: #FFFFFF;
  font: 14px PingFang-SC-Bold;
}
.qxbtn-color{
  background-color: #FFFFFF;
  border-radius: 4px ;
  color: #499edf;
  font: 14px PingFang-SC-Bold;
  border: 1px solid #499EDF;
}

.button_shrink_top {width: 35px; height: 35px; background-size:100%;background-image: url("../../../static/newStyle/stretch_top.png")}
.button_shrink_bottom {width: 35px; height: 35px;  background-size:100%;background-image: url("../../../static/newStyle/stretch_bottom.png")}
.button_shrink_left {width: 35px; height: 35px;  background-size:100%;background-image: url("../../../static/newStyle/stretch_left.png")}
.button_shrink_right {width: 35px; height: 35px; background-size:100%;background-image: url("../../../static/newStyle/stretch_right.png")}
</style>
<style>
.clear-select-with .dropdown-menu{
  left: 0px !important;
  width: 200% !important;
}
</style>
<template>
  <div style="height: auto;width: 100%">
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='search' v-ref:cri>
        <div partial>
          <form>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/用户ID.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_userinfo_code" class="font text-left">用户编号：</label>
              </div>
              <div class="col-xs-8" >
                <input id="f_userinfo_code" class="search_input input-font"
                       v-model=model.f_userinfo_code condition="f_userinfo_code like '%{}%'" />
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/用户姓名.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label  class="font text-left">用户姓名：</label>
              </div>
              <div class="col-xs-8" >
                <input  class="search_input input-font" v-model=model.f_user_name condition="f_user_name like '%{}%'" />
              </div>
            </div>
            <div class="row text-center" style="margin-top: 20px;">
              <button type="button" class="btn btn-lg btn-font btn-color" style="width: 25%;" @click="$parent.$parent.selfSearch">查询</button>
            </div>
            <div class="col-sm-12">
            </div>
            <div style="height:30px;"></div>
          </form>
        </div>
      </criteria>
      <list :model="model" partial='list'>
        <div partial>
          <div  class="auto app-text" style="margin-top: 5px;">
            <div class="panel" style="padding: 10px 10px 5px 10px;">
              <div class="panel-body panel-self">

                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left"><b>用户编号:</b></p>
                  <p class="panel-title col-xs-5 text-left input-font" style="width: 74%">{{ row.f_userinfo_code }}</p>
                  <p class="panel-title col-xs-2 text-left input-font" style="width: 5%;float:right">
                  </p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left"><b>用户名称:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font" style="width: 79%">{{ row.f_user_name }}</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left"><b>用户表号:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font" style="width: 79%">{{ row.f_meternumber }}</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left"><b>用户卡号:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font" style="width: 79%">{{ row.f_card_id }}</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left"><b>限购日期:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font" style="width: 79%">{{ row.f_parameter_value }}</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left"><b>限购原因:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font" style="width: 79%">{{ row.f_comments }}</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left"><b>用户电话:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font" style="width: 79%">{{ row.f_user_phone2 ? row.f_user_phone2 : row.f_user_phone }}</p>
                </div>

                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left"><b>用户地址:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font" style="width: 79%">{{ row.f_address }}</p>
                </div>
                <div class="col-xs-12">
                  <button type="button" name="button" class="btn btn-primary" style="background-color:#499edf;float: right" @click="$parent.$parent.$parent.relieve(row)">解除限购</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </list>
    </criteria-paged>
    <modal :show.sync="flag1" v-ref:modal>
      <div slot="modal-header" class="modal-header">
        <h4 class="modal-title">
          提示
        </h4>
      </div>
      <div slot="modal-body" class="modal-body">
        <h4 class="modal-title">
          是否确定解除限购?
        </h4>
      </div>
      <div slot="modal-footer" class="modal-footer">
        <button class="btn btn-default" @click="manyisok('取消拉黑')">确认</button>
        <button class="btn btn-default" @click="iscancel('flag1')">取消</button>
      </div>
    </modal>
    <modal :show.sync="flag2" v-ref:modal>
      <div slot="modal-header" class="modal-header">
        <h4 class="modal-title">
          提示
        </h4>
      </div>
      <div slot="modal-body" class="modal-body">
        <h4 class="modal-title">
          {{ message }}
        </h4>
      </div>
      <div slot="modal-footer" class="modal-footer">
        <button class="btn btn-default" @click="iscancel('flag2')">取消</button>
      </div>
    </modal>
  </div>
</template>

<script>
import LocalPagedList from '../../plugins/LocalPagedList'
import Vue from 'vue'
import { PagedList,HttpResetClass } from 'vue-client'
import * as Util from '../Util'
import co from 'co'
export default {
  title: '隐患消除',
  props: ['planName'],
  data() {
    return {
      model: new PagedList( `${this.$androidUtil.getProxyUrl()}/rs/sql/sale_getBlackList`,20,{condition:'this.condition'}),
      condition:'',
      flag1: false,
      flag2: false,
      data: {
        f_userinfo_code: '',
        f_comments: ''
      },
      message: ''
    }
  },
  methods: {
    search(args) {
      this.model.rows = []
      this.model.search(args.condition, args.model)
    },
    //  点击查询
    selfSearch () {
      let condition = '1 = 1'
      if(this.$refs.paged.$refs.cri.model.f_user_name)
        condition += " and f_user_name like '%"+this.$refs.paged.$refs.cri.model.f_user_name+"%'"
      if(this.$refs.paged.$refs.cri.model.f_userinfo_code)
        condition += " and f_userinfo_code like '%"+this.$refs.paged.$refs.cri.model.f_userinfo_code+"%'"
      this.model.search(condition + ' and f_orgid in (' + Vue.user.orgid + ')')
    },
    //  点击解除限购出发的按钮
    relieve (row) {
      this.data.f_userinfo_code = row.f_userinfo_code
      this.data.f_comments = row.f_comments
      this.flag1 = true
    },
    //  确认解除限购
    async manyisok (type) {
      let data = {}
      const user = Vue.user
      const http = new HttpResetClass()
      await http.load('POST', `${this.$androidUtil.getProxyUrl()}/rs/sql/sale_getUserAndVersion`, {data: {condition:`f_userinfo_code='${this.data.f_userinfo_code}'` , f_orgid: user.orgid}}, {
        resolveMsg: null,
        rejectMsg: null
      }).then(res => {
        const f_operate_date = Util.toStandardTimeString()
        data = {
          f_operat_type: type,
          f_state: '有效',
          f_user_id: res.data[0].f_user_id || '',
          f_user_name: res.data[0].f_user_name,
          f_comments: this.data.f_comments,
          f_operator: user.name,
          f_operatorid: user.id,
          f_orgid: user.orgid,
          f_orgname: user.orgs,
          f_depid: user.depids,
          f_depname: user.deps,
          f_operate_date: f_operate_date,
          f_describe: `${user.name}对客户${res.data[0].f_user_name}进行${type}`,
          f_userinfo_id: {
            f_userinfo_id: res.data[0].f_userinfo_id,
            f_user_state: '正常',
            version: res.data[0].version
          },
          f_limit_times: res.data[0].f_limit_times,
          f_limit_amount: res.data[0].f_limit_amount,
          f_limit_value: res.data[0].f_limit_value
        }
      })
      await http.load('POST', `${this.$androidUtil.getProxyUrl()}/rs/logic/backlistOperate`, data, {resolveMsg: `${type}成功`, rejectMsg: `${type}失败，请重试`}).then(res => {
        if (res.data.code === 200) {
          this.message = '解除限购成功!!!'
        } else {
          this.message = '解除限购失败!!!'
        }
        this.flag1 = false
        this.flag2 = true
        this.init()
        this.selfSearch()
      })
    },
    //  取消解除限购
    iscancel (flag) {
      switch (flag) {
        case 'flag1':
          this.flag1 = false
          break
        case 'flag2':
          this.flag2 = false
          break
      }
    },
    //  初始化数据
    init () {
      this.data = {
        f_userinfo_code: '',
        f_comments: ''
      }
    }
  }
}
</script>
