<template>
    <div>
        <el-card
            style="width: 200px; position: relative"
            v-if="materialId">
            <div
                v-if="materialId"
                title="取消"
                class="icon-button"
                @click="clear">
                <el-icon>
                    <CircleCloseFilled />
                </el-icon>
            </div>

            <el-image
                fit="contain"
                style="width: 100px; height: 100px"
                :src="material.imageUrlPreviewPath">
                <template #error>
                    <div class="image-slot">暂无图片</div>
                </template>
            </el-image>
            <div>
                <div
                    :title="materialType.name"
                    class="material-type">
                    类型：{{ materialType.name }}
                </div>
                <div
                    :title="material.name"
                    class="material-name">
                    名称：{{ material.name }}
                </div>
            </div>
        </el-card>
        <el-dialog
            style="height: 80vh"
            width="70%"
            append-to-body
            lock-scroll
            :close-on-click-modal="false"
            v-model="dialogVisible"
            title="请选择材料">
            <div
                class="search-warp"
                style="margin-bottom: 10px">
                <el-select
                    @change="onClickSearch"
                    v-model="search.type"
                    @clear="removeSearch"
                    class="search-item search-input"
                    clearable
                    placeholder="选择材料类型">
                    <el-option
                        v-for="item in materialTypeList"
                        :value="item.id"
                        :label="item.name"></el-option>
                </el-select>
                <el-input
                    class="search-item search-input"
                    clearable
                    @keyup.enter.native="onClickSearch"
                    @clear="removeSearch"
                    v-model="search.name"
                    placeholder="请输入名称查询"
                    suffix-icon="search"></el-input>
            </div>
            <div class="div-content">
                <el-card
                    v-for="material in materialList"
                    :class="{ 'is-selected': material.isSelected }"
                    @click="selectMaterial(material)"
                    @dblclick="dbSelectMaterial(material)"
                    :title="material.description">
                    <el-image
                        fit="contain"
                        style="width: 200px; height: 200px"
                        :src="material.imageUrlPreviewPath">
                        <template #error>
                            <div class="image-slot">
                                &lt;!&ndash;
                                <el-icon><Picture /></el-icon>
                                &ndash;&gt; 暂无图片
                            </div>
                        </template>
                    </el-image>
                    <template #footer>
                        <div class="card-footer">
                            <div
                                :title="materialType.name"
                                class="title-material-type">
                                类型：{{ materialType.name }}
                            </div>
                            <div
                                :title="material.name"
                                class="title-material-name">
                                名称：{{ material.name }}
                            </div>
                        </div>
                    </template>
                </el-card>
            </div>
            <template #footer>
                <el-button @click="clickCancel">取消</el-button>
                <el-button
                    type="primary"
                    @click="confirm">
                    确定
                </el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script>
import ArtSystem from '../artSystem.js';
import { CircleClose, CircleCloseFilled } from '@element-plus/icons-vue';
export default {
    name: 'materialCard',
    emits: ['confirm'],
    components: { CircleCloseFilled, CircleClose },
    props: {
        modelValue: Boolean,
        currentMaterial: Object, //cellsysArt的Material对象
        materialId: Number,
    },
    computed: {
        dialogVisible: {
            get() {
                return this.modelValue;
            },
            set(val) {
                this.$emit('update:modelValue', val);
            },
        },
        materialType() {
            if (this.material && this.material.materialType) {
                return this.material.materialType;
            } else {
                return {};
            }
        },
    },

    data() {
        return {
            listQuery: {
                total: 0,
                currPage: 1,
                pageSize: 10,
                filter: [],
                listLoading: false,
            },
            search: {
                name: null,
                type: null,
            },
            materialTypeList: [],
            materialList: [],
            material: {},
            activeName: null,
        };
    },
    created() {
        if (this.currentMaterial) {
            this.material = this.currentMaterial;
        } else {
            this.queryMaterialList();
        }
        this.queryMaterialType();
    },
    methods: {
        clickCancel() {
            this.material = null;
            this.dialogVisible = false;
        },
        confirm() {
            if (!this.material) {
                return this.$message({
                    type: 'warning',
                    message: '还未选择材料',
                });
            }
            this.$emit('confirm', this.material.id);
            this.dialogVisible = false;
        },
        clear() {
            this.material = null;
            this.$emit('confirm', null);
        },
        selectMaterial(material) {
            // 更新选中状态，这里假设你只想单选
            this.materialList.forEach((mat) => {
                mat.isSelected = mat.id === material.id;
            });
            this.material = material;
        },
        dbSelectMaterial(material) {
            this.material = material;
            this.$emit('confirm', this.material.id);
            this.dialogVisible = false;
        },
        onClickSearch() {
            let filter = [];
            let { name, type } = this.search;
            if (name) {
                filter.push({
                    name: 'name',
                    operator: 'like',
                    value: name,
                });
            }

            if (type) {
                filter.push({
                    name: 'material_type_id',
                    operator: '=',
                    value: type,
                });
            }
            this.listQuery.filter = filter;
            this.queryMaterialList(filter);
        },
        removeSearch() {
            this.queryMaterialList();
        },

        queryMaterialType() {
            let params = {
                pageInfo: {
                    pageSize: 0,
                    currPage: 0,
                },
            };
            ArtSystem.queryMaterialType(params).then((response) => {
                this.materialTypeList = response.data;
            });
        },
        queryMaterialList(filter) {
            let params = {
                pageInfo: {
                    pageSize: 0,
                    currPage: 0,
                },
                filter: filter,
                order: { id: 'desc' },
            };
            ArtSystem.queryMaterial(params).then((response) => {
                this.materialList = response.data;
                if (this.materialId) {
                    this.material = this.materialList[0];
                }
            });
        },
    },
};
</script>
<style scoped>
.icon-button {
    position: absolute;
    top: 0;
    right: 5px;
    cursor: pointer;
    font-size: 20px;
    color: #dd2c00;
}

.search-warp {
    display: inline-block;
    margin-bottom: 7px;

    & .search-item {
        display: inline-block;

        & + .search-item {
            margin-left: 15px;
        }
    }

    & .search-input {
        border-radius: 30px;
        width: 15rem;
    }

    & .search-input {
        .el-input__wrapper {
            border-radius: 30px;
            width: 100%;
        }

        .el-select__wrapper {
            border-radius: 30px;
            width: 100%;
        }
    }

    & .el-range-editor.el-input__wrapper {
        margin-left: 15px;
        border-radius: 30px;
    }
}

.div-content {
    height: calc(100% - 44px);
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
    min-height: 40vh;
}

:deep(.el-tab-pane) {
    height: 100%;
}

.el-card {
    margin: 10px;
    width: 300px;
    height: 300px;
    text-align: center;
}

/* 添加选中状态的样式 */
.el-card.is-selected {
    border-color: #409eff; /* Element UI主题色的蓝色 */
    box-shadow: 0 0 10px #409eff;
}

.card-footer {
    display: flex;
    justify-content: space-between;
}

.title-material-type {
    width: 50%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /* 限制显示的行数 */
    overflow: hidden;
}

.title-material-name {
    width: 50%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /* 限制显示的行数 */
    overflow: hidden;
}

.image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: var(--el-fill-color-light);
    color: var(--el-text-color-secondary);
    font-size: 30px;
}

.material-type {
    text-align: left;
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /* 限制显示的行数 */
    overflow: hidden;
}

.material-name {
    text-align: left;
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /* 限制显示的行数 */
    overflow: hidden;
}
</style>
