<template>
  <el-dialog title="test" top="3vh" :visible.sync="visible" append-to-body>
    <div class="exam-info-container clearfix">
      <div class="exam-title">{{ examName }}</div>
      <div class="exam-date-time-list">
        <el-select
          ref="select"
          v-model="activeRecId"
          placeholder="请选择"
          size="small"
          popper-class="c-el-select-popper"
          :popper-append-to-body="false"
          @visible-change="selectVisibleHandle"
        >
          <el-option
            v-for="item in list"
            :key="item.recId"
            :label="item.time"
            :value="item.recId"
            @mouseover.native="preview(item)"
            @mouseout.native="restore()"
          />
        </el-select>
      </div>
    </div>

    <div class="dialog-container">
      <el-table :data="activeObj.data" :span-method="arraySpanMethod" border style="width: 100%">
        <el-table-column align="center" show-overflow-tooltip label="" prop="name" width="180" />
        <el-table-column align="center" show-overflow-tooltip label="OD">
          <template slot-scope="scope">
            <span>{{ scope.row.both||scope.row.od }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" show-overflow-tooltip label="OS">
          <template slot-scope="scope">
            <span>{{ scope.row.both||scope.row.os }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <template slot="footer">
      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  props: {
    examName: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      visible: false,
      activeRecId: '',
      activeObj: {
        type: '',
        time: null,
        recId: '',
        data: []
      }
    }
  },
  watch: {
    activeRecId(val) {
      this.activeObj = this.list.find((item, index, array) => item.recId === val)
    }
  },
  mounted() {
  },
  methods: {
    init() {
      this.visible = true
      this.activeRecId = this.list[0].recId
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (row.both && column.property !== 'name') {
        // od列1,os列2.(合并od，隐藏os)
        if (columnIndex === 1) {
          return [1, 2]
        } else if (columnIndex === 2) {
          return [0, 0]
        }
      }
    },
    preview(item) {
      this.activeObj = item
    },
    restore() {
      this.activeObj = this.list.find((item, index, array) => item.recId === this.activeRecId)
    },
    selectVisibleHandle(val) {
      if (val) {
        const selectInputDom = this.$refs.select.$el
        const width = selectInputDom.offsetWidth
        const selectPoper = selectInputDom.getElementsByClassName('c-el-select-popper')[0]
        const arrowDom = selectInputDom.getElementsByClassName('popper__arrow')[0]
        this.$nextTick(function() {
          const left = parseInt(selectPoper.style.left)
          selectPoper.style.left = (left + width - 25) + 'px'
          arrowDom.style.left = '10px'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.exam-info-container {
  margin-bottom: 5px;

  .exam-title {
    float: left;
    margin-top: 5px;
    font-size: 16px;
    font-weight: 600;
  }
  .exam-date-time-list {
    float: right;
  }
}
</style>
