<template>
  <div class="warntype-wrapper">
    <div class="tools-wrapper">
      <el-button type="primary" @click="addTypeDlShow">新增</el-button>
      <el-button type="warning" :disabled="isEditable" @click="editTypeDlShow">编辑</el-button>
      <el-button type="danger" :disabled="isDeleteable" @click="deleteTypeShow">删除</el-button>
    </div>
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <el-tooltip class="item" effect="dark" content="指定警示教育类别" placement="top">
          <span class="role-span">警示教育类别</span>
        </el-tooltip>
      </div>
      <div class="checks-wrapper">
        <div v-for="item in curWarnType">
          <input type="checkbox" :checked="item.checked" @input="changeTypeChecked(item)">{{ '&nbsp;&nbsp;' + item.type }}
        </div>
      </div>
    </el-card>
    <el-dialog
      title="新增警示教育"
      :visible.sync="addDialogVisible"
    >
      <el-form
        ref="addForm"
        :model="formInfo"
      >
        <el-form-item label="类别" :label-width="'120px'">
          <el-input v-model="formInfo.type" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="cancelAddType">取消</el-button>
        <el-button type="primary" @click="submitAddType">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="修改警示教育"
      :visible.sync="editDialogVisible"
    >
      <el-form
        ref="editForm"
        :model="editFormInfo"
      >
        <el-form-item label="" :label-width="'120px'">
          <el-input v-model="editFormInfo.type" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="cancelEditType">取消</el-button>
        <el-button type="primary" @click="submitEditType">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      curWarnType: [
        {
          type: 'what',
          checked: false
        }
      ],
      addDialogVisible: false,
      editDialogVisible: false,
      formInfo: {
        type: ''
      },
      editFormInfo: {
        type: ''
      },
      isEditable: true,
      isDeleteable: true
    }
  },
  methods: {
    addTypeDlShow() {
      this.addDialogVisible = true
      this.formInfo.type = ''
    },
    cancelAddType() {
      this.addDialogVisible = false
      this.formInfo.type = ''
    },
    submitAddType() {
      // axios 提交
    },
    changeTypeChecked(item) {
      item.checked = !item.checked
      const checkedArr = this.curWarnType.filter(item => item.checked)
      this.isEditable = true
      this.isDeleteable = true
      if (checkedArr.length === 1) {
        this.isEditable = false
      }
      if (checkedArr.length > 0) {
        this.isDeleteable = false
      }
    },
    cancelEditType() {
      this.editDialogVisible = false
      this.editFormInfo.type = ''
    },
    submitEditType() {
      // axios
    },
    editTypeDlShow() {
      // 编辑类型对话框
      this.editDialogVisible = true
    },
    deleteTypeShow() {
      // 删除类型对话框
      this.$confirm('此操作将删除选中项',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style>

</style>
