<template>
  <el-dialog
    title="历史版本比较"
    :visible.sync="ownVisible"
    @close="handleCancel"
  >
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      :row-key="rowKey"
      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(`${scope.row.langId}`) }}</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,
    },
    dataId: {
      type: String,
      default: false,
    },
    type: {
      type: String,
      default: false,
    },
    rowKey: {
      type: String,
      default: 'id',
    },
    module: {
      type: String,
      default: 'pub',
    }
  },
  data() {
    return {
      tableData: [],
      options: [],
      loading: false,
      ownVisible: false,
      selectedValue: [],
      apiObj: {
        pub: {
          getCompareVersion: 'getCompareVersion',
          versionsCombox: 'versionsCombox',
          compare: 'compare',
        },
        dcs: {
          getCompareVersion: 'getCompareVersionLog',
          versionsCombox: 'versionsLogCombox',
          compare: 'compareVersionLog',
        }
      }
    };
  },
  computed: {},
  methods: {
    handleCancel() {
      this.$emit('handleCancel');
    },
    versionChange(value, index) {
      this.getDataList();
    },
    onOpen() {
      this.$nextTick(async () => {
        const versionRes = await this.$apis[this.apiObj[this.module].getCompareVersion]({ dataId: this.dataId })
        if (versionRes.data.result.length === 0) {
          this.$message.warning('该条数据未存储过历史版本数据');
          this.$emit('handleCancel');
          this.ownVisible = false;
          return;
        }
        this.ownVisible = this.visible;
        this.loading = true;
        this.selectedValue = versionRes.data.result
        await this.getHistoryVersions();
        this.getDataList();
      })
    },
    async getHistoryVersions() {
      // 请求版本号接口
      const versionRes = await this.$apis[this.apiObj[this.module].versionsCombox]({ dataId: this.dataId })
      this.options = versionRes.data.result;
    },
    async getDataList() {
      // 请求表格数据
      const params =  {
        type: this.type ? this.type : this.dataId.split('_')[0],
        dataId: this.dataId,
        version1: this.selectedValue[0],
        version2: this.selectedValue[1]
      }
      const versionRes = await this.$apis[this.apiObj[this.module].compare](params)
      if (versionRes.success) {
        this.tableData = versionRes.data.result
      }
      this.loading = false;
    },
  },
};
</script>

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