<template>
  <div class="auto select-overspread" id="addBox">
    <validator name='v'>
      <ul class="nav nav-tabs" >
        <li role="presentation" class="active"><a href="#">加气枪信息</a></li>
      </ul>
      <form class="form-horizontal" style="margin-top:20px;flex: 1;">
        <div class="row">
          <div class="col-sm-4"  :class="[$v.f_adjustable_id.required ? 'has-error' : '']">
            <label for="f_adjustable_id" class="font_normal_body">&nbsp;&nbsp;&nbsp;编号&nbsp;&nbsp;&nbsp;</label>
            <input type="text"  v-model="model.f_adjustable_id" @blur= "changeid()" v-validate:f_adjustable_id='{required: true }' class="input_search" style="width:60%" placeholder="编号" v-next-el="name">
          </div>

          <div class="col-sm-4"   :class="[$v.f_adjustable_name.required ? 'has-error' : '']">
            <label for="f_adjustable_name" class="font_normal_body">&nbsp;&nbsp;&nbsp;名称&nbsp;&nbsp;&nbsp;</label>
            <input type="text"  v-model="model.f_adjustable_name" @blur= "changename()" v-validate:f_adjustable_name="{required: true }" class="input_search" style="width:60%" placeholder="名称" v-el:name v-next-el="address">
          </div>

          <div class="col-sm-4"  :class="[$v.f_adjustable_address.required ? 'has-error' : '']">
<!--            <label for="f_area" class="font_normal_body"><span class="glyphicon glyphicon-map-marker" @click="openModal" ></span>&nbsp;&nbsp;地址&nbsp;&nbsp;</label>-->
            <label for="f_area" class="font_normal_body">&nbsp;&nbsp;地址&nbsp;&nbsp;</label>
            <input type="text" v-model="model.f_adjustable_address" v-validate:f_adjustable_address='{required: true }'
            class="input_search" style="width:60%" placeholder="地址" v-el:type v-next-el="street" >
          </div>
        </div>
        <div class="row" style = "color:red;text-align:center " >
          <div class="col-sm-4 ">
            <span v-if="haveid === true">编号重复</span>
          </div>
          <div class="col-sm-4 ">
            <span v-if="havename === true">名称重复</span>
          </div>
        </div>
        <div class="row">
          <!--<div class="col-sm-4" :class="[$v.adjustable_type.required ? 'select-error' : '']">-->
            <!--<label for="f_adjustable_type" class="font_normal_body">装置类型</label>-->
              <!--<input type="text" v-show="false" v-model="$refs.adjustable_type.selectedItems" v-validate:adjustable_type='{required: true }'>-->
              <!--<v-select :value.sync="model.f_adjustable_type" :options='adjustabletype'  placeholder='装置类型' close-on-select-->
              <!--v-model='model.f_adjustable_type' v-ref:adjustable_type></v-select>-->
          <!--</div>-->
          <!-- <div class="col-sm-4" :class="[$v.f_adjustable_style.required ? 'has-error' : '']">
            <label for="f_adjustable_style" class="font_normal_body">型号</label>
            <v-select :value.sync="model.f_adjustable_style" v-model="model.f_adjustable_style"
                :options='adjustablestyle' placeholder='型号'
            close-on-select></v-select>
          </div> -->
          <div class="col-sm-4" :class="[$v.f_adjustable_style.required ? 'has-error' : '']">
            <label for="f_adjustable_style" class="font_normal_body">&nbsp;&nbsp;&nbsp;型号&nbsp;&nbsp;&nbsp;</label>
            <!-- <div class="" :class="[$v.adjustable_style.required ? 'select-error' : '']"> -->
              <!-- <input type="text" v-show="false" v-model="$refs.adjustable_style.selectedItems" v-validate:adjustable_style='{required: true }'>
              <v-select :value.sync="model.f_adjustable_style" :options='adjustablestyle'  placeholder='调压箱型号' close-on-select
              v-model='model.f_adjustable_style' v-ref:adjustable_style></v-select> -->
            <input type="text" v-model="model.f_adjustable_style" v-validate:f_adjustable_style='{required: true }' class="input_search" style="width:60%" placeholder="加气枪型号" >
            <!-- </div> -->
          </div>

          <!--<div class="col-sm-4"  >-->
            <!--<label for="f_in_pipe" class="font_normal_body">进口压力</label>-->
            <!--<input type="text" v-model="model.f_in_pipe"-->
            <!--class="input_search" style="width:60%" placeholder="进口压力" v-el:inpipe v-next-el="outpipe">-->
          <!--</div>-->
        </div>
        <div class="row">
          <!--<div class="col-sm-4" >-->
            <!--<label for="f_out_pipe" class="font_normal_body">出口压力</label>-->
            <!--<input type="text"  v-model="model.f_out_pipe" class="input_search" style="width:60%" placeholder="出口压力" v-el:outpipe v-next-el="date">-->
          <!--</div>-->

          <!--<div class="col-sm-4"  >-->
            <!--<label for="f_operate_date" class="font_normal_body">投入使用日期</label>-->
            <!--<datepicker  placeholder="投入使用日期" style="width: 60%"-->
              <!--v-model="model.f_operate_date"-->
              <!--:value.sync="model.f_operate_date"-->
              <!--:format="'yyyy-MM-dd HH:mm:ss'"-->
              <!--v-el:date  :disabled= "!changedate"-->
              <!--v-next-el="openDate"-->
              <!--&gt;-->
            <!--</datepicker>-->
          <!--</div>-->
          <div class="col-sm-4" :class="[$v.facturer.required ? 'select-error' : '']">
            <label for="f_manufacturer" class="font_normal_body">生产厂家</label>
              <input type="text" v-show="false" v-model="$refs.facturer.selectedItems" v-validate:facturer='{required: true }'>
              <v-select :value.sync="model.f_manufacturer" :options='manufacturer'  placeholder='生产厂家' close-on-select
              v-model='model.f_manufacturer' v-ref:facturer></v-select>
          </div>
          <!-- <div class="col-sm-4" >
            <label for="f_manufacturer" class="font_normal_body">生产厂家</label>
            <v-select :value.sync="model.f_manufacturer" v-model="model.f_manufacturer"
                :options='manufacturer' placeholder='生产厂家'
            close-on-select></v-select>
          </div> -->

        </div>
        <div class="row">
          <div class="col-sm-4" >
            <label for="f_open_date" class="font_normal_body">启用日期</label>
            <datepicker  placeholder="启用日期" style="width: 60%"
              v-model="model.f_open_date"
              :value.sync="model.f_open_date"
              :format="'yyyy-MM-dd HH:mm:ss'"
              v-el:openDate
              v-next-el="remark">
            </datepicker>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-12">
            <label for="f_remark" class="font_normal_body">&nbsp;&nbsp;&nbsp;备注&nbsp;&nbsp;&nbsp;</label>
            <input type="text" class="input_search" style="width:60%" v-model="model.f_remark"  rows="3" placeholder="备注"  v-el:remark ></input>
          </div>
        </div>
      </form>
      <!--<div style="margin-top:10px;" class="auto" v-for="row in riser">-->
        <!--<div class="col-sm-6" >-->
          <!--<label for="f_manufacturer" class="font_normal_body">立管编号</label>-->
          <!--<input type="text"  v-model="row.f_value" class="input_search" style="width:60%" placeholder="立管编号" v-el:outpipe>-->
          <!--<button type="button" class="glyphicon glyphicon-minus btn-danger" style="margin-top:8px;margin-left:10px" @click.stop="delriser($index,row)"></button>-->
          <!--<button type="button" class="glyphicon glyphicon-plus btn-success"  style="margin-top:8px;margin-left:10px" @click.stop="addriser()"></button>-->
        <!--</div>-->

      <!--</div>-->
      <div style="text-align:right;height:auto;margin-top:30px;margin-right:50px;">
        <button class="button_search button_spacing" @click="confirm()" :disabled='!$v.valid || haveid || havaname'>保存</button>
        <button class="button_clear " @click="cancel()"  >取消</button>
      </div>
    </validator>


    <modal :show.sync="isshow" v-if="isshow"  large backdrop="false" :width="900">
      <header slot="modal-header" class="modal-header">
      </header>
      <article slot="modal-body" class="modal-body">
        <amap-location :islocationclearmark="false" dom="addboxmap" @getmylocation="getmylocation"></amap-location>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button v-show="isshow" type="button" class="button_clear btn-gn" @click='closeModal'>取消</button>
        <button v-show="isshow" type="button" class="button_clear btn-gn" @click='confirmLocation'>确认</button>
      </footer>
    </modal>
  </div>
</template>
<script>

import {HttpResetClass} from "vue-client";

export default {
  data () {
    return {
      isshow: false,
      tempPosition: {
        position: { //经纬度信息
          lng: 0, //经度
          lat: 0  //纬度
        },
        formattedAddress: '' //地址信息
      },
      model: {
        f_adjustable_id: '',
        f_adjustable_name: '',
        f_adjustable_address: '',
        f_adjustable_type: '',
        f_adjustable_style: '',
        f_in_pipe: '',
        f_out_pipe: '',
        f_operate_date: '',
        f_open_date: '',
        f_manufacturer: '',
        f_remark: '',
        f_adjustable_lng: '', //经度
        f_adjustable_lat: '',  //纬度
      },
      riser:[{}],
      delrow:[],
      haveid: false,
      havename: false,
      changedate: true,
      adjustabletype: this.$appdata.getParam('装置类型'),
      manufacturer: this.$appdata.getParam('生产厂家')
    }
  },
  props: ['data', 'f_filialeid'],
  watch: {
    'data' (val) {
      this.datatomodel()
    }
  },
  ready () {
    console.log(this.$login.toStandardTimeString())
    this.datatomodel()
  },
  methods: {
    async confirm () {
      if (this.haveid === true || this.havename === true) {
        return
      }
      this.model.f_adjustable_id = `${this.model.f_adjustable_id}`
      this.model.f_adjustable_state = '正常'
      this.model.f_adjustable_type = this.model.f_adjustable_type[0] ? this.model.f_adjustable_type[0] : ''
      this.model.f_manufacturer = this.model.f_manufacturer[0] ? this.model.f_manufacturer[0] : ''

      this.model.f_filialeid = this.f_filialeid

      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_orgname = this.$login.f.orgs
      this.model.f_depid = this.$login.f.depids
      this.model.f_depname = this.$login.f.deps
      this.model.f_state = '已失效'
      let http = new HttpResetClass()
      let res=await http.load('post', `rs/entity/t_adjustablebox`, this.model,{resolveMsg:'加气枪保存成功', rejectMsg: '保存失败!!!'})
          if(this.riser[0]){
            for(var i=0;i<this.riser.length;i++){
              var params={
                id:this.riser[i].id,
                f_table_name:`t_adjustablebox`,
                f_field_name:'id',
                f_parent_id:res.data.id,
                f_value:this.riser[i].f_value,
                // f_chinese_name:'立管编号',
                f_operator : this.$login.f.name,
                f_operatorid : this.$login.f.id,
                f_orgid : this.$login.f.orgid,
                f_orgname : this.$login.f.orgs,
                f_depid : this.$login.f.depids,
                f_depname : this.$login.f.deps
              }
              if(this.riser[i].f_value){
                await http.load('post', `rs/entity/t_attribute`, params, {resolveMsg: null, rejectMsg: null})
              }else{
                await this.$resetdelete('rs/entity/t_attribute', {id: this.riser[i].id}, {warnMsg:null,resolveMsg: null, rejectMsg: null})
              }
            }
          }
          if(this.delrow.length>0){
            for(var i=0;i<this.delrow.length;i++){
              await this.$resetdelete('rs/entity/t_attribute', {id: this.delrow[i]}, {warnMsg:null,resolveMsg: null, rejectMsg: null})
            }
          }
       this.$dispatch('success', '调压箱保存成功', this.model, res)
       this.riser=[{}]
       this.delrow=[]

    },
    delriser (index,row) {
      if (this.riser.length > 1) {
        this.riser.splice(index, 1)
        if(row.id){
          this.delrow.push(row.id)
        }
      }
    },
    addriser () {
      this.riser.push({})
    },
    async datatomodel () {
      this.delrow=[]
      this.$nextTick(() => {
        if (JSON.stringify(this.data) === '{}') {
          Object.assign(this.$data.model, this.$options.data().model)
          delete this.model.id
          this.model.f_in_pipe = 'DN'
          this.model.f_out_pipe = 'DN'
          this.changedate = true
          this.model.f_operate_date = this.$login.toStandardTimeString()
          this.model.f_open_date = this.$login.toStandardTimeString()
        } else {
          this.model = Object.assign(this.model, {}, this.data)
          this.model.f_adjustable_type = this.model.f_adjustable_type ? [this.model.f_adjustable_type] : ''
          this.model.f_manufacturer = this.model.f_manufacturer ? [this.model.f_manufacturer] : ''
          // this.model.f_adjustable_style = this.model.f_adjustable_style ? [this.model.f_adjustable_style] : ''
          this.model.f_operate_date ? this.changedate = false : this.changedate = true
        }
      })
      if(this.data.id){
        // var data=await this.$resetpost('rs/sql/saleSingleTable', {data: {tablename: 't_attribute', condition: `f_table_name = 't_adjustablebox' and f_parent_id = '${this.data.id}' and f_chinese_name ='立管编号'`}}, {resolveMsg: null, rejectMsg: '获取加气枪失败'})
        var data=await this.$resetpost('rs/sql/getBoxInfo',
          {data: {parent_id: this.data.id}},
          {resolveMsg: null, rejectMsg: '获取加气枪失败'})
        this.riser=data.data
      }

      if (this.riser.length===0){
        this.riser=[{}]
      }
    },
    cancel () {
      this.$dispatch('close')
    },
    modify () {
      this.model = Object.assign({}, this.gasmessage)
      this.model.f_meter_type = this.model.f_meter_type[0]
      this.getArrParam()
      this.transfer()
      this.data = {}
    },
    changeid () {
      this.$resetpost('rs/sql/getAdjustableboxInfo',
        {data:{f_adjustable_id: this.model.f_adjustable_id, f_orgid: this.$login.f.orgid}}, {resolveMsg: null, rejectMsg: null})
      .then((res) => {
        res.data.length > 0 ? this.haveid = true : this.haveid = false
      })
    },
    changename () {
      this.$resetpost('rs/sql/getBoxInfo',
        {data: {parent_id: this.data.id}}, {resolveMsg: null, rejectMsg: null})
      .then((res) => {
        res.data.length > 0 ? this.havename = true : this.havename = false
      })
    },
    openModal () {
      this.isshow = true
    },
    closeModal () {
      this.isshow = false;
    },
    getmylocation (res) {
      this.tempPosition = res
    },
    confirmLocation () {
      this.model.f_adjustable_address = this.tempPosition.formattedAddress
      this.model.f_adjustable_lng = this.tempPosition.position.lng
      this.model.f_adjustable_lat = this.tempPosition.position.lat
      this.isshow = false;
    }
  }
}
</script>
<style lang="less">
  #addBox{
    #addboxmap {
      height: 300px;
    }
    .glyphicon:hover {
      color: red;
    }
    .glyphicon {
      color: blue;
      cursor: pointer;
    }
  }
</style>
