<template>
  <div class="span">
    <validator name='v' style="overflow-y: auto">
      <form novalidate class="form-horizontal select-overspread" @valid="confirmEditcheck = true" @invalid="confirmEditcheck = false">

        <ul class="nav nav-tabs">
          <li class="active"><a>领用表具</a></li>
        </ul>
        <div class="row" style="margin-top: 20px;">
          <div class="col-sm-6" :class="[f_receive_unit.required ? 'has-error' : '']" >
            <label class="font_normal_body">&nbsp;&nbsp;*领用人&nbsp;&nbsp;&nbsp;</label>
            <!--            <input type="text" v-show="false" v-model="f_receive_unit" v-validate:brand='{required: true }'>-->
            <input type="text" v-model="f_receive_unit" v-show="false" class="input_search" style="width:60%" v-validate:brand='{required: true }' placeholder="领用人">
            <v-select style="width:60%" title="领用人"
                      placeholder='领用人'
                      :value.sync="f_receive_unit"
                      v-model="f_receive_unit"
                      :options='receiveUnit'
                      close-on-select
                      :value-single="true" v-ref:brand>  </v-select>
          </div>

          <div class="col-sm-6" >
            <label class="font_normal_body">&nbsp;&nbsp;&nbsp;领用数量</label>
            <input type="text" v-model="$parent.meterinfos.length" disabled="disabled" class="input_search" style="width:60%" placeholder="领用数量">
          </div>
          <div class="col-sm-6" >
            <label class="font_normal_body">领用人电话</label>
            <input type="text" v-model="f_phone_number" class="input_search" style="width:60%" placeholder="领用人电话">
          </div>
          <div class="col-sm-6" >
            <label class="font_normal_body">&nbsp;&nbsp;&nbsp;操作日期</label>
            <datepicker  placeholder="操作日期" style="width: 60%"
                         v-model="f_operate_date"
                         :value.sync="f_operate_date"
                         :format="'yyyy-MM-dd HH:mm:ss'">
            </datepicker>
          </div>
          <div class="col-sm-12" style="text-align:right;height:auto;margin-top:6px;">
            <button class="button_search" type="button" @click="confirmEdit()" :disabled="!confirmEditcheck||$parent.meterinfos.length<1">领表</button>
            <button class="button_clear" type="button" @click="close()">取消</button>
          </div>
        </div>
        <div class="row">
          <div class=" text-center"  style="overflow:auto;">
            <table  class="table table-striped table-bordered" >
              <tr align="center">

                <th style="text-align: center">操作</th>
                <th style="text-align: center">表号</th>
                <th style="text-align: center">批次</th>
                <th style="text-align: center">生产日期</th>
                <th style="text-align: center">批次号</th>
                <th style="text-align: center">气表厂家</th>
              </tr>
              <tr style="text-align: center" v-for="row in $parent.meterinfos">
                <td style="text-align: center">
                  <button class="btn btn-danger width-5" @click="deleteDevice($index,row)">移除</button>
                </td>
                <td style="text-align: center" >{{row.f_meternumber}}</td>
                <td style="text-align: center" >{{row.f_batch_number}}</td>
                <td style="text-align: center" >{{row.f_manufacture_date}}</td>
                <td style="text-align: center" >{{row.f_batch_number}}</td>
                <td style="text-align: center" >{{row.f_manufacturers}}</td>
              </tr>
            </table>
          </div>
        </div>

      </form>
    </validator>
  </div>
</template>


<script>
let readyGen = async function (self) {
  await self.$LoadParams.loadParam()
  let date = new Date()
  self.f_operate_date = self.$login.toStandardDateString() + " "
     + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds()
}
export default {
  title: '表计信息修改',
  props: ['meterinfos', 'f_filialeid'],
  data () {
    return {
      row: {},
      meterbrand: [],
      newmeterinfo: {},
      confirmEditcheck: false,
      meterstyle: [],
      f_operate_date: '',
      f_receive_unit: '',
      f_phone_number: ''
    }
  },
  ready () {
    this.newmeterinfo = Object.assign({}, {}, this.oldmeter)
    readyGen(this)
  },
  watch: {
    'oldmeter' () {
      this.newmeterinfo = Object.assign({}, {}, this.oldmeter)
    },
    'newmeterinfo.f_meter_brand' () {
      if (this.newmeterinfo.f_meter_brand == null || this.newmeterinfo.f_meter_brand == '') return
      let gasmodels = []
      let gastype = []
      this.$GetSaleParam.getGasbrand().forEach((item) => {
        if (item.label == this.newmeterinfo.f_meter_brand) {
          gasmodels = item.value.gasmodel
        }
      })
      gasmodels.forEach((items) => {
        let temp = {}
        temp.label = items.label
        temp.value = items.value.f_meter_style + items.value.f_type
        gastype.push(temp)
      })
      this.meterstyle = gastype
    }
  },
  methods: {
    deleteDevice (index, row) {
      console.log('删除的信息', row)
      this.$parent.meterinfos.splice(index, 1)
      console.log('这是login',this.$login.f)
    },
    async onbulrbunmber ($event) {
      if ($event.target.value === '') {
        return
      }
      let expiration = await this.$resetpost('rs/sql/singleTable_OrderBy', {data:
          {orderitem: 'id',
            items: 'f_meternumber',
            tablename: 't_meterinfo',
            condition: 'f_meternumber = \'' + $event.target.value + '\''}}, {resolveMsg: '', rejectMsg: ''})

      console.log(expiration)
      if (expiration.data.length !== 0) {
        this.$showMessage('表号已经存在')
      }
    },
    close () {
      this.$parent.meterinfos = []
      this.$dispatch('close')
    },
    confirmEdit () {
      let ope = {
        'f_orgid': this.$login.f.orgid,
        'f_filialeid': this.f_filialeid,
        'f_operatorid': this.$login.f.id,
        'f_depid': this.$login.f.parentid,
        'f_operate_date': this.f_operate_date,
        'f_number': this.$parent.meterinfos.length,
        'f_receive_unit': this.f_receive_unit,
        'f_phone_number': this.f_phone_number,
        'f_operat_type': '领用',
        'f_operator': this.$login.f.ename,
        'f_state': '有效',
        'f_orgname': this.$login.f.orgs,
        'f_depname': this.$login.f.parentname
      }
      // setUseMeterInfo
      this.$resetpost('rs/logic/setUseMeterInfo', {
        'meterinfos': this.$parent.meterinfos,
        'operate': ope
      }).then((res) => {
        console.log('this.model', this.model)
        this.close()
      })
      // this.close()
    }
  },
  computed: {
    meterbrands () {
      return this.$GetSaleParam.getGasbrand()
    },
    receiveUnit () {
      return this.$appdata.getParam('领用人')
    }
  }
}
</script>
