<template>
  <div class="container-bottom">
    <!-- 表头 -->
    <div class="table-head">
      <div class="table-row header">
        <span>工单描述</span>
        <span>上报时间</span>
        <span>区域负责人</span>
        <span>负责人联系方式</span>
        <span>操作</span>
      </div>
    </div>

    <!-- 数据行 -->
    <cellRow
      v-for="(item, index) in tableData"
      :key="index"
    >
      <div class="table-container">
        <div class="table-row data">
          <span>{{ item.desc }}</span>
          <span>{{ item.time }}</span>
          <span>{{ item.person }}</span>
          <span>{{ item.contact }}</span>
          <div class="status-container">
            <span :class="['status-tag', getStatusClass(item.status)]">{{
              item.status
            }}</span>
          </div>
        </div>
      </div>
    </cellRow>
  </div>
</template>

<script setup>
import { ref } from "vue";
import cellRow from "./cellRow.vue";

// 表格数据
const tableData = ref([
  {
    desc: "金山南路生活垃圾乱堆乱放",
    time: "2021-05-05 09:05:05",
    person: "王小虎",
    contact: "18888888888",
    status: "待处理",
  },
  {
    desc: "浦东新区道路积水严重",
    time: "2021-06-01 14:30:00",
    person: "王小虎",
    contact: "17777777777",
    status: "处理中",
  },
  {
    desc: "徐汇区路灯故障",
    time: "2021-07-15 08:20:00",
    person: "张三",
    contact: "13333333333",
    status: "已处理",
  },
]);

// 根据状态返回对应的类名
const getStatusClass = (status) => {
  switch (status) {
    case "待处理":
      return "status-pending";
    case "处理中":
      return "status-processing";
    case "已处理":
      return "status-done";
    default:
      return "";
  }
};
</script>

<style scoped>
.container-bottom {
  padding-top: 8px;
}
.table-head {
  width: 100%;
  padding: 10px 0 0px 40px;
  display: grid;
}
.table-container {
  width: 100%;
  padding: 12px 0 12px 40px;
  display: grid;
  gap: 17px;
}

.table-row {
  display: grid;
  width: 100%;
  grid-template-columns: 2fr 2fr 2fr 2fr 1fr;
  align-items: center;
  font-size: 14px;
  span:last-child {
    text-align: center;
  }
}

.header {
  color: #9cbeff;
  font-family: "MiSans-Regular";
}

.data {
  color: rgba(255, 255, 255, 0.8);
  font-family: "MiSans-Regular";
}

.status-container{
    width: 100%;
    display: flex;
    justify-content: center;
}
/* 状态标签通用样式 */
.status-tag {
  width: 60%;
  padding: 6px 0px;
  border-radius: 4px;
  font-size: 12px;
  color: #ffffff;
  border-radius: 18px;
  text-align: center;
}

/* 待处理 - 橙色 */
.status-pending {
  background-color: #CA7A2A;
}

/* 处理中 - 蓝色 */
.status-processing {
  background-color: #2A95CA;
}

/* 已处理 - 绿色 */
.status-done {
  background-color: #5DCA2A;
}
</style>
