<template>
    <div class="project-box">
        <el-row style="padding-bottom: 16px">
            <el-input placeholder="请输入关键字" style="width: 240px" clearable @keyup.enter.native="ChangeKeyWord(keyWord)" v-model="keyWord">
                <i slot="prefix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="ChangeKeyWord(keyWord)"></i>
            </el-input>
            <el-button style="float: right" @click="addProject">添加项目</el-button>
        </el-row>
        <div class="saga-brand-group">
            <el-row :gutter="16">
                <el-col :span="6" v-for="item in projectList" :key="item.id">
                    <el-card shadow="always" class="project-card" :body-style="{ padding: '0px' }">
                        <el-image style="width: 100%; height: 187px" :src="item | getImage">
                            <div slot="error" class="image-slot">
                                <i class="iconfont icon-wandajituan"></i>
                            </div>
                        </el-image>
                        <div style="padding: 16px">
                            <span class="project-name" :title="item.localName">{{ item.localName }}</span>
                            <span class="iconfont icon-shanchu" @click="deleteProject(item)"></span>
                            <span class="iconfont icon-bianji" @click="updateProject(item)"></span>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <!-- 新增项目 -->
        <add-project-dialog
            :addProjectVisible.sync="addProjectVisible"
            @update:projectList="ChangeKeyWord"
            :dialogType="dialogType"
            :formData="form"
        ></add-project-dialog>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { UserModule } from "../../store/modules/user";
import { projectQuery } from "@/api/datacenter";
import { imageGetUrl } from "@/api/imageservice";
import AddProjectDialog from "./components/AddProjectDialog/index.vue"; //新增项目弹窗

@Component({
    name: "index",
    components: {
        AddProjectDialog,
    },
    filters: {
        getImage(item: any) {
            if (item?.infos?.projPic?.[0]?.key) {
                return `${imageGetUrl}${item.infos.projPic[0].key}`;
            } else {
                return "";
            }
        },
    },
})
export default class extends Vue {
    private keyWord = "";
    private projectList: any = [];
    private addProjectVisible = false;
    private dialogType = "create";
    private form: any = {};

    get projectId() {
        return UserModule.projectId;
    }

    /**
     * 检索项目
     * @param 检索关键字
     */
    private async ChangeKeyWord(keyWord?: string) {
        const params: any = {
            pageNumber: 1,
            pageSize: 2000,
        };
        if (keyWord) params.filters = `localName contain '${keyWord}'`;
        const res = await projectQuery(params);
        if (res.result === "success" && res.content.length) {
            this.projectList = res.content;
        } else {
            this.projectList = [];
        }
    }

    /**
     * 添加项目
     */
    private addProject() {
        this.dialogType = "create";
        this.form = {};
        this.addProjectVisible = true;
    }

    /**
     * 修改项目
     */
    private updateProject(item: any) {
        this.dialogType = "update";
        this.form = item;
        this.addProjectVisible = true;
    }

    /**
     * 删除项目
     */
    private deleteProject(item: any) {
        this.$message.info("删除接口暂不提供！");
        console.log("删除项目", item.id);
    }

    created() {
        this.ChangeKeyWord();
    }
}
</script>

<style lang="scss" scoped>
.project-box {
    height: 100%;
    padding: 0 16px;
    .saga-brand-group {
        height: calc(100% - 48px);
        overflow-y: auto;
        overflow-x: hidden;
        ::v-deep .el-col {
            margin-bottom: 16px;
        }

        .project-card {
            ::v-deep .image-slot {
                display: flex;
                width: 100%;
                height: 100%;
                background-color: #075fa9;
            }
            .project-name {
                display: inline-block;
                width: calc(100% - 50px);
                cursor: text;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .icon-bianji {
                display: none;
                float: right;
                cursor: pointer;
                margin-right: 12px;
            }

            .icon-shanchu {
                display: none;
                float: right;
                cursor: pointer;
            }
        }

        .project-card:hover {
            .icon-bianji {
                display: block;
            }

            .icon-shanchu {
                display: block;
            }
        }

        .saga-brand-list {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            .saga-brand-item {
                width: 380px;
                height: 247px;
                // margin-right: 17px;
                margin-bottom: 16px;
                cursor: pointer;
                box-sizing: border-box;
                background-color: #fff;
                border-radius: 4px;
                border: 1px solid #e4e5e7;
                transition: all 0.1s linear 0.01s;
                .saga-brand-name {
                    display: inline-block;
                    width: 133px;
                    height: 100%;
                    margin-right: 5px;
                    font-size: 14px;
                    line-height: 22px;
                    .saga-brand-zhName {
                        height: 44px;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                    }
                    .saga-brand-enName {
                        color: #8d9399;
                        margin-top: 4px;
                        height: 22px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                }
                .saga-brand-logo {
                    width: 52px;
                    height: 52px;
                    display: inline-block;
                    vertical-align: top;
                    ::v-deep .image-slot {
                        font-size: 30px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 100%;
                        height: 100%;
                        background: #f5f7fa;
                        color: #909399;
                    }
                }
            }
            .pick {
                width: 380px;
                height: 1px;
            }
            .saga-brand-item.brand-new {
                border: 1px solid rgba(58, 141, 222, 0.6);
            }
            .saga-brand-item:hover {
                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                transform: translate(0, -5px);
            }
            .saga-brand-item:nth-child(4n) {
                margin-right: 0;
            }
        }
    }
}
::v-deep .icon-wandajituan {
    font-size: 60px;
    margin: auto;
    color: #ffffff;
}
@media screen and (max-width: 1000px) {
    ::v-deep .icon-wandajituan {
        font-size: 30px;
    }
}
</style>
