<template>
  <!-- 账号权限 -->
  <div class="accountPerPage flex-col">
    <s-header :name="$t('accountPer.accountPermission')" :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"
              >{{$t('accountPer.total')}}<span class="discountNumber">{{ accountPerList.length }}</span
              >{{$t('accountPer.permissions')}}</span
            >
          </div>
        </div>
        <div class="flex-col">
          <div class="operBox">
            <div class="listBox" @click="pushRole()">
              <img class="iconImg" src="../../assets/accountPer/listIcon.png" />
              <span>{{$t('accountPer.rolePermissions')}}</span>
            </div>
            <div class="addBox" @click="pushAdd()">
              <img class="iconImg" src="../../assets/accountPer/addicon.png" />
              <span>{{$t('accountPer.add')}}</span>
            </div>
            <div class="searchBox" @click="searchClick()">
              <img class="iconImg" src="../../assets/accountPer/sxIcon.png" />
              <span>{{$t('accountPer.screen')}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="listBox">
        <div v-for="(item, index) in accountPerList" :key="index" class="listItem" @click="accountClick(item)">
          <div class="itemBox">
            <div class="itemRow"><span class="itemTitle">{{$t('accountPer.fullName')}}:&nbsp;</span>{{decodeURIComponent(item.name)}}</div>
            <div class="itemRow"><span class="itemTitle">{{$t('accountPer.role')}}:&nbsp;</span>{{item.roleName}}</div>
            <div class="itemRow"><span class="itemTitle">{{$t('accountPer.accountNumber')}}:&nbsp;</span>{{item.username}}</div>
            <!-- <div class="itemRow"><span class="itemTitle">邮箱:&nbsp;</span>{{showDate(item.lastUseDate)}}</div> -->
          </div>
          <div class="tipBox" v-if="item.isEnabled">
            {{$t('accountPer.effective')}}
            <div class="outer2 flex-col"></div>
          </div>
          <div class="tipBox isUseTip" v-if="!item.isEnabled">
            {{$t('accountPer.paused')}}
            <div class="outer2 flex-col"></div>
          </div>
        </div>
      </div>
    </div>
    <nav-bar></nav-bar>
    <accountPerSearch ref="searchRef" @search="search($event)"></accountPerSearch>
  </div>
</template>

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

export default {
  components: { sHeader, navBar, accountPerSearch },
  setup() {
    const router = useRouter(); 
    const searchRef = ref(null);
    const accountPerList = ref([]); // 列表集合
    let searchParams = reactive({
      adminId: "", // 用户账户id
      current: 1, // 页数
      size: 20, // 页大小
      isUse: '0', // 是否使用
      // type: null // 优惠码类型 0或null:折扣优惠码；1：抵扣价优惠码
    });
    // 初始化页面获取列表
    onMounted(async () => {
      // 初始化列表及页码
      const user = getLoginUser();
      if (user) {
        searchParams.adminId = user.id;
        searchGetList();
      }
    });
    // 搜索点击
    const searchClick = () => { searchRef.value.showSearch(); };
    // 跳转添加账号
    const pushAdd = () => { localStorage.removeItem('accoutPerSet'); router.push('/accountPerAdd'); }
    // 跳转角色权限页面
    const pushRole = () => { router.push('/role'); }
    // 查询列表
    const searchGetList = () => {
      accountPerList.value = [];
      searchParams.current = 1;
      getList();
    }
    // 搜索弹窗触发搜索
    const search = (data) => {
      searchParams = Object.assign(searchParams, data);
      searchGetList();
    };
    // 获取设备列表数据
    const getList = async () => {
      const { data } = await getChildAdminList( Object.assign({}, searchParams) );
      if (data.code === "00000") {
        accountPerList.value = accountPerList.value.concat(data.data);
      } else { Toast.fail(data.message); }
    };
    // 跳转修改
    const accountClick = (item) => {
      localStorage.setItem('accoutPerSet', JSON.stringify(item));
      router.push('/accountPerAdd');
    }
    return {
      searchRef,
      searchClick,
      pushAdd,
      pushRole,
      search,
      accountPerList,
      ...toRefs(searchParams),
      accountClick,
    };
  },
};
</script>

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