<template>
  <div>
    <v-row>
      <v-col cols="12">
        <m-card title="基本信息" style="min-height: 260px;">
          <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' ? 'warning' : info.status === 'resolved' ? 'success' : ''">
                  {{ 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=""
                  filled
                  clearable
                  dense
                  hide-details
                  placeholder="请输入备注信息"
                  @input="handleNotesChange"
                />
                <span v-else>{{ info.notes || '-' }}</span>
              </li>
            </ul>
          </div>
        </m-card>
      </v-col>
    </v-row>
  </div>
</template>

<script>
import MCard from '@/components/MCard'
import { formatDate } from '@/utils/date'

export default {
  name: 'commonComponent',
  components: {
    MCard
  },
  props: {
    info: {
      type: Object,
      default: () => ({ notes: null })
    }
  },
  data () {
    return {
      notes: this.info.notes || null
    }
  },
  methods: {
    formatDate (date) {
      return formatDate(date)
    },
    handleNotesChange () {
      this.$emit('notesChange', this.notes)
    }
  }
}
</script>

<style lang="scss" scoped>
.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;
}
</style>
