<template>
  <div style="height: 100%">
    <work-busy :is-busy="busy"></work-busy>
    <div class="panel auto" v-if="blackUser">
      <div class="panel-body " id="upuserinfo_sel">
        <div class="row auto" style="margin: 5px 0">
          <label class="righttxt">用户编号:</label>
          <input type="text" class="form-control rightipt" v-model="model.f_userinfo_code" disabled="true"/>
        </div>
        <div class="row auto" style="margin: 5px 0">
          <label class="righttxt">用户名称:</label><input type="text" class="form-control rightipt"
                                                          v-model="model.f_user_name" disabled="true"/>
        </div>
        <div class="row auto" style="margin: 5px 0">
          <label class="righttxt">身份证号:</label><input type="text" class="form-control rightipt" disabled="true"
                                                          v-model="model.f_idnumber" />
        </div>
        <div class="row auto" style="margin: 5px 0">
          <label class="righttxt">用户状态:</label><input type="text" class="form-control rightipt" disabled="true"
                                                          v-model="model.f_user_state"/>
        </div>
        <div class="row auto" style="margin: 5px 0">
          <label class="righttxt">用户电话:</label><input type="text" class="form-control rightipt" disabled="true"
                                                          v-model="model.f_user_phone"/>
        </div>
        <div class="row auto" style="margin: 5px 0">
          <label class="righttxt">表号:</label><input type="text" class="form-control rightipt" disabled="true"
                                                          v-model="model.f_meternumber"/>
        </div>
        <div class="row auto" style="margin: 5px 0">
          <label class="righttxt">卡号:</label><input type="text" class="form-control rightipt" disabled="true"
                                                          v-model="model.f_card_id"/>
        </div>
        <div class="row auto" style="margin: 5px 0">
          <label class="righttxt">限购方式:</label>
          <v-select :value.sync="model.f_limit_type" class="input-font" style="margin-left: 20px"
                    :options='limit_type' placeholder='请选择限购方式' :value-single="true" @change="limit_type_change"
                    v-model="model.f_limit_type" close-on-select clear-button></v-select>
        </div>
        <div class="row auto" style="margin: 5px 0">
          <label class="righttxt">限购次数:</label><input type="number" class="form-control rightipt"
                                                      v-model="model.f_limit_times"/>
        </div>
        <div class="row auto" style="margin: 5px 0" v-if="model.f_limit_type == '金额'">
          <label class="righttxt">限购金额:</label><input type="number" class="form-control rightipt"
                                                          v-model="model.f_limit_amount"/>
        </div>
        <div class="row auto" style="margin: 5px 0" v-if="model.f_limit_type == '气量'">
          <label class="righttxt">限购气量:</label><input type="number" class="form-control rightipt"
                                                          v-model="model.f_limit_value"/>
        </div>
        <div class="row auto" style="margin: 5px 0">
          <label class="righttxt">拉黑原因:</label><textarea class="form-control rightipt"
                     style="height: 150px"
                     v-model="model.f_remark"></textarea>
        </div>
        <div class="row auto" style="margin-top: 20px">
          <button type="button" class="btn btn-lg btn-font btn-color" style="width: 45%;" @click="black">拉黑</button>
        </div>
      </div>
    </div>
    <div class="panel auto" v-if="liftUser">
      <div partial>
        <div class="auto app-text" style="margin-top: 5px;" v-for="row in list">
          <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">{{ model.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">{{ model.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">{{ model.f_meternumber }}</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">{{ model.f_user_type }}</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">{{ model.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">{{ model.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_operate_date }}</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_operator }}</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>
          </div>
        </div>
      </div>
      <div class="row auto" style="margin-top: 20px">
        <button type="button" class="btn btn-lg btn-font btn-color" style="width: 45%;" @click="modalShow = true">取消拉黑</button>
      </div>
      <modal :show.sync="modalShow" v-ref:modal>
        <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="model.f_remark" 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="cancleBlack()">确认</button>
          <button  type="button" name="button" class="col-sm-3 btn btn-primary" @click="cancle()">取消</button>
        </div>
      </modal>
    </div>
  </div>
</template>

<script>


import Vue from "vue";
import * as Util from "../../Util";
import {HttpResetClass} from "vue-client";

export default {
  title: '拉黑',
  data() {
    return {
      model:{},
      list:[],
      limit_type:[{label:'气量', value:'气量'}, {label:'金额', value:'金额'}],
      busy:false,
      modalShow:false,
      blackUser:false,
      liftUser:false
    }
  },
  props: {
    item: {
      type: Object
    }
  },
  methods:{
    limit_type_change(){
      this.model.f_limit_times = ''
      this.model.f_limit_value = ''
      this.model.f_limit_amount = ''
    },
    cancle(){
      this.modalShow = false
      this.model.f_remark = ''
    },
    async cancleBlack(){
      if (!this.model.f_remark) {
        this.$showMessage("请填写取消拉黑原因！")
        return
      }
      this.busy = true
      setTimeout(() => {
        this.busy = false
      }, 5000)
      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.model.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.model.f_user_name,
          "f_comments": this.model.f_remark,
          "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.model.f_user_name}进行取消拉黑`,
          "f_userinfo_id": {
            "f_userinfo_id": this.model.f_userinfo_id,
            "f_user_state": "正常",
            "version": res1.data[0].version
          },
          "f_limit_times":"",
          "f_limit_value":""
        }
      }, {resolveMsg: null, rejectMsg: null})
      this.busy = false
      if (res2.data.code == 200) {
        this.$showMessage("取消该用户限制购气成功！")
        this.$dispatch('confirm')
      } else {
        this.$showMessage("网络异常，请稍后再试！")
      }
      this.cancle()
    },
    async black(){
      if (!this.model.f_remark || this.model.f_remark.trim() === '') {
        this.$showMessage("请填写拉黑原因");
        return;
      }
      if (!this.model.f_limit_type || this.model.f_limit_type.trim() === '') {
        this.$showMessage("请填写限购方式");
        return;
      }
      if (this.model.f_limit_type == '气量'){
        if (!this.model.f_limit_value || this.model.f_limit_value.trim() === '') {
          this.$showMessage("请填写限购气量");
          return;
        }
      }else {
        if (!this.model.f_limit_amount || this.model.f_limit_amount.trim() === '') {
          this.$showMessage("请填写限购金额");
          return;
        }
      }
      this.busy = true
      setTimeout(() => {
        this.busy = false
      }, 5000)
      let res2 = await new HttpResetClass().load('POST', `${this.$androidUtil.getProxyUrl()}/rs/logic/backlistOperate`, {
        data: {
          "f_operat_type": "拉黑",
          "f_state": "有效",
          "f_user_name": this.model.f_user_name,
          "f_comments": this.model.f_remark,
          "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.model.f_user_name}进行拉黑`,
          "f_userinfo_id": {
            "f_userinfo_id": this.model.f_userinfo_id
          },
          "f_limit_times":this.model.f_limit_times,
          "f_limit_value":this.model.f_limit_value,
          "f_limit_amount":this.model.f_limit_amount,
          'f_limit_type':this.model.f_limit_type
        }
      }, {resolveMsg: null, rejectMsg: null})
      this.busy = false
      if (res2.data.code == 200) {
        this.$showMessage("将该用户限制购气成功！")
        this.$dispatch('confirm')
      } else if (res2.data.msg == '数据增加重复') {
        this.$showMessage("该用户已被限制购气，请勿重复提交！")
        this.$dispatch('confirm')
      } else {
        this.$showMessage("网络异常，请稍后再试！")
      }
    },
    async initList(){
      const blackList = await new HttpResetClass().load("POST", `${this.$androidUtil.getProxyUrl()}/rs/sql/safe_singleTable_OrderBy`, {
        data: {
          items: "b.*",
          tablename: "t_userproperties a left join t_record b on a.f_record_id = b.id",
          orderitem: "a.id",
          condition: `a.f_userinfo_id = '${this.model.f_userinfo_id}' and a.f_parameter_key = 'blackList'`
        }
      }, {resolveMsg: null, rejectMsg: null})
      console.log(blackList)
      this.list = blackList.data
    }
  },
  async ready() {
    this.model = JSON.parse(JSON.stringify(this.item))
    this.$set('model.f_limit_times','')
    this.$set('model.f_limit_value','')
    this.$set('model.f_limit_amount','')
    const blackList = await new HttpResetClass().load("POST", `${this.$androidUtil.getProxyUrl()}/rs/sql/safe_singleTable_OrderBy`, {
      data: {
        items: "*",
        tablename: "t_userproperties",
        orderitem: "id",
        condition: `f_userinfo_id = '${this.model.f_userinfo_id}' and f_state = '有效' and f_parameter_key = 'blackList'`
      }
    }, {resolveMsg: null, rejectMsg: null})
    if (blackList.data.length > 0){
      await this.initList()
      this.liftUser = true
    }else {
      this.blackUser = true
    }

  },
}
</script>
<style lang="less" scoped>

.btn{
  display: block;
  margin: 0 auto;
}

.btn-font{
  font:600 16px PingFang-SC-Bold;
  color: #499EDF;
}
.btn-color{
  background-color: #FFFFFF;
  border-radius: 10px ;
  border: 1px solid #499EDF;
}

.butt3 {
  float: right;
  width: 12px;
  margin: 1% 2% 0 0;
}

.rightipt {
  width: 60%;
  float: left;
  margin-left: 5%;
}

.righttxt {
  border: none;
  margin-left: 5px;
  /*border-left: 5px solid #A2C2EB;*/
  float: left;
  width: 25%;
  margin-bottom: 3px;
  text-align: left;
  word-wrap: break-word;
  white-space: normal;
}

.tit1 {
  background-repeat: no-repeat;
  background-position: center;
}

.spanboder {
  border-bottom: 2px solid #499edf;
  padding-bottom: 8px
}

#upuserinfo_sel /deep/ ul {
  width: 100% !important;
  left: 0 !important;
}

.btn-photo {
  border: 0;
  border-radius: 7px;
  background-color: #7dc1f4;
  font: 15px PingFang-SC-Bold;
  height: 20%;
}

.panel-self {
  border-radius: 10px;
  border: 1px solid #499EDF;
  background-color: #F8F8F8;
}

.div-photo {
  width: auto;
  height: auto;
  /* margin-top: 10px; */
  position: absolute;
  bottom: 10px;
  right: 10px;
}
</style>
<style lang="less">
#upuserinfo_sel ul {
  width: 100% !important;
  left: 0 !important;
}
</style>
