<template>
  <div class="auto" id="userAddress" style="height:80%">
    <validator name='v'>
      <div class="auto select-overspread form-horizontal">
        <div style="margin-top: 2%;">
          <a style="font-size: 16px;font-weight: 500;">总表信息</a>&nbsp;<a style="color: #999999;text-decoration: none"></a>
        </div>
        <div class="row">
          <div class="col-sm-4 form-group ">
            <label for="f_meternumber" class="font_normal_body">总表表号</label>
            <input type="text"
                   v-model="model.f_meternumber"
                   class="input_search"
                   style="width:60%"
                   placeholder="总表表号"
                   v-next-el="f_meternumber" readonly/>
          </div>
          <div class="col-sm-4 form-group " :class="[$v.f_meter_name.required ? 'has-error' : '']">
            <label for="f_user_name" class="font_normal_body">总表名称</label>
            <input type="text"
                   v-model="model.f_user_name"
                   v-validate:f_user_name='{required: true }'
                   class="input_search" style="width:60%"
                   placeholder="总表名称"
                   v-next-el="f_user_name" readonly/>
          </div>
          <div style="" class="col-sm-4 form-group">
            <label for="f_legal_phone" class="font_normal_body">联系电话</label>
            <input type="text"
                   maxlength="11"
                   v-model="model.f_user_phone"
                   class="input_search" style="width:60%"
                   placeholder="联系电话"
                   readonly
                   v-el:f_user_phone v-next-el="f_user_phone"/>
          </div>
          <div class="col-sm-4 form-group ">
            <label for="f_meter_brand" class="font_normal_body">气表品牌</label>
            <input type="text"
                   v-model="model.f_meter_brand"
                   class="input_search"
                   style="width:60%"
                   placeholder="气表品牌"
                   v-next-el="f_meter_brand" readonly/>
          </div>
          <div class="col-sm-4 form-group ">
            <label for="f_meter_style" class="font_normal_body">气表型号</label>
            <input type="text"
                   v-model="model.f_meter_style"
                   class="input_search"
                   style="width:60%"
                   placeholder="气表型号"
                   v-next-el="f_meter_style" readonly/>
          </div>
          <div class="col-sm-4 form-group " :class="[$v.settlement.required ? 'has-error' : '']">
            <label class="font_normal_body">是否结算</label>
            <input type="text" v-show="false" v-model="$refs.settlement.selectedItems"
                   v-validate:settlement='{required: true }'>
            <v-select :options='settlements'
                      :value.sync="model.f_settlement"
                      close-on-select enter-push
                      placeholder='是否结算'
                      style="width:60%"
                      :value-single="true"
                      v-ref:settlement
                      v-model="model.f_settlement">
            </v-select>
          </div>
          <div class="col-sm-12 form-group " :class="[$v.f_address.required ? 'has-error' : '']">
            <label for="详细地址" class="font_normal_body">详细地址</label>
            <input type="text"
                   v-model="model.f_address"
                   v-validate:f_address='{required: true }'
                   class="input_search"
                   placeholder="详细地址"
                   style="width:86.5%;"
                   v-next-el="f_address" readonly/>
          </div>
          <!--  备注  -->
          <div style="" class="col-sm-12 form-group">
            <label for="f_comments" class="font_normal_body ">备&emsp;&emsp;注</label>
            <input class="input_search"
                   style="width:86.5%"
                   v-model="model.f_comments"/>
          </div>
        </div>
        <div class="row">
          <div style="text-align:right;">
            <button class="button_search button_spacing" @click="reSelect()" :disabled='!model.f_host_meter_id'>重新选择总表</button>
            <button class="button_search button_spacing" @click="confirm()" :disabled='!$v.valid'>保存</button>
            <button class="button_clear button_spacing" @click="cancel()">取消</button>
          </div>
        </div>
      </div>
    </validator>
    <add-host-meter-user-list :f_filialeids="f_filialeids"
                              v-if="userListShow"
                              :show.sync="userListShow">
    </add-host-meter-user-list>
  </div>
</template>

<script>
import {HttpResetClass} from 'vue-client'

let readySomething = async function (self) {
  self.getUserFilesList()
}

export default {
  title: '总表信息',
  data () {
    return {
      essentialInfo: false,
      userfiles: [],
      userListShow: false,
      model: {
        f_user_name: '',
        f_meternumber: '',
        f_user_phone: '',
        f_address: '',
        f_meter_brand: '',
        f_meter_style: '',
        f_comments: '',
        f_settlement: '',
        f_user_id: ''
      }
    }
  },
  props: ['f_filialeids', 'row'],
  ready () {
    readySomething(this)
    if (this.row) { // 修改总表
      this.model = Object.assign({}, this.model, this.row)
    }
    if (!this.model.f_settlement) {
      this.model.f_settlement = '否'
    }
  },
  methods: {
    reSelect () {
      if (!this.$login.r.find(value => value == '重新选择总表')) {
        this.$showAlert('你没有【重新选择总表】的权限，请联系管理员', 'warning', 2000)
        return
      }
      this.userListShow = true
    },
    getUserFilesList (searchText) {
      let condition = `1=1 and f_orgid = '${this.f_filialeids}'`
      if (searchText) {
        condition = condition + ` and f_user_name like '%${searchText}%' `
      }
      if (!this.row) {
        condition = condition + ` `
      }
      let HttpReset = new HttpResetClass()
      HttpReset.load('POST', 'rs/sql/sale_getUnboundHostMeter?pageNo=1&pageSize=100', {
        data: {
          condition: condition
        }
      }, {resolveMsg: null, rejectMsg: '获取用户档案信息失败!'}).then((req) => {
        let redata = []
        req.data.forEach((row, n) => {
          redata[n] = {
            label: row.f_user_name,
            value: row.f_user_id
          }
        })
        this.userfiles = redata
      })
    },
    // 保存
    async confirm () {
      this.model.f_operate_date = this.$login.toStandardTimeString()
      this.model.f_operator = this.$login.f.name
      this.model.f_operatorid = this.$login.f.id
      this.model.f_orgid = this.$login.f.orgid
      this.model.f_filialeid = this.$login.f.orgid
      this.model.f_orgname = this.$login.f.orgs
      this.model.f_depid = this.$login.f.depids
      this.model.f_depname = this.$login.f.deps
      console.log('保存数据之前', this.model)
      await this.$resetpost('rs/logic/sale_hostMeterFileSave', this.model)
      this.$dispatch('confirm')
    },
    cancel () {
      this.$dispatch('cancel')
    }
  },
  computed: {
    settlements () {
      return this.$appdata.getParam('总表是否结算')
    },
    meterbrands () {
      return this.$GetSaleParam.getGasbrand()
    }
  },
  events: {
    'selectUser' (row) {
      this.userListShow = false
      this.model = Object.assign({}, this.model, row)
    }
  },
  watch: {
    async 'row' (val) {
      console.log('观察row', val)
      if (val) {
        this.model = Object.assign({}, this.model, val)
      }
    },
    'f_filialeids': {
      immediate: true,
      deep: true,
      handler () {
      }
    }
  }
}
</script>
