<template>
  <el-dialog
    :model-value="modelValue"
    title="人员详情"
    width="650px"
    align-center
    append-to-body
    destroy-on-close
    class="device-detail-dialog"
    @update:model-value="emit('update:modelValue', $event)"
  >
    <div v-if="data" class="detail-body">
      <div class="detail-line">
        <span class="detail-label">姓名/手机号：</span>
        <span class="detail-value">{{ displayName }} {{ displayPhone }}</span>
      </div>

      <div class="detail-section">
        <div class="detail-label detail-label--block">种植品种：</div>

        <div v-if="categoryGroups.length" class="category-list">
          <div
            v-for="(group, gIdx) in categoryGroups"
            :key="gIdx"
            class="category-block"
          >
            <span class="category-tag">品类：{{ group.category }}</span>

            <div class="planting-grid">
              <div
                v-for="(item, idx) in group.plantings"
                :key="idx"
                class="planting-card"
              >
                <span class="variety-tag">{{ item.variety || "-" }}</span>
                <div class="planting-card__row">
                  <span class="planting-card__label">种植面积：</span>
                  <span>{{ item.area || "-" }}</span>
                </div>
                <div class="planting-card__row">
                  <span class="planting-card__label">起种点：</span>
                  <span class="start-point-tag">{{ item.startPoint || "-" }}</span>
                  <span class="start-point-date">{{ item.startDate || "" }}</span>
                </div>
                <div class="planting-card__row">
                  <span class="planting-card__label">种植点位：</span>
                  <span class="location-text" :title="item.plantLocation">
                    {{ item.plantLocation || "-" }}
                  </span>
                  <el-button
                    link
                    type="warning"
                    class="link-btn"
                    @click="handleViewPlantLocation(item)"
                  >
                    查看点位
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="detail-empty">-</div>
      </div>

      <div class="detail-line detail-line--footer">
        <span class="detail-label">常驻点位：</span>
        <span class="detail-value location-text" :title="displayResident">
          {{ displayResident }}
        </span>
        <el-button
          link
          type="warning"
          class="link-btn"
          @click="handleViewResidentLocation"
        >
          查看点位
        </el-button>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button class="btn-edit" @click="handleEdit">编辑信息</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed } from "vue";
import { ElMessage } from "element-plus";

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  data: {
    type: Object,
    default: null,
  },
});

const emit = defineEmits(["update:modelValue", "edit"]);

const displayName = computed(
  () => props.data?.name || props.data?.ownerName || "-"
);
const displayPhone = computed(
  () => props.data?.phone || props.data?.ownerPhone || ""
);
const displayResident = computed(
  () => props.data?.residentLocation || props.data?.location || "-"
);

/** 按品类分组展示；兼容 categories 数组或单品类 + plantings */
const categoryGroups = computed(() => {
  const row = props.data;
  if (!row) return [];

  if (Array.isArray(row.categories) && row.categories.length) {
    return row.categories
      .map((c) => {
        if (typeof c === "string") {
          return { category: c, plantings: row.plantings || [] };
        }
        return {
          category: c.category || c.name || c.cropCategory || "-",
          plantings: c.plantings || [],
        };
      })
      .filter((g) => g.plantings.length);
  }

  const plantings = row.plantings || [];
  if (!plantings.length) return [];

  return [
    {
      category: row.cropCategory || row.type || "-",
      plantings,
    },
  ];
});

const handleViewPlantLocation = () => {
  ElMessage.info("查看种植点位");
};

const handleViewResidentLocation = () => {
  ElMessage.info("查看常驻点位");
};

const handleEdit = () => {
  emit("edit");
};
</script>

<style lang="scss" scoped>
.detail-body {
  padding: 24px 14px 8px;
  border-top: 1px solid #e5e6eb;
}

.detail-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 0;
  min-height: 32px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 22px;
  color: #1d2129;

  &--footer {
    margin-top: 8px;
    margin-bottom: 0;
  }
}

.detail-section {
  margin-bottom: 16px;
}

.detail-label {
  flex-shrink: 0;
  color: #1d2129;
  font-size: 14px;
  line-height: 22px;

  &--block {
    margin-bottom: 10px;
  }
}

.detail-value {
  color: #1d2129;
  font-size: 14px;
  line-height: 22px;
  word-break: break-all;
}

.detail-empty {
  color: #86909c;
  font-size: 14px;
}

.category-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.category-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.category-tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 0 10px;
  border-radius: 2px;
  min-width: 130px;
  background: linear-gradient(270deg, #FFFFFF 0%, #FFEAD8 100%);
  color: $warning-color;
  font-size: 14px;
  font-weight: 500;
  height: 26px;
  line-height: 26px;
  box-sizing: border-box;
}

.planting-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.planting-card {
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #E5E6EB;
  border-radius: 8px;
  background: #fff;
}

.variety-tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 1px 6px;
  border-radius: 2px;
  background: rgba(120, 120, 120, 0.1);
  color: #4C4C4C;
  font-size: 12px;
  line-height: 20px;
}

.planting-card__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  color: #1d2129;
  font-size: 13px;
  line-height: 22px;

  &:last-child {
    margin-bottom: 0;
  }
}

.planting-card__label {
  flex-shrink: 0;
  color: #1d2129;
}

.start-point-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 2px;
  background: #f2f3f5;
  color: #4e5969;
  font-size: 12px;
  line-height: 20px;
}

.start-point-date {
  color: #1d2129;
  font-size: 13px;
}

.location-text {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1d2129;
}

.link-btn {
  padding: 0;
  height: auto;
  font-size: 13px;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  padding-bottom: 8px;
}

.btn-edit {
  min-width: 120px;
  height: 36px;
  color: #fff;
  border-color: $base-color;
  background: $base-color;
  border-radius: 4px;
}
</style>
