<template>
  <div>
    <div class="title">
      角色管理
      <div class="title_time">{{ currentDate }}</div>
    </div>
    <div class="card">
      <div class="screen">
        <div>
          角色名称&ensp;&ensp;<el-input v-model="roleName" style="width: 375px" size="large" placeholder="输入角色名称" />
        </div>
        <div>
          &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;权限字符&ensp;&ensp;<el-input
            v-model="roleKey"
            style="width: 340px"
            size="large"
            placeholder="输入权限字符"
          />
        </div>
        <div>
          &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;角色状态&ensp;&ensp;<el-select
            v-model="status"
            placeholder="请选择"
            size="large"
            style="width: 240px"
          >
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
      </div>
      <div class="screen1">
        <div>
          创建时间&ensp;&ensp;<el-date-picker
            v-model="createTime"
            type="daterange"
            :shortcuts="shortcuts"
            size="large"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :default-value="timedate"
            :disabled-date="pickerOptions"
          />
        </div>
        <div>
          <el-button type="primary" size="large" color="#0052d9" @click="query(0)">查询</el-button>
          <el-button size="large" @click="query(1)">重置</el-button>&ensp;&ensp;
        </div>
      </div>
    </div>
    <div class="card cardbottom">
      <el-button v-if="BUTTONS.roleadd" type="primary" size="large" color="#0052d9" @click="newaddition">新增</el-button>

      <div>&ensp;</div>
      <el-table :data="tableData.rows" style="width: 100%" border>
        <el-table-column prop="id" label="角色编号" />
        <el-table-column prop="roleName" label="角色名称" />
        <el-table-column prop="roleKey" label="权限字符" />
        <el-table-column prop="roleSort" label="显示顺序" />
        <el-table-column prop="status" label="用户状态" align="center">
          <template #default="scope">
            <div v-if="scope.row.status == 0">正常</div>
            <div v-else>停用</div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="remark" label="备注" />

        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button v-if="BUTTONS.roleedit" color="#0052d9" type="primary" @click="newition(scope.row)">编辑</el-button>
            <el-button v-if="BUTTONS.delete" @click="onremove(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<!--  

-->
<script setup lang="ts">
import { platformrolelist, platformroleremove } from "@/api/home/Multisite";
import { useHandleData } from "@/hooks/useHandleData";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { useAuthButtons } from "@/hooks/useAuthButtons";
const { BUTTONS } = useAuthButtons();
const router = useRouter();
const shortcuts = ref([
  {
    text: "过去7天",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setDate(start.getDate() - 7);
      return [start, end];
    }
  },
  {
    text: "过去1个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setMonth(start.getMonth() - 1);
      return [start, end];
    }
  },
  {
    text: "过去3个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setMonth(start.getMonth() - 3);
      return [start, end];
    }
  }
]);
const options = ref([
  {
    value: "",
    label: "全部"
  },
  {
    value: "1",
    label: "未禁用"
  },
  {
    value: "0",
    label: "禁用"
  }
]);
const timedate = ref();
const pickerOptions = (time: { getTime: (arg0: Date) => number }) => {
  return time.getTime(new Date()) > Date.now();
};
const query = (val: any) => {
  if (val == 0) {
    getplatformuserlist();
  } else {
    (roleName.value = ""), (status.value = ""), (roleKey.value = ""), (createTime.value = []);

    getplatformuserlist();
  }
};
// 新增
const newaddition = () => {
  router.push({
    path: "/role/addition",
    query: {
      type: "角色新增", // 传递的参数
      id: ""
    }
  });
};
// 编辑
const newition = (row: any) => {
  router.push({
    path: "/role/addition",
    query: {
      type: "角色编辑", // 传递的参数
      id: row.id
    }
  });
};
// 删除
const onremove = async (row: any) => {
  await useHandleData(platformroleremove, { ids: row.id }, "删除");
  await getplatformuserlist();
};
// 查询
const tableData = ref();
const roleName = ref();
const status = ref("");
const roleKey = ref();
const createTime = ref();
createTime.value = [];
const getplatformuserlist = async () => {
  let obj = {
    orderByColumn: "createTime",
    "params[beginTime]": createTime.value[0],
    'params["endTime"]': createTime.value[1],
    roleName: roleName.value,
    status: status.value,
    roleKey: roleKey.value
  };
  const { data } = await platformrolelist(obj);
  tableData.value = data;
};
const currentDate = ref();
onMounted(() => {
  const current = localStorage.getItem("currentDate");
  if (current) {
    currentDate.value = current;
  }
  getplatformuserlist();
});
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
