<template>
  <div class="percentage-content">
    <el-radio-group class="rg" v-model="tabIndex">
      <template v-for="item in tabs" :key="item.val">
        <el-radio-button :label="item.val">{{ item.name }}</el-radio-button>
      </template>
    </el-radio-group>
    <div class="content">
      <transition name="main" mode="out-in" appear>
        <component :is="tabs[tabIndex].compon" />
      </transition>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { onMounted, reactive, ref } from "vue";
import { ElMessageBox } from "element-plus";
import CG from "./components/cg.vue";
import DB from "./components/db.vue";
import YJ from "./components/yj.vue";
import TJ from "./components/tj.vue";

const tabIndex = ref(0);
const tabs = ref([
  { name: "常规工作", val: 0, compon: CG },
  { name: "督办工作", val: 1, compon: DB },
  { name: "应急事件", val: 2, compon: YJ },
  { name: "调解工作", val: 3, compon: TJ },
]);
</script>

<style lang="scss" scoped>
.percentage-content {
  height: auto;
  display: flex;
  flex-direction: column;

  .rg {
    padding: 16px;
    background: #ffffff;
    box-shadow: 0px 0px 6px rgba(0, 120, 255, 0.1);
    border-radius: 6px;
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;

    :deep(.el-radio-button__inner) {
      min-width: 150px;
    }
  }
  .content {
    width: 100%;
    background: #fff;
    border-radius: 0.26042vw;
    box-shadow: 0 0 0.41667vw 0 rgba(8, 33, 85, 0.1);
    padding: 0.83333vw;
    overflow-y: auto;
    overflow-x: hidden !important;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;

    .table {
      margin-top: 16px;
    }
  }
}
</style>
