<template>
  <section class="px-64 flex flex-col gap-20 h-b100">
    <div>
      <div class="flex gap-30 fs-18 pt-30 pb-10 bg-F8F9FA">
        <a v-for="(item, index) in tabs" :key="index" class="cursor-pointer aa"
          :class="indexTab === index ? 'active' : ''" @click="changeTab(index)">{{ item }}</a>
      </div>
      <div v-if="isShowtip" class="hint flex-between-center px-20 py-10 my-20">
        <div class="flex-align-center">
          <el-icon color="#5252ff" size="16">
            <WarningFilled />
          </el-icon>
          <span class="ml-4">需要授权账号登录权限且将其加入到团队中，子账号才可以登陆到短剧平台。</span>
        </div>
        <div class="flex gap-20">
          <div>已授权 <span class="fw-bold" style="color: darkgreen;">0</span></div>
          <span style="color: #ccc;">|</span>
          <div>未授权 <span>2</span></div>
        </div>
      </div>
      <div class="flex-center gap-10 mt-10">
        <el-input v-model="searchValue" placeholder="搜索" :prefix-icon="Search" />
        <el-select v-model="selectValue" placeholder="Select" style="width: 240px">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-button type="primary" :dark="true" :icon="Plus">
          <span class="ml-4">新建子账号</span>
        </el-button>
      </div>
    </div>
    <el-table :data="tableData">
      <el-table-column type="selection" :selectable="selectable" width="55" />
      <el-table-column prop="name" label="用户名" width="180" />
      <el-table-column prop="name" label="备注" width="180" />
      <el-table-column prop="name" label="隶属团队" />
      <el-table-column prop="name" label="授权登录状态" />
      <el-table-column prop="name" label="操作" width="180">
        <template #default="scope">
          <el-button link type="primary" size="small">
            编辑
          </el-button>
          <el-button link type="danger" size="small">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </section>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Search, Plus, WarningFilled } from '@element-plus/icons-vue'

const searchValue = ref('');
const isShowtip = ref(true)
const selectValue = ref(1);
const options = [
  {
    value: 1,
    label: '所有授权',
  },
  {
    value: 2,
    label: '已授权',
  },
  {
    value: 3,
    label: '未授权',
  },
]
const tabs = ref(['子账号管理', '团队管理'])
const indexTab = ref(0)
const changeTab = ref((index: number) => {
  indexTab.value = index
})



// 表格
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
const selectable = (row: any, index: number) => {
  return row.name !== 'Tom'
}
</script>
<style lang="scss">
:root {
  --el-color-primary: #5272ff;
  /* 修改主色 */
}
</style>
<style lang="scss" scoped>
.hint {
  border: 1px solid #e5e7eb;
  background-color: #f5f7ff;
  border-radius: 8px;
}

.bg-F8F9FA {
  background-color: #f8f9fa;

  .aa {
    text-decoration: none;
    color: #888;
    outline: none;

    &.active {
      color: #333;
    }
  }
}
:deep(.el-table) {
  border: 1px solid #eee;
  border-radius: 8px;
  border-bottom: none;
  th{
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: rgba(28, 106, 224, 0.027);
  }
}
</style>