<!--
 * @Description  :新增 & 修改角色弹框
 * @Autor        : miaofang
 * @LastEditTime : 2023-05-18 13:27:55
-->
<!-- 新增 & 修改角色 -->
<template>
  <dialogBox
    class="PersonnelDialog"
    :title="title"
    :width="'567px'"
    :isMain="true"
    @closeDialog="close"
    @submitForm="submitForm"
    v-model="myValue">
    <div class="dialogCon">
      <el-form ref="form" :model="dialogForm" :rules="rules" label-width="82px">
        <el-row :gutter="24">
          <el-col :span="23">
            <el-form-item label="角色名称:" prop="roleName">
              <el-input
                v-model="dialogForm.roleName"
                clearable
                placeholder="角色名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="23">
            <el-form-item label="备注:" class="form-item-mb0">
              <el-input
                v-model="dialogForm.roleTextArea"
                clearable
                :rows="10"
                type="textarea"
                maxlength="30"
                placeholder="备注" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- <template slot="footer">
      <el-button
        class="cancel-button"
        @click="handleCloseDialog">取消</el-button>

      <el-button
        type="primary"
        @click="handleSaveRole()">保存</el-button>
    </template> -->
  </dialogBox>
</template>

<script>
  import Dialog from "@/components/Dialog/";
  import { api, httpAction } from '@/api/manageApi'
  export default {
    components: {
      Dialog
    },
    props: {
      value: { type: Boolean, default: false },
    },
    data () {
      return {
        myValue: this.value,
        title: '',
        menuType: '',
        roleId: '',
        sort: 0,
        dialogForm: {
          roleName: '',
          roleType: '',
          roleTextArea: ''
        },
        rules: {
          roleName: [
            { required: true, message: '请输入角色名称', trigger: 'blur' }
          ],
        },
        roleTypeOptions: [
          { name: '定制', value: '定制' },
          { name: '其他', value: '其他' }
        ]
      }
    },
    watch: {
      value (val) {
        this.myValue = val
      }
    },
    methods: {
      // 保存新增或关闭事件
      /**
       * @description: 保存新增或关闭事件
       * @author: renchao
       */
      submitForm () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            try {
              const params = {
                category: 2,
                description: this.dialogForm.roleTextArea,
                name: this.dialogForm.roleName,
                sort: this.sort,
                type: this.dialogForm.roleType
              }
              if (this.roleId) {
                params.id = this.roleId
                httpAction(`${api.roles}/${params.id}`, params, 'post').then(
                  (res) => {
                    if (res.status === 1) {
                      this.$message.success({
                        message: '修改成功',
                        showClose: true
                      })
                      this.dialogForm = {
                        roleName: '',
                      }

                      this.$emit('ok')
                    } else {
                      this.$message.error({
                        message: res.message,
                        showClose: true
                      })
                    }
                  }
                )
              } else {
                httpAction(api.roles, params, 'post').then((res) => {
                  if (res.status === 1) {
                    this.$message.success({
                      message: '新增成功',
                      showClose: true
                    })
                    this.close()

                    this.$emit('ok')
                    this.$emit('ok', this.menuType)
                  } else {
                    this.$message.error({
                      message: res.message,
                      showClose: true
                    })
                  }
                })
              }
            } catch (e) {
              console.error(e)
            }
          }
        })
      },
      // 重置
      /**
       * @description: 重置
       * @author: renchao
       */
      resetForm () {
        this.dialogForm = {
          roleName: '',
        }
        this.$refs.form.resetFields()
      },
      // 关闭
      /**
       * @description: 关闭
       * @author: renchao
       */
      close () {
        this.resetForm()
        this.$emit('input', false)
      }
    }
  }
</script>
<style scoped lang="scss">
</style>