<template>
  <div class="max-big-box">
    <div class="big-max-box" v-show="pageType==0">
      <p class="add-button" @click="positionPage('1')">新增</p>
      <div class="table-box">
        <!--表格-->
        <el-table
          :data="tableData"
          style="width: 100%;margin-bottom: 20px;"
          :row-key="getRowKey"
          v-model="options"
          :default-expand-all="false"
          :tree-props="{children: 'children'}">
          <el-table-column
            prop="menuName"
            label="菜单名称"
            sortable
            width="280">
          </el-table-column>
          <el-table-column
            prop="orderNum"
            label="排序"
            sortable
            width="80">
          </el-table-column>
          <el-table-column
            prop="path"
            label="组件名称"
            sortable
            width="300">
          </el-table-column>
          <el-table-column
            prop="perms"
            label="权限标识"
            sortable
            width="300">
            <template slot-scope="scope">
              <p>{{scope.row.perms == "0" ? "" : scope.row.perms}}</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            sortable
            width="200">
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            sortable
            width="120">
            <template slot-scope="scope">
              {{scope.row.status==0?"正常":(scope.row.status==1?"停用":"")}}
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            sortable
            width="189">
          </el-table-column>
          <el-table-column
            label="操作"
            width="240">
            <template slot-scope="scope">
              <div class="table-min-button">
                <div class="cursor_pointer" @click="positionPage('3', scope.row)">
                  <img src="~@/assets/images/icon_36.png">
                  <p>修改</p>
                </div>
                <div class="cursor_pointer" @click="positionPage('2', scope.row)">
                  <img src="~@/assets/images/icon_38_01.png">
                  <p>新增</p>
                </div>
                <div class="cursor_pointer" @click="handleDelete(scope.$index, scope.row)">
                  <img src="~@/assets/images/icon_38.png">
                  <p>删除</p>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="position-max-big-box" v-if="pageType==1||pageType==2||pageType==3">
      <div class="position-big-box">
        <div class="cascader-box">
          <p class="box-title-p">上级菜单：</p>
          <el-cascader
            ref="cascaderRef"
            :options="optionsData"
            v-model="options"
            :props="{ checkStrictly: true }"
            @change="handleItemChange"
            clearable>
            <template slot-scope="{ node, data }">
              <span>{{ data.menuName }}</span>
            </template>
          </el-cascader>
        </div>
        <div class="radio-box">
          <p class="box-title-p">类型：</p>
          <el-radio v-for="(item,index) in radioData" :key="index" v-model="radio" :label="item.label">{{item.value}}</el-radio>
        </div>
        <div class="input-box">
          <p class="box-title-p">标题名称：</p>
          <input type="text" v-model="menuName" placeholder="请输入标题名称">
        </div>
        <div class="input-box" v-if="radio!=3">
          <p class="box-title-p">组件名称：</p>
          <input type="text" v-model="path" placeholder="请输入组件名称">
        </div>
        <div class="input-box" v-if="radio!=1">
          <p class="box-title-p">权限标识：</p>
          <input type="text" v-model="perms" placeholder="请输入权限标识">
        </div>
        <div class="number-box">
          <p class="box-title-p">排序：</p>
          <el-input-number v-model="num" @change="handleChange" :min="1" :max="9999" label="描述文字"></el-input-number>
        </div>
        <div class="radio-box" v-if="radio!=3">
          <p class="box-title-p">状态：</p>
          <el-radio v-for="(item,index) in radioClassData" :key="index" v-model="radioClass" :label="item.label">{{item.value}}</el-radio>
        </div>
        <div class="input-box">
          <p class="box-title-p">备注：</p>
          <input type="text" v-model="remark" placeholder="请输入备注">
        </div>
        <div class="button-box">
          <p class="cursor_pointer" @click="positionPageOff">取消</p>
          <p class="cursor_pointer" @click="buttonUpData">保存</p>
        </div>
      </div>
    </div>
    <interactive-window
      v-if="windowType"
      :windowData="windowData"
      @windowLeftClick="windowLeftClick"
      @windowRightClick="windowRightClick"
    ></interactive-window>
  </div>
</template>

<script>
  import { menuList,menuAdd,menuEditor,menuDel } from '@/api/userApi'
  export default {
    name: "pageManagement",//页面管理
    components:{
      interactiveWindow: resolve => {require(['@/components/interactiveWindow'], resolve)},//提示弹窗
    },
    data () {
      return {
        // 弹窗状态
        windowType:false,
        //弹窗组件数据
        windowData:{},
        //页面状态
        pageType:0,
        // 表格数据
        tableData:[],
        //下拉表数据
        optionsData:[],
        // 选中的options
        options:[],
        //单选数据
        radio:1,
        radioData:[
          {
            value:"目录",
            label:1,
          },
          {
            value:"菜单",
            label:2,
          },
          {
            value:"按钮",
            label:3,
          },
        ],
        //计数器
        num:1,
        //禁用/启用
        radioClass:0,
        radioClassData:[
          {
            value:"正常",
            label:0,
          },
          {
            value:"停用",
            label:1,
          },
        ],
        //输入项
        menuName:"",//菜单名称
        path:"",//组件名称
        perms:"",//标识
        remark:"",//备注
        //数筛级后数组
        lvData:[],
        //修改ID
        menuId:"",
      }
    },
    created(){

    },
    mounted() {
      this.getPageList();
    },
    methods: {
      //删除菜单
      async clickDel(id){
        let ids = [];
        ids.push(id)
        const { data } = await menuDel(ids);
        if(data.code==200){
          this.getPageList();
          this.windowData = {
            type:"2",
            title:"提示",
            text:"删除成功",
          };
          this.windowType = true;
        }
      },
      //保存按钮//区分操作/1新增/2子新增/3修改
      buttonUpData(){
        if(this.pageType==1||this.pageType==2){
          this.menuAddClick();
        }else if(this.pageType==3){
          console.log("123",)
          this.menuEditorClick();
        }
      },
      //修改菜单
      async menuEditorClick(){
        let self = this;
        if(self.options.length==0){
          this.windowData = {
            type:"3",
            title:"提示",
            text:"请选择上级菜单",
          };
          this.windowType = true;
          return
        }
        if(!self.menuName){
          this.windowData = {
            type:"3",
            title:"提示",
            text:"请输入标题名称",
          };
          this.windowType = true;
          return
        }
        if(self.radio!=3){
          if(!self.path){
            this.windowData = {
              type:"3",
              title:"提示",
              text:"请输入组件名称",
            };
            this.windowType = true;
            return
          }
        }
        if(self.radio!=1){
          if(!self.perms){
            this.windowData = {
              type:"3",
              title:"提示",
              text:"请输入权限标识",
            };
            this.windowType = true;
            return
          }
        }
        let obk = {
          menuId:self.menuId,
          parentId:self.options[self.options.length-1],//上级菜单
          menuType:self.radio==1?"M":(self.radio==2?"C":(self.radio==3?"F":"")),//菜单类型
          menuName:self.menuName,//菜单名称
          orderNum:self.num,//排序
          remark:self.remark,
        };
        if(self.radio!=3){
          obk.path = self.path//组件名称
        }
        if(self.radio!=1){
          obk.perms = self.perms//标识
        }
        if(self.radio!=3){
          obk.status = self.radioClass//状态
        }
        const { data } = await menuEditor(obk);
        if(data.code == 200){
          this.pageType = 0;
          this.windowData = {
            type:"2",
            title:"提示",
            text:"修改成功",
          };
          this.windowType = true;
          this.getPageList();
          this.reductionData();
        }
      },
      //新增菜单
      async menuAddClick(){
        let self = this;
        if(self.options.length==0&&self.tableData[0]){
          this.windowData = {
            type:"3",
            title:"提示",
            text:"请选择上级菜单",
          };
          this.windowType = true;
          return
        }
        if(!self.menuName){
          this.windowData = {
            type:"3",
            title:"提示",
            text:"请输入标题名称",
          };
          this.windowType = true;
          return
        }
        if(self.radio!=3){
          if(!self.path){
            this.windowData = {
              type:"3",
              title:"提示",
              text:"请输入组件名称",
            };
            this.windowType = true;
            return
          }
        }
        if(self.radio!=1){
          if(!self.perms){
            this.windowData = {
              type:"3",
              title:"提示",
              text:"请输入权限标识",
            };
            this.windowType = true;
            return
          }
        }
        let obk = {
          id:"",
          parentId:self.options[self.options.length-1],//上级菜单
          menuType:self.radio==1?"M":(self.radio==2?"C":(self.radio==3?"F":"")),//菜单类型
          menuName:self.menuName,//菜单名称
          orderNum:self.num,//排序
          remark:self.remark,
        };
        if(self.radio!=3){
          obk.path = self.path//组件名称
        }
        if(self.radio!=1){
          obk.perms = self.perms//标识
        }
        if(self.radio!=3){
          obk.status = self.radioClass//状态
        }
        const { data } = await menuAdd(obk);
        if(data.code == 200){
          this.pageType = 0;
          this.windowData = {
            type:"2",
            title:"提示",
            text:"新增成功",
          };
          this.windowType = true;
          this.getPageList();
          this.reductionData();
        }
      },
      //弹窗开关(1新增/2子项新增/3修改)
      positionPage(type,row){
        let self = this;
        if(type==1){
        }else if(type==2||type==3){
          let lv = JSON.parse(JSON.stringify(self.lvData.length-1));
          let menuId = [];
          let id = row.parentId;
          menuId.push(row.value);
          for(lv ;lv>=0;lv--) {
            for (let i = 0; i < self.lvData[lv].length; i++) {
              if (self.lvData[lv][i].menuId==id){
                menuId.unshift(self.lvData[lv][i].value);
                id=self.lvData[lv][i].parentId
              }
            }
          }
          menuId.unshift(0)
          self.options = JSON.parse(JSON.stringify(menuId));
          if(type==3){
            self.options.splice(self.options.length-1,1)
            self.menuId = row.menuId;
            self.radio = row.menuType=="M"?1:(row.menuType=="C"?2:(row.menuType=="F"?3:"")),//菜单类型
            self.menuName = row.menuName;        //菜单名称
            self.num = row.orderNum;             //排序
            self.remark = row.remark;
            if(row.menuType!="F"){
              self.path = row.path                //组件名称
            }
            if(row.menuType!="M"){
              self.perms = row.perms              //标识
            }
            if(row.menuType!="F"){
              self.radioClass = parseInt(row.status)        //状态
            }
          }
        }
        this.pageType = type;
      },
      positionPageOff(){
        this.pageType = 0;
        this.reductionData();
      },
      //修改
      handleDelete(index,row){
        this.windowData = {
          type:"1",
          title:"提示",
          text:"确定要删除吗?",
          leftButton:"取消",
          rightButton:"确定",
          cType:"2",
          newId:row.menuId
        };
        this.windowType = !this.windowType;
      },
      //计数器
      handleChange(value) {
        console.log(value);
      },
      //选择器
      handleItemChange (val){
        this.options = JSON.parse(JSON.stringify(val));
        this.$forceUpdate();
      },
      //获取列表
      async getPageList(){
        const { data } = await menuList();
        let self = this;
        let obj = {
            value:0,
            label:"主类目",
            menuName:"主类目",
            children:[]
          };
        if(data.code==200){
          let dataOne = JSON.parse(JSON.stringify(data.data));
          let dataTwo = JSON.parse(JSON.stringify(data.data));
          let upData = [];
          for(let i=0;i<dataOne.length;i++){
            delete dataOne[i].children;
            delete dataTwo[i].children;
            dataOne[i].value = dataOne[i].menuId;
            dataOne[i].label = dataOne[i].menuName;
            dataTwo[i].value = dataOne[i].menuId;
            dataTwo[i].label = dataOne[i].menuName;
          }
          //找出分级数组
          for(let age = 0; age < dataOne.length ; age){
            let newData = [];
            for(let i=0;i<dataOne.length;i++){
              let num = 0;
              for(let k=0;k<dataTwo.length;k++){
                if(dataOne[i].parentId == dataTwo[k].menuId){
                  num++
                }
              }
              if(num==0){
                newData.push(dataOne[i]);
                dataOne.splice(i,1);
                i--
              }
            }
            upData.push(newData);
            dataTwo = JSON.parse(JSON.stringify(dataOne));
          }
          //获取树型数组级数
          let lv = JSON.parse(JSON.stringify(upData.length-1));
          //逐级填充数据
          for(lv ;lv!=0;lv--){
            for(let i=0;i<upData[lv].length;i++){
              for(let k=0;k<upData[lv-1].length;k++){
                if(upData[lv][i].parentId==upData[lv-1][k].menuId){
                  if(!upData[lv-1][k].children){
                    upData[lv-1][k].children = [];
                  }
                  upData[lv-1][k].children.push(upData[lv][i])
                }
              }
            }
          }
          this.lvData = JSON.parse(JSON.stringify(upData));
          this.tableData = JSON.parse(JSON.stringify(upData[0]));
          obj.children = JSON.parse(JSON.stringify(upData[0]));
          this.optionsData = [];
          this.optionsData.push(obj);
          this.$forceUpdate();
        }
      },
      //表格绑定ID
      getRowKey (row, rowIndex) {
        return row.menuId
      },
      //弹窗组件左侧按钮方法-对应取消方法
      windowLeftClick(){
        this.windowType = !this.windowType;
      },
      //弹窗组件右侧按钮方法
      windowRightClick(data){
        this.windowType = !this.windowType;
        this.clickDel(data.newId);
      },
      reductionData(){
        let self = this;
        self.options = [];
        self.radio = 1;
        self.menuName = "";
        self.path = "";
        self.perms = "";
        self.num = 1;
        self.remark = "";
        self.radioClass = 0;
      },
    }
  }
</script>

<style scoped lang="stylus">
  .max-big-box
    flex:1;
    .big-max-box
      flex:1;
      .add-button
        width:110px;
        height:30px;
        margin-left:105px;
        background:url("~@/assets/images/button_06_1.png");
        background-size:100% 100%;
        line-height:30px
        color:$color_ff;
        font-size:$font_12;
        padding-left:44px;
        text-align left
        cursor:pointer
      //表格
      .table-box
        width:1710px !important;
        margin:20px 105px;
        text-align center !important
        .table-min-button
          width:206px;
          margin:0 auto;
          display flex
          div:nth-child(1)
            height:20px;
            width:60px;
            font-size:$font_14;
            color:$theme;
            display flex
            margin-right:10px;
            img
              display block
              height:20px;
              width:20px;
              margin-right:4px;
          div:nth-child(2)
            height:20px;
            width:60px;
            font-size:$font_14;
            color:$theme3;
            display flex
            margin-right:10px;
            img
              display block
              height:20px;
              width:20px;
              margin-right:4px;
          div:nth-child(3)
            height:20px;
            width:60px;
            font-size:$font_14;
            color:$theme3;
            display flex
            img
              display block
              height:20px;
              width:20px;
              margin-right:4px;
    .position-max-big-box
      height:100%;
      width:100%;
      z-index:1000;
      position: absolute
      top:0;
      left:0;
      background:rgba(0,0,0,0.7);
      .position-big-box
        position: absolute
        top:50%;
        left:50%;
        transform :translate3d(-50%,-50%,0)
        margin:auto;
        background-size 100% 100%
        color:$color_ff;
        height:670px;
        width:1000px;
        padding:0 200px;
        background:url("~@/assets/images/min_back_04.png");
        background-size 100% 100%
        .cascader-box
          margin-top:60px;
        .cascader-box
        .radio-box
        .input-box
        .number-box
        .radio-box
          display flex
          .box-title-p
            width:200px;
            text-align right;
            line-height:50px;
          input
            height:40px;
            margin-top:5px;
            background:#fff;
            border-radius:4px;
            padding:0 20px;
          ::placeholder
            color:#999;
        .button-box
          display flex
          width:202px;
          margin: 100px auto 0;
          p
            width:92px;
            height:31px;
            line-height:31px;
            font-size:$font_12;
          p:nth-child(1)
            color:$theme;
            background:url("~@/assets/images/button_01.png");
            background-size 100% 100%
            margin-right:18px;
          p:nth-child(2)
            color:$color_ff;
            background:url("~@/assets/images/button_02.png");
            background-size 100% 100%
  //修改table表格样式
  .el-table
    background rgba(6,177,240,0.2)
  .el-table /deep/ tr
  .el-table /deep/ th
    background rgba(6,177,240,0)
  .el-table::before
    height:0;
  .el-table /deep/ .cell
    max-height:46px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  .el-table /deep/ td
  .el-table /deep/ th.is-leaf
    border-bottom:0!important;
  .el-table /deep/ .el-checkbox__inner
    //background rgba(6,177,240,0.2)
    border 1px solid #216f93 !important
  .el-table /deep/ thead
    color:$color_ff;
  .el-table
    color:$color_a1
  .el-table /deep/ th
    text-align-last: center;
  .el-table /deep/ tr th:nth-child(1)
    padding-left:15px;
    text-align-last: left;
  .el-table /deep/ td
    text-align-last: center;
  .el-table /deep/ tr td:nth-child(1)
    padding-left:15px;
    text-align-last: left;
  .el-table /deep/ tbody tr:hover > td
    background rgba(6,177,240,0.2)
    color:$theme;
  .el-table /deep/ .el-checkbox
    width:14px;
    margin:0 auto;
    display block
  .el-table /deep/ .el-icon-arrow-right
    color:#fff;
  //修改动作条样式
  .el-pagination.is-background /deep/ .btn-next
  .el-pagination.is-background /deep/ .btn-prev
  .el-pagination.is-background /deep/ .el-pager li
    background:url("~@/assets/images/button_13.png");
    color:$color_ff;
  .el-pagination.is-background /deep/ .el-pager li:not(.disabled).active
    background:url("~@/assets/images/button_14.png");
    color:$color_ff;
  .colorA
    color :$theme;
  ::-webkit-input-placeholder
    color: $border_1;
  ::-moz-placeholder
    color: $border_1;
  ::-ms-input-placeholder
    color: $border_1;
  .el-cascader
    width:400px;
    padding: 5px 0;
  .el-input-number
    margin-top: 5px;
  .el-radio
    padding:17px 0;
</style>
