<template>
  <div class="flex-auto" style="overflow-y: scroll;height: 55%">
    <validator name='v'>
      <form novalidate class="form-horizontal select-overspread ">
        <ul class="nav nav-tabs">
          <li class="active a-tabs"><a href="#">用户拉黑</a></li>
        </ul>
        <div>
          <div class="row">
            <div class="col-sm-4 form-group" id="f_user_id">
              <label for="f_userinfo_code" class="font_normal_body">表&emsp;&emsp;号</label>
              <input class="input_search" style="width:60%" type="text"
                     v-model="model.f_meternumber"
                     :disabled='isEdit' placeholder="表号">
            </div>
            <div class="col-sm-4 form-group" id="f_user_id">
              <label for="f_userinfo_code" class="font_normal_body">卡&emsp;&emsp;号</label>
              <input class="input_search" style="width:60%" type="text"
                     v-model="model.f_card_id"
                     :disabled='isEdit' placeholder="卡号">
            </div>
            <div class="col-sm-4 form-group" id="f_user_id" :class="[$v.f_userinfo_code.required ? 'has-error' : 'has-success']">
              <label for="f_userinfo_code" class="font_normal_body">用户编号</label>
              <input class="input_search" style="width:60%" type="text" class="input_search" style="width:60%"
                     v-model="model.f_userinfo_code"
                     v-validate:f_userinfo_code='{required: true }' :disabled='isEdit' placeholder="用户编号">
            </div>
            <div class="col-sm-4 form-group" id="name"  :class="[$v.f_user_name.required ? 'has-error' : 'has-success']">
              <label for="f_user_name" class=" font_normal_body">用户姓名</label>
              <input class="input_search" style="width:60%" type="text" class="input_search" style="width:60%"   v-validate:f_user_name='{required: true }'
                     v-model="model.f_user_name" readonly
                     placeholder="用户姓名">

            </div>
            <div class="col-sm-4 form-group" id="phone">
              <label for="f_user_phone" class=" font_normal_body">联系方式</label>
              <input class="input_search" style="width:60%" type="text" class="input_search" style="width:60%"
                     v-model="model.f_user_phone" readonly
                     placeholder="联系方式">

            </div>
            <div class="col-sm-4 form-group" id="f_limit_times" :class="[$v.f_limit_times.required ? 'has-error' : 'has-success']">
              <!--              <label for="f_limit_times" class=" font_normal_body">限购次数</label>-->
              <label class="font_normal_body">限购次数</label>
              <input class="input_search" style="width:60%" type="number"
                     v-model="model.f_limit_times"   v-validate:f_limit_times='{required: true }'
                     placeholder="限购次数">

            </div>
            <div class="col-sm-2 form-group" id="f_limit">
              <!--              <label for="f_limit_times" class=" font_normal_body">限购次数</label>-->
              <v-select
                v-model="f_limit"
                :value.sync="f_limit"
                :options='limites'
                width="100%"
                close-on-select>
              </v-select>
            </div>
            <div class="col-sm-3 form-group" id="f_limit_gas" style="right: 3%;">
              <input class="input_search" style="width:60%" type="number" v-if="f_limit=='限购气量'"
                     v-model="model.f_limit_value"
                     v-scale="[model.f_limit_value, 2]"
                     @click="gg()"
                     placeholder="限购气量">
              <input class="input_search" type="number" v-if="f_limit=='限购金额'"
                     v-model="model.f_limit_amount"
                     v-scale="[model.f_limit_amount, 2]"
                     @click="gg()"
                     placeholder="限购金额">

            </div>
          </div>

          <div class="row">
            <div class="col-sm-12 form-group" id="address">
              <label for="f_address" class=" font_normal_body">地&emsp;&emsp;址</label>
              <input class="input_search" type="text" class="input_search" style="width:87%" v-model="model.f_address"
                     readonly
                     placeholder="地址">
            </div>
            <div class="col-sm-12 form-group" id="f_comments" :class="[$v.f_comments.required ? 'has-error' : 'has-success']">
              <label for="f_comments" class=" font_normal_body">原&emsp;&emsp;因</label>
              <input class="input_search" type="text" class="input_search" style="width:87%" v-model="model.f_comments"
                     placeholder="原因" v-validate:f_comments='{required: true }' >
            </div>

          </div>

          <div style="text-align:right;height:auto;margin-top:6px;">
            <button class="button_search" type="button" style="width:80px;" @click="confirm('拉黑')" v-show="model.isblacklist =='false'" :disabled='!$v.valid'>
              拉黑
            </button>
            <button class="button_search"  type="button"  style="width:80px;" @click="confirm('取消拉黑')"
                    v-show="model.isblacklist =='true'" :disabled='!$v.valid'>
              取消拉黑
            </button>
            <button class="button_export"  type="button"  style="width:80px;" @click="close()">取消</button>
          </div>
        </div>

      </form>


    </validator>

  </div>
</template>
<script>
  import {HttpResetClass} from 'vue-client'
  import Vue from 'vue'
  let initGen = async function (self, val) {
  // 获取低保气价
    let http = new HttpResetClass()
    let res = await http.load('POST', 'rs/sql/sale_getUserAndVersion', {data: {condition:`f_userinfo_code='${self.data.f_userinfo_code}'` , f_orgid: self.$login.f.orgid}}, {
      resolveMsg: null,
      rejectMsg: null
    })
    console.log(res.data)
    console.log('用户id:' + res.data[0].f_userinfo_id)
    self.model = Object.assign({}, self.model, val)
    self.model.f_userinfo_code = res.data[0].f_userinfo_code
    self.model.f_meternumber = res.data[0].f_meternumber
    self.model.f_card_id = res.data[0].f_card_id
    self.model.f_userinfo_id = res.data[0].f_userinfo_id
    self.model.f_user_phone = res.data[0].f_user_phone
    self.model.f_address = res.data[0].f_address
    self.model.f_user_phone = res.data[0].f_user_phone
    self.model.version = res.data[0].version
    self.model.f_limit_value=res.data[0].f_limit_value
    self.model.f_limit_times=res.data[0].f_limit_times
    self.model.f_limit_amount=res.data[0].f_limit_amount
    self.model.isblacklist = res.data[0].isblacklist
  }

  export default {
    title: '黑名单',
    props: {
      f_islow_income: {
        type: String,
        default: '1'
      },
      data: {
        type: Object
      }
    },
    data () {
      return {
        pricename: [{value: '', label: ''}],
        model: {
          f_userinfo_code: '',
          f_userinfo_id: '',
          f_user_name: '',
          f_address: '',
          f_user_phone: '',
          f_comments: '',
          version: null,
          // 限购次数
          f_limit_times: '',
          // 限购气量
          f_limit_value: '',
          // 限购金额
          f_limit_amount: ''

        },
        // 编辑控制
        isBlackList: false,
        f_filialeid: '',  // 所属公司
        f_filialename: '',  // 所属公司名称
        f_limit: '限购气量',
        limites: [{label: '限购气量', value: '限购气量'}, {label: '限购金额', value: '限购金额'}]

      }
    },
    ready () {
      initGen(this, this.data)
    },
    watch: {
      'data' (val) {
        initGen(this, val)
      }
    },
    methods: {
      gg () {
        if (this.f_limit[0] === '限购气量') {
          this.model.f_limit_amount = ''
        } else {
          this.model.f_limit_value = ''
        }
      },
      getinfo (type) {
        var condition =`${type} = '${this.model[type]}'`
        this.$resetpost('rs/sql/sale_getUserAndVersion', {data: {condition: condition, f_orgid: this.$login.f.orgid}}, {
          resolveMsg: null,
          rejectMsg: null
        }).then((res) => {
          console.log(res.data[0])
          this.model = res.data[0]
          this.$parent.blodid = this.model.f_userinfo_id
        })
      },
      async confirm (type) {
        if (type == '取消拉黑' && !this.$login.r.find(value => value == '取消拉黑')) {
          this.$showMessage('你没有取消拉黑的权限,请联系管理员!')
          return
        }
        let data = {
          f_operat_type: type,
          f_state: '有效',
          f_user_id: this.model.f_user_id,
          f_user_name: this.model.f_user_name,
          f_comments: this.model.f_comments,
          f_operator: this.$login.f.name,
          f_operatorid: this.$login.f.id,
          f_orgid: this.$login.f.orgid,
          f_orgname: this.$login.f.orgs,
          f_depid: this.$login.f.depids,
          f_depname: this.$login.f.deps,
          f_operate_date: this.$login.toStandardTimeString(),
          f_describe: `${this.$login.f.name}对客户${this.model.f_user_name}进行${type}`,
          f_userinfo_id: {
            f_userinfo_id: this.model.f_userinfo_id,
            f_user_state: '正常',
            version: this.model.version
          },
          f_limit_times: this.model.f_limit_times,
          f_limit_amount: this.model.f_limit_amount,
          f_limit_value: this.model.f_limit_value
        }
        console.log('查看参数data', data)
        let res =await this.$resetpost('rs/logic/backlistOperate', data,{resolveMsg: null, rejectMsg: null})
        if (res.data.code == 200) {
          this.$showMessage(`${type}成功`)
        }
        if (res.data.code == 500) {
          this.$showMessage(`${type}失败,用户已被拉黑,请先取消拉黑`)
          return
        }
        this.initModel()
        this.$dispatch('success')
      },
      getorg (id, name) {
        this.f_filialeid = id[0]
        this.f_filialename = name[0]
      },
      initModel () {
        this.model = {
          f_userinfo_code: '',
          f_userinfo_id: '',
          f_user_name: '',
          f_address: '',
          f_user_phone: '',
          f_comments: '',
          version: null,
          isblacklist: 'false'
        }
      },
      close () {
        this.$dispatch('close')
      }
    }
  }
</script>
<style lang="less">
  #gas-price-form {
    .form-group {
      margin-left: 0px;
      margin-right: 0px;
    }
  }

</style>
