<template>
  <div style="height: calc(100% - 48px);">
    <v-tabs v-model="activeIndex" background-color="#f7f8fa">
      <v-tab>审核详情</v-tab>
      <v-tab v-if="info.record_type === 'change'">影响关系图谱</v-tab>
    </v-tabs>
    <v-tabs-items v-model="activeIndex" style="flex: 1">
      <v-tab-item>
        <div class="mt-3">
          <v-row>
            <v-col cols="12">
              <!-- <m-card title="基本信息" outlined noElevation style="min-height: 260px;"> -->
              <div class="card-wrapper">
                <div class="card-title">基本信息</div>
                <div class="snapshot-wrapper mt-3">
                  <ul class="snapshot-labels">
                    <li>状态：</li>
                    <li>记录类型：</li>
                    <li>创建时间：</li>
                    <li>更新时间：</li>
                    <li>备注：</li>
                  </ul>
                  <ul class="snapshot-values">
                    <li>
                      <v-chip small :color="info.status === 'pending' ? 'primary' : info.status === 'resolved' ? 'success' : 'warning'">
                        {{ info.status === 'pending' ? '待处理' : info.status === 'resolved' ? '已处理' : '已忽略' }}
                      </v-chip>
                    </li>
                    <li>{{ info.record_type === 'redundancy' ? '疑似冗余' : '疑似变动' || '-' }}</li>
                    <li>{{ formatDate(info.created_at) || '-' }}</li>
                    <li>{{ formatDate(info.updated_at) || '-' }}</li>
                    <li>
                      <v-text-field
                        v-if="info?.status === 'pending'"
                        v-model="notes"
                        label=""
                        clearable
                        filled
                        rounded
                        dense
                        hide-details
                        placeholder="请输入备注信息"
                        @input="handleNotesChange"
                      />
                      <span v-else>{{ info.notes || '-' }}</span>
                    </li>
                  </ul>
                </div>
              </div>
              <!-- </m-card> -->
            </v-col>
          </v-row>
        </div>
        <v-row>
          <v-col cols="6">
            <!-- <m-card title="新解析元数据信息" outlined noElevation> -->
            <div class="card-wrapper">
              <div class="card-title">新解析元数据信息</div>
              <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>
              <div class="mt-5" v-if="info.status === 'pending'">
                <v-tooltip top>
                  <template v-slot:activator="{ on, attrs }">
                    <v-btn
                      color="primary"
                      outlined
                      block
                      @click="handleAction('alias', 'new_meta')"
                      v-bind="attrs"
                      v-on="on"
                    >
                      设为主元数据
                    </v-btn>
                  </template>
                  <span>设为主元数据，候选元数据则作为别名</span>
                </v-tooltip>
              </div>
            </div>
            <!-- </m-card> -->
          </v-col>

          <v-col cols="6">
            <!-- <m-card title="候选元数据信息" outlined noElevation> -->
            <div class="card-wrapper">
              <div class="card-title">候选元数据信息</div>
              <div class="snapshot-wrapper mt-3">
                <ul class="snapshot-labels">
                  <li>中文名称：</li>
                  <li>英文名称：</li>
                  <li>数据类型：</li>
                  <li>数据标签：</li>
                </ul>
                <ul class="snapshot-values">
                  <li>{{ candidate.name_zh || '-' }}</li>
                  <li>{{ candidate.name_en || '-' }}</li>
                  <li>{{ candidate.data_type || '-' }}</li>
                  <li>
                    <span v-if="Array.isArray(candidate.tags) && candidate.tags.length">
                      {{ candidate.tags.map(tag => tag.name_zh).join(', ') }}
                    </span>
                    <span v-else>-</span>
                  </li>
                </ul>
              </div>
              <div class="mt-5" v-if="info.status === 'pending'">
                <v-tooltip top>
                  <template v-slot:activator="{ on, attrs }">
                    <v-btn
                      color="primary"
                      outlined
                      block
                      @click="handleAction('alias', 'candidate')"
                      v-bind="attrs"
                      v-on="on"
                    >
                      设为主元数据
                    </v-btn>
                  </template>
                  <span>设为主元数据，新解析的元数据则作为别名</span>
                </v-tooltip>
              </div>
            </div>
            <!-- </m-card> -->
          </v-col>
        </v-row>
      </v-tab-item>
      <!-- 关系图谱 -->
      <v-tab-item v-if="info.record_type === 'change'">
        <m-card style="height: 70vh;" no-title class="d-flex flex-column mt-3" bodyStyle="flex: 1">
          <Graph :graphData="info.impact_graph"></Graph>
        </m-card>
      </v-tab-item>
    </v-tabs-items>
  </div>
</template>

<script>
import MCard from '@/components/MCard'
import Graph from './graph.vue'
import { formatDate } from '@/utils/date'

export default {
  name: 'detailsComponent',
  components: {
    MCard,
    Graph
  },
  props: {
    info: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      activeIndex: 0,
      notes: this.info.notes || null
    }
  },
  computed: {
    newMetaSnapshot () {
      if (!this.info || !this.info.new_meta) {
        return {}
      }
      return this.info.new_meta
    },
    candidate () {
      if (!this.info) {
        return {}
      }
      return this.info.record_type === 'redundancy' ? this.info.candidates[0]?.snapshot : this.info.old_meta?.snapshot || {}
    }
  },
  methods: {
    formatDate (date) {
      return formatDate(date)
    },
    handleNotesChange () {
      this.$emit('notesChange', this.notes)
    },
    handleAction (action, type) {
      this.$emit('action', action, type)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .v-window {
  height: 100%;
}
::v-deep .v-window__container, .v-window-item {
  height: 100%;
}

.card-wrapper {
  border: 1px solid #0000001f;
  border-radius: 6px;
  padding: 15px;
}
.card-title {
  font-size: 20px;
  font-weight: 600;
  color: #1976D2;
  margin-bottom: 12px;
}

.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 {
  text-align: right;
  margin-right: 12px;
  color: #403b3b;
}

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

.snapshot-labels li,
.snapshot-values li {
  margin: 6px 0;
}
</style>
