<!--
  @description: 系统设置->数据权限->编辑弹窗
  @author: change by zhangfan
  @routerPath:
  @date:  2020/5/12-13:12
-->
<template>
  <el-dialog
    :visible.sync="dialogData.dialog"
    :modal="true"
    :lock-scroll="false"
    title="编辑"
    width="600px"
    custom-class="el-dialog__body-p0"
  >
    <section class="tools p0-16 pt16 clearfix">
      <el-form
        ref="formData"
        :model="formData"
        :rules="rules"
        :inline-message="true"
      >
        <div class="block">
          <table class="from_table">
            <tr>
              <td>
                <el-form-item label="权限名称" prop="interfaceName" />
              </td>
              <td>
                <el-input v-model="formData.interfaceName" />
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="权限编号" prop="route" />
              </td>
              <td>
                <el-input v-model="formData.route" />
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="权限字段" prop="column" />
              </td>
              <td>
                <el-input v-model="formData.column" />
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="规则类型" prop="value" />
              </td>
              <td>
                <el-select v-model="formData.value" style="width: 100%" filterable placeholder="请选择">
                  <el-option
                    v-for="item in ruleType"
                    :key="item.index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="指定表" prop="table" />
              </td>
              <td>
                <el-input v-model="formData.table" />
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="指定别名" prop="alias" />
              </td>
              <td>
                <el-input v-model="formData.alias" />
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="类型" prop="effect" />
              </td>
              <td>
                <el-radio-group v-model="formData.effect">
                  <el-radio label="0" value="0">
                    用于树图
                  </el-radio>
                  <el-radio label="1" value="1">
                    有效接口
                  </el-radio>
                </el-radio-group>
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="备注" prop="roleDesc" />
              </td>
              <td>
                <el-input v-model="formData.roleDesc" />
              </td>
            </tr>
          </table>
        </div>
        <!--操作按钮-->
        <div class="but_footer" style="text-align: center;margin:30px 0 50px 0">
          <el-button type="primary" @click="submitForm('formData')">
            确认
          </el-button>
          <el-button type="primary" @click="cancel()">
            取消
          </el-button>
        </div>
      </el-form>
    </section>
  </el-dialog>
</template>

<script>
import { queryAuthData, saveAuthData } from '@api/common/roleManage'
/* 公用方法*/
import { filterObj } from '@/assets/js/utils'// 常用方法
export default {
  name: 'DataManageAddDialog',
  props: {
    dialogData: {
      type: Object,
      default: function() {
        return
      }
    },
    editlId: {
      type: String,
      default: function() {
        return
      }
    }
  },
  data() {
    return {
      formData: {
        // 表单字段
        interfaceName: '', // 权限名称
        route: '', // 权限编号
        column: '', // 权限字段
        value: '', // 规则类型
        table: '', // 指定表
        alias: '', // 指定别名
        effect: '' // 类型
      },
      getId: '', // 获取数据id
      rules: {
        // 校验
        interfaceName: [{ required: true, message: '不为空', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在10个字符以内', trigger: 'blur' }],
        route: [{ required: true, message: '不为空', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在10个字符以内', trigger: 'blur' }],
        column: [{ required: true, message: '不为空', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在10个字符以内', trigger: 'blur' }],
        value: [{ required: true, message: '不为空', trigger: 'change' }],
        table: [{ required: true, message: '不为空', trigger: 'blur' }],
        alias: [{ required: true, message: '不为空', trigger: 'blur' }],
        effect: [{ required: true, message: '不为空', trigger: 'change' }]
      },
      ruleType: [{ // 下拉框数据
        value: '0',
        label: '全部可见'
      }, {
        value: '1',
        label: '本人可见'
      }, {
        value: '2',
        label: '所在机构可见'
      }, {
        value: '3',
        label: '所在机构及子级可见'
      }]
    }
  },
  watch: {
    // 监听父级传来的id
    editlId(val) {
      this.getqueryAuthData(val)
    }
  },
  methods: {
    // 查询原有的数据
    getqueryAuthData(id) {
      queryAuthData(id).then(res => {
        this.getId = res.data.id
        this.formData = Object.assign({}, res.data) // copy obj
      }).catch(err => {
        console.log(err)
      })
    },
    // 查询条件
    getQueryParams() { // 提交
      const param = Object.assign({}, this.formData)
      param.id = this.getId
      param.parentId = this.parentId || ''
      param.interfaceSort = this.interfaceSort || ''
      param.pendingName = ''
      return filterObj(param)
    },
    // 编辑
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const params = this.getQueryParams() // 查询条件
          saveAuthData(params).then(res => {
            if (res.header.ret === '0') {
              this.$message({
                message: '编辑成功！',
                type: 'success'
              })
              this.$emit('closeDialog', false)
            } else {
              this.$message.error('编辑失败！')
            }
          }).catch(err => {
            console.log(err)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 取消关闭弹窗
    cancel() {
      this.$emit('closeDialog', false)
    }
  }
}
</script>

<style scoped>
</style>

