<template>
    <div>
        <el-form :model="displayDetail" class="basic-info" ref="form">
            <el-row :gutter="50">
                <el-col :span="12">
                    <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 style="background-color: #F5F7FA;border:1px solid #E4E7ED;color: #C0C4CC;padding: 0 10px;border-radius: 4px;"
                            v-html="displayDetail.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="12">
                    <el-form-item label="展览封面" :label-width="formLabelWidth">
                        <div v-if="displayDetail.faceImagePressUrl" class="img-container">
                            <img :src="displayDetail.faceImagePressUrl" alt="">
                        </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">
                            <div class="img-container" v-for="(item, index) in displayDetail.imagesVo" :key="index">
                                <img :src="item.pressUrl" alt="">
                            </div>
                        </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">
                            <div class="img-container" v-for="(item, index) in displayDetail.imagesVo" :key="index">
                              
                            </div>
                        </div>
                        <div v-else>
                            暂无展览音频
                        </div>
                    </el-form-item>
                    <el-form-item label="展览视频" :label-width="formLabelWidth">

                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-form-item label="展览单元" :label-width="formLabelWidth">
                    <ExhibitionUnit :exhibitionUnits="displayDetail.exhibitionUnits" 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(value) {
            if (Object.key(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.dialogForm.status = Boolean(Number(this.dialogForm.status));
            // 回填文献
            this.literatureValues = [];

            if (
                this.dialogForm.literatureVo &&
                this.dialogForm.literatureVo.length > 0
            ) {
                this.literatureList = this.dialogForm.literatureVo;
                this.dialogForm.literatureVo.forEach((lt) => {
                    if (this.literatureValues) {
                        this.literatureValues.push(lt.literatureId);
                    }
                });
            }
            // 回填文物
            this.crIds = [];
            if (
                this.dialogForm.culturalRelicVo &&
                this.dialogForm.culturalRelicVo.length > 0
            ) {
                this.crList = this.dialogForm.culturalRelicVo;
                this.dialogForm.culturalRelicVo.forEach((cr) => {
                    if (this.crIds) {
                        this.crIds.push(cr.crId);
                    }
                });
            }
            // 回填虚拟展厅
            this.vrIds = [];
            if (
                this.dialogForm.virtualVo &&
                this.dialogForm.virtualVo.length > 0
            ) {
                this.vrList = this.dialogForm.virtualVo;
                this.dialogForm.virtualVo.forEach((vr) => {
                    if (this.vrIds) {
                        this.vrIds.push(vr.bvId);
                    }
                });
            }
        }
    },
    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;
}
</style>