<!--  -->
<template>
  <div class="tab4Dialog">
    <el-dialog :title="ruleForm.id?'修改':'新增'" :visible="isShow" @close="btnX()">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="报警设备：" prop="name">
          <el-input
            v-model="ruleForm.name"
            maxlength="10"
            show-word-limit
            style="width: 500px"
          ></el-input>
        </el-form-item>
        <el-form-item label="报警位置：" prop="location">
          <el-input
            v-model="ruleForm.location"
            maxlength="8"
            show-word-limit
            style="width: 500px"
          ></el-input>
        </el-form-item>
        <el-form-item label="报警时间：">
          <i class="biaoshi"></i>
          <el-date-picker
            v-model="timeBJ"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="更新时间：">
          <i class="biaoshi"></i>
          <el-date-picker
            v-model="time"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="btnX">取 消</el-button>
        <el-button type="primary" @click="btnOk">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { alarmSave, videoDetailById } from '@/apis/tab4'
export default {
  name: 'tab4Dialog',
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  components: {},
  data () {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick (picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      disTimeBJ: '',
      timeBJ: '',
      time: '',
      disTime: '',
      ruleForm: {
        id: '',
        name: '',
        location: ''
      },
      rules: {
        name: [{ required: true, message: '不能为空', trigger: 'blur' }],
        location: [{ required: true, message: '不能为空', trigger: 'blur' }]
      }
    }
  },
  watch: {
    time (val) {
      const temp = this.moment(val).format('YYYY-MM-DD HH:mm:ss')
      this.disTime = temp
    },
    timeBJ (val) {
      const temp = this.moment(val).format('YYYY-MM-DD HH:mm:ss')
      this.disTimeBJ = temp
    }
  },
  computed: {},
  methods: {
    btnX () {
      this.$emit('update:isShow', false)
      this.$refs.ruleForm.resetFields()
      this.ruleForm = {
        id: '',
        name: '',
        location: ''
      }
      this.timeBJ = ''
    },
    async btnOk () {
      if (this.timeBJ === null) return this.$message.warning('报警时间不能为空!')
      if (this.time === null) return this.$message.warning('更新时间不能为空!')
      try {
        await this.$refs.ruleForm.validate()
        const obj = {}
        if (this.ruleForm.id) obj.id = Number(this.ruleForm.id)
        obj.location = this.ruleForm.location
        obj.name = this.ruleForm.name
        obj.userCreateTime = this.disTimeBJ
        obj.userUpdateTime = this.disTime
        const res = await alarmSave(obj)
        if (res.code === 0) {
          this.$message.success('操作成功')
          // 通知父组件刷新页面
          this.$emit('refresh')
          this.btnX()
        } else this.$message.warning(res.msg)
        // console.log(999, res)
        // console.log(777777777777, obj)
      } catch (error) {
        console.log(error)
      }
    },
    getCurrentTime () {
      // 获取当前时间并打印
      var _this = this
      const yy = new Date().getFullYear()
      const mm = new Date().getMonth() + 1
      const dd = new Date().getDate()
      const hh = new Date().getHours()
      const mf =
        new Date().getMinutes() < 10
          ? '0' + new Date().getMinutes()
          : new Date().getMinutes()
      const ss =
        new Date().getSeconds() < 10
          ? '0' + new Date().getSeconds()
          : new Date().getSeconds()
      _this.gettime = yy + '/' + mm + '/' + dd + ' ' + hh + ':' + mf + ':' + ss
      this.time = _this.gettime
      console.log(_this.gettime)
    },
    // 通过id获取详情---让父组件调用
    async videoDetailById (id) {
      const res = await videoDetailById(id)
      this.ruleForm = res.data
      this.timeBJ = res.data.userCreateTime
      // console.log(998, res)
      this.getCurrentTime()
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {},
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
</style>
