<template>
  <div>
    <MOSTY.PageTree :pageTitle="null" :searchType="'01'" @getDeptId="getdeptId">
      <template #header>
        <div class="header">
          <div class="bottom">
            <el-tabs v-model="activeTab" type="card" @tab-click="onTabClick">
              <el-tab-pane :label="item.label" :name="item.value" v-for="(item, i) in tabs" :key="i" />
            </el-tabs>
          </div>
        </div>
      </template>
      <template #serach>
        <el-divider />
        <MOSTY.Search :searchArr="searchArr" @submit="searchList" />
      </template>
      <template #table>
        <section class="eltab3">
          <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading"
            :isSelect="false" :isSort="true" @SortChange="SortChange" style="width: 100%;">
            <template #actions="{ row }">
              <span class="operesee" @click="gotoxq(row)">
                <el-icon>
                  <Compass />
                </el-icon>详情</span>
              <span class="operesee" @click="gotorw(row)">
                <el-icon>
                  <Compass />
                </el-icon>查看任务</span>
            </template>
          </MOSTY.Table>
        </section>
        <div class="fenye">
          <MOSTY.Pages :pageConfiger="pageConfiger" @changeSize="handleSizeChange" @changeNo="handleCurrentChange">
          </MOSTY.Pages>
        </div>
      </template>
    </MOSTY.PageTree>

    <xtsyqkinfo v-model="xqShow" @close="closedio" :userid="userid" :type="listQuery.type" />
    <dbrwinfo v-model="rwxqShow" @close="closedios" :userid="userid" :type="listQuery.type" />
  </div>
</template>

<script setup>
// 引入
import { onMounted, ref, reactive } from 'vue'
import * as MOSTY from "@/components/MyComponents/index";
import xtsyqkinfo from './component/xtsyqkinfo.vue'
import dbrwinfo from './component/dbrwinfo.vue'
import { getApi } from "@/api/tobAcco_api.js";
// 数据
const searchArr = reactive([
  {
    showType: "input",
    prop: "username",
    width: '250px',
    placeholder: '请输入姓名'
  }
]);
const tabs = [
  {
    label: "PC端",
    value: "02"
  },
  {
    label: "小程序端",
    value: "01"
  }
];
const activeTab = ref("01");
const total = ref(0)
const type = ref('02')
const userid = ref(null)
const xqShow = ref(false)
const rwxqShow = ref(false)
const tableloading = ref(false)
const listQuery = ref({
  pageSize: 20,
  pageCurrent: 1,
  type: '02'
})
const tableData = ref([])
const tableColumn = ref([
  {
    title: "姓名",
    prop: "username",
    sortable: true
  },
  {
    title: "所属部门",
    prop: "ssbm",
    sortable: true
  },
  {
    title: "登录次数",
    prop: "count",
    sortable: true
  },
  {
    title: "最近登录时间",
    prop: "lastTime",
    sortable: true
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const pageConfiger = reactive({
  pageSize: 20,
  pageCurrent: 1,
  total: 0
})
onMounted(() => {
})
function onTabClick(val) {
  type.value = val.props.name
  listQuery.value.type = val.props.name
  listQuery.value.pageCurrent = 1
  pageConfiger.pageCurrent = 1
  gettablist()


}
function searchList(obj) {
  listQuery.value.pageCurrent = 1;
  pageConfiger.pageCurrent = 1;
  listQuery.value.username = obj.username;
  gettablist()
}
function gotoxq(row) {
  userid.value = row.userid
  xqShow.value = true
}
function gotorw(row) {
  userid.value = row.userid
  rwxqShow.value = true
}
function closedio() {
  xqShow.value = false
  userid.value = null
}
function closedios() {
  rwxqShow.value = false
  userid.value = null
}
function getdeptId(val) {
  listQuery.value.deptid = val.id
  gettablist()
}
function gettablist() {
  tableloading.value = true
  getApi(listQuery.value, '/mosty-jcgl/miniapp/getXtPageList').then(res => {
    if (res) {
      tableloading.value = false;
      tableData.value = res.records;
      pageConfiger.total = res.total;
    }
  }).catch((err) => {
    tableData.value = []
    tableloading.value = false;
  }).finally(() => {
    tableloading.value = false;
  })
}

const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  pageConfiger.pageSize = currentSize;
  gettablist()
};
const handleCurrentChange = (currentPage) => {
  listQuery.value.pageCurrent = currentPage;
  pageConfiger.pageCurrent = currentPage;
  gettablist()
};
</script>

<style lang="scss" scoped>
.eltab3 {
  height: calc(100vh - 325px);
}


.bottom {
  height: 48px;
  padding: 8px 63px 0 13px;
  position: relative;
  overflow: hidden;

}

::v-deep .el-tabs {
  .el-tabs__header {
    margin-bottom: 0;
    border-bottom: 0;

    .el-tabs__nav {
      border: none;
    }

    .el-tabs__item {
      background: var(--el-table-cell-bmx-backgroundcolor) !important;
      border-top: 2px solid #fff;
      border-bottom: 2px solid #fff;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      line-height: 38px;
      margin: 0 1px;

      &.is-active {
        background: var(--el-color-primary) !important;
        color: #fff;
        border-top: 2px solid var(--el-color-primary) !important;
        border-bottom: 2px solid var(--el-color-primary) !important;
      }
    }
  }
}
</style>
