<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="getview">
                <Option v-for="item in projects" :value="item.id" :key="item.id">{{
                    item.name }}</Option>
            </Select>
            <Select filterable v-model="view" style="width:200px" placeholder="面板">
                <Option v-for="item in views" :value="item.id" :key="item.id">{{
                    item.name }}</Option>
            </Select>
            <Button type="primary" @click="upload()" style="margin-left: 10px;">上传</Button>
        </div>
        <div style="margin-top: 10px;">
            <Row v-for="item in uploadhistory">
                <Col span="8" offset="1">{{ item.filename + "(" + item.project + ")" + (item.case_count
                    ? (" -- " + item.case_count +
                        "条") : "") }}
                </Col>
                <Col span="12">
                <Steps :current="item.step"
                    :status="item.stepstatus == 0 ? 'process' : item.stepstatus == 2 ? 'finish' : 'error'">
                    <Step title="上传文件" content="文件上传至服务器"></Step>
                    <Step title="添加用例" content="添加用例集及测试用例"></Step>
                    <Step title="关联用例" content="用例关联story,用例名需要包含stroy的key"></Step>
                </Steps>
                </Col>
            </Row>
            <Page :total="total" :page-size="pageinfo.page_size" v-model="pageinfo.page_num"
                @on-change="getuploadhistory()" show-total style="margin-top: 20px;" />
        </div>
    </div>
</template>

<script>

export default {
    props: ['isCollapsed',],
    data() {
        return {
            page_id: 21,
            title: "上传用例",
            file: null,
            project: null,
            view: null,
            projects: [],
            views: [],
            uploadhistory: [],
            runupload: [],
            total: 0,
            pageinfo: {
                page_size: 10,
                page_num: 1
            }
        }
    },
    methods: {
        handleUpload(file) {
            if (file.name.split(".").pop() != 'xmind') this.$Message.error('请上传xmind文件')
            else {
                this.file = file;
                this.file_name = null;
            }
            return false;
        },
        upload() {
            const formData = new FormData();
            if (!this.file) return this.$Message.error("请上传xmind用例文件");
            if (!this.project) return this.$Message.error("请选择项目");
            if (!this.view) return this.$Message.error("请选择面板");
            formData.append('file', this.file);
            formData.append("project", this.project);
            formData.append("view", this.view);
            formData.append("projectName", this.projects[this.projects.findIndex(ele => { return ele.id == this.project })].name);
            this.$http.post('/tool/testcase/upload', formData, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }).then(() => {
                this.getuploadhistory()
            }).catch(() => {
                this.$Message.error("上传文件失败")
                this.getuploadhistory()
            })
        },
        getprojects() {
            this.$request('get', '/tool/testport/getproject', null, this, (data) => { this.projects = data.data })
        },
        getview(project) {
            this.$request('get', 'tool/testport/view/' + project, null, this, (data) => { this.views = data.data })
        },
        getuploadhistory() {
            this.$request('get', '/tool/testcase/uploadhistory', this.pageinfo, this, (data) => { this.uploadhistory = data.data.rows; this.total = data.data.total })
        }
    },
    created() {
        this.getprojects();
        this.getuploadhistory();
        this.$socket.connect();

        console.info(this.$socket)
        this.$socket.on('infoupdate', () => { this.getuploadhistory(); console.info("更新了") })
        // this.$socket.emitter.addListener('infoupdate', () => { this.getuploadhistory() }, this)
    },
    destroyed() {
        this.$socket.off('infoupdate', this)
        this.$socket.disconnect()
        // this.$socket.emitter.removeListener('infoupdate', this)
    },
    watch: {
        uploadhistory: {
            handler(value) {
                console.info(value)
                const a = []
                value.forEach(ele => {
                    ele.status == 0 && a.push(ele.id)
                })
                this.runupload = a
            }
        },
        project:{
            Handle(value){
                if (this.view){
                    this.view=null
                }
            }
        },
        runupload(newvalue, oldvalue) {
            newvalue.forEach(ele => {
                if (!oldvalue.includes(ele)) this.$socket.emit("join", ele)
            })
            oldvalue.forEach(ele => {
                if (!oldvalue.includes(ele)) this.$socket.emit("leave", ele)
            })
        }
    }
};
</script>

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

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