<template lang="pug">
  el-dialog( :close-on-click-modal='false', :visible.sync='visible' append-to-body @close="closeForm('dataForm')" width='50%')
    .title-bold(slot='title') {{id ? '编辑应急部门' : '新增应急部门'}}
    el-card.mycard(shadow="never" style='border:0;')
      el-form(:model='dataForm', :rules='dataRule', ref='dataForm',  label-width='130px')
        el-row(:gutter='20')
          el-col(:span='12')
            el-form-item(label="应急部门名称:" prop="name")
              el-input.mywidth(v-model='dataForm.name' placeholder="请输入应急部门名称"  clearable )
          el-col(:span='12')
            el-form-item(label="联系电话:" prop="linkphone")
              el-input.mywidth(v-model='dataForm.linkphone' placeholder="请输入联系电话"  clearable )
          el-col(:span='24')
            el-form-item(label="应急部门地址:" prop="address")
              el-input.mywidth(v-model='dataForm.address' placeholder="请输入应急部门地址"  clearable )
          el-col(:span='12')
            el-form-item(label="部门负责人:" prop="leader")
              el-input.mywidth(v-model='dataForm.leader' placeholder="请输入部门负责人"  clearable )
          el-col(:span='12')
            el-form-item(label="部门负责人电话:" prop="leaderPhone")
              el-input.mywidth(v-model='dataForm.leaderPhone' placeholder="请输入部门负责人电话"  clearable )
          el-col(:span='24')
            el-form-item(label="部 门 职 责:" prop="duty")
              el-input.mywidth(v-model="dataForm.duty"  type="textarea" :rows="3" resize="none" placeholder="请输入部门职责" clearable)
          el-col(:span='24')
            el-form-item(label="备       注:" prop="remark")
              el-input.mywidth(v-model="dataForm.remark"  type="textarea" :rows="3" resize="none" placeholder="请输入备注" clearable)
    span.dialog-footer(slot='footer')
      el-button(type='primary' size='medium' @click="cancel") 取消
      el-button(type='primary' size='medium' @click='dataFormSubmit()' v-prevent-re-click) 保存
</template>

<script>
export default {
  data () {
    var validatorPhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('联系电话不可为空'))
      } else {
        if (value !== '') {
          var reg = /^1[3456789]\d{9}$/
          var reg2 = /^(\d{3,4}-)\d{7,8}$/
          if (!reg.test(value) && !reg2.test(value)) {
            callback(new Error('请输入有效的联系电话(手机号码或座机号)'))
          } else {
            callback()
          }
        }
      }
    }

    var validatorLeaderPhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('部门负责人电话不可为空'))
      } else {
        if (value !== '') {
          var reg = /^1[3456789]\d{9}$/
          var reg2 = /^(\d{3,4}-)\d{7,8}$/
          if (!reg.test(value) && !reg2.test(value)) {
            callback(new Error('请输入有效的部门负责人电话(手机号码或座机号)'))
          } else {
            callback()
          }
        }
      }
    }

    return {
      id: '',
      show: true,
      clickFlag: false,
      visible: false,
      roleList: [],
      dataForm: {
        id: 0,
        name: '',
        linkphone: '',
        address: '',
        leader: '',
        leaderPhone: '',
        duty: '',
        remark: ''
      },
      dataRule: {
        name: [
          { required: true, message: '应急部门名称不能为空', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        linkphone: [
          { required: true, validator: validatorPhone, trigger: 'blur' }
        ],
        address: [
          { required: true, message: '应急部门地址不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        leader: [
          { required: true, message: '部门负责人不能为空', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        leaderPhone: [
          { required: true, validator: validatorLeaderPhone, trigger: 'blur' }
        ],
        duty: [
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        remark: [
          { min: 1, max: 500, message: '长度在 1 到 500 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init (id) {
      this.visible = true
      this.clickFlag = false
      this.id = id || ''
      if (id) {
        this.show = false
        this.$http({
          url: this.$http.adornUrl('/emOrg/getId/' + id),
          method: 'get',
          params: this.$http.adornParams()
        }).then(data => {
          this.dataForm = data.bean
        })
      } else {
        this.show = true
        this.dataForm = {
          id: 0,
          name: '',
          linkphone: '',
          address: '',
          leader: '',
          leaderPhone: '',
          duty: '',
          remark: ''
        }
      }
    },
    change () {
      this.$forceUpdate()
    },
    // 表单提交
    dataFormSubmit () {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.clickFlag = true
          this.$http({
            url: this.$http.adornUrl(
              `/emOrg/${!this.dataForm.id ? 'save' : 'update'}`
            ),
            method: 'post',
            data: {
              id: this.id,
              name: this.dataForm.name,
              linkphone: this.dataForm.linkphone,
              address: this.dataForm.address,
              leader: this.dataForm.leader,
              leaderPhone: this.dataForm.leaderPhone,
              duty: this.dataForm.duty,
              remark: this.dataForm.remark,
              stationId: localStorage.getItem('stationId')
            }
          }).then(data => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshdatalist')
                }
              })
            } else {
              this.clickFlag = false
              this.$message.error(data.msg)
            }
          })
        }
      })
    },
    closeForm (formRule) {
      this.$refs[formRule].resetFields()
      this.visible = false
    },
    //取消
    cancel() {
      this.$confirm('确认取消?', this.id ? '编辑应急部门' : '新增应急部门', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.closeForm('dataForm')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          })
        })
    }
  }
}
</script>
<style>
.el-table__header {
  width: 100% !important;
}
.el-table__body {
  width: 100% !important;
}
</style>