<template>
  <div>
    <div class="menu-tab">
      <el-tabs type="border-card" v-model="activeName">
        <!-- 菜单表 start -->
        <el-tab-pane label="菜单表" name="first">
          <div class="app-container">
            <div class="filter-container">
              <div class="filter-left">
                <div class="filter-item">
                  菜单级别:
                  <el-select
                    v-model="value"
                    placeholder=""
                    style="width: 120px"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>

                <el-button
                  type="primary"
                  icon="el-icon-search"
                  class="search-button"
                  >搜索</el-button
                >
              </div>

              <div class="handle-button-right">
                <el-button
                  icon="el-icon-plus"
                  type="success"
                  @click="dialogFormVisible = true"
                  >新增</el-button
                >
                <el-button
                  icon="el-icon-delete"
                  type="danger"
                  @click="batchDelete"
                  >删除</el-button
                >
                <el-button type="warning">
                  <svg-icon icon-class="export" />
                  导出
                </el-button>
              </div>
            </div>

            <el-divider></el-divider>
            <el-table
              :data="tableData"
              stripe
              border
              :header-cell-style="{ background: '#EBF1FF', color: '#606266' }"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="40"> </el-table-column>

              <el-table-column prop="menuName" label="菜单名称">
              </el-table-column>
              <el-table-column prop="menuLevel" label="菜单级别">
              </el-table-column>
              <el-table-column prop="parentMenu" label="父级菜单" width="100">
              </el-table-column>
              <el-table-column prop="menuSort" label="菜单排序">
              </el-table-column>
              <el-table-column
                prop="url"
                label="请求地址"
                width="180"
              ></el-table-column>
              <el-table-column label="图标">
                <!-- <template slot-scope="{}">
                  <img src="@/assets/img.png" alt="" style="height: 30px" />
                </template> -->

                <template slot-scope="scope">
                  <img :src="scope.row.imageUrl" style="width: 25px" />
                </template>
              </el-table-column>
              <el-table-column
                prop="createTime"
                label="创建时间"
                width="180"
              ></el-table-column>
              <el-table-column
                prop="createMan"
                label="创建人"
              ></el-table-column>
              <el-table-column
                prop="editTime"
                label="修改时间"
                width="180"
              ></el-table-column>
              <el-table-column prop="editMan" label="修改人"></el-table-column>

              <el-table-column label="操作" width="150" fixed="right">
                <template slot-scope="scope">
                  <el-button
                    icon="el-icon-edit"
                    style="color: #406ce5"
                    @click="handleEdit(scope.$index, scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    icon="el-icon-delete"
                    style="color: #f27979"
                    @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

            <el-dialog title="新增" :visible.sync="dialogFormVisible">
              <el-form :model="form">
                <el-form-item label="菜单名称:" :label-width="formLabelWidth">
                  <el-input v-model="form.name4" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="菜单级别:" :label-width="formLabelWidth">
                  <el-select
                    v-model="form.region2"
                    style="width: 100%"
                    placeholder=""
                  >
                    <el-option label="级别一" value="3"></el-option>
                    <el-option label="级别二" value="4"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="父级菜单:" :label-width="formLabelWidth">
                  <el-select
                    v-model="form.region3"
                    style="width: 100%"
                    placeholder=""
                  >
                    <el-option label="父级一" value="5"></el-option>
                    <el-option label="父级二" value="6"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="菜单排序:" :label-width="formLabelWidth">
                  <el-input v-model="form.name6" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="请求地址:" :label-width="formLabelWidth">
                  <el-input v-model="form.name6" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="图标:" :label-width="formLabelWidth">
                  <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    multiple
                    :limit="3"
                  >
                    <el-button size="small" type="primary">选择文件</el-button>
                    <!-- <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div> -->
                  </el-upload>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button
                  @click="dialogFormVisible = false"
                  style="background: #f6f6f6"
                  >取 消</el-button
                >
                <el-button type="primary" @click="dialogFormVisible = false"
                  >提 交</el-button
                >
              </div>
            </el-dialog>
          </div>
        </el-tab-pane>
        <!-- 菜单表 end-->

        <!-- 角色表 start-->
        <el-tab-pane label="角色表" name="second">
          <div class="app-container">
            <div class="filter-container">
              <div class="filter-left">
                <div class="filter-item">
                  角色名称:
                  <el-input
                    v-model="input"
                    placeholder=""
                    style="width: 120px"
                  ></el-input>
                </div>

                <el-button
                  type="primary"
                  icon="el-icon-search"
                  class="search-button"
                  >搜索</el-button
                >
              </div>

              <div class="handle-button-right">
                <el-button
                  icon="el-icon-plus"
                  type="success"
                  @click="dialogFormVisible2 = true"
                  >新增</el-button
                >
                <el-button
                  icon="el-icon-delete"
                  type="danger"
                  @click="batchDelete2"
                  >删除</el-button
                >
                <el-button type="warning">
                  <svg-icon icon-class="export" />
                  导出
                </el-button>
              </div>
            </div>

            <el-divider></el-divider>
            <el-table
              :data="tableData2"
              stripe
              border
              :header-cell-style="{ background: '#EBF1FF', color: '#606266' }"
              style="width: 100%"
              @selection-change="handleSelectionChange2"
            >
              <el-table-column type="selection" width="40"> </el-table-column>

              <el-table-column prop="roleName" label="角色名称">
              </el-table-column>
              <el-table-column label="可操作菜单">
                <template slot-scope="tableData2">
                  <a target="_blank" class="check"
                    >{{ tableData2.row.opeMenu }}
                  </a>
                </template>
              </el-table-column>
              <el-table-column prop="roleAuth" label="角色权限" width="100">
                <template slot-scope="tableData2">
                  <a target="_blank" class="check"
                    >{{ tableData2.row.roleAuth }}
                  </a>
                </template>
              </el-table-column>

              <el-table-column
                prop="createTime"
                label="创建时间"
                width="180"
              ></el-table-column>
              <el-table-column
                prop="createMan"
                label="创建人"
              ></el-table-column>
              <el-table-column
                prop="editTime"
                label="修改时间"
                width="180"
              ></el-table-column>
              <el-table-column prop="editMan" label="修改人"></el-table-column>

              <el-table-column label="操作" width="150" fixed="right">
                <template slot-scope="scope">
                  <el-button
                    icon="el-icon-edit"
                    style="color: #406ce5"
                    @click="handleEdit2(scope.$index, scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    icon="el-icon-delete"
                    style="color: #f27979"
                    @click="handleDelete2(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

            <el-dialog
              title="新增"
              class="roleDialog"
              :visible.sync="dialogFormVisible2"
              width="60%"
            >
              <el-form :model="form">
                <el-form-item label="角色名称:" :label-width="formLabelWidth2">
                  <el-input v-model="form.name4" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色ID:" :label-width="formLabelWidth2">
                  <el-input v-model="form.name4" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item
                  label="可操作菜单及权限:"
                  :label-width="formLabelWidth2"
                  class="table-item"
                >
                  <role-details></role-details>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button
                  @click="dialogFormVisible2 = false"
                  style="background: #f6f6f6"
                  >取 消</el-button
                >
                <el-button type="primary" @click="dialogFormVisible2 = false"
                  >提 交</el-button
                >
              </div>
            </el-dialog>
          </div>
        </el-tab-pane>
        <!-- 角色表 end-->
      </el-tabs>
    </div>
  </div>
</template>


<script>
import RoleDetails from '../components/RoleDetails'

export default {
  components: { RoleDetails },
  data() {
    return {
      activeName: "second",

      tableData: [
        {
          menuName: "系统管理",
          menuLevel: "1",
          parentMenu: "已是最顶级",
          menuSort: "2",
          url: "http://www.chinausky.com",
          imageUrl: require("@/assets/img.png"),
          createTime: "2020-09-15 12:20:12",
          createMan: "张三",
          editTime: "2020-09-15 12:20:12",
          editMan: "李四",
        },
        {
          menuName: "权限管理",
          menuLevel: "2",
          parentMenu: "系统信息",
          menuSort: "1",
          url: "http://www.chinausky.com",
          imageUrl: require("@/assets/img.png"),
          createTime: "2020-09-15 12:20:12",
          createMan: "张三",
          editTime: "2020-09-15 12:20:12",
          editMan: "李四",
        },
        {
          menuName: "安全机制",
          menuLevel: "3",
          parentMenu: "系统信息",
          menuSort: "2",
          url: "http://www.chinausky.com",
          imageUrl: require("@/assets/img.png"),
          // imageUrl:"https://avatar.csdnimg.cn/F/1/C/3_weixin_43962877.jpg",
          createTime: "2020-09-15 12:20:12",
          createMan: "张三",
          editTime: "2020-09-15 12:20:12",
          editMan: "李四",
        },
        {
          menuName: "人员管理",
          menuLevel: "4",
          parentMenu: "系统信息",
          menuSort: "3",
          url: "http://www.chinausky.com",
          imageUrl: require("@/assets/img.png"),
          // imageUrl:"https://avatar.csdnimg.cn/F/1/C/3_weixin_43962877.jpg",
          createTime: "2020-09-15 12:20:12",
          createMan: "张三",
          editTime: "2020-09-15 12:20:12",
          editMan: "李四",
        },
        {
          menuName: "单位信息",
          menuLevel: "5",
          parentMenu: "系统信息",
          menuSort: "4",
          url: "http://www.chinausky.com",
          imageUrl: require("@/assets/img.png"),
          // imageUrl:"https://avatar.csdnimg.cn/F/1/C/3_weixin_43962877.jpg",
          createTime: "2020-09-15 12:20:12",
          createMan: "张三",
          editTime: "2020-09-15 12:20:12",
          editMan: "李四",
        },
      ],

      tableData2: [
        {
          roleName: "超级管理员",
          opeMenu: "查看",
          roleAuth: "查看",
          createTime: "2020-09-15 12:20:12",
          createMan: "张三",
          editTime: "2020-09-15 12:20:12",
          editMan: "李四",
        },
        {
          roleName: "管理员",
          opeMenu: "查看",
          roleAuth: "查看",
          createTime: "2020-09-15 12:20:12",
          createMan: "张三",
          editTime: "2020-09-15 12:20:12",
          editMan: "李四",
        },
        {
          roleName: "普通用户",
          opeMenu: "查看",
          roleAuth: "查看",
          createTime: "2020-09-15 12:20:12",
          createMan: "张三",
          editTime: "2020-09-15 12:20:12",
          editMan: "李四",
        },
      ],
      multipleSelection: [],
      multipleSelection2: [],

      options: [
        {
          value: "1",
          label: "级别1",
        },
        {
          value: "2",
          label: "级别2",
        },
        {
          value: "3",
          label: "级别3",
        },
      ],
      value: "",

      input: "",

      dialogFormVisible: false,
      dialogFormVisible2: false,
      form: {
        name: "",
        region: "",
        region2: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "100px",
      formLabelWidth2: "150px",

    
    };
  },
  methods: {
  

    handleEdit(index, row) {
      alert(index, row);
    },
    handleDelete(index, row) {
      this.$confirm("确定删除该数据吗?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.tableData.splice(index, 1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    batchDelete() {
      let multData = this.multipleSelection;
      let tableData = this.tableData;
      let multDataLen = multData.length;
      let tableDataLen = tableData.length;

      for (let i = 0; i < multDataLen; i++) {
        for (let y = 0; y < tableDataLen; y++) {
          if (JSON.stringify(tableData[y]) == JSON.stringify(multData[i])) {
            //判断是否相等，相等就删除
            this.tableData.splice(y, 1);
            console.log("aa");
          }
        }
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    handleEdit2(index, row) {
      alert(index + "我是角色", row);
    },
    handleDelete2(index, row) {
      this.$confirm("确定删除该数据吗?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.tableData2.splice(index, 1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    batchDelete2() {
      let multData2 = this.multipleSelection2;
      let tableData2 = this.tableData2;
      let multDataLen2 = multData2.length;
      let tableDataLen2 = tableData2.length;

      for (let i = 0; i < multDataLen2; i++) {
        for (let y = 0; y < tableDataLen2; y++) {
          if (JSON.stringify(tableData2[y]) == JSON.stringify(multData2[i])) {
            //判断是否相等，相等就删除
            this.tableData2.splice(y, 1);
            console.log("aa");
          }
        }
      }
    },
    handleSelectionChange2(val) {
      this.multipleSelection2 = val;
    },
  },
};
</script>
<style scoped>
.app-container {
  min-height: calc(100vh - 115px) !important;
}
</style>


<style >
.el-tabs--border-card {
  background: rgba(0, 0, 0, 0);
  border: 1px solidrgba(0, 0, 0, 0);
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0), 0 0 6px 0 rgba(0, 0, 0, 0);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0), 0 0 6px 0 rgba(0, 0, 0, 0);
}
.el-tabs--border-card > .el-tabs__header {
  background-color: rgba(0, 0, 0, 0);
  position: relative;
  top: 12px;
  left: 14px;
  border-bottom: 0;
}
.el-tabs--border-card > .el-tabs__content {
  padding: 0;
}

.el-tabs--border-card > .el-tabs__header .el-tabs__item + .el-tabs__item,
.el-tabs--border-card > .el-tabs__header .el-tabs__item:first-child {
  background: #e4e3e3;

  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  color: #444;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: #fff;
  background-color: #5c88fa;
  border: 1px solid rgba(0, 0, 0, 0);
  border-right-color: rgba(0, 0, 0, 0);

  border-left-color: 0;
}
.el-tabs--border-card
  > .el-tabs__header
  .el-tabs__item:not(.is-disabled):hover {
  color: #fff;
  background-color: #5c88fa;
}
.el-tabs__item {
  height: 35px;
  line-height: 35px;
}

.roleDialog .el-dialog .el-form-item {
  margin: 20px 20px 0;
}
.roleDialog .el-dialog .el-form-item:first-child,
.roleDialog .el-dialog .el-form-item:nth-child(2) {
  display: inline-block;
}
.el-dialog .el-form-item.table-item {
  width: 96%;
}


</style>
