<template>
    <div class="base-info">
        <el-form :model="displayDetail" class="basic-info" ref="form">
            <el-row :gutter="50">
                <el-col :span="10">
                    <el-form-item label="展览标题" :label-width="formLabelWidth">
                        <el-input disabled v-model="displayDetail.title" autocomplete="off" placeholder="无"
                            clearable></el-input>
                    </el-form-item>
                    <el-form-item label="展览介绍" :label-width="formLabelWidth">
                        <div v-if="(displayDetail.intro.length > 0)" class="intro" v-html="displayDetail.intro"></div>
                        <div v-else class="intro">暂无</div>
                    </el-form-item>
                    <el-form-item label="展览单位" :label-width="formLabelWidth">
                        <el-cascader disabled style="width: 100%" v-model="displayDetail.deptId" :options="orgTreeData"
                            :props="optionProps" placeholder="无" clearable>
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="展览地区" :label-width="formLabelWidth">
                        <el-cascader disabled class="years item" style="width: 100%" v-model="displayDetail.regionCode"
                            :options="regionTree" :props="culturalRegionProps" placeholder="无" filterable clearable>
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="展览类型" :label-width="formLabelWidth">
                        <el-select disabled v-model="displayDetail.type" placeholder="无" style="width: 100%" clearable>
                            <el-option v-for="(value, key) in dicts.displayType" :key="key" :label="value" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="展览性质" :label-width="formLabelWidth" style="display: none">
                        <el-select disabled v-model="displayDetail.displayCharacter" placeholder="无" style="width: 100%"
                            clearable>
                            <el-option v-for="(value, key) in dicts.displayCharacter" :key="key" :label="value"
                                :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="模板主题" :label-width="formLabelWidth">
                        <el-select disabled v-model="displayDetail.themeType" placeholder="无" style="width: 100%"
                            clearable>
                            <el-option v-for="item in themeTypeOptions" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>


                    <el-form-item label="关键词" :label-width="formLabelWidth">
                        <el-input disabled v-model="displayDetail.keyword" autocomplete="off" placeholder="无"
                            clearable></el-input>
                    </el-form-item>

                    <el-form-item label="展览文物" :label-width="formLabelWidth">
                        <el-select disabled v-model="crIds" multiple filterable remote reserve-keyword placeholder="无"
                            style="width: 100%" clearable>
                            <el-option v-for="item in crList" :key="item.crId" :label="item.name" :value="item.crId">
                            </el-option>
                        </el-select>
                        <!-- <PageSelect
                ref="PageSelect"
                label="name"
                value="crId"
                :select.sync="value"
                :url="pageSelectUrl"
                filter-key="name"
              /> -->
                    </el-form-item>

                    <el-form-item label="关联文献" :label-width="formLabelWidth">
                        <el-select disabled v-model="literatureValues" multiple filterable remote reserve-keyword
                            placeholder="无" style="width: 100%" ref="literatureSelect" clearable>
                            <el-option v-for="item in literatureList" :key="item.literatureId" :label="item.name"
                                :value="item.literatureId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="关联虚拟展厅" :label-width="formLabelWidth">
                        <el-select disabled v-model="vrIds" multiple filterable remote reserve-keyword placeholder="无"
                            style="width: 100%" ref="virtualSelect" clearable>
                            <el-option v-for="item in vrList" :key="item.bvId" :label="item.name" :value="item.bvId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否上架" :label-width="formLabelWidth">
                        <el-switch v-model="displayDetail.status" disabled> </el-switch>
                    </el-form-item>
                    <el-form-item label="备注" :label-width="formLabelWidth">
                        <el-input disabled type="textarea" placeholder="无" v-model="displayDetail.remark"
                            maxlength="100" show-word-limit clearable>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="14">
                    <el-form-item label="展览封面" :label-width="formLabelWidth">
                        <div v-if="displayDetail.faceImagePressUrl" class="img-container">
                            <ManualUploader :fileLimit="1" listType="picture-card" :fileType="['png', 'jpeg', 'jpg']"
                                :files="faceImage" ref="faceImage" onlyRead />
                        </div>
                        <div v-else>
                            无
                        </div>
                    </el-form-item>

                    <el-form-item label="展览图片" :label-width="formLabelWidth">
                        <div class="images-group" v-if="displayDetail.imagesVo.length > 0">
                            <ManualUploader :files="images" :fileLimit="20" :fileSize="50" listType="picture-card"
                                :fileType="['png', 'jpeg', 'jpg']" ref="images" onlyRead />
                        </div>
                        <div v-else>
                            无
                        </div>
                    </el-form-item>
                    <el-form-item label="展览音频" :label-width="formLabelWidth">
                        <div class="images-group" v-if="displayDetail.audiosVo.length > 0">
                            <ManualUploader :files="audios" :fileLimit="1" :fileSize="50" :fileType="['mp3']"
                                listType="card" ref="audios" onlyRead />
                        </div>
                        <div v-else>
                            无
                        </div>
                    </el-form-item>
                    <el-form-item label="展览视频" :label-width="formLabelWidth">
                        <div class="images-group" v-if="displayDetail.videosVo.length > 0">
                            <ManualUploader :files="videos" :fileLimit="6" :fileSize="500" :fileType="['mp4']"
                                listType="card" ref="videos" onlyRead />
                        </div>
                        <div v-else>
                            无
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-form-item label="展览单元" :label-width="formLabelWidth">
                    <ExhibitionUnit :exhibitionUnits="displayDetail.exhibitionUnits" :isDisableEvent="true"
                        ref="exhibitionUnits" />
                </el-form-item>
            </el-row>
        </el-form>
    </div>
</template>

<script>
import { themeTypeOptions } from "@/views/display/contants";
import ManualUploader from "@/components/Uploader/ManualUploader.vue";
import ExhibitionUnit from "@/views/display/components/ExhibitionUnit.vue";
export default {
    name: 'BaseInfo',
    components: {
        ExhibitionUnit,
        ManualUploader
    },
    props: {
        displayDetail: {
            type: Object,
            default: () => ({})
        },
        dicts: {
            type: Object,
            default: () => ({})
        },
    },
    computed: {
        themeTypeOptions() {
            return themeTypeOptions;
        },
    },
    watch: {
        displayDetail: {
            handler: function (value) {
                if (Object.keys(value).length == 0) {
                    return
                }
                // 回填媒体资源
                if (
                    this.displayDetail.faceImageUrl ||
                    this.displayDetail.faceImagePressUrl
                ) {
                    this.faceImage = [
                        {
                            name: "",
                            url: this.displayDetail.faceImageUrl || "",
                            pressUrl:
                                this.displayDetail.faceImagePressUrl ||
                                this.displayDetail.faceImageUrl ||
                                "",
                            fileId: this.displayDetail.faceImage || "",
                        },
                    ];
                } else {
                    this.faceImage = [];
                }
                this.images = this.displayDetail.imagesVo || [];
                this.videos = this.displayDetail.videosVo || [];
                this.audios = this.displayDetail.audiosVo || [];
                // 回填状态
                this.displayDetail.status = Boolean(Number(this.displayDetail.status));
                // 回填文献
                this.literatureValues = [];

                if (
                    this.displayDetail.literatureVo &&
                    this.displayDetail.literatureVo.length > 0
                ) {
                    this.literatureList = this.displayDetail.literatureVo;
                    this.displayDetail.literatureVo.forEach((lt) => {
                        if (this.literatureValues) {
                            this.literatureValues.push(lt.literatureId);
                        }
                    });
                }
                // 回填文物
                this.crIds = [];
                if (
                    this.displayDetail.culturalRelicVo &&
                    this.displayDetail.culturalRelicVo.length > 0
                ) {
                    this.crList = this.displayDetail.culturalRelicVo;
                    this.displayDetail.culturalRelicVo.forEach((cr) => {
                        if (this.crIds) {
                            this.crIds.push(cr.crId);
                        }
                    });
                }
                // 回填虚拟展厅
                this.vrIds = [];
                if (
                    this.displayDetail.virtualVo &&
                    this.displayDetail.virtualVo.length > 0
                ) {
                    this.vrList = this.displayDetail.virtualVo;
                    this.displayDetail.virtualVo.forEach((vr) => {
                        if (this.vrIds) {
                            this.vrIds.push(vr.bvId);
                        }
                    });
                }
            },
            deep: true,
            immediate: true

        }
    },
    data() {
        return {
            formLabelWidth: "100px",
            orgTreeData: [],
            regionTree: [],
            optionProps: {
                value: "id",
                label: "name",
                children: "children",
                checkStrictly: true,
            },
            culturalRegionProps: {
                value: "code",
                label: "name",
                children: "children",
                checkStrictly: true,
            },
            faceImage: [],
            images: [],
            videos: [],
            audios: [],
            literatureList: [], //文献列表
            literatureValues: [], //选中的文献列表
            crList: [], //文物列表
            crIds: [], //选中的文物列表
            vrList: [], //虚拟展厅列表
            vrIds: [],
        }
    },
    async created() {
        await this.$store.dispatch("dict/getDictList", [
            "displayType",
            "displayCharacter",
        ]);
        this.$store.dispatch("org/getMuseumTreeData", false).then((res) => {
            // this.orgTreeData = res[0].children; //去掉根节点的文旅厅
            this.orgTreeData = res;
        });

        this.loadRegionTree();
    },
    methods: {
        loadRegionTree() {
            let parentId = "";
            this.$store.dispatch("org/getSysRegionTreeData", parentId).then((res) => {
                this.regionTree = res;
                loopTree(this.regionTree);
                function loopTree(arr) {
                    if (arr && arr.length > 0) {
                        arr.forEach((item) => {
                            if (item.children && item.children.length == 0) {
                                delete item.children;
                            } else {
                                loopTree(item.children);
                            }
                        });
                    }
                }
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.img-container {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 148px;
    height: 148px;
    cursor: pointer;
    margin-right: 2px;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.images-group {
    // width: 450px;
    // display: flex;
    // flex-wrap: wrap;
    // padding-top: 10px;
}

.intro {
    background-color: #F5F7FA;
    border: 1px solid #E4E7ED;
    color: #C0C4CC;
    padding: 0 10px;
    border-radius: 4px;
}

.base-info {
    overflow-x: hidden;
}
</style>