<template>
  <div class="compare-cont">
    <div class="title"><b>{{ $t1(sectionTitle) }}</b></div>
    <table class="table-border_1">
      <tbody>
        <tr>
          <th>{{ $t1(headerLabel) }}</th>
          <td>
            <span class="version-blue">{{ $t1("版本号") }}：{{ preVersion }}</span>
            <div class="compare-revert-btn">
              <reverButton
                :objType="objType"
                :objCode="objCode"
                :hData="compareHData1"
                @reverCallback="$emit('reverCallback')"
              />
            </div>
          </td>
          <td>
            <span class="version-green">{{ $t1("版本号") }}：{{ curVersion }}</span>
            <div class="compare-revert-btn">
              <reverButton
                :objType="objType"
                :objCode="objCode"
                :hData="compareHData2"
                @reverCallback="$emit('reverCallback')"
              />
            </div>
          </td>
        </tr>
        <tr
          v-for="field in fields"
          :key="field.key"
          :class="fieldDiffClass(field)"
        >
          <th>{{ $t1(field.label) }}</th>
          <td>{{ getFieldVal(compareHData1, field) }}</td>
          <td>{{ getFieldVal(compareHData2, field) }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import compareMixin from "./compareMixin";
import reverButton from "./reverButton.vue";

export default {
  name: "compareBasicSection",
  mixins: [compareMixin],
  components: {
    reverButton,
  },
  props: {
    sectionTitle: {
      type: String,
      default: "基础信息",
    },
    headerLabel: {
      type: String,
      required: true,
    },
    fields: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

<style scoped lang="scss">
@import "./compareContMixin.scss";

.compare-cont {
  @include compare-cont-shell;
  @include compare-cont-title;
  @include compare-version-label;
}

.table-border_1 {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;

  th,
  td {
    padding: 10px 12px;
    border: 1px solid #ebeef5;
    font-size: 13px;
    line-height: 20px;
    vertical-align: middle;
    word-break: break-all;
  }

  th {
    width: 160px;
    background: #f5f7fa;
    color: #606266;
    font-weight: 500;
    text-align: left;
  }

  td {
    width: calc((100% - 160px) / 2);
    color: #303133;

    .version-blue,
    .version-green {
      margin-top: 2px;
      margin-bottom: 0;
    }

    .compare-revert-btn {
      float: right;
    }
  }

  tr.id-difference {
    td {
      background: #fef0f0;
      color: #f56c6c;
    }
  }
}
</style>
