<template>
  <div class="auto">
    <criteria-paged :model="model"  v-ref:paged>
      <criteria partial='criteria' @condition-changed='$parent.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 class="font text-left">用户编号：</label>
              </div>
              <div class="col-xs-8" >
                <input class="search_input input-font"
                       v-model=model.f_userinfo_code condition="tu.f_userinfo_code = '{}'" placeholder="请输入用户编号" />
              </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="tu.f_user_name like '%{}%'" placeholder="请输入用户姓名（可模糊查询）">
              </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 style="width: 100%" class="search_input input-font" v-model="model.f_user_phone" placeholder="请输入用户电话（可模糊查询）" condition="tu.f_user_phone 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 style="width: 100%" class="search_input input-font" v-model="model.f_address" condition="ta.f_address like '%{}%'" placeholder="请输入用户地址（可模糊查询）">
              </div>
            </div>
            <div class="row text-center" style="margin-top: 20px;">
              <button type="button" class="btn btn-lg btn-font btn-color" style="width: 45%;" @click="search">查询</button>
              <button type="button" class="btn btn-lg btn-font btn-color" style="width: 45%;" @click="$parent.$parent.clear()">清空</button>
            </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="row">
                  <p class="panel-title col-xs-4 text-left font">用户编号</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.f_userinfo_code }}</p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">用户姓名</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.f_user_name }}</p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">用户电话</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.f_user_phone }}</p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">用户地址</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.f_address }}</p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">原因</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.f_comments }}</p>
                </div>
                <div class="row">
                  <button type="button" v-if="row.f_state == '有效'" class="btn btn-lg btn-font btn-color" style="width: 45%;float: right;" @click="$parent.$parent.$parent.back_no(row)">拉出黑名单</button>
                  <button type="button" v-else class="btn btn-lg btn-font btn-color" style="width: 45%;float: right;" @click="$parent.$parent.$parent.back(row)">拉入黑名单</button>
                </div>
              </div>
            </div>

          </div>
        </div>
      </list>
    </criteria-paged>
    <modal :show.sync="showmodel" v-ref:modal :backdrop="false">
      <div slot="modal-header" class="modal-header">
        <h4 class="modal-title">
          限制用户购气
        </h4>
      </div>
      <div slot="modal-body" class="modal-body">
        <!--      <div class="row" style="margin-top: 6px">-->
        <!--        <label style="color: red;">注:当前页面无法取消对用户的限制购气</label>-->
        <!--      </div>-->
        <div class="row" style="margin-top: 6px">
          <textarea id="el_ca_tx" v-model.trim="cause" style="border-radius:4px;width: 100%;" placeholder="请输入限制用户购气原因" >
          </textarea>
        </div>
      </div>
      <div slot="modal-footer" class="modal-footer">
        <button  type="button" name="button" class="col-sm-3 btn btn-primary" @click="backlist()">确认</button>
        <button  type="button" name="button" class="col-sm-3 btn btn-primary" @click="cancel()">取消</button>
      </div>
    </modal>

    <modal :show.sync="showmodelthree" v-ref:modal :backdrop="false">
      <div slot="modal-header" class="modal-header">
        <h4 class="modal-title">
          取消限制用户购气
        </h4>
      </div>
      <div slot="modal-body" class="modal-body">
        <div class="row" style="margin-top: 6px">
          <textarea id="el_ca_txt" v-model.trim="deletecause" style="border-radius:4px;width: 100%;" placeholder="请输入取消限制用户购气原因" >
          </textarea>
        </div>
      </div>
      <div slot="modal-footer" class="modal-footer">
        <button  type="button" name="button" class="col-sm-3 btn btn-primary" @click="deletebacklist()">确认</button>
        <button  type="button" name="button" class="col-sm-3 btn btn-primary" @click="deletecancel()">取消</button>
      </div>
    </modal>
  </div>
</template>

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

export default {
  title: '安检员B',
  data () {
    let model = new PagedList(`${this.$androidUtil.getProxyUrl()}/rs/sql/tel_singleTable_OrderBy`, 20,{
      items: '"tu.f_userinfo_code,tu.f_user_name,tu.f_user_phone,tu.f_userinfo_id,td.f_comments,ta.f_address,td.f_state"',
      tablename: '"t_userinfo tu left join t_userproperties td on tu.f_userinfo_id = td.f_userinfo_id and td.f_state = \'有效\' and f_parameter_key = \'blackList\' left join t_user_address ta on tu.f_userinfo_id = ta.f_userinfo_id"',
      orderitem: '"tu.f_userinfo_code desc"',
    })
    return {
      temp_row : {},
      model: model,
      cause:'',
      deletecause:'',
      showmodel: false,
      showmodelthree: false,
    }
  },
  ready () {
  },
  computed: {
  },
  methods:{
    back(row) {
      this.temp_row = row
      this.showmodel = true
    },
    back_no(row){
      this.temp_row = row
      this.showmodelthree = true
    },
    clear(){
      this.$refs.paged.model.params = {}
    },
    async deletebacklist() {
      if (!this.deletecause) {
        this.$showMessage("请填写取消拉黑原因！")
        return
      }
      let http = new HttpResetClass()
      let res1 = await http.load('POST', `${this.$androidUtil.getProxyUrl()}/rs/sql/safe_singleTable_OrderBy`, {
        data: {
          items: "version",
          tablename: "t_userinfo",
          condition: "f_userinfo_id=" + this.temp_row.f_userinfo_id,
          orderitem: "f_userinfo_id"
        }
      }, {resolveMsg: null, rejectMsg: null})
      let res2 = await http.load('POST', `${this.$androidUtil.getProxyUrl()}/rs/logic/backlistOperate`, {
        data: {
          "f_operat_type": "取消拉黑",
          "f_state": "有效",
          "f_user_name": this.temp_row.f_user_name,
          "f_comments": this.deletecause,
          "f_operate_date": Util.toStandardTimeString(),
          "f_operator": Vue.user.name,
          "f_operatorid": Vue.user.id,
          "f_orgid": Vue.user.orgid,
          "f_orgname": Vue.user.orgs,
          "f_depid": Vue.user.depids,
          "f_depname": Vue.user.deps,
          "f_describe": `${Vue.user.name}对用户${this.temp_row.f_user_name}进行取消拉黑`,
          "f_userinfo_id": {
            "f_userinfo_id": this.temp_row.f_userinfo_id,
            "f_user_state": "正常",
            "version": res1.data[0].version
          },
          "f_limit_times":"",
          "f_limit_value":""
        }
      }, {resolveMsg: null, rejectMsg: null})
      if (res2.data.code == 200) {
        this.showmodelthree = false
        this.$showMessage("取消该用户限制购气成功！")
      } else {
        this.$showMessage("网络异常，请稍后再试！")
      }
      this.deletecause = ''
    },
    async backlist() {
      if (!this.cause) {
        this.$showMessage("请填写拉黑原因！")
        return
      }
      let http = new HttpResetClass()
      let res1 = await http.load('POST', `${this.$androidUtil.getProxyUrl()}/rs/sql/safe_singleTable_OrderBy`, {
        data: {
          items: "version",
          tablename: "t_userinfo",
          condition: "f_userinfo_id=" + this.temp_row.f_userinfo_id,
          orderitem: "f_userinfo_id"
        }
      }, {resolveMsg: null, rejectMsg: null})
      let res2 = await http.load('POST', `${this.$androidUtil.getProxyUrl()}/rs/logic/backlistOperate`, {
        data: {
          "f_operat_type": "拉黑",
          "f_state": "有效",
          "f_user_name": this.temp_row.f_user_name,
          "f_comments": this.cause,
          "f_operator": Vue.user.name,
          "f_operate_date": Util.toStandardTimeString(),
          "f_operatorid": Vue.user.id,
          "f_orgid": Vue.user.orgid,
          "f_orgname": Vue.user.orgs,
          "f_depid": Vue.user.depids,
          "f_depname": Vue.user.deps,
          "f_describe": `${Vue.user.name}对用户${this.temp_row.f_user_name}进行拉黑`,
          "f_userinfo_id": {
            "f_userinfo_id": this.temp_row.f_userinfo_id,
            "f_user_state": "正常",
            "version": res1.data[0].version
          },
          "f_limit_times":"1",
          "f_limit_value":"3"
        }
      }, {resolveMsg: null, rejectMsg: null})
      if (res2.data.code == 200) {
        this.showmodel = false
        this.enabled = true
        this.$showMessage("将该用户限制购气成功！")
      } else if (res2.data.msg == '数据增加重复') {
        this.showmodel = false
        this.enabled = true
        this.$showMessage("该用户已被限制购气，请勿重复提交！")
      } else {
        this.$showMessage("网络异常，请稍后再试！")
      }
      this.cause = ''
    },
    cancel() {
      this.showmodel = false
    },
    deletecancel() {
      this.showmodelthree = false
    },
    search(args){
      this.model.search(args.condition)
    }
  }
}
</script>
<style scoped>
.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{
  border-radius: 4px ;
  border: 1px solid #499EDF;
}
.qxbtn-color{
  background-color: #FFFFFF;
  border-radius: 4px ;
  border: 1px solid #499EDF;
}
</style>
