<template>
  <div class="flex-data">
    <div class="span" style="overflow-y: scroll">
      <validator name='v'>
        <form novalidate class="form-horizontal select-overspread">
          <p class="bg-info text-center" style="padding: 8px;">档案信息</p>
          <div class="row" style="margin-top:10px;">
            <div class="col-sm-4">
              <label for="f_user_name" class="font_normal_body ">客户姓名</label>
              <input class="input_search " style="width:60%"  v-model="model.f_user_name" placeholder='客户姓名'
                     :value="data.f_user_name">
            </div>
            <div class="col-sm-4">
              <label for="f_user_phone" class="font_normal_body ">客户电话</label>
              <input class="input_search " style="width:60%"  v-model="model.f_user_phone" placeholder='电话'
                     :value="data.f_user_phone">
            </div>
            <div class="col-sm-4">
              <label for="f_idnumber" class="font_normal_body ">证件号码</label>
              <input class="input_search " style="width:60%"  v-model="model.f_idnumber" placeholder='证件号码'
                     :value="data.f_idnumber">
            </div>
          </div>
          <div class="row" style="margin-top:10px;">
            <div class="col-sm-4">
              <label for="f_address" class="font_normal_body ">客户地址</label>
              <input class="input_search " style="width:60%"  v-model="model.f_address" placeholder='客户地址' readonly
                     :value="data.f_address">
            </div>

            <div :class="[$m.f_gasbrand_id.required ? 'has-error' : 'has-success']" class="col-sm-4">
              <input type="text" v-show="false" v-model="model.f_gasbrand"
                     v-validate:f_gasbrand_id='{required: true }' >

              <label for="f_gasbrand_id" class=" font_normal_body">气表品牌</label>
              <v-select :value.sync="model.f_gasbrand" @change="verifigasbrand()"
                        :options='meterbrands'
                        :placeholder="model.f_gasbrand[0]!==null?model.f_gasbrand[0].f_meter_brand:'请选择'"
                        v-model='model.f_gasbrand'

                        v-ref:brand
                        close-on-select>
              </v-select>
            </div>


            <div :class="[$m.f_gasmodel_id.required ? 'has-error' : 'has-success']" class="col-sm-4">
              <input type="text" v-show="false" v-model="model.f_gasmodel"
                     v-validate:f_gasmodel_id='{required: true }'>
              <label for="f_gasmodel_id" class=" font_normal_body">气表型号</label>
              <v-select :value.sync="model.f_gasmodel"
                        :options='model.f_gasbrand[0].gasmodel'
                        :placeholder="model.f_gasbrand[0]!==null?model.f_gasbrand[0].f_meter_style:'请选择'"
                        close-on-select

                        v-model='model.f_gasmodel'
                        v-ref:model></v-select>


            </div>
          </div>
          <div class="row" style="margin-top:10px;">
            <div class="col-sm-4"
                 :class="[$m.gas.required ? 'select-error' : '']">
              <label for="f_username" class="font_normal_body">用气性质</label>
              <input type="text" v-show="false" v-model="model.f_gasproperties" v-validate:gas='{required: true }'>
              <v-select :value.sync="model.f_gasproperties" v-model="model.f_gasproperties"
                        :options='gasproperties' placeholder='用气性质'
                        close-on-select v-ref:gas></v-select>
            </div>
            <div class="col-sm-4" :class="[$m.type.required ? 'select-error' : '']">
              <label for="pricetype" class="font_normal_body">气价类型</label>
              <v-select :value.sync="model.f_price_type" v-model="model.f_price_type"
                        placeholder='气价类型' :options="pricetypes"
                        close-on-select v-ref:type>
              </v-select>
              <input type="text" v-show="false" v-model="model.f_price_type" v-validate:type='{required: true }'>
            </div>
            <div class="col-sm-4" :class="[$m.name.required ? 'select-error' : '']">
              <label for="pricename" class="font_normal_body">气价名称</label>
              <v-select :value.sync="model.f_price_name" v-model="model.f_price_name"
                        :placeholder="data.f_price_name!==null?data.f_price_name:'请选择'"
                        :options="getPricenames(model.f_price_type)"
                        close-on-select :disabled='model.f_price_type.length === 0 ' v-ref:name></v-select>
              <input type="text" v-show="false" v-model="model.f_price_name" v-validate:name='{required: true }'>
              <span class="col-sm-12" v-if="model.f_price_type.length === 1 && gasproperties.length === 0"
                    style="color:red;text-align:right">请确定用气性质已选择！！</span>
            </div>
          </div>


        </form>
        <div style="text-align:right;">
          <button class="button_search" @click="confirm()" :disabled='!$v.valid || validateOk'>确认</button>
          <button class="button_clear" @click="close">取消</button>
        </div>
      </validator>

    </div>
  </div>
</template>
<script>


  export default {
    title: '其他收费',
    data () {
      return {
        model: {
          f_userfiles_id:'',
          f_user_name:'',
          f_user_phone:'',
          f_idnumber:'',
          f_gasproperties: [],
          f_gasbrand:[],
          f_gasmodel:[],
          f_address:'',
          f_price_id:'',
          f_gasbrand_id:'',
          f_gasmodel_id:'',
          // f_meter_brand:'',
          // f_meter_style:'',
          f_price_type:'',
          f_price_name:'',
          f_filialeid:'',
        },
        gasproperties: [],
        validateOk: false,
        pricetypes: this.$appdata.getParam('气价类型')
      }
    },
    props: ['data'],
    ready(){
      this.gasproperties=this.$appdata.getParam(this.data.f_user_type)
      if(this.data.f_gasproperties){
        this.model.f_gasproperties.push(this.data.f_gasproperties)
      }
      if(this.data.f_price_type){
        this.model.f_price_type.push(this.data.f_price_type)
      }
      if(this.data.f_gasmodel_id){
        this.model.f_gasmodel.push({
          f_gasbrand_id:this.data.f_gasbrand_id,
          f_meter_style:this.data.f_meter_style,
          id:this.data.f_gasmodel_id
        })
      }
      if(this.data.f_price_name){
        this.model.f_price_name.push({
          f_price_id:this.data.f_price_id,
          f_price_name:this.data.f_price_name
        })
      }

      if(this.data.f_meter_brand){
        this.model.f_gasbrand.push({
          id:this.data.f_gasbrand_id,
          f_meter_style:this.data.f_meter_style,
          f_type:this.data.f_type,
          f_meter_brand:this.data.f_meter_brand,
          f_gasbrand_id:this.data.f_gasbrand_id,
          f_meter_type:this.data.f_meter_type
        })
      }
      this.model.f_userfiles_id=this.data.f_userfiles_id
      this.model.f_user_type=this.data.f_user_type
      this.model.f_filialeid=this.$login.f.orgid
      this.model.f_userinfo_id=this.data.f_userinfo_id
    },
    watch: {
      'model.f_user_type' () {

      }
    },
    methods: {
      async confirm () {
        this.model.f_gasbrand_id=this.model.f_gasmodel[0].f_gasbrand_id
        this.model.f_gasmodel_id=this.model.f_gasmodel[0].id
        this.model.f_price_id=this.model.f_price_name[0].f_price_id
        this.model.f_gasproperties = this.model.f_gasproperties[0]
        // this.model.version=parseInt(this.data.version)+1
        // this.model.userinfo_version=parseInt(this.data.userinfo_version)+1
        this.model.f_user_name=this.data.f_user_name
        this.model.f_user_phone=this.data.f_user_phone
        this.model.f_meter_classify=this.model.f_gasbrand[0].f_meter_type
        // this.$resetpost('rs/entity/t_userfiles', this.model, {resolveMsg: "档案信息已完善成功", rejectMsg: "档案信息完善失败"})
        await this.$resetpost('rs/logic/file_complete', this.model, {resolveMsg: "档案信息已完善成功", rejectMsg: "档案信息完善失败"})
        this.clean()
      },
      clean () {
        this.$dispatch('success', 'filesNotComplete')
      },
      close () {
        this.$dispatch('close')
      },

      getPricenames (f_price_type) {
        console.log('气价。，。。', f_price_type, this.data.f_user_type, this.data.f_gasproperties)
        console.log(this.model.f_gasproperties.length)
        console.log(f_price_type.length)
        let rs = []
        if (this.model.f_gasproperties.length === 1 && f_price_type.length === 1) {
          console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~进了if")
          let params = {
            f_user_type: this.model.f_user_type,
            f_gasproperties: this.model.f_gasproperties[0],
            f_price_type: f_price_type[0],
            filter: this.$login.f.orgid
          }
          rs = this.$GetSaleParam.getPrice(params)
        }
        if (rs.length === 0) {
          this.model.f_price_name = ''
        }
        return rs
      },
      printok () {
        this.$dispatch('success')
      },
      validateBill (val) {
        this.validateOk = !val.isOk

      },

      verifigasbrand(){
        this.verifi()
      },
      verifi(){
        if((this.data == null) && (this.model.f_meternumber) && (this.model.f_gasbrand)){
          veri(this)
        }
      }
    },
    computed: {
      meterbrands() {
        return this.$GetSaleParam.getGasbrand()
      }
    }
  }
</script>

<style>
</style>
