<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="row in devicesinfo">
            <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></v-select>
                </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_no" 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_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">安装人&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+'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;">
                  <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 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"
                               :format="'yyyy-MM-dd HH:mm:ss'"
                               @change="updateExpireDate(row)">
                  </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_make_date"
                               :value.sync="row.f_make_date"
                               :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;">
                  <label class="font_normal_body">到期日期</label>
                  <datepicker  placeholder="到期日期" style="width: 60%"
                               v-model="row.f_expire_date"
                               :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;">
                  <label class="font_normal_body">管道类型</label>

                  <v-select :value.sync="row.f_pipe_type" v-model="row.f_pipe_type"
                            :options='pipetypes' placeholder='连接管类型' :value-single="true"
                            close-on-select></v-select>
                </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_pipeinstall_date"
                               :value.sync="row.f_pipeinstall_date"
                               :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>
                  <datepicker  placeholder="连接管到期日期" style="width: 60%"
                               v-model="row.f_pipeexpire_date"
                               :value.sync="row.f_pipeexpire_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>
                  <input type="text" class="input_search" style="width:60%" v-model="row.f_pipe_connection" placeholder='设备型号'  :id="$index+'devicesmodel'">
                </div>
              </div>
              <div class="row auto"  style="margin-left: 10px;">
                <div style="" class="col-sm-12 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('设备类型'),
        pipetypes: this.$appdata.getParam('连接管类型')
      }
    },
    props: {
      devicesinfo: {
        type: Array
      },
      show_devices: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      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.devicesinfo.splice(index, 1)
              })
            }
          })
        } else {
          this.devicesinfo.splice(index, 1)
        }
      },
      addDevice () {
        const inputDate = this.$login.toStandardTimeString()
        this.devicesinfo.push({
          f_devices_type: '家用灶具',
          f_input_date: inputDate,
          f_expire_date: ''
        })
      },
      updateExpireDate (device) {
        if (device.f_input_date) {
          if (device.f_devices_type === '自闭阀' || device.f_devices_type === '切断阀') {
            const inputDate = new Date(device.f_input_date)
            const expireDate = new Date(inputDate)
            expireDate.setFullYear(expireDate.getFullYear() + 10)
            const now = new Date()
            expireDate.setHours(now.getHours())
            expireDate.setMinutes(now.getMinutes())
            expireDate.setSeconds(now.getSeconds())
            const formatDate = (date) => {
              const year = date.getFullYear()
              const month = String(date.getMonth() + 1).padStart(2, '0')
              const day = String(date.getDate()).padStart(2, '0')
              const hours = String(date.getHours()).padStart(2, '0')
              const minutes = String(date.getMinutes()).padStart(2, '0')
              const seconds = String(date.getSeconds()).padStart(2, '0')
              return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
            }
            device.f_expire_date = formatDate(expireDate)
          }
          if (device.f_devices_type === '报警器') {
            const inputDate = new Date(device.f_input_date)
            const expireDate = new Date(inputDate)
            expireDate.setFullYear(expireDate.getFullYear() + 5)
            const now = new Date()
            expireDate.setHours(now.getHours())
            expireDate.setMinutes(now.getMinutes())
            expireDate.setSeconds(now.getSeconds())
            const formatDate = (date) => {
              const year = date.getFullYear()
              const month = String(date.getMonth() + 1).padStart(2, '0')
              const day = String(date.getDate()).padStart(2, '0')
              const hours = String(date.getHours()).padStart(2, '0')
              const minutes = String(date.getMinutes()).padStart(2, '0')
              const seconds = String(date.getSeconds()).padStart(2, '0')
              return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
            }
            device.f_expire_date = formatDate(expireDate)
          }
        }
      }
    },
    watch: {
      'devicesinfo': {
        deep: true,
        handler (newVal) {
          newVal.forEach(device => {
            this.$watch(() => device.f_input_date, (newDate) => {
              if (newDate) {
                this.updateExpireDate(device)
              }
            })
            this.$watch(() => device.f_devices_type, (newType) => {
              if (device.f_input_date) {
                this.updateExpireDate(device)
              } else {
                device.f_expire_date = ''
              }
            })
          })
        }
      }
    }
  }
</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>
