<template>
  <base-dialog
    v-model:visible="props.visible"
    :title="props.allCountyData.name + '三级路长明细'"
    :table-data="tableData"
    :table-columns="tableColumns"
    :table-height="300"
    :total="total"
    :current-page="currentPage"
    :page-size="pageSize"
    :z-index="1000"
    :max-width="1000"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    @close="handleClose"
  >
    <!-- 标题栏下方自定义插槽 -->
    <template #header>
      <!-- 统计数据卡片 -->
      <div class="stats-cards">
        <div class="stat-card">
          <div class="card-icon">
            <el-icon class="stat-icon"><User /></el-icon>
          </div>
          <div class="card-info">
            <div class="card-label">路长总人数</div>
            <div class="card-value">
              <span class="value-num">{{ stats.total }}</span>
              <span class="value-unit">人</span>
            </div>
          </div>
        </div>
        <div class="stat-card">
          <div class="card-icon">
            <el-icon class="stat-icon"><OfficeBuilding /></el-icon>
          </div>
          <div class="card-info">
            <div class="card-label">县级路长</div>
            <div class="card-value">
              <span class="value-num">{{ stats.county }}</span>
              <span class="value-unit">公里</span>
            </div>
          </div>
        </div>
        <div class="stat-card">
          <div class="card-icon">
            <el-icon class="stat-icon"><MapLocation /></el-icon>
          </div>
          <div class="card-info">
            <div class="card-label">乡、村路长</div>
            <div class="card-value">
              <span class="value-num">{{ stats.village }}</span>
              <span class="value-unit">次</span>
            </div>
          </div>
        </div>
      </div>
    </template>

    <!-- 操作列插槽 -->
    <template #operation="{ row }">
      <div class="action-btns">
        <div class="action-btn" @click="handleView(row)">
          <el-icon><VideoCamera /></el-icon>
        </div>
        <div class="action-btn" @click="handleVoice(row)">
          <el-icon><Microphone /></el-icon>
        </div>
        <div class="action-btn" @click="handleCall(row)">
          <el-icon><Phone /></el-icon>
        </div>
      </div>
    </template>
  </base-dialog>
</template>

<script setup>
import { ref, computed, watch } from "vue";
import {
  Close,
  VideoCamera,
  Microphone,
  Phone,
  ArrowLeft,
  ArrowRight,
  User,
  OfficeBuilding,
  MapLocation,
} from "@element-plus/icons-vue";
import baseDialog from "../component/baseDialog.vue";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  allCountyData: {
    type: Object,
    default: () => ({
      name: "",
    }),
  },
});

const emit = defineEmits(["update:visible", "close"]);

// 统计数据
const stats = ref({
  total: 1127,
  county: 216,
  village: 1099,
});

// 表格列配置
const tableColumns = ref([
  { prop: "id", label: "序号", width: "" },
  { prop: "district", label: "区县/镇街", width: "" },
  { prop: "name", label: "姓名", width: "" },
  { prop: "phone", label: "电话", width: "" },
  { prop: "role", label: "角色", width: "" },
  { prop: "position", label: "职务", width: "" },
  { prop: "operation", label: "操作", width: "120px", slot: "operation" },
]);

// 表格数据
const tableData = ref([
  {
    id: 1,
    district: "万州区柏梓镇",
    name: "赵海浪",
    phone: "1862352068",
    role: "一般人员（路长履职）",
    position: "其他",
  },
  {
    id: 2,
    district: "万州区柏梓镇",
    name: "赵海浪",
    phone: "1862352068",
    role: "一般人员（路长履职）",
    position: "其他",
  },
  {
    id: 3,
    district: "万州区柏梓镇",
    name: "赵海浪",
    phone: "1862352068",
    role: "一般人员（路长履职）",
    position: "其他",
  },
  {
    id: 4,
    district: "万州区柏梓镇",
    name: "赵海浪",
    phone: "1862352068",
    role: "一般人员（路长履职）",
    position: "其他",
  },
  {
    id: 5,
    district: "万州区李河镇",
    name: "王建国",
    phone: "1398324567",
    role: "一般人员（路长履职）",
    position: "其他",
  },
  {
    id: 6,
    district: "万州区李河镇",
    name: "王建国",
    phone: "1398324567",
    role: "一般人员（路长履职）",
    position: "其他",
  },
  {
    id: 7,
    district: "万州区李河镇",
    name: "王建国",
    phone: "1398324567",
    role: "一般人员（路长履职）",
    position: "其他",
  },
  {
    id: 8,
    district: "万州区李河镇",
    name: "王建国",
    phone: "1398324567",
    role: "一般人员（路长履职）",
    position: "其他",
  },
  {
    id: 9,
    district: "万州区分水镇",
    name: "刘志强",
    phone: "1387654321",
    role: "一般人员（路长履职）",
    position: "其他",
  },
  {
    id: 10,
    district: "万州区分水镇",
    name: "刘志强",
    phone: "1387654321",
    role: "一般人员（路长履职）",
    position: "其他",
  },
  {
    id: 11,
    district: "万州区分水镇",
    name: "刘志强",
    phone: "1387654321",
    role: "一般人员（路长履职）",
    position: "其他",
  },
  {
    id: 12,
    district: "万州区分水镇",
    name: "刘志强",
    phone: "1387654321",
    role: "一般人员（路长履职）",
    position: "其他",
  },
]);

// 分页
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(36);

// 关闭对话框
const handleClose = () => {
  emit("update:visible", false);
  emit("close");
};

// 分页操作
const handleSizeChange = (val) => {
  pageSize.value = val;
  fetchData();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  fetchData();
};

// 获取数据
const fetchData = () => {
  console.log("获取第", currentPage.value, "页数据");
  // 实际项目中调用API获取数据
};

// 操作按钮
const handleView = (item) => {
  console.log("查看视频:", item);
};

const handleVoice = (item) => {
  console.log("语音通话:", item);
};

const handleCall = (item) => {
  console.log("拨打电话:", item);
};

// 监听visible变化
watch(
  () => props.visible,
  (newVal) => {
    if (newVal) {
      currentPage.value = 1;
      fetchData();
    }
  },
);
</script>

<style lang="scss" scoped>
// 统计卡片
.stats-cards {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;

  .stat-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(
      135deg,
      rgba(30, 80, 140, 0.6) 0%,
      rgba(20, 60, 110, 0.8) 100%
    );
    border: 1px solid rgba(64, 169, 255, 0.2);
    border-radius: 4px;
    padding: 10px 12px;

    .card-icon {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(64, 169, 255, 0.15);
      border-radius: 4px;

      .stat-icon {
        font-size: 18px;
        color: #40a9ff;
      }
    }

    .card-info {
      .card-label {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 1px;
      }

      .card-value {
        display: flex;
        align-items: baseline;
        gap: 2px;

        .value-num {
          font-size: 18px;
          font-weight: 700;
          color: #40a9ff;
          text-shadow: 0 0 6px rgba(64, 169, 255, 0.5);
        }

        .value-unit {
          font-size: 10px;
          color: rgba(255, 255, 255, 0.6);
        }
      }
    }
  }
}

// 操作按钮样式
.action-btns {
  display: flex;
  justify-content: center;
  gap: 8px;

  .action-btn {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(64, 169, 255, 0.15);
    border-radius: 2px;
    color: #40a9ff;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      background-color: rgba(64, 169, 255, 0.3);
      transform: scale(1.1);
    }
  }
}
</style>
