<template>
  <div style="overflow-x: hidden;">
    <validator name='v'>
      <form novalidate class="form-horizontal">
        <div class="form-group">

          <label for="f_userid" class="col-sm-offset-1 col-sm-1 control-label">用户编号:</label>
          <div class="col-sm-2">
             <input class="form-control" type="text" v-model="model.f_userid" placeholder='用户编号'>
           </div>


          <label for="f_username" class=" col-sm-1 control-label">用户姓名:</label>
          <div class="col-sm-2">
             <input class="form-control" type="text" v-model="model.f_username" placeholder='用户姓名'>
          </div>

           <label for="f_phone" class="col-sm-1 control-label">用户电话:</label>
           <div class="col-sm-2">
              <input class="form-control" type="text" v-model="model.f_phone" placeholder='用户电话'>
            </div>



          </div>

          <div class="form-group">

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

            <label for="f_archive_date" class=" col-sm-1 control-label">建档日期:</label>
            <div class="col-sm-2">
              <datepicker id="startdate"
                :value.sync="model.f_archive_date"
                :disabled-days-of-Week="[]"
                :format="'yyyy-MM-dd'"
                width = "171px">
              </datepicker>
            </div>
             <label for="f_user_type" class="col-sm-1 control-label">用户类型:</label>
             <div class="col-sm-2">
               <v-select id="f_user_type"
               placeholder='请选择'
               :value.sync="f_user_type"
               :options="f_usertype"
               close-on-select clear-button></v-select>
              </div>


            </div>

          <div class="form-group">

            <label for="f_street" class=" col-sm-offset-1 col-sm-1 control-label">街道:</label>
            <div class="col-sm-2">
               <input class="form-control" type="text" v-model="model.f_street" placeholder='街道'>
            </div>

             <label for="f_residential_area" class=" col-sm-1 control-label">小区:</label>
              <div class="col-sm-2">
                 <input class="form-control" type="text" v-model="model.f_districtname" placeholder='小区'>
              </div>

              <label for="f_building" class="col-sm-1 control-label">楼号:</label>
              <div class="col-sm-2">
                <input class="form-control" type="text" v-model="model.f_building" placeholder='楼号'>
              </div>


            </div>

            <div class="form-group">

              <label for="f_unit" class=" col-sm-offset-1 col-sm-1 control-label">单元:</label>
              <div class="col-sm-2">
                 <input class="form-control" type="text" v-model="model.f_unit" placeholder='单元'>
              </div>

               <label for="f_floor" class=" col-sm-1 control-label">楼层:</label>
               <div class="col-sm-2">
                 <input class="form-control" type="text" v-model="model.f_floor" placeholder='楼层'>
               </div>

               <label for="f_room" class="col-sm-1 control-label">门牌号:</label>
               <div class="col-sm-2">
                 <input class="form-control" type="text" v-model="model.f_room" placeholder='门牌号'>
               </div>


             </div>

              <div class="form-group">

                <label for="f_address" class=" col-sm-offset-1 col-sm-1 control-label">详细地址:</label>
                <div class="col-sm-2">
                   <input class="form-control" type="text" v-model="model.f_address" placeholder='详细地址'>
                </div>

                <label for="f_checker" class=" col-sm-1 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>

                <label for="f_state" class=" col-sm-1 control-label">档案状态:</label>
                <div class="col-sm-2">
                  <v-select id="f_state"
                  placeholder='请选择'
                  :value.sync="f_state"
                  :options='fstate'
                  close-on-select clear-button
                  placeholder='档案状态'></v-select>
                </div>


                </div>

                <div class="form-group">

                  <label for="f_inputdate" class=" col-sm-offset-1 col-sm-1 control-label">录入时间:</label>
                  <div class="col-sm-2">
                    <datepicker id="f_inputdate"
                      :value.sync="model.f_inputdate"
                      :disabled-days-of-Week="[]"
                      :format="'yyyy-MM-dd HH:mm:ss'"
                      width = "171px"
                       placeholder='录入时间'>
                    </datepicker>
                  </div>

                  <label for="f_last_check_date" class="  col-sm-1 control-label">最后安检时间:</label>
                  <div class="col-sm-2">
                    <datepicker id="f_last_check_date"
                      :value.sync="model.f_last_check_date"
                      :disabled-days-of-Week="[]"
                      :format="'yyyy-MM-dd'"
                      width = "171px"
                       placeholder='录入时间'>
                    </datepicker>

                    </div>

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

                   </div>
                   <div class="form-group">

                 <label for="f_remark" class="  col-sm-offset-1 col-sm-1 control-label">备注:</label>
                 <div class="col-sm-8">
                   <input class="form-control" type="text" v-model="model.f_remark"   placeholder='备注'>
                 </div>

                </div>
          </form>
          用户表档案 <span class="glyphicon glyphicon-plus" @click='meteradd()'></span>
          <div style="text-align:center;height:auto;width:800px;margin:0 auto">
            <table class="table">
              <tr>
                <th>表号</th>
                <th>表牌</th>
                <th>计量类型</th>
                <th>表径</th>
                <th>机表读数</th>
                <th>剩余气量</th>
                <th>总气量</th>
                <th>累购</th>
                <th>备注</th>
                <th>修改</th>
                <th>删除</th>
              </tr>
              <tr v-for="num in meterrow">
                <td>{{num.f_meter_no}}</td>
                <td>{{num.f_meter_brand}}</td>
                <td>{{num.f_meter_measurement}}</td>
                <td>{{num.f_meter_diameter}}</td>
                <td>{{num.f_meter_reading}}</td>
                <td>{{num.f_meter_remain}}</td>
                <td>{{num.f_meter_total}}</td>
                <td>{{num.f_meter_accumulation}}</td>
                <td>{{num.f_remark}}</td>
                <td><a @click="meterchange(num, $index)">修改</a></td>
                <td><a @click="meterdel($index)">删除</a></td>
              </tr>
            </table>
            <button class="btn btn-primary" :disabled='show' @click="confirm()" style="width:100px;margin-left:20px;">
              <span class="glyphicon glyphicon-floppy-disk"></span>提交
            </button>
            <button class="btn btn-default"  @click='$back()' style="width:100px;margin-left:20px;">
              <span class="glyphicon glyphicon-log-out"></span>返回
            </button>
          </div>
    </validator>
  </div>
</template>

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

let saveGen = function * (self) {
  let p = self.f_checker_selected[0].indexOf('-')
  self.model.f_checker = self.f_checker_selected[0].substring(0, p)
  self.model.f_checker_id = self.f_checker_selected[0].substring(p + 1)
  if (self.flag === 1) {
    self.model.f_subcompany = self.f_subcompany[0]
    self.model.f_user_type = self.f_user_type[0]
    self.model.f_state = self.f_state[0]
    self.model.f_last_check_state = self.f_last_check_state[0]
    yield self.$resetpost('rs/logic/人工录入修改', { data: self.model }, {resolveMsg: null, rejectMsg: null})
  } else {
    self.model.f_sign = '1'
    self.model.f_subcompany = self.f_subcompany[0]
    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_state = self.f_state[0]
    yield self.$resetpost('rs/logic/人工录入', { data: self.model }, {resolveMsg: null, rejectMsg: null})
    .catch((res) => {
      window.alert('请确认用户编号是否重复')
    })
  }
  // 通知项目保存成功。
  self.$back()
}

export default {
  props: ['row', 'f', 'flag'],
  title: '人工录入档案修改',
  data () {
    return {
      show:false,
      // transient
      model: {
        f_userid: '',
        f_username: '',
        f_phone: '',
        f_archive_date: '',
        f_street: '',
        f_residential_area: '',
        f_building: '',
        f_unit: '',
        f_floor: '',
        f_room: '',
        f_checker: '',
        f_address: '',
        f_remark: '',
        f_last_check_date: '',
        f_last_check_state: '',
        f_inputdate: Util.toStandardTimeString(),
        f_checker_selected: '',
        f_subcompany: '',
        f_user_type: '',
        f_state: '',
        rows: []
      },
      meterrow: [],
      f_last_check_state: [''],
      last_checkstate: this.$appdata.getParam('安检状态'),
      f_subcompany: '',
      f_divisions: Vue.f_subcompany !== '' ? [{label: Vue.f_subcompany, value: Vue.f_subcompany}] : this.$appdata.getParam('安检系统用子公司'),
      f_user_type: '',
      f_usertype: this.$appdata.getParam('用户类型'),
      f_state: '',
      fstate: this.$appdata.getParam('用户档案状态'),
      f_checker_selected: [''],
      f_checkers: this.$appdata.getParam(Vue.f_subcompany + '安检员')
    }
  },
  methods: {
    confirm () {
      let gen = saveGen(this)
      return co(gen)
    },
    meteradd () {
      this.$goto('metterfiles-add', {row: this.row, flag: this.flag}, 'self', this.meteradd1)
    },
    meteradd1 (param) {
      if (param !== null) {
        if (this.flag === 1) {
          this.meterrow.push(param)
        } else {
          param.f_userid = this.model.f_userid
        this.meterrow.push(param)
        }
      } else {
        return
      }
      this.model.rows = this.meterrow
    },
    meterchange (num, index) {
      this.meterrow.splice(index, 1)
      this.$goto('metterfiles-change', {row: num, flag: this.flag}, 'self', this.meterchange1)
    },
    meterchange1 (param) {
      //tag
      this.meterrow.push(param)
      this.model.rows = this.meterrow
    },
    meterdel (index) {
      this.meterrow.splice(index, 1)
    }

  },
  watch: {
    'row' (val) {
      if (this.flag == 1) {
        this.model = Object.assign({}, this.model, this.row)
        this.f_subcompany = [Vue.f_subcompany]
        this.f_user_type = [val.f_user_type]
        this.f_state = [val.f_state]
        this.f_last_check_state = [val.f_last_check_state]
        this.model.f_inputdate = Util.toStandardTimeString()
        this.model.f_archive_date = val.f_archive_date
      } else {
      }
    }
  },
  ready () {
    if (this.row) {
      if (this.row.f_checker && this.row.f_checker_id) {
        this.f_checker_selected = [this.row.f_checker + '-' + this.row.f_checker_id]
      }
    }
    this.model.f_subcompany = this.f_subcompany
    this.$watch('f_subcompany', function (val) {
      this.model.f_subcompany = val
    })
    this.model.f_user_type = this.f_user_type
    this.$watch('f_user_type', function (val) {
      this.model.f_user_type = val
    })
    this.model.f_state = this.f_state
    this.$watch('f_state', function (val) {
      this.model.f_state = val
    })
    this.model.f_last_check_state = this.f_last_check_state
    this.$watch('f_last_check_state', function (val) {
      this.model.f_last_check_state = val
    })
    if (this.flag === 0) {
      this.f_user_type = ['居民']
      this.f_state = ['点火']
    }
    if (this.flag === 1) {
      this.$resetpost('rs/sql/用户表档案', {data: {f_userid: this.row.f_userid,
        f_userfile_id: this.row.id}}, {resolveMsg: null, rejectMsg: '提取表档案失败'})
        .then((res) => {
          for (var i = 0; i < res.data.length; i++) {
            delete res.data[i] ['id']
          }
          this.meterrow = res.data
          this.model.rows = this.meterrow
        })
    } else {
      return
    }
  },
  computed: {
    show() {
      if (this.model.f_userid !== '' && this.model.f_username !== '' && this.model.f_phone !== '' && this.f_subcompany[0] !== '' && this.model.f_archive_date !== '' &&
      this.f_user_type[0] !== '' && this.model.f_street !== '' && this.model.f_residential_area !== '' && this.model.f_building !== '' &&
      this.model.f_unit !== '' && this.model.f_floor !== '' && this.model.f_room !== '' && this.model.f_address !== ' ' &&
      this.f_state[0] !== '' && this.model.f_inputdate !== '' && this.f_last_check_state[0] !== '' && this.meterrow.length > 0 &&
      this.f_checker_selected[0]) {
        this.show =  true
      } else {
        this.show = false
      }
    }
  }
}

</script>
