<template>
  <el-tabs v-model="activeTab" tab-position="top">
    <el-tab-pane v-for="item in tabs" :key="item.prop" :label="item.label" :name="item.prop">
      <bg-table
        ref="listtable"
        :headers="headers[item.prop]"
        :rows="item.lists"
        height="100%"
        :isIndex="true"
        :stripe="true">
        <template #person="{ row }">
          <span>{{ row.person.join(",") }}</span>
        </template>
        <template #status="{ row }">
          <span v-if="item.prop == 'push'">
            <span class="status" :class="`status-${row.status}`"></span>
            <span>{{ STATUS_OBJ[row.status] }}</span>
          </span>
          <span v-else :class="`tab-${row.status}`">
            {{ STATUS_OBJ[row.status] }}
          </span>
        </template>
      </bg-table>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
import { ref } from "vue";
import { STATUS_OBJ } from "./env.js";
const activeTab = ref("push");
const props = defineProps({
  tabs: {
    type: Array,
    default: () => [],
  },
});
const headers = {
  push: [
    {
      prop: "method",
      label: "通知方式",
    },
    {
      prop: "person",
      label: "接收人员",
    },
    {
      prop: "push_time",
      label: "推送时间",
    },
    {
      prop: "push_type",
      label: "推送类型",
    },
    {
      prop: "status",
      label: "状态",
    },
  ],
  dispose: [
    {
      prop: "status",
      label: "状态",
    },
    {
      prop: "feedback",
      label: "处置反馈",
    },
    {
      prop: "feedback_time",
      label: "处置反馈",
    },
    {
      prop: "feedback_person",
      label: "反馈人员",
    },
  ],
};
</script>

<style lang="scss" scoped>
$statusObj: (
  success: #48ad97,
  error: #d75138,
);
.tab {
  @each $status, $color in $statusObj {
    &-#{$status} {
      color: $color;
    }
  }
}
.status {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 8px;
  @each $status, $color in $statusObj {
    &-#{$status} {
      background-color: $color;
    }
  }
}
</style>
