<template>
  <div>
    <common-component :info="info" @notesChange="handleNotesChange" />
    <v-row>
      <!-- 左侧：新解析元数据快照 new_meta -->
      <v-col cols="5">
        <m-card title="新解析元数据信息">
          <div class="snapshot-wrapper mt-3">
            <ul class="snapshot-labels">
              <li>中文名称：</li>
              <li>英文名称：</li>
              <li>数据类型：</li>
              <li>数据标签：</li>
            </ul>
            <ul class="snapshot-values">
              <li>{{ newMetaSnapshot.name_zh || '-' }}</li>
              <li>{{ newMetaSnapshot.name_en || '-' }}</li>
              <li>{{ newMetaSnapshot.data_type || '-' }}</li>
              <li>
                <span v-if="Array.isArray(newMetaSnapshot.tags) && newMetaSnapshot.tags.length">
                  {{ newMetaSnapshot.tags.map(tag => tag.name_zh).join(', ') }}
                </span>
                <span v-else>-</span>
              </li>
            </ul>
          </div>
        </m-card>
      </v-col>

      <!-- 右侧：候选列表 candidates -->
      <v-col cols="7">
        <m-card title="候选元数据列表">
          <m-table
            class="candidate-table"
            :headers="candidateHeaders"
            :items="candidateList"
            :loading="false"
            :is-tools="false"
            :disable-sort="true"
            :show-select="false"
            :can-delete="false"
            :show-page="false"
            :items-per-page="-1"
            :no-radius="true"
          >
            <template #name_zh="{ item }">
              {{ item.snapshot?.name_zh || '-' }}
            </template>
            <template #name_en="{ item }">
              {{ item.snapshot?.name_en || '-' }}
            </template>
            <template #data_type="{ item }">
              {{ item.snapshot?.data_type || '-' }}
            </template>
            <template #diff_fields="{ item }">
              <span v-if="Array.isArray(item.diff_fields) && item.diff_fields.length">
                {{ item.diff_fields.join(', ') }}
              </span>
              <span v-else>-</span>
            </template>
            <template #actions="{ item }">
              <v-btn
                v-if="info?.status === 'pending'"
                class="mr-2"
                :color="selectedCandidateMetaId === item.candidate_meta_id ? '' : 'success'"
                text
                :disabled="selectedCandidateMetaId === item.candidate_meta_id"
                @click="handleSelect(item.candidate_meta_id)"
                >
                {{ selectedCandidateMetaId === item.candidate_meta_id ? '已选择' : '选择' }}
              </v-btn>
            </template>
          </m-table>
        </m-card>
      </v-col>
    </v-row>
  </div>
</template>

<script>
import MCard from '@/components/MCard'
import MTable from '@/components/List/table.vue'
import CommonComponent from './common.vue'

export default {
  name: 'redundancyComponent',
  components: {
    MCard,
    MTable,
    CommonComponent
  },
  props: {
    info: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      selectedCandidateMetaId: null
    }
  },
  computed: {
    newMetaSnapshot () {
      if (!this.info || !this.info.new_meta) {
        return {}
      }
      return this.info.new_meta
    },
    candidateList () {
      if (!this.info || !Array.isArray(this.info.candidates)) {
        return []
      }
      return this.info.candidates
    },
    candidateHeaders () {
      return [
        { text: '中文名称', align: 'start', value: 'name_zh' },
        { text: '英文名称', align: 'start', value: 'name_en' },
        { text: '数据类型', align: 'start', value: 'data_type' },
        { text: '差异字段', align: 'start', value: 'diff_fields' },
        { text: '操作', align: 'center', value: 'actions' }
      ]
    }
  },
  methods: {
    handleSelect (candidateMetaId) {
      this.selectedCandidateMetaId = candidateMetaId
      this.$emit('selectCandidateMeta', candidateMetaId)
    },
    handleNotesChange (notes) {
      this.$emit('notesChange', notes)
    }
  }
}
</script>

<style lang="scss" scoped>
.snapshot-card {
  background: #f5f3f3;
  border-radius: 6px;
  padding: 16px 20px;
  box-shadow: 0 0 0 1px #eee;
}

.snapshot-title {
  font-weight: 700;
  margin-bottom: 16px;
  // font-size: 14px;
  color: #333;
}

.snapshot-wrapper {
  display: flex;
  align-items: flex-start;
}

.snapshot-labels,
.snapshot-values {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

.snapshot-labels {
  // flex: 0 0 90px;
  text-align: right;
  margin-right: 12px;
  color: #403b3b;
  // font-weight: 700;
}

.snapshot-values {
  flex: 1;
  word-break: break-all;
}

.snapshot-labels li,
.snapshot-values li {
  margin: 6px 0;
}

.candidate-table thead th {
  background-color: #f5f5f5;
  font-weight: 600;
  font-size: 13px;
}

.candidate-table tbody tr:hover {
  background-color: #f9f9f9;
}

.candidate-table td {
  font-size: 13px;
}
</style>
