
<!--
新增功能
@Author: linqian
@Date: 2021-05-20 13:33
-->
<template>
  <dg-row :gutter="10" class="func-wapper">
    <dg-col :span="10">
      <dg-card shadow="never" is-more>
        <template slot="header">
          <div class="func-wapper__title">
            <span>功能资源信息</span>
            <dg-button type="primary"  @click="handleAddSource">新增根功能</dg-button>
          </div>
        </template>
        <menu-tree
          :isNeedRightMenu="true"
          apiName="menuTree"
          :reportForm="{ appId: app.id }"
          @handleGetNode="handleGetNode"
          @selectOperaOptions="selectOperaOptions"
          :key="timer"
          ref="myMenuTree"
        ></menu-tree>
      </dg-card>
    </dg-col>
    <dg-col :span="14">
      <dg-card shadow="never" header="功能详细信息">
        <div style="height: 550px">
          <div v-show="isShowForm">
            <el-form ref="form" label-position="right" :model="form" label-width="150px" :rules="rules">
              <el-form-item label="功能编号：" prop="code">
                <el-input v-model="form.code" placeholder=""></el-input>
              </el-form-item>
              <el-form-item label="功能名称：" prop="name">
                <el-input v-model="form.name" placeholder=""></el-input>
              </el-form-item>
              <el-form-item label="上级功能：" prop="parentId">
                <dg-tree-drop
                  ref="tree"
                  icon-class="el-icon-folder-opened"
                  icon-leaf="el-icon-document"
                  v-model="form.parentId"
                  :props="parentTreeProps"
                  :data="treeData"
                  :placeholder="form.isRoot ? '' : '请选择'"
                  :disabled="form.isRoot"
                  clearable
                  filterable
                  style="width: 100%"
                >
                </dg-tree-drop
              ></el-form-item>
              <el-form-item label="所属应用：" prop="appName">
                <el-input v-model="form.appName" placeholder="" disabled></el-input>
              </el-form-item>
              <el-form-item label="设计安全隐私类别：" prop="designSecureType">
                <dg-select v-model="form.designSecureType" placeholder="" enum="SecurityPrivacyEnum"></dg-select>
              </el-form-item>
              <el-form-item label="在用状态：" prop="isActive">
                <dg-select enum="AppFunStatusEnum" v-model="form.isActive"></dg-select>
              </el-form-item>
              <el-form-item label="功能使用场景代码：" prop="functionUsageScenarios">
                <el-input v-model="form.functionUsageScenarios" placeholder=""></el-input>
              </el-form-item>
              <el-form-item label="功能说明：" prop="remark">
                <el-input v-model="form.remark" placeholder="" type="textarea" :rows="3"></el-input>
              </el-form-item>
            </el-form>
            <div class="func-wapper__btn-save">
              <dg-button type="primary" @click="handleSave">保存</dg-button>
            </div>
          </div>
        </div>
      </dg-card>
    </dg-col>
    <!-- <dg-button v-footer @click="handleClose">取消</dg-button> -->
  </dg-row>
</template>

<script>
import MenuTree from '@/components/menu-tree';
import * as commonApi from '@/api/common';
import * as Api from '@/api/func-resource';
export default {
  name: '',
  components: { MenuTree },
  // 接收父节点的参数
  props: {
    app: Object
  },
  watch: {
    treeData(newV, OldV) {
      if (newV && newV.length > 0) {
        this.isShowForm = true;
      } else {
        this.isShowForm = false;
      }
    }
  },
  data() {
    return {
      isShowForm: false,
      treeData: [],
      parentTreeProps: {
        value: 'code',
        label: 'name',
        children: 'children'
      },
      form: {
        appId: this.app.id,
        appName: this.app.applyName,
        code: '',
        designSecureType: '',
        functionUsageScenarios: '',
        isActive: '',
        name: '',
        parentId: '',
        remark: ''
      },
      rules: {
        code: [{ required: true, message: '请输入功能编号', trigger: 'change' }],
        name: [{ required: true, message: '请输入功能名称', trigger: 'change' }],
        isActive: [{ required: true, message: '请选择在用状态', trigger: 'change' }],
        appName: [{ required: true, message: '请选择应用', trigger: 'change' }]
      },
      timer: null,
      type: null
    };
  },
  // 方法
  methods: {
    handleClose() {
      this.$emit("close");
    },
    changeRuleTrigger(type) {
      for (const key in this.rules) {
        this.rules[key][0].trigger = type;
      }
    },
    handleGetNode(data) {
      Api.detail(data.id).then((res) => {
        this.form = res.data.content;
      });
    },
    selectOperaOptions({ type, nodedata, node }) {
      this.type = type;
      if (type === 'add') {
        this.changeRuleTrigger('blur');
        this.form = {
          appId: this.app.id,
          appName: this.app.applyName,
          code: '',
          designSecureType: '',
          functionUsageScenarios: '',
          isActive: '',
          name: '',
          parentId: nodedata.code || '',
          remark: ''
        };
      } else if (type === 'delete') {
        this.handleDel(nodedata.id);
      }
    },
    // 新增
    handleAddSource() {
      this.isShowForm = true;
      this.changeRuleTrigger('blur');
      this.form = {
        isRoot: true,
        appId: this.app.id,
        appName: this.app.applyName,
        code: '',
        designSecureType: '',
        functionUsageScenarios: '',
        isActive: '',
        name: '',
        parentId: '',
        remark: ''
      };
    },
    /**
     * 获取功能树
     */
    getFuncTree() {
      commonApi.menuTree({ appId: this.app.id }).then((res) => {
        this.treeData = res;
      });
    },
    // 刪除节点
    handleDel(id) {
      this.$confirm('是否确定删除该功能及其下级功能！', '提示', {}).then(() => {
        Api.del(id)
          .then((res) => {
            this.$refs.myMenuTree.remove();
            this.timer = new Date().getTime(); // 刷新树组件
            this.getFuncTree();
          })
          .catch((err) => {
            this.$message.error('删除失败！');
          });
      });
    },
    handleSave() {
      // type=null 修改   type=add 新增  type=addRootSource新增根资源
      this.changeRuleTrigger('change');
      return new Promise((resolve) => {
        this.$refs.form.validate((valid) => {
          if (valid) {
            const { code, parentId } = this.form;
            if (code == parentId) {
              this.$message.error('上级资源不能是自己！');
              return;
            }

            const data = { ...this.form };
            delete data.isRoot;

            const api = this.form.id ? 'update' : 'save';
            Api[api](data)
              .then((res) => {
                this.$message.success('保存成功!');
                this.timer = new Date().getTime(); // 刷新树组件
                this.getFuncTree();
                this.$refs.form.resetFields();
                resolve('成功');
              })
              .catch((error) => {
                this.$message.error(error);
              });
          }
        });
      });
    }
  },
  created() {
    this.getFuncTree();
  }
};
</script>

<style lang="scss" scope>
.func-wapper {
  .warning-text {
    margin-top: 60px;
    color: #3598dc;
  }
  &__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  &__btn-save {
    text-align: right;
  }
}
</style>
