<template>
  <!-- 角色权限设置 -->
  <div class="accountPerPage flex-col">
    <s-header :name="'角色权限设置'" :noback="false"></s-header>
    <div class="accountPerBox flex-col">
      <div class="searchRow flex-row justify-between">
        <div class="flex-col">
          <div class="flex-row justify-between bd3">
            <div class="flex-col outer4"></div>
            <span class="flex-col txt2"
              >共<span class="discountNumber">{{ accountPerList.length }}</span
              >个</span
            >
          </div>
        </div>
        <div class="flex-col">
          <div class="operBox">
            <div class="addBox" @click="pushAdd()">
              <img class="iconImg" src="../../assets/accountPer/addicon.png" />
              <span>添加</span>
            </div>
          </div>
        </div>
      </div>
      <div class="listBox">
        <div v-for="(item, index) in accountPerList" :key="index" class="listItem">
          <div class="itemBox">
            <div class="roleBox">
              <div class="itemRow">{{item.roleName}}</div>
              <div class="itemRow" style="color: #8787a6;">
                <span v-for="(role, rindex) in item.menuCodesJson" :key="rindex" class="roleItem">{{showRole(role)}}</span>
              </div>
            </div>
            <div class="operBox">
              <div class="operSet" @click="roleEdit(item)">
                <img class="iconImg" src="../../assets/edit.png"/>
                <span class="operText">编辑</span>
              </div>
              <div class="operDelter" @click="roleDelete(item)">
                <img class="iconImg" src="../../assets/delete.png"/>
                <span class="operText">删除</span>
              </div>
            </div>
          </div>
          <!-- <div class="tipBox" v-if="item.isUse === '0'">已生效</div>
          <div class="tipBox isUseTip" v-if="item.isUse === '1'">已暂停</div> -->
        </div>
      </div>
    </div>
    <van-dialog
      v-model:show="operCheckShow"
      title="操作确认"
      :showConfirmButton="false"
      :showCancelButton="false"
    >
      <div class="operCheckBox">
        <div class="block5 flex-col"></div>
        <span class="word10">请再次确认是否进行操作</span>
        <div class="block6 flex-row justify-between">
          <div class="mod7 flex-col" @click="operCheckClear()">
            <span class="info5">我再想想</span>
          </div>
          <div class="mod8 flex-col" @click="operCheck()">
            <span class="info6">确认</span>
          </div>
        </div>
      </div>
    </van-dialog>
    <nav-bar></nav-bar>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs, ref } from 'vue';
import navBar from '@/components/NavBar';
import sHeader from "@/components/SimpleHeader";
import { getSysRoleAdminList, deleteSysRole } from '@/service/role/index';
import { Toast } from "vant";
import { getLoginUser } from "@/common/js/utils";
import { useRouter } from "vue-router";

export default {
  components: { sHeader, navBar },
  setup() {
    const user = getLoginUser();
    const router = useRouter(); 
    const searchRef = ref(null);
    const accountPerList = ref([]); // 列表集合
    const operCheckShow = ref(false);
    const menuCodeList = [
      { label: '设备管理', value: 'M1' },
      { label: '设备查看', value: 'M2' },
      { label: '分销设置', value: 'M3' },
      { label: '报警历史', value: 'M4' },
      { label: '广告管理', value: 'M5' },
      { label: '任务消息', value: 'M6' },
      { label: '优惠码', value: 'M7' },
      { label: '账号权限', value: 'M8' },
      { label: '订单导出', value: 'M9' },
      { label: '杉德分账', value: 'M10' },
      { label: '销售排行', value: 'M11' },
      { label: '提现账号', value: 'M12' },
      { label: '备用提现账号', value: 'M13' },
      { label: '数据概览', value: 'M14' },
      { label: '订单数据', value: 'M15' },
      { label: '订单退款', value: 'M16' },
      { label: '系统脱机', value: 'M17' }
    ];
    let searchParams = reactive({ adminId: user.id });
    // 初始化页面获取列表
    onMounted(async () => { searchGetList(); });
    // 搜索点击
    const searchClick = () => { searchRef.value.showSearch(); };
    // 跳转添加账号
    const pushAdd = () => { localStorage.removeItem('roleItem'); router.push('/roleSet'); }
    // 查询列表
    const searchGetList = () => { accountPerList.value = []; getList(); }
    // 搜索弹窗触发搜索
    const search = (data) => {
      searchParams = Object.assign(searchParams, data);
      searchGetList();
    };
    // 获取设备列表数据
    const getList = async () => {
      const { data } = await getSysRoleAdminList(searchParams);
      if (data.code === "00000") {
        accountPerList.value = accountPerList.value.concat(data.data.map(item => {
          return {
            ...item,
            menuCodesJson: JSON.parse(item.menuCodesJson)
          }
        }));
        console.log(accountPerList.value);
      } else { Toast.fail(data.message); }
    };
    const showRole = (name) => {
      const menuCode = menuCodeList.filter(item => item.value === name);
      return (menuCode.length > 0) ? menuCode[0].label : name;
    }
    let deleteRoleId = '';
    const roleDelete = (item) => { console.log('roleDelete', item.roleId); deleteRoleId = item.roleId; operCheckShow.value = true; }
    const operCheckClear = () => { operCheckShow.value = false; }
    const operCheck = async () => {
      const { data } = await deleteSysRole({ adminId: user.id, roleId: deleteRoleId });
      if (data.code === '00000') {
        operCheckShow.value = false;
        searchGetList();
      } else {Toast.fail(data.message);}
    }
    const roleEdit = async (item) => { localStorage.setItem('roleItem', JSON.stringify(item)); router.push('/roleSet'); }
    return {
      searchRef,
      searchClick,
      pushAdd,
      search,
      accountPerList,
      showRole,
      roleDelete,
      operCheckShow,
      operCheckClear,
      operCheck,
      roleEdit,
      ...toRefs(searchParams),
    };
  },
};
</script>

<style lang="less" scoped>
@import "../../common/style/common.less";
@import "./index.less";
</style>
