<template>
  <el-dialog
    title="历史版本比较"
    :visible.sync="visible"
    @close="handleCancel"
  >
    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column align="right">
        <template
          slot="header"
          slot-scope="scope"
        >
          <span>{{ $t('field.version') }}</span>
        </template>
        <template slot-scope="scope">
          <span>{{ $t(`field.${scope.row.fieldName}`) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="right">
        <template
          slot="header"
          slot-scope="scope"
        >
          <el-select
            v-model="selectedValue[0]"
            @change="(value)=>versionChange(value,0)"
          >
            <el-option
              v-for="(item,index) in options"
              :key="index"
              :label="item.value"
              :value="item.text"
            />
          </el-select>
        </template>
        <template slot-scope="scope">
          <span
            :style="scope.row.versionData1===scope.row.versionData2?'':'color:red'"
          >{{ scope.row.versionData1 }}</span>
        </template>
      </el-table-column>
      <el-table-column align="right">
        <template
          slot="header"
          slot-scope="scope"
        >
          <el-select
            v-model="selectedValue[1]"
            @change="(value)=>versionChange(value,1)"
          >
            <el-option
              v-for="(item,index) in options"
              :key="index"
              :label="item.value"
              :value="item.text"
            />
          </el-select>
        </template>
        <template slot-scope="scope">
          <span
            :style="scope.row.versionData1===scope.row.versionData2?'':'color:red'"
          >{{ scope.row.versionData2 }}</span>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    tableData: {
      type: Array,
      default: () => {},
    },
    options: {
      type: Array,
      default: () => [],
    },
    selectedValue: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  computed: {},
  methods: {
    handleCancel() {
      this.$emit('handleCancel');
    },
    versionChange(value, index) {
      this.$emit('versionChange', value, index);
    },
  },
};
</script>

<style lang="scss" scoped>
// ::v-deep .el-table thead {
//   display: none;
// }
</style>
