<template>
  <div class="auto">
    <modal :show.sync="show_devices" width="80%" title="设备信息" v-ref:modal large backdrop="false">
      <article slot="modal-body" class="modal-body" style="height: auto">
        <div class="flex-row flex-deviceinfo">
          <div class="flex-row flex-two-info panel panel-default" v-for="(index,row) in devicesinfonew">
            <avatar-upload :img-src.sync="row.img.content" :filename.sync="row.img.filename"></avatar-upload>
            <form class="form-horizontal select-overspread " style="flex: 1;">
              <div class="row auto" style="margin-top: 10px;margin-left: 10px;">
                <div class="col-sm-6 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">设备类型</label>
                  <v-select :value.sync="row.f_devices_type" v-model="row.f_devices_type"
                            :options='devicetypes' placeholder='设备类型' :value-single="true"
                            close-on-select @change="onChange"></v-select>
                </div>
                <div class="col-sm-6 form-group" style="padding-right: 5px;">
                  <label class=" font_normal_body">厂&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;家&nbsp;</label>
                  <input type="text" class="input_search" style="width:60%" v-model="row.f_brand"
                         placeholder='厂家' v-next-el="{id: $index+'brand'}">
                </div>
              </div>
              <div class="row auto" style="margin-left: 10px;">
                <div class="col-sm-6 form-group" style="padding-right: 5px;">
                  <label class=" font_normal_body">设备编号</label>
                  <input type="text" class="input_search" style="width:60%" v-model="row.f_devices_no" placeholder='设备编号' v-next-el="{id: $index+'brand'}">
                </div>
                <!--                <div class="col-sm-6 form-group" style="padding-right: 5px;">-->
                <!--                  <label class="font_normal_body">设备品牌</label>-->
                <!--                  <input type="text" class="input_search" style="width:60%" v-model="row.f_brand" placeholder='设备品牌' v-next-el="{id: $index+'devicesmodel'}"   :id="$index+'brand'">-->
                <!--                </div>-->
                <div class="col-sm-6 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">设备型号</label>
                  <input type="text" class="input_search" style="width:60%" v-model="row.f_devices_model"
                         placeholder='设备型号' :id="$index+'devicesmodel'">
                </div>
              </div>
              <div class="row auto" style="margin-left: 10px;">
                <div class="col-sm-6 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">&nbsp;安&nbsp;装&nbsp;人&nbsp;</label>
                  <input type="text" class="input_search" style="width:60%" v-model="row.f_input_person"
                         placeholder='安装人' v-next-el="{id: $index+'f_input_person'}" :id="$index+'brand'">
                </div>
                <div class="col-sm-6 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">生产日期</label>
                  <datepicker placeholder="生产日期" style="width: 60%"
                              v-model="row.f_make_date"
                              :value.sync="row.f_make_date"
                              :format="'yyyy-MM-dd HH:mm:ss'">
                  </datepicker>
                </div>
              </div>
              <div class="row auto" style="margin-left: 10px;">
                <div class="col-sm-6 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">安装日期</label>
                  <datepicker placeholder="安装日期" style="width: 60%"
                              v-model="row.f_input_date"
                              :value.sync="row.f_input_date"
                              :onchange="expireDate(index)"
                              :format="'yyyy-MM-dd HH:mm:ss'">
                  </datepicker>
                </div>
                <div class="col-sm-6 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">设备数量</label>
                  <input type="number" class="input_search" style="width:60%" v-model="row.f_devices_num"
                         placeholder='设备数量' v-next-el="{id: $index+'devicesmodel'}" :id="$index+'brand'">
                </div>
              </div>
              <div class="row auto" style="margin-left: 10px;">
                <div class="col-sm-6 form-group" style="padding-right: 5px;"  v-show="row.f_devices_type && row.f_devices_type.includes('报警器')">
                  <label class="font_normal_body">首校日期</label>
                  <datepicker placeholder="首校日期" style="width: 60%"
                              v-model="row.f_firstcheck_date"
                              :value.sync="row.f_firstcheck_date"
                              :onchange="alarmExpireDate(index)"
                              :format="'yyyy-MM-dd HH:mm:ss'">
                  </datepicker>
                </div>
                <div class="col-sm-6 form-group" style="padding-right: 5px;" v-show="row.f_devices_type == '调压器'">
                  <label class="font_normal_body">流&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;量&nbsp;</label>
                  <input type="text" class="input_search" style="width:60%" v-model="row.f_rate_flow"
                         placeholder='流量' v-next-el="{id: $index+'devicesmodel'}" :id="$index+'brand'">
                </div>
                <div class="col-sm-6 form-group" style="padding-right: 5px;" v-if="row.f_devices_type.includes('切断阀') && devicesinfoShow">
                  <label class="font_normal_body">报废日期</label>
                  <datepicker placeholder="报废日期" style="width: 60%"
                              v-model="row.f_expire_date" disabled
                              :value.sync="row.f_expire_date"
                              :format="'yyyy-MM-dd HH:mm:ss'">
                  </datepicker>
                </div>
                <div class="col-sm-6 form-group" style="padding-right: 5px;" v-if="row.f_devices_type.includes('切断阀') && devicesinfoShow">
                  <label class="font_normal_body">以表带阀</label>
                  <v-select :value.sync="row.f_devices_starp" v-model="row.f_devices_starp"
                            :options='devicesstarp' placeholder='设备类型' :value-single="true"
                            close-on-select ></v-select>
                </div>
                <div class="col-sm-6 form-group" style="padding-right: 5px;" v-if="row.f_devices_type && row.f_devices_type.includes('报警器') && devicesinfoShow">
                  <label class="font_normal_body">报废日期</label>
                  <datepicker placeholder="报废日期" style="width: 60%"
                              v-model="row.f_expire_date" disabled
                              :value.sync="row.f_expire_date"
                              :format="'yyyy-MM-dd HH:mm:ss'">
                  </datepicker>
                </div>
                <div class="col-sm-6 form-group" style="padding-right: 5px;"  v-if="row.f_devices_type && row.f_devices_type.includes('报警器') && devicesinfoShow">
                  <label class="font_normal_body">下次校验</label>
                  <datepicker placeholder="下次校验日期" style="width: 60%"
                              v-model="row.f_nextcheck_date" disabled
                              :value.sync="row.f_nextcheck_date"
                              :format="'yyyy-MM-dd HH:mm:ss'">
                  </datepicker>
                </div>
                <div class="col-sm-6 form-group" style="padding-right: 5px;"  v-show="row.f_devices_type == '调压器'">
                  <label class="font_normal_body">出口压力</label>
                  <input type="text" class="input_search" style="width:60%" v-model="row.f_pressure_range"
                         placeholder='出口压力' v-next-el="{id: $index+'devicesmodel'}" :id="$index+'brand'">
                </div>
              </div>
              <div class="row auto" style="margin-left: 10px;">
                <div class="col-sm-6 form-group" style="padding-right: 5px;"  v-show="row.f_devices_type == '调压器'">
                  <label class="font_normal_body">进口压力</label>
                  <input type="text" class="input_search" style="width:60%" v-model="row.f_import_pressure"
                         placeholder='进口压力' v-next-el="{id: $index+'devicesmodel'}" :id="$index+'brand'">
                </div>
              </div>
              <div class="row auto" style="margin-left: 10px;">
                <div style="" class="col-sm-8 form-group">
                  <label for="f_comments" class="font_normal_body ">&nbsp;&nbsp;&nbsp;备&nbsp;&nbsp;&nbsp;注</label>
                  <input class="input_search" style="width:80%" v-model="row.f_comments"/>
                </div>
              </div>
            </form>
            <img :src="imgdelete" alt="图片加载失败" class="img-rounded"
                 style="width: 60px;padding: 20px;margin-left: -15px;cursor: pointer;"
                 @click="deleteDevice($index, row)">
          </div>
          <div class="panel panel-default flex-two-info text-center" style="line-height: 164px;">
            <img :src="imgadd" alt="图片加载失败1" class="img-rounded" style="width: 60px;padding: 10px;cursor: pointer;"
                 @click="addDevice()">
          </div>
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">
      </footer>
    </modal>
  </div>

</template>

<script>
export default {
  title: '表具设备信息',
  data () {
    return {
      imgdelete: '/images/mainicon/deletedevice.png',
      imgadd: '/images/mainicon/adddevice.png',
      devicetypes: this.$appdata.getParam('表具设备类型'),
      devicesstarp: this.$appdata.getParam('以表带阀'),
      devicesinfoShow: false
    }
  },
  props: {
    devicesinfonew: {
      type: Array,
      default: []
    },
    show_devices: {
      type: Boolean,
      default: false
    },
    usertype: {
      type: String
    }
  },
  methods: {
    onChange (val) {
      console.log('。。。。。看看变化的值：' + val)
      this.changeDate()
    },
    changeDate () {
      for (let i = 0; i < this.devicesinfonew.length; i++) {
        if (this.devicesinfonew[i].f_devices_type == '民用-报警器') {
          this.devicesinfonew[i].f_alarm_type = '民用'
          this.alarmExpireDate(i)
        } else if(this.devicesinfonew[i].f_devices_type == '工商-报警器'){
          this.devicesinfonew[i].f_alarm_type = '工商'
          this.alarmExpireDate(i)
        } else if (this.devicesinfonew[i].f_devices_type == '切断阀' || this.devicesinfonew[i].f_devices_type == '自闭阀') {
          this.expireDate(i)
        }
      }
    },
    expireDate (index) {
      if (this.devicesinfonew[index].f_devices_type == '切断阀' || this.devicesinfonew[index].f_devices_type == '自闭阀') {
        if (this.devicesinfonew[index].f_input_date === '' || this.devicesinfonew[index].f_input_date === undefined) {
        } else {
          let b = new Date(this.devicesinfonew[index].f_input_date)
          let year = (b.getFullYear() - 0) + 10
          let month = (b.getMonth() - 0) + 1
          var day = b.getDate()
          this.devicesinfonew[index].f_expire_date = year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day)
          this.devicesinfoShow = false
          this.$nextTick(() => {
            this.devicesinfoShow = true
          })
        }
      }
    },
    alarmExpireDate (index) {
      if (this.devicesinfonew[index].f_firstcheck_date === '' || this.devicesinfonew[index].f_firstcheck_date === undefined || this.devicesinfonew[index].f_firstcheck_date === null) {
      } else {
        let b = new Date(this.devicesinfonew[index].f_firstcheck_date)
        let year = (b.getFullYear() - 0) + 3
        if(this.devicesinfonew[index].f_alarm_type == '民用'){
          year = (b.getFullYear() - 0) + 5
        }
        let year2 = (b.getFullYear() - 0) + 1
        let month = (b.getMonth() - 0) + 1
        var day = b.getDate()
        this.devicesinfonew[index].f_expire_date = year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day)
        this.devicesinfonew[index].f_nextcheck_date = year2 + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day)
        this.devicesinfoShow = false
        this.$nextTick(() => {
          this.devicesinfoShow = true
        })
      }
    },
    deleteDevice (index, row) {
      console.log('删除的信息', row)
      if (!this.$login.r.includes('删除表具设备信息')) {
        return this.$showAlert('【删除表具设备信息】权限不足！！！', 'info', 1000)
      }
      if (row.id) {
        this.$showMessage('此操作无法还原，是否确定要删除此设备？', ['confirm', 'cancel']).then((res) => {
          if (res === 'confirm') {
            this.$resetpost('rs/logic/deletedevices', {param: row}, {
              resolveMsg: `成功删除此设备`,
              rejectMsg: '删除设备失败'
            }).then((res) => {
              this.devicesinfonew.splice(index, 1)
            })
          }
        })
      } else {
        this.devicesinfonew.splice(index, 1)
      }
    },
    addDevice () {
      console.log('设备信息', this.devicesinfonew)
      this.devicesinfonew.push({
        f_devices_type: '调压器',
        f_input_date: this.$login.toStandardTimeString(),
        f_firstcheck_date: this.$login.toStandardTimeString()
      })
    }
  }
}
</script>
<style lang="less">
.flex-deviceinfo {
  padding: 0px 20px;
  justify-content: space-between;
  height: auto;
  flex-wrap: wrap;
}

.flex-two-info {
  margin-bottom: 10px;
  align-items: center;
  width: 48%;
}
</style>
