<template>
  <div class="appMainPage" v-loading="loading">
    <div class="main">
      <tableTree
        style="height:calc(100% - 100px)"
        :treeData="tableData"
        :treeColumn="treeColumn"
        :needFormatData="true"
        @freshTreeData="pageList"
        :treeEditData="formData"
        :treeEditRules="rules"
        :treeEditForm="formList"
        :treeEditSubmit="submitForm"
        :treeEditBefore="editBefore"
        @treeEditDelete="Delete"
        @freshTreeEditForm="freshFormList"
        :treeButtons="treeButtons"
      ></tableTree>
      <!-- 示例 -->
        <!-- 
          :treeButtons="treeButtons"
          :queryLeftButtons="queryLeftButtons"
          :queryHeaderBtn="queryHeaderBtn"
          :queryButtonsHandle="queryButtonsHandle"
         -->
    </div>
  </div>
</template>
<script>
import { postCreateMenu, postUpdateMenu, postDeleteMenu, menuPermissions, getDetailedMenu } from "@/api/wms-auth";
import tableTree from "@/components/tableTree"
import { treeDefalutButton,queryDefalutButtons } from "@/utils/tableTree"
export default {
  components: {
    tableTree
  },
  name:"pcMenu",
  data() {
    return {
      // table按钮
      treeButtons:[
        ...treeDefalutButton(function(row){
          return !(String(row.sort).length < 5)
        })
      ],
      // 示例
      // queryHeaderBtn:['addFirst','fresh','search','reset','test'],
      // queryLeftButtons:[
      //   ...queryDefalutButtons("left"),
      //   {
      //     type: 'warning',
      //     icon: 'el-icon-edit',
      //     label: '测试-left',
      //     name: "test",
      //     permission:"['Auth.Menu.Update']",
      //     size: 'mini'
      //   },
      // ],
      loading:false,
      // 新增/编辑数据
      formData:{
        name:"",//菜单名称
        icon:"",//图标名称
        code:"",//编码
        parentCode:"",//父级编码
        component:"",//项目地址
        permission:"",//权限
        route: "",//路由
        sort:null,//排序
        status:1,//状态
        description: "",//描述
        portal:0,//0:pc 1:pda
        company: localStorage.getItem('company'),
      },
      // 新增/编辑显示
      formList:[
        { type: "input", label: "菜单名称", prop: "name",placeholder:"例：按序收货"},
        { type: "input", label: "图标名称", prop: "icon",placeholder:"例：按序收货"},
        { type: "input", label: "编码", prop: "code",placeholder:"例：sortReceipt"},
        { type: "input", label: "父级编码", prop: "parentCode",placeholder:"例：sortReceipt"},
        { type: "input", label: "项目地址", prop: "component",placeholder:"例：basicData/ItemsManage/ItemBasic"},
        { type: "input", label: "权限", prop: "permission",placeholder:"例：base.info"},
        { type: "input", label: "路由", prop: "route",placeholder:"例：sortReceipt"},
        { type: "input", type:"number",valueType:Number,label: "排序", prop: "sort",},
        { type: "select", label: "状态", prop: "status", options: "enableOrStop"},
        { type: "input", label: "描述", prop: "description",},
      ],
      //table渲染
      tableData: [],
      // tree配置
      treeColumn:[
        { label: "菜单名称", prop: "name",width:"250"},
        { label: "图标名称", prop: "icon",},
        { label: "编码", prop: "code",},
        { label: "父级编码", prop: "parentCode",},
        { label: "项目地址", prop: "component",},
        { label: "权限", prop: "permission",},
        { label: "路由", prop: "route",},
        { label: "排序", prop: "sort"},
        { type: "filter", label: "状态", prop: "status", filters: {"1":"启用","0":"停用"},align:'center',headerAlign:"center" },
        { label: "描述", prop: "description"},
      ],
      rules: {
        name: [ { required: true, trigger: "blur", message: "请输入菜单名称" }, ],
        icon: [ { required: true, trigger: "blur", message: "请输入图标名称" }, ],
        code: [ { required: true, trigger: "blur", message: "请输入编码" }, ],
        permission: [ { required: true, trigger: "blur", message: "请输入权限" }, ],
        route: [ { required: true, trigger: "blur", message: "请输入路由" }, ],
        sort: [ { required: true, trigger: "change", message: "请输入排序" }, ],
        status: [ { required: true, trigger: "change", message: "请选择状态" }, ],
      },
    }
  },
  mounted() {
    this.pageList();
  },
  methods: {
    // 示例
    // treeButtonsHandle(item,searchValue){
    //    return true  //return true 可以继续进行组件内的其他操作
    //    return false  //return false  原组件内按钮操作不在进行，可自定义操作
    // },
    // queryButtonsHandle(item,searchValue){
    //   return true  //return true 可以继续进行组件内的其他操作
    //   //    return false  //return false  原组件内按钮操作不在进行，可自定义操作
    // },
    //请求数据渲染table
    pageList() {
      this.tableData=[];
      this.loading = true
      let filters = []
      filters.push({
        logic: "And",
        column: "portal",
        action: "==",
        value: "0"
      })
      const data = {
        condition: {
          filters: filters
        },
        Sorting: "",
        SkipCount: 0,
        MaxResultCount: 1000,
      };
      menuPermissions(data).then((res) => {
        this.tableData = res.items
        this.loading = false
      }).catch(()=>{
        this.loading = false
      })
    },
    // 控制编辑菜单disabled处理
    freshFormList(item,row){
      // 创建第一级/创建子菜单，父级不让填写
      if(item.name == "addFirst" || item.name == "add"){
        if(item.name == "add"){
          this.formData.parentCode = row.code
        }
        this.formList.forEach(column=>{
          if(column.prop == 'parentCode'){
              column.disabled = true
          }
        })
      }
      // 编辑菜单，如果不是第一级，父级打开填写
      else if(item.name == "edit"){
        if(Number(row.sort) > 100){
          this.formList.forEach(column=>{
            column.disabled = false
          })
        }else{
          this.formList.forEach(column=>{
            if(column.prop == 'parentCode'){
              column.disabled = true
            }
          })
        }
      }
    },
    //编辑默认参数
    editBefore(row) {
      if (row) {
        return new Promise((resolve,reject) => {
          getDetailedMenu(row.id).then(res=>{
            // let _res = JSON.parse(JSON.stringify(res));
            // Object.keys(this.formData).forEach(key=>{
            //   // if(_res[key] !== undefined)_res[key] = this.formData[key] ? this.formData[key] : _res[key]
            //   if(_res[key] !== undefined)_res[key] = this.formData[key] ? this.formData[key] : _res[key]
            // })
            resolve(res)
          }).catch(()=>{
            resolve()
          })
        })
      }
    },
    //删除
    Delete(row) {
      if(row.children && row.children.length > 0){
        this.$alert("此菜单存在子菜单，请先删除子菜单信息。", "提示", {
          type: "warning",
        });
        return
      }
      this.$confirm("此操作将永久删除该菜单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true
          postDeleteMenu(row.id).then((res) => {
            this.loading = false
            this.$successMsg("删除成功！");
            this.pageList();
          }).catch((res) => {
            this.loading = false
          });
        })
        .catch(() => {});
    },
    //新建与编辑交互
    submitForm(isEdit,data,val) {
      data.portal = 0
      return new Promise((resolve,reject) => {
        if(!isEdit){
          // 新增
          postCreateMenu(data)
            .then((res) => {
              this.$successMsg("创建成功！");
              this.pageList();
              resolve()
            })
            .catch((err) => {
              resolve()
            });
        }else{
          //编辑
          postUpdateMenu(data, data.id)
            .then((res) => {
              this.$successMsg("编辑成功！");
              this.pageList();
              resolve()
            })
            .catch((err) => {
              resolve()
            });
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.appMainPage {
  .main {
    height: 100%;
  }
}
</style>

