<!--
 * @Author: Devin
 * @Date: 2021-07-30 16:50:47
 * @LastEditTime: 2021-07-31 13:48:51
 * @LastEditors: Devin
 * @Description: 版本弹窗
 * email: das.devin@outlook.com
-->
<template>
  <x-modal
    :append-to-body="true"
    :destroy-on-close="true"
    :modalVisible.sync="visible"
    :wrapper-class="'version-modal'"
    :title="'版本'"
    width="500px"
    v-on="$listeners"
  >
    <div class="version-list">
      <div v-if="loading" class="version-tip">加载中...</div>
      <template v-else>
        <div v-if="!versionList.length" class="version-tip">暂无版本信息</div>
        <div
          v-else
          v-for="(version, index) in versionList"
          :key="index"
          class="version-item"
        >
          <a
            href="javascript:void(0)"
            class="version-link"
            @click="handleVersionClick(version)"
          >
           版本号：V{{ getVersionName(version) }}
          </a>
          <span class="version-status">{{ getVersionStatus(version) }}</span>
        </div>
      </template>
    </div>
  </x-modal>
</template>

<script>
import api from '@/api'

export default {
  name: 'VersionModal',
  data() {
    return {
      visible: false,
      currentRow: null,
      versionList: [],
      loading: false
    }
  },
  methods: {
    showModal(row) {
      this.currentRow = row
      this.visible = true
      // 可以根据 row 数据加载对应的版本列表
      this.loadVersionList(row)
    },
    closeModal() {
      this.visible = false
    },
    loadVersionList(row) {
      const templateRowId = row && (row.rowId || row.templateRowId || row.id)
      if (!templateRowId) {
        this.versionList = []
        return
      }
      this.loading = true
      const request = {
        ...api.CHECK_MODEL_VERISON,
        params: {
          templateRowId
        },
        disableSuccessMsg: true
      }
      this.$request(request, false)
        .asyncThen((resp) => {
          const list =
            (resp && resp.data && (resp.data.result || resp.data.list || resp.data)) || []
          this.versionList = Array.isArray(list) ? list : []
          this.loading = false
        })
        .asyncErrorCatch((err) => {
          console.error('获取版本列表失败:', err)
          this.versionList = []
          this.loading = false
        })
    },
    handleVersionClick(version) {
      // 处理版本点击事件，触发跳转到详情页面
      console.log('点击版本:', version)
      // 关闭弹窗
      this.visible = false
      // 触发事件，通知父组件跳转到详情页面，传递版本列表
      this.$emit('version-click', {
        version: version,
        changeId: version.id,
        templateId: version.rowId || (this.currentRow && (this.currentRow.rowId || this.currentRow.templateRowId || this.currentRow.id)),
        template: this.currentRow,
        versionList: this.versionList // 传递版本列表
      })
    },
    getVersionName(version) {
      return version.version
    },
    getVersionStatus(version) {
      if (version.status === 'DRAFT') {
        return '草稿'
      } else if (version.status === 'COMPLETE') {
        return '已完成'
      } else if (version.status === 'APPROVING') {
        return '审核中'
      } else if (version.status === 'HISTORY') {
        return '历史'
      } else if (version.status === 'REVIEWING') {
        return '校对中'
      } else if (version.status === 'REJECTED') {
        return '已退回'
      } else {
        return version.status
      }
    }
  }
}
</script>

<style lang="scss">
.version-modal {
  .version-list {
    padding: 20px 0;
    max-height: 400px;
    overflow-y: auto;
    .version-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 0;
      border-bottom: 1px solid #ebeef5;

      &:last-child {
        border-bottom: none;
      }

      .version-link {
        color: #409eff;
        text-decoration: underline;
        cursor: pointer;
        font-size: 14px;

        &:hover {
          color: #66b1ff;
        }
      }

      .version-status {
        color: #303133;
        font-size: 14px;
      }
    }
    .version-tip {
      text-align: center;
      color: #909399;
      font-size: 14px;
      padding: 20px 0;
    }
  }
}
</style>