<template>
  <el-dialog
    v-loading="submitLoading"
    element-loading-background="rgba(0, 0, 0, 0.5)"
    :element-loading-text="loadingText"
    :visible.sync="dialogVisible"
    width="86%"
    :before-close="handleClose"
    top="2vh"
    lock-scroll
  >
    <div class="title" slot="title">
      <div class="divider"></div>
      <div class="label">{{ title }}</div>
    </div>
    <div class="el-dialog-div">
      <div class="dialog-content" v-if="dialogVisible">
        <el-form
          :model="dialogForm"
          class="basic-info"
          :rules="rules"
          ref="form"
        >
          <el-row :gutter="50">
            <el-col :span="12">
              <el-form-item
                label="展览标题"
                :label-width="formLabelWidth"
                prop="title"
              >
                <el-input
                  v-model="dialogForm.title"
                  autocomplete="off"
                  placeholder="请输入展览标题"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item label="展览类型" :label-width="formLabelWidth">
                <el-select
                  v-model="dialogForm.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"
                prop="deptId"
              >
                <el-cascader
                  style="width: 100%"
                  v-model="dialogForm.deptId"
                  :options="orgTreeData"
                  :props="optionProps"
                  placeholder="请选择展览单位"
                  clearable
                >
                </el-cascader>
              </el-form-item>
              <el-form-item
                label="展览性质"
                :label-width="formLabelWidth"
                style="display: none"
              >
                <el-select
                  v-model="dialogForm.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
                  v-model="dialogForm.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">
                <VueQuillEditor v-model="dialogForm.intro" />
              </el-form-item>
              <el-form-item label="关键词" :label-width="formLabelWidth">
                <el-input
                  v-model="dialogForm.keyword"
                  autocomplete="off"
                  placeholder="请输入关键词"
                  clearable
                ></el-input>
              </el-form-item>

              <el-form-item label="展览文物" :label-width="formLabelWidth">
                <el-select
                  v-model="crIds"
                  multiple
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请输入关键词搜索文物"
                  :remote-method="searchCR"
                  :loading="loading"
                  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
                  v-model="literatureValues"
                  multiple
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请输入关键词搜索文献"
                  :remote-method="searchLiterature"
                  :loading="loading"
                  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-switch v-model="dialogForm.status"> </el-switch>
              </el-form-item>
              <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input
                  type="textarea"
                  placeholder="请输入备注"
                  v-model="dialogForm.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"
              >
                <ManualUploader
                  :fileLimit="1"
                  listType="picture-card"
                  :fileType="['png', 'jpeg', 'jpg']"
                  :files="faceImage"
                  ref="faceImage"
                />
              </el-form-item>

              <el-form-item label="展览图片" :label-width="formLabelWidth">
                <ManualUploader
                  :files="images"
                  :fileLimit="20"
                  :fileSize="50"
                  listType="picture-card"
                  :fileType="['png', 'jpeg', 'jpg']"
                  @handleFileReady="handleImagesReady"
                  ref="images"
                  :advice="imagesAdvice"
                />
              </el-form-item>
              <el-form-item label="展览音频" :label-width="formLabelWidth">
                <ManualUploader
                  :files="audios"
                  :fileLimit="1"
                  :fileSize="50"
                  :fileType="['mp3']"
                  listType="card"
                  @handleFileReady="handleAudiosReady"
                  ref="audios"
                />
              </el-form-item>
              <el-form-item label="展览视频" :label-width="formLabelWidth">
                <ManualUploader
                  :files="videos"
                  :fileLimit="6"
                  :fileSize="500"
                  :fileType="['mp4']"
                  listType="card"
                  ref="videos"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="展览单元" :label-width="formLabelWidth">
              <ExhibitionUnit
                :exhibitionUnits="dialogForm.exhibitionUnits"
                ref="exhibitionUnits"
              />
            </el-form-item>
          </el-row>
        </el-form>
      </div>
      <div class="dialog-footer">
        <el-button @click="cancelForm">取 消</el-button>
        <!-- <el-button @click="handlePreview">预 览</el-button> -->
        <el-button type="primary" @click="handleSubmit" :disabled="loading"
          >发布<i class="el-icon-s-promotion" style="margin-left: 5px"></i
        ></el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { addDisplay, editDisplay } from "@/api/display";
import { mapGetters } from "vuex";
import ManualUploader from "@/components/Uploader/ManualUploader.vue";
import ExhibitionUnit from "./ExhibitionUnit.vue";
// import PageSelect from "@/components/PageSelect";
import { upload, uploadV1 } from "@/utils/file";
import { themeTypeOptions } from "../contants";
import { deleteFiles } from "@/api/file";
import VueQuillEditor from "@/components/VueQuillEditor";

export default {
  name: "InfoEditDialog",
  components: {
    ManualUploader,
    ExhibitionUnit,
    VueQuillEditor,
    // PageSelect,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    form: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    ...mapGetters(["userInfo", "dicts"]),
    dialogVisible: {
      get: function () {
        return this.visible;
      },
      set: function () {},
    },
    title() {
      if (this.dialogForm.exhibitionId) {
        return "修改信息";
      } else {
        return "发布展览";
      }
    },
    themeTypeOptions() {
      return themeTypeOptions;
    },
  },
  watch: {
    form: {
      handler: function (value) {
        if (value) {
          this.dialogForm = JSON.parse(JSON.stringify(value));
          if (
            this.dialogForm.exhibitionUnits &&
            this.dialogForm.exhibitionUnits.length > 0
          ) {
            loopUnit(this.dialogForm.exhibitionUnits);
            function loopUnit(arr) {
              arr.forEach((unit) => {
                if (unit.length > 0) {
                  // 如果有文物，回填文物
                  if (unit.culturalRelics && uni.culturalRelics.length > 0) {
                    this.$set(unit, "crIds", unit.culturalRelics);
                  }
                  if (unit.children) {
                    loopUnit(unit.children);
                  }
                }
              });
            }
          }
          // 回填媒体资源
          if (this.dialogForm.faceImageUrl) {
            this.faceImage = [
              {
                name: "",
                url: this.dialogForm.faceImageUrl,
                fileId: this.dialogForm.faceImage,
                pressUrl: this.dialogForm.faceImagePressUrl,
              },
            ];
          }
          this.images = this.dialogForm.imagesVo || [];
          this.videos = this.dialogForm.videosVo || [];
          this.audios = this.dialogForm.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);
              }
            });
          }

          // 回填展览单位
          if (this.dialogForm.deptId) {
            this.dialogForm.deptId = [this.dialogForm.deptId];
          }
        }
      },
      immediate: true,
    },
    "dialogForm.themeType": {
      handler: function (value) {
        switch (value) {
          case "1":
            console.log("默认主题");
            this.imagesAdvice = "";
            break;
          case "2":
            console.log("中国风");
            this.imagesAdvice =
              "中国风主题建议上传10张以上的展览图片，效果更好";
            break;
          case "3":
            console.log("红色主题");
            this.imagesAdvice = "";
            break;
        }
      },
    },
  },
  data() {
    let that =this
    var checkFaceImage = (rule, value, callback) => {
      if (that.faceImage.length == 0) {
        // this.$message.info('请上传封面')
        return callback(new Error("请上传封面"));
      } else {
        callback();
      }
    };
    return {
      dialogForm: {
        ...this.form,
      },
      formLabelWidth: "100px",
      loading: false,
      submitLoading: false,
      loadingText: "",
      upLoadAddress: process.env.VUE_APP_BASE_API + "/sysFiles/upload",
      typeOptions: [{ label: "展览类型", value: 1 }], //后期从vuex中取
      disabled: false,
      exhibitionUnits: [],
      literatureList: [], //文献列表
      literatureValues: [], //选中的文献列表
      crList: [], //文物列表
      crIds: [], //选中的文物列表
      // showUnit: false,
      faceImage: [],
      images: [],
      videos: [],
      audios: [],
      pageSelectUrl: "/api/bizCulturalRelic/listByPage",
      orgTreeData: [],
      optionProps: {
        value: "id",
        label: "name",
        children: "children",
        checkStrictly: true, //单选选择任意一级选项
      },
      rules: {
        title: [{ required: true, message: "请输入展览标题", trigger: "blur" }],
        // faceImage: [
        //   { required: true, validator: checkFaceImage, trigger: "change" },
        // ],
        deptId: [
          { required: true, message: "请填写展览单位", trigger: "change" },
        ],
        intro: [{ required: true, message: "请填写展览介绍", trigger: "blur" }],
      },
      imagesAdvice: "",
    };
  },
  async created() {
    await this.$store.dispatch("dict/getDictList", [
      "displayType",
      "displayCharacter",
    ]);
    this.$store.dispatch("org/getMuseumTreeData", false).then((res) => {
      this.orgTreeData = res[0].children; //去掉根节点的文旅厅
    });
  },

  methods: {
    // 关联文献查询
    searchLiterature(queryString) {
      if (!queryString.trim()) {
        this.literatureList = [];
        return;
      }
      this.loading = true;
      const params = {
        name: queryString,
        page: "1",
        limit: "100",
      };
      setTimeout(async () => {
        this.loading = false;
        const res = await this.$store.dispatch("dict/getLtList", {
          hasPer: false,
          params,
        });
        if (res.code == 0) {
          this.literatureList = res.data.records;
        } else {
          this.literatureList = [];
          this.$message.error(res.msg);
        }
      }, 500);
    },
    // 关联文物查询
    searchCR(queryString) {
      let that = this;
      if (!queryString.trim()) {
        that.crList = [];
        return;
      }
      that.loading = true;
      const params = {
        name: queryString,
        page: "1",
        limit: "100",
      };

      setTimeout(async () => {
        // debugger
        that.loading = false;
        const res = await that.$store.dispatch("dict/getCrList", {
          params,
          isReload: true,
        });
        if (res.code == 0) {
          that.crList = res.data.records;
        } else {
          that.crList = [];
          that.$message.error(res.msg);
        }
      }, 500);
    },

    // 取消编辑
    cancelForm() {
      if (this.loading) {
        this.loading = false;
      }
      if (this.submitLoading) {
        this.submitLoading = false;
      }
      this.reload();
    },

    handleSubmit() {
      // this.loading = true;
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.submitLoading = true;

          var that = this;
          let formData = new FormData();
          // 已存在的文件的对象
          let successFilesObj = [];
          // 需要被删除的文件Id
          let deleteFileArr = [];
          // 添加布展本身的媒体文件至formData
          const mediaArr = ["faceImage", "images", "videos", "audios"];
          let newFiles = {}; //key：字段名或者单元id名, value:不同媒体或单元已经存在的文件id数组
          mediaArr.map((media) => {
            let files = [...this.$refs[media].getFiles()];
            let fileIds = []; //不同媒体或单元已经存在的文件id数组
            files.map((f) => {
              switch (f.status) {
                case "ready":
                  formData.append(media, f.raw);
                  break;
                case "success":
                  if (successFilesObj[media]) {
                    successFilesObj[media].push(f);
                  } else {
                    successFilesObj[media] = [f];
                  }
                  fileIds.push(f.fileId);
                  break;
              }
            });
            newFiles[media] = fileIds;
          });

          mediaArr.map((media) => {
            if (this.dialogForm[media]) {
              let oldFileIdArr = this.dialogForm[media].split(",");
              oldFileIdArr.map((oldId) => {
                if (newFiles[media].indexOf(oldId) == -1) {
                  deleteFileArr.push(oldId);
                }
              });
            }
          });
          // return
          let unitIds = [];
          let unitData = [...this.$refs["exhibitionUnits"].getUnitData()];
          // debugger;
          // return
          // 批量添加image进入formdata

          let newfileIdsArr = []; //不同媒体或单元已经存在的文件id数组
          let oldFileIdsArr = []; //旧的ids集合
          addUnitImgToFormData(unitData);
          function addUnitImgToFormData(arr) {
            if (arr.length > 0) {
              arr.map((item) => {
                if (item.imagesVo && item.imagesVo.length > 0) {
                  let imageFiles = item.imagesVo;
                  let unitOldIds = item.images.split(",");
                  oldFileIdsArr = oldFileIdsArr.concat(unitOldIds);
                  imageFiles.map((imgFile) => {
                    if (imgFile.status && imgFile.status == "ready") {
                      formData.append(`unit-images-${item.euId}`, imgFile.raw);
                    } else {
                      if (successFilesObj[`unit-images-${item.euId}`]) {
                        successFilesObj[`unit-images-${item.euId}`].push(
                          imgFile
                        );
                      } else {
                        successFilesObj[`unit-images-${item.euId}`] = [imgFile];
                      }
                      newfileIdsArr.push(imgFile.fileId);
                    }
                  });
                }
                if (item.children) {
                  addUnitImgToFormData(item.children);
                }
              });
            }
          }
          oldFileIdsArr.map((oldfileId) => {
            // 如果旧的id在新的id集合中找不到，则代表该文件被删除
            if (newfileIdsArr.indexOf(oldfileId) == -1) {
              deleteFileArr.push(oldfileId);
            }
          });
          // return;
          // addUnitIds(unitData); //添加unit的id作为上传文件的key
          // function addUnitIds(arr) {
          //   if (arr.length > 0) {
          //     arr.map((item) => {
          //       unitIds.push(item.euId);
          //       if (item.children) {
          //         addUnitIds(item.children);
          //       }
          //     });
          //   }
          // }
          // unitIds.map(async (euId) => {
          //   let exhibitionUnitsDom = this.$refs.exhibitionUnits;
          //   let imageFiles = [];
          //   let videoFiles = [];
          //   if (exhibitionUnitsDom.$refs[`unit-images-${euId}`]) {
          //     imageFiles = [
          //       ...exhibitionUnitsDom.$refs[`unit-images-${euId}`].getFiles(),
          //     ];
          //     // debugger
          //   }

          //   if (exhibitionUnitsDom.$refs[`unit-videos-${euId}`]) {
          //     videoFiles = [
          //       ...exhibitionUnitsDom.$refs[`unit-videos-${euId}`].getFiles(),
          //     ];
          //   }

          //   if (imageFiles.length > 0) {
          //     imageFiles.forEach((imgFile) => {
          //       if (imgFile.status === "ready") {
          //         formData.append(`unit-images-${euId}`, imgFile.raw);
          //       } else {
          //         //
          //         if (successFilesObj[`unit-images-${euId}`]) {
          //           successFilesObj[`unit-images-${euId}`].push(imgFile);
          //         } else {
          //           successFilesObj[`unit-images-${euId}`] = [imgFile];
          //         }
          //       }
          //     });
          //   }
          //   if (videoFiles.length > 0) {
          //     videoFiles.forEach((videoFile) => {
          //       if (videoFile.status === "ready") {
          //         formData.append(`unit-videos-${euId}`, videoFile.raw);
          //       } else {
          //         if (successFilesObj[`unit-videos-${euId}`]) {
          //           successFilesObj[`unit-videos-${euId}`].push(videoFiles);
          //         } else {
          //           successFilesObj[`unit-videos-${euId}`] = [videoFiles];
          //         }
          //       }
          //     });
          //   }
          // });
          // 上传所有媒体文件
          let filesObj = {};

          var formDataArr = Array.from(formData.entries(), ([key, prop]) => ({
            [key]: {
              ContentLength: typeof prop === "string" ? prop.length : prop.size,
            },
          }));
          // console.log("formDataArr,length", formDataArr.length);
          // formData有长度时再进行上传
          if (formDataArr.length > 0) {
            this.loadingText = "正在上传文件...请耐心等待";
            let upLoadRes = await uploadV1(formData);
            if (upLoadRes.code == 0) {
              upLoadRes.data.map((resFile) => {
                if (filesObj[resFile.fileKey]) {
                  filesObj[resFile.fileKey].push(resFile.fileId);
                } else {
                  filesObj[resFile.fileKey] = [resFile.fileId];
                }
              });
            }
          }
          // 1、回填之前先获取已存在的文件
          for (const key in successFilesObj) {
            // 如果文件id中含有已上传成功的某个key，如images，则将已上传成功的images推入文件id集合
            if (filesObj[key]) {
              successFilesObj[key].map((sf) => {
                filesObj[key].push(sf.fileId);
              });
              // filesObj[key].push(successFilesObj[key].fileId);
            } else {
              let ids = [];
              successFilesObj[key].map((sf) => {
                ids.push(sf.fileId);
              });
              filesObj[key] = ids;
            }
          }
          // 2、回填布展自带的媒体文件
          mediaArr.forEach((media) => {
            if (filesObj[media]) {
              this.dialogForm[media] = filesObj[media].join(",");
            } else {
              this.dialogForm[media] = "";
            }
          });
          // 3、回填布展单元媒体文件,修改关联文物为Str，和显示隐藏控制器
          backFillUnit(unitData);
          function backFillUnit(arr) {
            if (arr.length > 0) {
              arr.map((unit) => {
                // 如果进行了文件上传
                if (Object.keys(filesObj).length > 0) {
                  for (const key in filesObj) {
                    let type = key.split("-")[1];
                    let euId = key.split("-")[2];
                    if (euId == unit.euId) {
                      switch (type) {
                        case "images":
                          unit.images = filesObj[key].join(",");
                          break;
                        case "videos":
                          unit.videos = filesObj[key].join(",");
                          break;
                      }
                    }
                  }
                }
                let crIdArr = unit.crIds;
                unit.crIds = crIdArr ? crIdArr.join(",") : "";
                var deleteArr = ["euId", "isEditing"];
                deleteArr.forEach((i) => {
                  if (unit[i]) {
                    delete unit[i];
                  }
                });
                // }
                if (unit.children) {
                  backFillUnit(unit.children);
                }
              });
            }
          }

          if (!that.dialogForm.exhibitionId) {
            this.loadingText = "正在处理展览数据...请耐心等待";
            const { deptId, regionCode } = this.userInfo;
            const params = {
              ...this.dialogForm,
              exhibitionUnits: unitData,
              deptId,
              regionCode,
            };
            params.literature = this.literatureValues.join(",");
            params.status = this.dialogForm.status ? 1 : 0;
            params.crIds = this.crIds.join(",");
            params.displayCharacter = 1; //传布展
            addDisplay(params)
              .then((res) => {
                if (res.code == 0) {
                  setTimeout(() => {
                    // this.loading = false;
                    this.$emit("refresh");
                    this.reload();
                    this.submitLoading = false;
                    this.$message.success("新增展览成功！");
                  }, 1000);
                }
              })
              .catch((err) => {
                // this.loading = false;
                this.submitLoading = false;
              });
          } else {
            this.loadingText = "正在处理展览数据...请耐心等待";
            const {
              exhibitionId,
              title,
              type,
              keyword,
              intro,
              themeType,
              remark,
              faceImage,
              faceImageUrl,
              images,
              audios,
              videos,
              regionCode,
              deptId,
              displayCharacter,
            } = this.dialogForm;

            let literature = this.literatureValues.join(",");
            let crIds = this.crIds.join(",");
            let status = this.dialogForm.status ? 1 : 0;

            // return;
            const params = {
              exhibitionId,
              title,
              type,
              keyword,
              intro,
              themeType,
              remark,
              audios,
              deptId,
              faceImage,
              faceImageUrl,
              images,
              regionCode,
              videos,
              status,
              literature,
              crIds,
              displayCharacter,
              exhibitionUnits: unitData,
            };
            // 处理馆藏单位
            if (params.deptId instanceof Array) {
              params.deptId = params.deptId[params.deptId.length - 1];
            }
            // return;
            if (deleteFileArr.length > 0) {
              await deleteFiles(deleteFileArr);
            }
            editDisplay(params)
              .then(async (res) => {
                let deleteRes;
                console.log(res);
                // return

                if (res.code == 0) {
                  this.$emit("refresh");
                  this.reload();

                  setTimeout(() => {
                    this.loadingText = "上传完毕";
                    this.submitLoading = false;
                    this.$message.success("修改展览成功！");
                  }, 1000);
                }
              })
              .catch((err) => {
                console.log("err", err);
                this.submitLoading = false;
              });
          }
        }
      });
    },
    // 清空编辑组件中的所有值
    reload() {
      //父组件将清空form绑定的值
      this.$emit("handleClose");
      // 清空文献
      this.literatureValues = [];
      // 清空文物
      this.crIds = [];
      // this.literatureNames = [];
      // 清空布展单元
      this.exhibitionUnits = [
        {
          euId: 1, //后期去掉
          // unit: "", //单元名称,如前言、第一单元，暂时忽略
          title: "", //单元标题，类似主题名称
          intro: "", //单元介绍
          images: "", //图片id集合
          videos: "", //视频id集合
          crIds: [], //关联文物集合
        },
      ];

      this.images = [];
      this.videos = [];
      this.audios = [];
      this.faceImage = [];
    },

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
          this.reload();
          this.submitLoading = false;
        })
        .catch((_) => {});
    },
    // 处理将文件的url拼接成字符串
    handleJoinArrToStr(file) {
      var str = "";
      var urlArr = file.map((item) => {
        return item.url;
      });
      str = urlArr.join(",");
      return str;
    },
    // 封面上传
    handleFaceImageReady(file) {
      var str = this.handleJoinArrToStr(file);
      this.dialogForm.faceImage = str;
    },

    // 展览图片上传
    handleImagesReady(file) {
      var str = this.handleJoinArrToStr(file);
      this.dialogForm.images = str;
    },

    // 展览图片上传
    handleVideosReady(file) {
      var str = this.handleJoinArrToStr(file);
      this.dialogForm.videos = str;
    },

    // 展览图片上传
    handleAudiosReady(file) {
      var str = this.handleJoinArrToStr(file);
      this.dialogForm.auidos = str;
    },

    refresh() {
      this.$emit("refresh");
    },
  },
};
</script>

<style lang='scss' scoped>
.title {
  display: flex;
  margin-bottom: 16px;
  .divider {
    width: 8px;
    border-left: 4px solid #409eff;
    margin-right: 8px;
  }
  .label {
    font-weight: bold;
  }
}
.el-dialog-div {
  height: 80vh;
  overflow-x: hidden;
}
.dialog-content {
  padding: 0 32px;
  display: flex;
  .basic-info {
    flex: 1;
    margin-right: 48px;
  }
  .relate {
    flex: 1;
  }
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  margin: 20px 50px;
}

.video-lists {
  display: flex;
}

//展览单元
</style>