<template>
  <div>
    <el-card style="margin-bottom:8px">
      <el-row>
        <!-- <el-col :span="8">
          <span>菜单名称：</span>
          <el-input style="width:70%" size="small" v-model="search.name" clearable placeholder="请输菜单名称">
          </el-input>
        </el-col> -->
        <el-col :span="6">
          <!-- <el-button size="small" type="primary" icon="el-icon-search" @click="searchClick(1)">搜索</el-button>
          <el-button size="small" type="warning" icon="el-icon-refresh" @click="searchClick(2)">重置</el-button> -->
          <el-button size="small" type="success" icon="el-icon-plus" @click="searchClick(3)" v-if="showButtons.fAdd">
            新增主菜单</el-button>
        </el-col>
      </el-row>
    </el-card>
    <t-table :showButtons='showButtons' :tableLoading='tableLoading' :tableData='tableData' @btnclick='btnclick' />
    <!-- <page-total :page="page" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange" /> -->
    <add-mune :title="title" :form="form" :addStatus="addStatus" :rules="rules" @cancel='cancel' @getData='getData' />
  </div>
</template>
<script>
  import tTable from "./components/table.vue"
  import addMune from "./components/addMune.vue"
  import {
    clearObjValue
  } from "@/utils/common";
  import {
    mixin
  } from "@/mixins/common";
  import {
    mapState,
    mapGetters,
    mapActions
  } from "vuex";
  export default {
    mixins: [mixin],
    data() {
      return {
        search: {
          name: ""
        },
        params: {},
        title: "新增",
        form: {
          id: "",
          name: "",
          url: "",
          order: "",
          pid: -1
        },
        rules: {}
      }
    },
    components: {
      tTable,
      addMune
    },
    computed: {
      ...mapState({
        tableData: (state) => state.mune.tableData,
        page: (state) => state.mune.page,
        showButtons: (state) => state.mune.showButtons,
      }),
      tableLoading: {
        get() {
          return this.$store.state.mune.tableLoading;
        },
        set(val) {
          this.$store.state.mune.tableLoading = val;
        },
      },
      addStatus: {
        get() {
          return this.$store.state.mune.addStatus;
        },
        set(val) {
          this.$store.state.mune.addStatus = val;
        },
      },
    },
    methods: {
      getData() {
        this.params = {
          pId: "-1",
          page: this.page.pageNum,
          limit: this.page.pageSize,
        }
        this.tableLoading = true
        this.$store.dispatch('mune/selectListTree', this.params).catch(err => {
          this.tableLoading = false
        })
      },
      searchClick(val) {
        switch (val) {
          case 1:
            this.getData();
            break;
          case 2:
            clearObjValue(this.search);
            break;
          case 3:
            for (let key in this.form) {
              if (key != "state") {
                this.form[key] = "";
              }
            }
            this.form.pid = -1
            this.addStatus = true;
            this.title = "新增";
            break;
        }
      },
      btnclick(val, valkey) {
        if (valkey === 1) {
          for (let key in this.form) {
            for (let index in val) {
              if (key == index) {
                this.form[key] = val[index]
              }
            }
          }
          this.title = '编辑'
          this.addStatus = true
        } else if (valkey === 2) {
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$store.dispatch('mune/deleteTree', {
              id: val.id
            }).then(res => {
              this.getData()
            })
          })
        } else {
          this.title = "新增";
          this.form.pid = val.id
          this.addStatus = true
        }
      },
      handleCurrentChange(val) {
        this.page.pageNum = val;
        this.getData();
      },
      handleSizeChange(val) {
        this.page.pageSize = val;
        this.getData();
      },
      cancel() {
        clearObjValue(this.form)
        this.addStatus = false
        this.form.pid = -1
      },
    },
    created() {
      clearObjValue(this.showButtons)
      let btnData = {
        menuid: this.$getMenuId(sessionStorage.getItem("funcTypeCodeList"), this.$route.path),
        roleid: sessionStorage.getItem("roleId"),
        code: sessionStorage.getItem("code")
      }
      this.$store.dispatch("mune/getButtonList", btnData);
      this.getData()
    }
  }

</script>
