<template>
  <div class="flex-row auto" >
    <validator name='m' @valid="mValid(true)"  @invalid="mValid(false)">
      <!--<div class="thumbnail" >-->
        <!--<avatar-upload :img-src.sync="row.img.content" :filename.sync="row.img.filename"></avatar-upload>-->
      <!--</div>-->
      <form class="form-horizontal user-meter-padding" style="flex: 1;">
        <div class="row auto">
          <div class="form-group form-input-group col-sm-4" :class="[$m.meternumber.required ? 'has-error' : '']">
            <label for="f_meternumber" class="control-label">表号</label>
            <div class="col-sm-3">
              <input type="text" class="form-control" v-model="row.f_meternumber" v-validate:meternumber='{required: true }' @blur="meternumberValidate()"  placeholder='表号' v-next-el="{id: 'metertitles'}">
            </div>
          </div>
          <div class="form-group form-input-group col-sm-4">
            <label for="f_metertitles" class="control-label">表封号</label>
            <div class="col-sm-3">
              <input type="text" class="form-control" v-model="row.f_metertitles" placeholder='表封号' v-next-el="{id: 'meterbase'}"   id="metertitles">
            </div>
          </div>
          <div class="form-group form-input-group col-sm-4">
            <label for="f_barcode" class="control-label">条码号</label>
            <div class="col-sm-3">
              <input type="number" class="form-control" v-model="row.f_barcode" placeholder='条码号'  id="meterbase">
            </div>
          </div>
        </div>
        <div class="row auto">
          <div class="form-group form-input-group col-sm-4">
            <label for="f_meter_base" class="control-label">表底数</label>
            <div class="col-sm-3 form-input-group">
              <input type="number" class="form-control" v-model="row.f_meter_base" placeholder='表底数'  @blur="tablebaseChange()" :disabled="!jurisdiction.includes('底数修改')">
            </div>
          </div>
          <div class="form-group form-input-group col-sm-4" :class="[$m.brand.required ? 'select-error' : '']">
            <label for="gasbrand" class=" col-sm-2 control-label">气表品牌</label>
            <div class="col-sm-2">
              <input type="text" v-show="false" v-model="$refs.brand.selectedItems" v-validate:brand='{required: true }'>
              <v-select :value.sync="row.gasbrand" :options='meterbrands' placeholder='气表品牌' close-on-select
                        @change='brandChange' v-model='row.gasbrand' v-ref:brand></v-select>
            </div>
          </div>
          <div class="form-group form-input-group col-sm-4" :class="[$m.model.required ? 'select-error' : '']">
            <label for="gasmodel" class="col-sm-2 control-label">气表型号</label>
            <div class="col-sm-2">
              <input type="text" v-show="false" v-model="$refs.model.selectedItems"  v-validate:model='{required: true }'>
              <v-select :value.sync="row.gasmodel" :options='row.gasbrand[0].gasmodel' placeholder='气表型号' close-on-select
                        v-model='row.gasmodel' :disabled= 'row.gasbrand.length === 0 ' v-ref:model></v-select>
            </div>
            <!--<button type="button" class="btn btn-primary" v-if="$refs.model.selectedItems && !row.f_param_list" @click='addGasParamter(row)'>添加参数</button>-->
            <!--<button type="button" class="btn btn-primary" v-if="$refs.model.selectedItems && row.f_param_list" @click='updateGasParamter(row)'>修改参数</button>-->
          </div>
        </div>
        <div class="row auto">
          <div class="form-group form-input-group col-sm-4">
            <label for="gasmodel" class=" col-sm-1 control-label">左右表</label>
            <v-select :value.sync="row.f_aroundmeter" :options='aroundmeters' placeholder='左右表' close-on-select
                      v-model='row.f_aroundmeter' ></v-select>
          </div>
          <div class="form-group form-input-group col-sm-4">
            <label for="f_inputtor" class="control-label">抄表员</label>
            <div class="col-sm-3">
              <v-select :value.sync="row.f_inputtor" v-model="row.f_inputtor"
                        :options='inputtores' placeholder='抄表员'
                        close-on-select></v-select>
            </div>
          </div>
          <div class="form-group form-input-group col-sm-4" style="align-items: center;">
            <label for="f_fire_state1" class="control-label">点火状态</label>
            <input type="checkbox" v-model="row.f_fire_state1" style="flex: inherit;width:18px;height:18px">
            <!-- <label class="radio-inline">
               <strong>点火状态</strong><input type="checkbox" value="1" v-model="row.f_fire_state1">
            </label> -->
            <!-- <v-select :value.sync="row.f_fire_state1" v-model="row.f_fire_state1"
                :options='fireState' placeholder='点火状态'
                close-on-select>
              </v-select> -->
          </div>
        </div>
        <div class="row auto">
          <div class="form-group form-input-group col-sm-4">
            <label for="f_remanent_gas" class="control-label">剩余气量</label>
            <div class="col-sm-3 form-input-group">
              <input type="number" class="form-control" v-model="row.f_remanent_gas" placeholder='剩余气量' :disabled="f_userinfo_id"></input>
              <!--<button type="button" name="button" class="btn btn-link" @click="modefiy('f_remanent_gas')" v-if="f_userinfo_id">修改</button>-->
            </div>
          </div>
          <div class="form-group form-input-group col-sm-4">
            <label for="f_install_person" class="control-label">安装人</label>
            <div class="col-sm-3">
              <v-select :value.sync="row.f_install_person" v-model="row.f_install_person"
                        :options='installperson' placeholder='安装人'
                        close-on-select></v-select>
            </div>
          </div>
          <div class="form-group form-input-group col-sm-4">
            <label for="f_position" class="col-sm-1 control-label">安装位置</label>
            <v-select :value.sync="row.f_position" v-model="row.f_position"
                      :options='positions' placeholder='安装位置'
                      close-on-select>
            </v-select>
          </div>
        </div>
        <div class="row auto">
          <div class="form-group form-input-group col-sm-4">
            <label for="f_install_date" class="control-label">安装日期</label>
            <div class="col-sm-3">

              <datepicker id="startDate" placeholder="安装日期" width='100%'
                          v-model="row.f_install_date"
                          :value.sync="row.f_install_date"
                          :format="'yyyy-MM-dd'"
                          :show-reset-button="true">
              </datepicker>
            </div>
          </div>
          <div class="form-group form-input-group col-sm-4">
            <label for="f_gas_person" class="control-label">通气人</label>
            <div class="col-sm-3">
              <input type="text" class="form-control" v-model="row.f_gas_person" placeholder='通气人'></input>
              <!-- <v-select :value.sync="row.f_gas_person" v-model="row.f_gas_person"
                  :options='gasperson' placeholder='通气人'
                  close-on-select></v-select> -->
            </div>
          </div>
          <div class="form-group form-input-group col-sm-4">
            <label for="f_gas_date" class="control-label">通气日期</label>
            <div class="col-sm-3">
              <datepicker  placeholder="通气日期"
                           v-model="row.f_gas_date"
                           :value.sync="row.f_gas_date"
                           :format="'yyyy-MM-dd'"
              ></datepicker>
            </div>
          </div>
        </div>

        <div class="row auto">
          <div v-if="ratioshow" class="form-group form-input-group col-sm-4" :class="[$m.meternumber.required ? 'has-error' : '']">
            <!-- v-validate:f_meternumber='{required: true }'  -->
            <label for="f_ratio" class="control-label">比率</label>
            <div class="col-sm-3">
              <input type="number" class="form-control" v-model="row.f_price_ratio" :value.sync="row.f_price_ratio" v-validate:meternumber='{required: true }'  placeholder='比率'>
            </div>
          </div>
        </div>
        <div class="row auto">
          <div class="form-group form-input-group col-sm-4">
            <div class="col-sm-4">
            </div>
            <div class="col-sm-8">
              <button type="button" name="button" class="btn btn-deafult btn-block" @click="$dispatch('delete-meter')" v-if="!row.f_table_state">
                <span class="glyphicon glyphicon-trash"></span>
              </button>
            </div>
          </div>
        </div>
      </form>
    </validator>
    <!--<idverify :show.sync="show" @change-con="changeVal"></idverify>-->
    <modal :show.sync="showParame"  v-ref:modal backdrop="false" >
      <header slot="modal-header" class="modal-header">
        <button type="button" class="close" @click="cancel"><span>&times;</span></button>
        <h3 class="modal-title" style="text-align: center;">添加参数</h3>
      </header>
      <article slot="modal-body" class="modal-body">
        <add-json-parameter v-ref:addparamlist :gasmodel_id="userfileid" :gastype="gastype" :gasid="gasid"></add-json-parameter>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button type="button" class="btn btn-primary"  @click='confirmUserfiles()'>确认</button>
      </footer>
    </modal>
  </div>
</template>

<script>
  import co from 'co'

  let brandChangeGen = function * (self, val) {
    console.log('看看旧表的表号', self.meter, self.meter.f_meter_classify)
    let beforeRecord = null
    if (self.meter.f_meter_classify === '机表') {
      beforeRecord = yield self.$resetpost('rs/sql/saleSingleTable', {data: {tablename: 't_handplan', condition: `f_user_id = '${self.row.f_user_id}' and f_meter_state in ('已抄表','未抄表')`}}, {resolveMsg: null, rejectMsg: '在档案中更改气表品牌时，获取之前机表抄表信息出错！！'})
    } else {
      beforeRecord = yield self.$resetpost('rs/sql/saleSingleTable', {data: {tablename: 't_sellinggas', condition: `f_user_id = '${self.row.f_user_id}' and f_charge_state = '有效'`}}, {resolveMsg: null, rejectMsg: '在档案中更改气表品牌时，获取之前卡表收费信息出错！！'})
    }
    if (beforeRecord.data.length > 0) {
      console.log('还原气表品牌', self.meter)
      self.$showAlert('该气表已投入使用，如需更改请执行换表操作', 'warning', 3000)
      // self.row.gasbrand = self.meter.gasbrand
      self.$dispatch('success')
    } else {
      console.log('我选择了', self.row)
      self.row.f_whether_hairpin = self.row.gasbrand[0].f_meter_type === '机表' ? '无卡' : '未发'
    }
    console.log('111', self.row)
  }
  export default {
    title: '表具信息',
    data () {
      return {
        viewsee: false,
        row: this.meter,
        show: false,
        field: '',
        ratioshow: false,
        positions: this.$appdata.getParam('安装位置'),
        aroundmeters: this.$appdata.getParam('左右表'),
        userfileid: '',
        gasid: '',
        gastype: 'userfiles',
        showParame: false,
        selectUserFiles: '', // 选中的 userfiles
        jurisdiction: this.$login.r
      }
    },
    props: ['meter', 'isdecimal', 'valid', 'f_userinfo_id'],
    ready () {
      console.log('看看meter里面的数据', this.meter, this.row)
      this.row = Object.assign(this.row, this.meter, {})
      this.isdecimal = this.row.gasbrand.length > 0 ? this.row.gasbrand.f_isdecimal : '否'
      this.row.valid = false
      this.row.f_aroundmeter[0] = '左表'
      if (this.row.pricetype === '混合气价') {
        this.ratioshow = true
      }
    },
    methods: {
      async confirmUserfiles() {
        if(this.$refs.addparamlist.confirm()) {
          var paramlist = this.$refs.addparamlist.addGasParameter
          await this.$resetpost('rs/logic/updateGasParam', {data: {id: this.selectUserFiles.f_user_id, paramlist: paramlist, gastype: 'userfiles'}}, {resolveMsg: '更新成功', rejectMsg: '更新失败'})
          this.showParame = false
        }
      },
      cancel(){
        this.gasid = ''
        this.userfileid = ''
        this.showParame = false
      },
      tablebaseChange () {
        if (this.isdecimal === '是') {
          this.$set('row.f_meter_base', (this.row.f_meter_base - 0).toFixed(2))
        } else {
          this.$set('row.f_meter_base', (this.row.f_meter_base - 0).toFixed(0))
        }
      },
      brandChange (val) {
        this.isdecimal = val.length > 0 ? val[0].f_isdecimal : '否'
        this.tablebaseChange()
        if (this.row.f_user_id) {
          co(brandChangeGen(this))
        }
        this.meternumberValidate()
      },
      mValid (bool) {
        this.row.valid = bool
        this.$dispatch('self-valid')
      },
      // 带权限修改单值返回修改后得值和修改原因
      modefiy (field) {
        this.show = true
        this.field = field
      },
      async meternumberValidate () {
        // 验证表号
        console.log('标号验证。。', this.row.f_meternumber, this.row.gasbrand)
        if (this.row.f_meternumber && this.row.gasbrand.length > 0) {
            if (this.row.gasbrand[0].f_meter_type === '物联网表') {
              let param = {
                f_user_id: this.row.f_user_id,
                f_meternumber: this.row.f_meternumber,
                f_gasbrand_id: this.row.gasbrand[0].id
              }

              let res = await this.$resetpost('rs/logic/meternumberValidate', param, {resolveMsg: null, rejectMsg: '表号验证失败！！'})
              console.log('标号验证返回：', res)
              if (res.data) {
                this.row.f_meternumber = ''
                this.$showAlert('表号已存在！！', 'warning', 3000)
              }
            }
        }
      }
    },
    watch: {
      'meter' () {
        this.row = Object.assign(this.row, this.meter, {})
        this.isdecimal = this.row.gasbrand.f_isdecimal
        this.row.valid = false
        this.showtype = this.row.gasbrand.f_meter_type
      },
      'row.pricetype' (val) {
        if(val=='混合气价') {
          this.ratioshow = true
        }else {
          this.ratioshow = false
        }
      }

    },
    computed: {
      inputtores () {
        // return this.$login.f.f_gasman
        let rs = new Array()
        for (let i = 0; i < this.$login.f.f_gasman.length; i++) {
          let temp = {
            label: this.$login.f.f_gasman[i].name,
            value: this.$login.f.f_gasman[i].name
          }
          rs.push(temp)
        }
        return rs
      },
      installperson () {
        // return this.$login.f.f_installman
        let rs = new Array()
        for (let i = 0; i < this.$login.f.f_installman.length; i++) {
          let temp = {
            label: this.$login.f.f_installman[i].name,
            value: this.$login.f.f_installman[i].name
          }
          rs.push(temp)
        }
        return rs
      },
      meterbrands () {
        console.log('气表品牌。。', this.$GetSaleParam.getGasbrand())
        return this.$GetSaleParam.getGasbrand()
      },
      aroundmeters () {
        return this.$appdata.getParam('左右表')
      }
    }
  }
</script>
