<template>
  <el-dialog :visible.sync="dialogFormVisible" title="常开/常闭设置" append-to-body @close="cancel">
    <el-form ref="dataForm" :rules="rules" :model="doorForm" label-well-code="right" label-width="100px">
      <el-row type="flex" justify="center">
        <el-col :span="18">
          <el-form-item label="门禁名称" prop="doorName">
            <el-input v-model.trim="doorForm.doorName" :disabled="true" type="text" placeholder="必填"/>
          </el-form-item>
        </el-col>
      </el-row>
      <!--门禁状态-->
      <!--<el-row type="flex" justify="center">-->
      <!--<el-col :span="18" justify="center">-->
      <!--<el-form-item label="门禁状态" prop="openStatus">-->
      <!--<el-radio-group v-model="doorForm.openStatus">-->
      <!--<el-radio v-for="item in statusList" :key="'openStatus_'+item.value" :label="item.value">{{ item.name }}</el-radio>-->
      <!--</el-radio-group>-->
      <!--</el-form-item>-->
      <!--</el-col>-->
      <!--</el-row>-->
      <!--生效和失效日期 仅策略为日期时显示v-if="doorForm.openStatus!='2'" -->
      <el-row type="flex" justify="center">
        <el-col :span="18">
          <el-form-item label="生效时间" prop="beginDateTime">
            <el-date-picker
              v-model.trim="doorForm.beginDateTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择生效时间"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="18">
          <el-form-item label="失效时间" prop="endDateTime">
            <el-date-picker
              v-model.trim="doorForm.endDateTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择失效时间"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="saveData">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { openDoorAlways } from '@/api/door'
import DeptSelect from '../../components/DeptSelect/index'

export default {
  name: 'EditDoor',
  components: { DeptSelect },
  data() {
    return {
      dialogFormVisible: false, // 对话框是否显示
      dialogStatus: '', // 对话框类型：create,update
      doorForm: {
        doorId: '', // id
        doorName: '', // 门禁名称
        openStatus: '', // 门禁状态
        beginDateTime: '', // 生效时间
        endDateTime: '' // 失效时间
      }, // 表单
      textMap: {
        update: '编辑',
        create: '新增',
        detail: '详情'
      }, // 表头显示标题
      statusList: [
        { value: '2', name: '正常' },
        { value: '1', name: '常开' },
        { value: '0', name: '常闭' }
      ],
      rules: {
        openStatus: [{ required: true, message: '门禁状态', trigger: ['blur', 'change'] }]
      }, // 前端校验规则
      isEditMode: false,
      todo: ''
    }
  },
  methods: {
    // 初始化对话框
    initDialog: function(list = null, todo) {
      this.dialogFormVisible = true
      this.todo = todo
      if (list.length === 1) {
        const row = list[0]
        this.doorForm = {
          doorId: row.id,
          doorName: row.doorName, // 门禁名称
          openStatus: row.openStatus, // 门禁状态
          beginDateTime: row.beginDatetime, // 生效时间
          endDateTime: row.endDatetime // 失效时间
        }
      } else {
        this.resetForm()
        this.doorForm.doorId = list.map(function(item) { return item.id })
        this.doorForm.doorName = list.map(function(item) { return item.doorName }).join(',')
      }
    },
    // 重置表单
    resetForm() {
      this.doorForm = {
        doorId: '', // id
        doorName: '', // 门禁名称
        openStatus: '', // 门禁状态
        beginDateTime: '', // 生效时间
        endDateTime: '' // 失效时间
      }
    },
    // 保存数据
    saveData: function() {
      if (this.doorForm.openStatus !== '2' && this.doorForm.beginDateTime >= this.doorForm.endDateTime) {
        this.$message.warning('生效时间必须小于失效时间，且不能为空')
        return
      }
      this.updateData()
    },
    // 修改数据
    updateData: function() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if (this.doorForm.openStatus !== '2') {
            if (!this.doorForm.beginDateTime || this.doorForm.beginDateTime === '') {
              this.$message.warning('生效时间不得为空')
              return
            }
            if (!this.doorForm.endDateTime || this.doorForm.endDateTime === '') {
              this.$message.warning('失效时间不得为空')
              return
            }
            const beginTime = new Date(this.doorForm.beginDateTime)
            const endTime = new Date(this.doorForm.endDateTime)
            if (endTime <= beginTime) {
              this.$message.warning('失效时间必须大于生效时间')
              return
            }
          }
          openDoorAlways(this.doorForm, this.todo).then(response => {
            if (response.code === 200) {
              this.$message.success('编辑成功')
              this.$emit('watchChild')
              this.dialogFormVisible = false
            }
          })
        }
      })
    },
    cancel: function() {
      this.dialogFormVisible = false
      this.$emit('watchChild')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .el-select{
    width: 100%;
  }
  .el-date-editor{
    width: 100%;
  }
</style>