<template>
  <el-container>
    <el-header>
      <backIndex />
    </el-header>
    <el-container>
      <el-main class="emain">
        <div class="problem-container">

          <!-- 用户问题表格 -->
          <div class="section">
            <h3>用户问题</h3>
            <el-table :data="paginatedUserProblems" stripe style="width: 90%; margin: 0 auto;" border>
              <el-table-column prop="id" label="ID" align="center"></el-table-column>
              <el-table-column prop="username" label="用户名" align="center"></el-table-column>
              <el-table-column prop="title" label="问题标题" align="center" header-align="center"></el-table-column>

              <el-table-column prop="status" label="问题状态" align="center">
                <template v-slot="scope">
                  <el-tag :type="scope.row.status === '已解决' ? 'success' : 'warning'" disable-transitions>
                    {{ scope.row.status }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="merchantStatus" label="商家回复" width="120" align="center">
                <template v-slot="scope">
                  <el-tag :type="scope.row.merchantStatus === '已回复' ? 'success' : 'danger'" disable-transitions>
                    {{ scope.row.merchantStatus }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="220" align="center">
                <template v-slot="scope">
                  <div class="button-group">
                    <el-button @click="handleResolve(scope.row)" size="mini" type="success" plain>解决</el-button>
                    <el-button @click="handleDelete(scope.row)" size="mini" type="danger" plain>删除</el-button>
                    <el-button @click="handleContact(scope.row)" size="mini" type="primary" plain>联系客户</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页控件 -->
            <el-pagination :current-page="userCurrentPage" :page-size="userPageSize" :total="userProblemData.length"
              @current-change="handleUserPageChange" layout="prev, pager, next, jumper" class="pagination" />
          </div>

          <!-- 快递员问题表格 -->
          <div class="section">
            <h3>快递员问题</h3>
            <el-table :data="paginatedCourierProblems" stripe style="width: 90%; margin: 0 auto;" border>
              <el-table-column prop="id" label="ID" align="center"></el-table-column>
              <el-table-column prop="courierName" label="快递员姓名" align="center"></el-table-column>
              <el-table-column prop="title" label="问题标题" align="center" header-align="center"></el-table-column>

              <el-table-column prop="status" label="问题状态" align="center">
                <template v-slot="scope">
                  <el-tag :type="scope.row.status === '已解决' ? 'success' : 'warning'" disable-transitions>
                    {{ scope.row.status }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="companyReply" label="公司回复" width="120" align="center">
                <template v-slot="scope">
                  <el-tag :type="scope.row.companyReply === '已回复' ? 'success' : 'danger'" disable-transitions>
                    {{ scope.row.companyReply }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="220" align="center">
                <template v-slot="scope">
                  <div class="button-group">
                    <el-button @click="handleResolve(scope.row)" size="mini" type="success" plain>解决</el-button>
                    <el-button @click="handleDelete(scope.row)" size="mini" type="danger" plain>删除</el-button>
                    <el-button @click="handleContactCourier(scope.row)" size="mini" type="primary"
                      plain>联系快递员</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页控件 -->
            <el-pagination :current-page="courierCurrentPage" :page-size="courierPageSize"
              :total="courierProblemData.length" @current-change="handleCourierPageChange"
              layout="prev, pager, next, jumper" class="pagination" />
          </div>

        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'

const userProblemData = ref([
  { id: 1, username: '张三', title: '快递丢失', status: '未解决', merchantStatus: '未回复' },
  { id: 2, username: '李四', title: '配送延迟', status: '已解决', merchantStatus: '已回复' },
  { id: 3, username: '王五', title: '包裹损坏', status: '未解决', merchantStatus: '未回复' },
  { id: 4, username: '赵六', title: '地址错误', status: '未解决', merchantStatus: '未回复' },
  { id: 5, username: '孙七', title: '包装破损', status: '已解决', merchantStatus: '已回复' },
  { id: 6, username: '周八', title: '收件人地址错误', status: '未解决', merchantStatus: '未回复' },
  { id: 7, username: '吴九', title: '物品破损', status: '未解决', merchantStatus: '未回复' },
  { id: 8, username: '郑十', title: '配送信息不符', status: '未解决', merchantStatus: '未回复' },
  { id: 9, username: '钱十一', title: '签收问题', status: '已解决', merchantStatus: '已回复' },
  { id: 10, username: '孙十二', title: '快递丢失', status: '未解决', merchantStatus: '未回复' },
  { id: 11, username: '李十三', title: '包裹迟迟未到', status: '未解决', merchantStatus: '未回复' },
  { id: 12, username: '王十四', title: '派送时效不符合', status: '已解决', merchantStatus: '已回复' },
  { id: 13, username: '赵十五', title: '包装破损', status: '未解决', merchantStatus: '未回复' },
  { id: 14, username: '孙十六', title: '快递迟到', status: '已解决', merchantStatus: '已回复' },
  { id: 15, username: '周十七', title: '配送路线问题', status: '未解决', merchantStatus: '未回复' },
  { id: 16, username: '吴十八', title: '物品丢失', status: '未解决', merchantStatus: '未回复' },
  { id: 17, username: '郑十九', title: '快递员态度差', status: '已解决', merchantStatus: '已回复' },
  { id: 18, username: '钱二十', title: '快递员迟到', status: '未解决', merchantStatus: '未回复' },
  { id: 19, username: '孙二十一', title: '商品损坏', status: '已解决', merchantStatus: '已回复' },
  { id: 20, username: '李二十二', title: '配送不及时', status: '未解决', merchantStatus: '未回复' },
  { id: 21, username: '王二十三', title: '包裹未送达', status: '未解决', merchantStatus: '未回复' },
  { id: 22, username: '赵二十四', title: '地址不清晰', status: '已解决', merchantStatus: '已回复' },
  { id: 23, username: '孙二十五', title: '收件地址错误', status: '未解决', merchantStatus: '未回复' },
  { id: 24, username: '周二十六', title: '派送延误', status: '已解决', merchantStatus: '已回复' },
  { id: 25, username: '吴二十七', title: '包裹破损', status: '未解决', merchantStatus: '未回复' },
  { id: 26, username: '郑二十八', title: '配送信息错误', status: '已解决', merchantStatus: '已回复' },
  { id: 27, username: '钱二十九', title: '包裹无法签收', status: '未解决', merchantStatus: '未回复' },
  { id: 28, username: '孙三十', title: '派送时效问题', status: '已解决', merchantStatus: '已回复' },
  { id: 29, username: '李三十一', title: '快递包裹丢失', status: '未解决', merchantStatus: '未回复' },
  { id: 30, username: '王三十二', title: '物流追踪问题', status: '已解决', merchantStatus: '已回复' }
])

const courierProblemData = ref([
  { id: 1, courierName: '小刘', title: '车辆故障', status: '未解决', companyReply: '未回复' },
  { id: 2, courierName: '小王', title: '路线不清', status: '已解决', companyReply: '已回复' },
  { id: 3, courierName: '小李', title: '客户未取件', status: '未解决', companyReply: '未回复' },
  { id: 4, courierName: '小张', title: '包裹丢失', status: '未解决', companyReply: '未回复' },
  { id: 5, courierName: '小赵', title: '快递迟到', status: '已解决', companyReply: '已回复' },
  { id: 3, courierName: '小李', title: '客户未取件', status: '未解决', companyReply: '未回复' },
  { id: 4, courierName: '小张', title: '包裹丢失', status: '未解决', companyReply: '未回复' },
  { id: 5, courierName: '小赵', title: '快递迟到', status: '已解决', companyReply: '已回复' },
  { id: 6, courierName: '小陈', title: '包裹损坏', status: '未解决', companyReply: '未回复' },
  { id: 7, courierName: '小黄', title: '快递错发', status: '已解决', companyReply: '已回复' },
  { id: 8, courierName: '小李', title: '包裹丢失', status: '未解决', companyReply: '未回复' },
  { id: 9, courierName: '小刘', title: '客户未取件', status: '已解决', companyReply: '已回复' },
  { id: 10, courierName: '小王', title: '快递迟到', status: '未解决', companyReply: '未回复' },
  { id: 11, courierName: '小张', title: '车辆故障', status: '已解决', companyReply: '已回复' },
  { id: 12, courierName: '小赵', title: '路线不清', status: '未解决', companyReply: '未回复' },
  { id: 13, courierName: '小陈', title: '包裹丢失', status: '已解决', companyReply: '已回复' },
  { id: 14, courierName: '小黄', title: '客户未取件', status: '未解决', companyReply: '未回复' },
  { id: 15, courierName: '小李', title: '快递错发', status: '已解决', companyReply: '已回复' },
  { id: 16, courierName: '小刘', title: '车辆故障', status: '未解决', companyReply: '未回复' },
  { id: 17, courierName: '小王', title: '快递迟到', status: '已解决', companyReply: '已回复' },
  { id: 18, courierName: '小张', title: '客户未取件', status: '未解决', companyReply: '未回复' },
  { id: 19, courierName: '小赵', title: '包裹丢失', status: '已解决', companyReply: '已回复' },
  { id: 20, courierName: '小陈', title: '快递错发', status: '未解决', companyReply: '未回复' },
  { id: 21, courierName: '小黄', title: '包裹损坏', status: '已解决', companyReply: '已回复' },
  { id: 22, courierName: '小李', title: '路线不清', status: '未解决', companyReply: '未回复' },
  { id: 23, courierName: '小刘', title: '快递迟到', status: '已解决', companyReply: '已回复' },
  { id: 24, courierName: '小王', title: '车辆故障', status: '未解决', companyReply: '未回复' },
  { id: 25, courierName: '小张', title: '快递错发', status: '已解决', companyReply: '已回复' },
  // 可以继续增加数据
])

const userPageSize = 10 // 每页显示的数量
const courierPageSize = 10 // 每页显示的数量

const userCurrentPage = ref(1) // 当前页数
const courierCurrentPage = ref(1) // 当前页数

// 分页后的用户问题数据
const paginatedUserProblems = computed(() => {
  const start = (userCurrentPage.value - 1) * userPageSize
  return userProblemData.value.slice(start, start + userPageSize)
})

// 分页后的快递员问题数据
const paginatedCourierProblems = computed(() => {
  const start = (courierCurrentPage.value - 1) * courierPageSize
  return courierProblemData.value.slice(start, start + courierPageSize)
})

// 用户问题页数变化时
const handleUserPageChange = (page: number) => {
  userCurrentPage.value = page
}

// 快递员问题页数变化时
const handleCourierPageChange = (page: number) => {
  courierCurrentPage.value = page
}

const handleResolve = (row: any) => {
  console.log('解决问题', row)
  row.status = '已解决'
}

const handleDelete = (row: any) => {
  console.log('删除问题', row)
}

const handleContact = (row: any) => {
  console.log('联系客户', row)
}

const handleContactCourier = (row: any) => {
  console.log('联系快递员', row)
}
</script>

<style scoped>
.emain {
  margin-top: 50px;
}

.problem-container {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.problem-container h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}

.section {
  margin-top: 40px;
}

.section h3 {
  font-size: 20px;
  color: #666;
  margin-bottom: 15px;
  text-align: center;
}

.el-table {
  margin-top: 20px;
}

.button-group {
  display: flex;
  justify-content: space-evenly;

}

.el-button {
  min-width: 60px;
  font-size: 12px;
  padding: 4px 8px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  /* 居中分页 */
}

.el-table-column {
  text-align: center;
}

.el-table__header-wrapper th {
  text-align: center;
}
</style>
