<template>
  <div>
    <el-dialog title="版本号选择" :visible.sync="isOpen" width="400px" append-to-body :modal="false" @close="cancel"
               :close-on-click-modal="false"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="版本号" prop="versionId">
          <el-select v-model="form.versionId" placeholder="请选择版本" clearable style="width: 100%">
            <el-option v-for="item in versionList" :key="item.versionId" :label="item.versionName"
                       :value="item.versionId"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>

import { listSelect } from '../../../../api/dataCenter/releaseVersion'

export default {
  props: {
    open: {
      type: Boolean,
      default: false
    },
    datasetId: {
      type: String,
      default: '',
      required: true
    }
  },
  computed: {
    isOpen: {
      get() {
        return this.open
      },
      set(value) {
        this.$emit('update:open', value)
      }
    }
  },
  data() {
    return {
      versionList: [],
      form: {},
      rules: {
        versionId: [
          { required: true, message: '请选择版本', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    isOpen(newVal, oldVal) {
      if (newVal) {
        this.listSelect()
      }
    }
  },
  methods: {
    listSelect() {
      listSelect({ datasetId: this.datasetId }).then(res => {
        this.versionList = res.data
      })
    },
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.download('/ai/annotations/export/' + this.form.versionId, {}, new Date().getTime() + '.zip', { timeout: 600000 }).then((res) => {
            this.cancel()
          })
        }
      })
    },
    cancel() {
      this.isOpen = false
      this.reset()
      this.$emit('dialog-cancel') // 通知父组件
    },
    // 表单重置
    reset() {
      this.versionList = []
      this.form = {} // 清空表单
      this.$refs.form.resetFields() // 调用 Element UI 的重置方法
    }
  }
}
</script>

<style scoped lang="scss">

</style>
