<template>
    <div>
        <div v-if="!$route.path.includes('projectInfo')">
            <div class="box">
                <div class="info">
                    <span>项目名称:</span>
                    <b>{{ info.projectName }}</b>
                </div>
                <div class="info">
                    <span>项目描述:</span>
                    <b>{{ info.projectDescribe }}</b>
                </div>
                <div class="info">
                    <span>算法名称:</span>
                    <b>{{ info.algorithmName }}</b>
                </div>
                <div class="info">
                    <span>车辆:</span>
                    <b>{{ info.vehicle }}</b>
                </div>
                <div class="info">
                    <span>场景:</span>
                    <b>{{ info.sceneName }}</b>
                </div>
                <div class="info">
                    <span>最大仿真时间:</span>
                    <b>{{ info.maxSimulationTime }}</b>
                </div>
                <div class="info">
                    <span>运行周期:</span>
                    <b>{{ info.operationCycle }}</b>
                </div>
                <div class="info">
                    <span>并行度:</span>
                    <b>{{ info.parallelism }}</b>
                </div>
                <div class="info">
                    <span>是否选择GPU:</span>
                    <b>{{ info.isChoiceGpu }}</b>
                </div>
            </div>

            <tableList
                ref="table"
                style="margin: 0 30px"
                :columns="columns"
                :getDataWay="getDataWay"
                :pagination="pagination"
                index
            >
                <el-table-column label="操作" slot="cgInfos" align="center">
                    <template v-slot="scope">
                        <i
                            @click="viewRow(scope.row.id)"
                            class="el-icon-view elIcon"
                            title="查看"
                        ></i>
                        <i
                            v-if="scope.row.nowRunState === '30'"
                            @click="downRow(scope.row)"
                            class="el-icon-download elIcon"
                            title="下载"
                        ></i>
                        <i
                            v-if="scope.row.nowRunState != '20'"
                            @click="delRow(scope.row.id)"
                            class="el-icon-delete elIcon"
                            title="删除"
                        ></i>
                        <i
                            v-if="scope.row.nowRunState === '20'"
                            @click="stopRow(scope.row.id)"
                            class="myIconPause elIcon"
                            title="中止"
                        ></i>
                        <!-- 下载只有执行完成才可展示 nowRunState 30展示  -->
                        <!-- 只要nowRunState不是20 即执行中的时候都可以删除 -->
                        <!-- 只有执行中可中止 即等于20的时候 -->
                    </template>
                </el-table-column>
            </tableList>

            <el-dialog
                title="下载"
                :visible.sync="dialogVisible"
                width="690px"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                :before-close="cancelDown"
            >
                <div class="checkboxPanel">
                    <el-checkbox-group v-model="downType">
                        <el-checkbox
                            label="工作报告"
                            class="labelA"
                            :disabled="downDisabled"
                        ></el-checkbox>
                        <el-checkbox label="任务文件包"></el-checkbox>
                    </el-checkbox-group>
                </div>
                <span slot="footer">
                    <el-button type="primary" @click="confirmDown"
                        >确 定</el-button
                    >
                    <el-button @click="cancelDown">取 消</el-button>
                </span>
            </el-dialog>
        </div>
        <router-view v-else></router-view>
    </div>
</template>

<script>
import tableList from "@/components/grid/TableList";

export default {
    name: "autoRunSubProjectList", // 自动化测试子项目列表
    components: { tableList },
    data() {
        return {
            id: "",
            columns: [
                {
                    label: "项目ID",
                    prop: "projectId",
                },
                {
                    label: "项目名称",
                    prop: "projectName",
                },
                {
                    label: "开始时间",
                    prop: "createTimeFmt",
                },
                {
                    label: "结束时间",
                    prop: "finishTimeFmt",
                },
                {
                    label: "进度",
                    prop: "nowRunStateDict",
                },
                {
                    label: "评测等级",
                    prop: "evaluationLevelDict",
                    formatter(row) {
                        switch (row.evaluationLevelDict) {
                            case "G":
                                return "优秀(G)";
                            case "A":
                                return "良好(A)";
                            case "M":
                                return "一般(M)";
                            case "P":
                                return "较差(P)";
                            default:
                                return "";
                        }
                    },
                },
                {
                    label: "操作",
                    prop: "cgInfos",
                    template: true,
                },
            ],
            pagination: {
                //分页使用
                currentPage: 1,
                pageSize: 10,
                position: "right",
                pageSizes: [10, 30, 50, 100, 200],
                layout: "sizes, total, prev, pager, next, jumper",
            },
            getDataWay: {
                //加载表格数据
                dataType: "url",
                type: "post",
                // firstRequest: false,
                data: this.$api.workManagement.selectSubProjectList,
                param: {
                    parentId: this.$route.query.id,
                },
            },
            downType: [],
            dialogVisible: false,
            curRow: {}, // 当前row
            downDisabled: false, // 用于判断是否可下载工作报告
            info: {},
        };
    },
    methods: {
        doSearch() {
            this.refreshList();
        },
        //刷新table
        refreshList(param) {
            param
                ? this.$refs["table"].loadData(param)
                : this.$refs["table"].loadData();
        },
        editRow(row) {
            this.$router.push({
                path: "/autoRunProjectDetail",
                query: {
                    id: row.id,
                },
            });
        },
        runRow(id) {
            this.$confirm("确认是否运行？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.$axios({
                    method: "post",
                    url: this.$api.workManagement.updateProjectNowRunState,
                    data: {
                        id,
                        nowRunState: "20",
                    },
                }).then((res) => {
                    if (res.code == 200) {
                        this.$message.success("运行成功");
                    } else {
                        this.$message.error(res.message || "运行失败");
                    }
                    this.doSearch();
                });
            });
        },
        delRow(ids) {
            this.$confirm("确认是否删除？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.$axios({
                    method: "post",
                    url: this.$api.workManagement
                        .deleteAutomaticSubProjectByIds,
                    data: {
                        ids,
                    },
                }).then((res) => {
                    if (res.code == 200) {
                        this.$message.success("删除成功");
                    } else {
                        this.$message.error(res.message || "删除失败");
                    }
                    this.doSearch();
                });
            });
        },
        stopRow(id) {
            this.$confirm("确认是否中止？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.$axios({
                    method: "post",
                    url: this.$api.workManagement.updateAutoProjectNowRunState,
                    data: {
                        id,
                        nowRunState: "40",
                    },
                }).then((res) => {
                    if (res.code == 200) {
                        this.$message.success("中止成功");
                    } else {
                        this.$message.error(res.message || "中止失败");
                    }
                    this.doSearch();
                });
            });
        },
        viewRow(id) {
            this.$router.push({
                path: "/autoRunProjectList/autoRunSubProjectList/projectInfo",
                query: { id, projectType: "2" },
            });
        },
        downRow(row) {
            this.curRow = row;
            this.downDisabled = row.nowRunState === "30" ? false : true;
            this.dialogVisible = true;
        },
        confirmDown() {
            let url = "";
            let fileName = this.curRow.projectName;

            if (this.downType.length === 0) {
                this.$message.info("请先选择下载类型");
                return;
            } else if (this.downType.length === 1) {
                if (this.downType[0] === "工作报告") {
                    url = this.$api.workManagement.exportProjectReportById;
                    fileName += ".pdf";
                } else {
                    url = this.$api.workManagement.exportProjectTaskFileById;
                    fileName += ".zip";
                }
            } else {
                url =
                    this.$api.workManagement.exportProjectReportAndTaskFileById;
                fileName += ".zip";
            }

            let id = this.curRow.id;
            this.curRow = {};

            this.$axios({
                method: "post",
                url,
                responseType: "blob",
                data: {
                    id,
                    projectType: "2",
                },
            }).then((res) => {
                let blob = new Blob([res]);
                if ("download" in document.createElement("a")) {
                    // 非IE下载
                    let emlink = document.createElement("a");
                    emlink.download = fileName;
                    emlink.style.display = "none";
                    emlink.href = URL.createObjectURL(blob);
                    document.body.appendChild(emlink);
                    emlink.click();
                    URL.revokeObjectURL(emlink.href);
                    document.body.removeChild(emlink);
                } else {
                    // IE下载
                    navigator.msSaveBlob(blob, fileName);
                }
            });

            this.downType = [];
            this.dialogVisible = false;
        },
        cancelDown() {
            this.downType = [];
            this.dialogVisible = false;
        },
    },

    mounted() {
        if (
            this.$route.name === "autoRunSubProjectList" &&
            this.$route.query.id
        ) {
            this.id = this.$route.query.id;

            if (this.id) {
                this.$axios({
                    method: "post",
                    url: this.$api.workManagement.selectSubProjectInfo,
                    data: {
                        id: this.id,
                    },
                }).then((res) => {
                    if (res.code == 200 && res.info) {
                        this.info = res.info;
                    } else {
                        this.$message.error(res.message || "获取信息失败");
                    }
                });
            }
        }
    },
    // activated() {
    //     console.log(6);
    // },
};
</script>

<style lang='less' scoped>
.box {
    display: flex;
    flex-wrap: wrap;
    padding: 20px 40px;

    .info {
        display: flex;
        width: 345px;
        margin: 0 12px 22px 0;
        word-break: break-all;

        span {
            display: block;
            width: 105px;
            color: @gray;
        }

        b {
            flex: 1;
            font-weight: normal;
        }
    }
}

.checkboxPanel {
    text-align: center;

    .labelA {
        margin-right: 60px;
    }
}
</style>