<template>
  <div class="flex">
    <validator name='v'>
      <form novalidate class="form-horizontal">
        <div class="form-group">
          <label for="f_user_name" class="col-sm-2 control-label ">用户姓名：</label>
          <div class="col-sm-2">
              <input type="text"  v-model="model.f_username" class="form-control" id="f_user_name" v-validate:f_user_name='{ required: true }'>
          </div>

          <label for="f_user_phone" class="col-sm-2 control-label">用户电话</label>
          <div class="col-sm-2">
              <input type="text" v-model="model.f_phone" class="form-control" id="f_user_phone" v-validate:f_user_name='{ required: true }'>
          </div>

          <label for="f_subcompany" class="col-sm-2 control-label">所属分公司：</label>
          <div class="col-sm-2">
            <v-select id="f_subcompany"
            placeholder='请选择分公司'
            :value.sync="f_division"
            :options='f_divisions'
            close-on-select clear-button></v-select>
          </div>
        </div>

        <div class="form-group">
          <label for="f_last_check_date" class="col-sm-2 control-label ">最后安检日期：</label>
          <div class="col-sm-2">
            <datepicker id="startdate"
              :value.sync="f_last_check_date"
              :disabled-days-of-Week="[]"
              :format="'yyyy-MM-dd'" >
            </datepicker>
          </div>

          <label for="f_last_check_state" class="col-sm-2 control-label">最后安检状态：</label>
          <div class="col-sm-2">
            <v-select id="f_last_check_state"
            placeholder='请选择'
            :value.sync="f_last_check_state"
            :options='f_last_check_state_opt'
            close-on-select clear-button></v-select>
          </div>

          <label for="f_checker" class="col-sm-2 control-label">安检负责人：</label>
          <div class="col-sm-2">
            <v-select id="f_checker"
            placeholder='请选择'
            :value.sync="f_checker_selected"
            :options='f_checkers'
            close-on-select clear-button></v-select>
          </div>
        </div>

        <div class="form-group">

          <label for="f_archive_date" class="col-sm-2 control-label">建档日期：</label>
          <div class="col-sm-2">
              <datepicker id="startdate"
                :value.sync="f_archive_date"
                :disabled-days-of-Week="[]"
                :format="'yyyy-MM-dd'">
              </datepicker>
          </div>

          <label for="f_user_type" class="col-sm-2 control-label">用户类型：</label>
          <div class="col-sm-2">
            <v-select id="f_user_type"
            placeholder='请选择'
            :value.sync="f_user_type"
            :options='f_user_type_opt'
            close-on-select clear-button></v-select>
          </div>

             <label for="f_street"  class="col-sm-2 control-label">街道:</label>
             <div class="col-sm-2">
               <input type="text" class="form-control " id="f_street"
               v-model="model.f_street" v-validate:f_street='{ required: true }'/>
             </div>
          </div>
          <div class="form-group">
             <label for="f_residential_area" class="col-sm-2 control-label" >小区:</label>
             <div class="col-sm-2">
               <input type="text" class="form-control " id="f_residential_area"
                v-model="model.f_districtname" v-validate:f_residential_area='{ required: true }'>
             </div>

          <label for="f_building" class="col-sm-2 control-label" >楼号:</label>
          <div class="col-sm-2">
            <input type="text" class="form-control " id="f_building"
             v-model="model.f_building" v-validate:f_building='{ required: true }'>
          </div>

             <label  for="f_unit" class="col-sm-2 control-label">单元:</label>
             <div class="col-sm-2">
               <input type="text" class="form-control " id="f_unit"
               v-model="model.f_unit" v-validate:f_unit='{ required: true }'/>
             </div>
           </div>
             <div class="form-group">

             <label for="f_floor" class="col-sm-2 control-label" >楼层:</label>
             <div class="col-sm-2">
               <input type="text" class="form-control " id="f_floor"
                v-model="model.f_floor" v-validate:f_floor='{ required: true }'>
             </div>
          <label for="f_room" class="col-sm-2 control-label" >门牌号:</label>
          <div class="col-sm-2">
            <input type="text" class="form-control " id="f_room"
             v-model="model.f_room" v-validate:f_room='{ required: true }'>
          </div>

             <label  for="f_address" class="col-sm-2 control-label">详细地址:</label>
             <div class="col-sm-2">
               <input type="text" class="form-control " id="f_address"
               v-model="model.f_address" v-validate:f_address='{ required: true }'/>
             </div>

           </div>

           <div class="form-group">
             <label for="f_modifier" class="col-sm-2 control-label " v-if="false">修改提交人:</label>
             <div class="col-sm-2" v-if="false">
               <input type="text" class="form-control " id="f_modifier" v-model="model.f_modifier" >
             </div>
          <label for="f_remark"  class="col-sm-2 control-label">备注:</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="f_remark"
              v-model="model.f_remark">
          </div>
        </div>
        <hr>
        气表档案：<span class="glyphicon glyphicon-plus" @click="addMeter"></span>
      </form>
      <div class="span">
        <data-grid :model="model" partial='list' v-ref:grid>
          <template partial='head'>
            <tr>
              <th>表号</th>
              <th>卡号</th>
              <th>生产厂家</th>
              <th>计量类型</th>
              <th>操作</th>
            </tr>
          </template>
          <template partial='body'>
            <td>{{row.f_meter_no}}</td>
            <td>{{row.f_card_id}}</td>
            <td>{{row.f_meter_brand}}</td>
            <td>{{row.f_meter_measurement }}</td>
            <td>
              <span class="glyphicon glyphicon-remove" @click="$parent.$parent.deleteRow(row)"></span>&nbsp;&nbsp;
              <span class="glyphicon glyphicon-edit" @click="$parent.$parent.editRow(row)"></span>
            </td>
          </template>
        </data-grid>
      </div>
      <div class="auto">
        <button :disabled='!($v.valid) || model.rows.length==0' @click="confirm()" type="button" class="btn btn-success">提&nbsp;&nbsp;&nbsp;交</button>
        <button @click="$back()" type="button" class="btn btn-success">返&nbsp;&nbsp;&nbsp;回</button>
      </div>
    </validator>
  </div>
</template>

<script>
import co from 'co'
import MessageBox from 'vue-client'
import Vue from 'vue'
import * as Util from '../Util'
import AppData from '../../stores/AppData'

let saveGen = function * (self) {
  self.model.f_approved = '未审核'
  self.model.f_modifier = self.f.name
  self.model.f_modifier_id = self.f.id
  self.model.f_subcompany = self.f_division[0]
  self.model.f_last_check_date = self.f_last_check_date
  self.model.f_archive_date = self.f_archive_date
  self.model.f_residential_area = self.model.f_districtname
  self.model.f_user_type = self.f_user_type[0]
  self.model.f_last_check_state = self.f_last_check_state[0]
  self.model.f_checker = self.f_checker_selected[0]
  //let p = self.f_checker_selected[0].indexOf('-')
  //self.model.f_checker = self.f_checker_selected[0].substring(0, p)
 // self.model.f_checker = self.f_checker_selected[0].substring(p+1)
  yield self.$resetpost('rs/logic/提交档案修改', { data: self.model })
  // 通知项目保存成功。
  self.$back()
}


export default {
  props: ['f', 'model'],
  title: '修改用户档案',
  data () {
    return {
      //transient
      f_division: [''],
      f_divisions: Vue.f_subcompany != '' ? [{label: Vue.f_subcompany, value: Vue.f_subcompany}]: this.$appdata.getParam('安检系统用子公司'),
      f_last_check_date: '',
      f_archive_date: '',
      row: {},
      f_last_check_state: [''],
      f_checker_selected: [''],
      f_last_check_state_opt: this.$appdata.getParam('安检状态'),
      f_user_type: [''],
      f_user_type_opt: this.$appdata.getParam('用户类型'),
      f_checkers: this.$appdata.getParam(Vue.f_subcompany + '安检员'),
    }
  },
  ready () {
    this.f_last_check_state = [this.model.f_last_check_state]
    this.f_checker_selected = [this.model.f_checker + '-' + this.model.f_checker_id]
    this.f_user_type = [this.model.f_user_type]
    let that = this
    this.$resetpost('rs/sql/提取表档案', {data:{f_userfile_id: this.model.id}}, {resolveMsg: null, rejectMsg: '提取表档案失败'}).then(
      (response) => {
        response.data.forEach ((item) => {
          item.f_oldmeter_no = item.f_meter_no
          item.f_meter_flag = '修改'
        })
        that.$set('model.rows', response.data)
      }
    )
  },
  methods: {
    confirm () {
      if(!this.f_checker_selected[0]) {
        window.alert('请选择安检员！')
        return
      }
      if (!this.f_division[0]) {
        window.alert('请选择分公司！')
        return
      }
      if (!this.f_last_check_state[0]) {
        window.alert('请选择最后安检状态！')
        return
      }
      if (!this.f_user_type[0]) {
        window.alert('请选择用户类型！')
        return
      }
      let gen = saveGen(this)
      return co(gen)
    },
    editRow (row) {
      this.$goto('meter-file', {model: row})
    },
    deleteRow (row) {
      this.model.rows.splice(this.model.rows.indexOf(row), 1)
    },
    addMeter () {
      this.row = {}
      this.$goto('meter-file', {model:this.row}, 'self', this.addRow)
    },
    addRow () {
      if (this.row.id) {
        this.model.rows.push(this.row)
        this.row.f_userfile_id = this.id
        this.row.f_meter_flag = '新增'
      }
    }
  },
  watch: {
    'model' (val) {
      this.f_division = [val.f_subcompany]
      this.f_checker = val.f_checker
      this.f_last_check_date = val.f_last_check_date
      this.f_archive_date = val.f_archive_date
    }
  },
  components: { MessageBox }
}

</script>
