<template>
  <div class="manage-button">
    <el-button
      icon="el-icon-plus"
      type="primary"
      size="small"
      @click="handleAdd()"
    >
      添加
    </el-button>
  </div>
  <el-table
    ref="tableSort"
    v-loading="listLoading"
    :data="list"
    :element-loading-text="elementLoadingText"
    :height="height"
    row-key="id"
    :lazy="lazy"
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    @selection-change="setSelectRows"
  >
    <el-table-column
      prop="id"
      label="ID"
      width="80"
      align="center"
    ></el-table-column>
    <el-table-column
      prop="name"
      label="菜单名称"
      width="200"
      align="center"
    ></el-table-column>
    <el-table-column prop="status" :label="$t('dataEnquiry.zt')" align="center">
      <template #default="scope">
        <el-switch
          v-model="scope.row.status"
          active-value="0"
          inactive-value="1"
          @click="menuStatus(scope.row.status, scope.row.id)"
        ></el-switch>
      </template>
    </el-table-column>
    <el-table-column
      prop="path"
      label="路径"
      width="200"
      align="center"
    ></el-table-column>
    <el-table-column
      prop="component"
      label="路由"
      width="200"
      align="center"
    ></el-table-column>
    <el-table-column
      prop="sort"
      label="排序"
      width="200"
      align="center"
    ></el-table-column>
    <el-table-column :label="$t('defalult.cz')" align="center">
      <template #default="{ row }">
        <el-button type="text" @click="handleEdit(row)">
          {{ $t('defalult.bj') }}
        </el-button>
        <el-button type="text" @click="handleDelete(row)">
          {{ $t('defalult.sc') }}
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    :background="background"
    :current-page="queryForm.pageNo"
    :layout="layout"
    :page-size="queryForm.pageSize"
    :total="total"
    style="text-align: right"
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange"
  ></el-pagination>
  <menu-edit ref="edit"></menu-edit>
</template>

<script>
import { miniMenuRemove, miniMenuUpdate, miniMenuSelect } from '@/api/menu';
import menuEdit from './appletsEdit';
export default {
  name: 'AppletsIndex',
  components: {
    menuEdit,
  },
  data() {
    return {
      roleData: [],
      lazy: true,
      activeName: 'first',
      layout: 'total, sizes, prev, pager, next, jumper',
      total: 0,
      input: '',
      textarea: '',
      list: [],
      background: true,
      listLoading: true,
      elementLoadingText: '正在加载...',
      queryForm: {
        page: 1,
        size: 20,
        name: '',
      },
    };
  },
  computed: {
    height() {
      return 500;
    },
  },
  created() {},
  methods: {
    appletsIndex() {
      this.fetchData();
    },
    async menuStatus(status, id) {
      const { code, msg } = await miniMenuUpdate({ status: status, id: id });
      if (code == 0) {
        this.$notify({
          title: msg,
          type: 'success',
        });
      } else {
        this.$notify.error({
          title: msg,
        });
      }
      this.fetchData();
    },
    setSelectRows(val) {
      this.selectRows = val;
    },
    async fetchData() {
      this.listLoading = true;
      const { data } = await miniMenuSelect(this.queryForm);
      console.log(1231, data);
      this.list = data;
      setTimeout(() => {
        this.listLoading = false;
      }, 500);
    },
    handleAdd() {
      this.$refs['edit'].showEdit();
    },
    handleEdit(row) {
      this.$refs['edit'].showEdit(row);
    },
    handleQuery() {
      this.queryForm.pageNo = 1;
      this.fetchData();
    },
    handleSizeChange(val) {
      this.queryForm.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.queryForm.pageNo = val;
      this.fetchData();
    },
    handleDelete(row) {
      const that = this;
      if (row.id) {
        this.$confirm('你确定要删除当前项吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            const { msg } = miniMenuRemove({ menuId: row.id });
            this.$message({
              type: 'success',
              message: msg == undefined ? '删除成功' : msg,
            });
            setTimeout(function () {
              that.fetchData();
            }, 1000);
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除',
            });
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.manage-button {
  margin-bottom: 30px;
}
</style>
