<template lang="pug">
    el-dialog(:visible.sync='visible' append-to-body width='37%')
        div.title-bold(slot='title') {{dataForm.id ? '编辑场景' :'新增场景'}}
        el-form( :model='dataForm' :rules='dataRule' ref='dataForm'  label-width='100px')
            el-row( )
                el-col(:span='14' :offset='4')
                    el-form-item(label='编码:' prop='code')
                        el-input(v-model='dataForm.code' placeholder='请填写编码')
                el-col(:span='14' :offset='4')
                    el-form-item(label='名称:' prop='name')
                        el-input(v-model='dataForm.name' placeholder='请填写名称' clearable)
        span.dialog-footer(slot='footer')
            el-button(size='medium' type='primary' @click='cancel') 取消
            el-button(size='medium' type='primary' @click='dataFormSubmit()' v-prevent-re-click) 保存
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      dataForm: {},
      dataRule: {
        name: [
          { required: true, message: '名称不能为空', trigger: 'blur' },
          {
            min: 1,
            max: 50,
            message: '长度在 1 到 50 个字符',
            trigger: 'blur',
          },
        ],
        code: [
          { required: true, message: '编码不能为空', trigger: 'blur' },
          {
            min: 1,
            max: 50,
            message: '长度在 1 到 50 个字符',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val === false) {
          this.$refs.dataForm.resetFields()
        }
      },
      deep: true,
    },
  },
  methods: {
    init(row, mapId) {
      this.visible = true
      if (row.id) {
        this.dataForm = JSON.parse(JSON.stringify(row))
      } else {
        this.dataForm = {
          id: '',
          code: '',
          name: '',
          mapId: mapId,
          stationId: localStorage.getItem('stationId'),
        }
      }
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/liRoom/${!this.dataForm.id ? 'save' : 'update'}`
            ),
            method: 'post',
            data: this.dataForm,
          }).then((data) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshdatalist')
                },
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    },
    //取消
    cancel() {
      this.$confirm('确认取消?', this.dataForm.id ? '编辑场景' : '新增场景', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.visible = false
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出',
          })
        })
    },
  },
}
</script>
<style>
.el-table__header {
  width: 100% !important;
}

.el-table__body {
  width: 100% !important;
}
</style>
