<template>
  <div class="base-info">
    <el-form :model="displayDetail" class="basic-info" ref="form" size="mini">
      <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 ExhibitionUnit from "@/views/display/components/ExhibitionUnit.vue";
export default {
  name: "BaseInfo",
  components: {
    ExhibitionUnit,
  },
  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>
