<template>
    <PageHeader :title="title">
    </PageHeader>
    <div style="margin-top: 8px">
        <Upload multiple type="drag" :before-upload="handleUpload" action="http://127.0.0.1:8080/api/upload">
            <div style="padding: 20px 0">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p v-if="!file">请上传xmind用例文件</p>
                <div v-else style="color: #19be6b;">{{ file.name }}</div>
            </div>
        </Upload>
        <div>
            <Select filterable v-model="project" style="width:200px" placeholder="项目" @on-change="getiterations">
                <Option v-for="item in projects" :value="item.id" :key="item.id">{{
        item.name }}</Option>
            </Select>
            <Button type="primary" @click="run" style="margin-left: 10px;">上传</Button>
        </div>
        <div v-if="running" style="margin-top: 10px;">
            <Steps :current="step" :status="stepStatus">
                <Step title="上传文件" content="文件上传至服务器"></Step>
                <Step title="添加用例" content="添加用例集及测试用例"></Step>
                <Step title="关联用例" content="用例关联story,用例名需要包含stroy的key"></Step>
            </Steps>
        </div>
    </div>
</template>

<script>
export default {
    props: ['isCollapsed',],
    data() {
        return {
            page_id: 21,
            title: "上传用例",
            file: null,
            file_name: null,
            project: null,
            projects: [],
            running: false,
            step: null,
            stepStatus: null,
        }
    },
    methods: {
        handleUpload(file) {
            if (file.name.split(".").pop() != 'xmind') this.$Message.error('请上传xmind文件')
            else {
                this.file = file;
                this.file_name = null;
                this.running = false;
                this.clearProcess();
            }
            return false;
        },
        upload(next, params) {
            this.step = 0
            this.stepStatus = "process"
            const formData = new FormData();
            formData.append('file', this.file);
            this.$http.post('/upload', formData, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }).then(response => {
                console.info(response.data)
                this.file_name = response.data.data.filename
                console.info(this.file_name)
                this.stepStatus = "finish"
                next(params);
            }).catch(error => {
                this.stepStatus = "error"
            })
        }, getprojects() {
            this.$request('get', 'tool/testport/getproject', null, this, (data) => { this.projects = data.data })
        },
        makecase(next) {
            this.step = 1
            this.stepStatus = "process"
            console.info(this.project)
            this.$request('post', 'tool/testcase/uploadcase', { project: this.project, file_name: this.file_name }, this, () => {
                this.stepStatus = "finish"
                next();
            }, () => { this.stepStatus = "error" })
        },
        relevancycase() {
            this.step = 2
            this.stepStatus = "process"
            this.$request('post', 'tool/testcase/relevancycase/' + this.project, null, this, () => {
                this.stepStatus = "finish",
                    this.step = 3
            }, () => { this.stepStatus = "error" })
        },
        run() {
            this.clearProcess();
            this.running = true
            this.upload(this.makecase, this.relevancycase)
        },
        clearProcess() {
            this.step = null;
            this.stepStatus = null
        }
    },
    created() {
        this.getprojects()
    }
};
</script>

<style>
.vertical-center-modal {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vertical-center-modal .ivu-modal {
    top: 0;
}
</style>