<!-- -->
<template>
  <div class="exhibiton-unit" ref="exhibitionUnit">
    <el-tree
      :data="treeData"
      node-key="euId"
      default-expand-all
      :expand-on-click-node="false"
    >
      <div class="exhibition-units-tree-node" slot-scope="{ node, data }">
        <el-row :gutter="10">
          <el-col :span="5">
            <el-input placeholder="请输入展览单元标题" v-model="data.title">
            </el-input>
          </el-col>
          <el-col :span="8">
            <el-input placeholder="请输入展览单元介绍" v-model="data.intro">
            </el-input>
          </el-col>
          <el-col :span="8">
            <el-select
              v-model="data.crIds"
              multiple
              filterable
              remote
              reserve-keyword
              placeholder="请输入关键词搜索文物"
              :remote-method="searchCR"
              :loading="loading"
              style="width: 100%"
            >
              <el-option
                v-for="item in CRList"
                :key="item.crId"
                :label="item.name"
                :value="item.crId"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <div style="display: flex; align-items: center">
              <i
                v-if="data.euId !== treeData[0].euId"
                class="el-icon-close delete"
                @click="() => remove(node, data)"
              ></i>
              <el-tooltip content="添加子节点" placement="top">
                <svg-icon
                  @click="() => appendChild(data)"
                  icon-class="node-child2"
                  class="plus-child"
                  style="font-size: 32px; color: #409eff"
                ></svg-icon>
              </el-tooltip>
              <el-tooltip content="添加同级节点" placement="top">
                <i
                  class="el-icon-plus plus-peer"
                  @click="() => appendPeerNode(node, data)"
                ></i>
              </el-tooltip>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <!-- <el-col :span="24" style="display: flex; flex-direction: column">
            <div class="buttons">
              <el-button
                type="text"
                @click.native="handleAddUnitMedia(node, data)"
              >
                <div class="add-image">
                  <svg-icon
                    :icon-class="data.showMediaUploader ? 'fold' : 'image'"
                  />
                  <span>{{
                    data.showMediaUploader ? "收起" : "添加/显示"
                  }}</span>
                  <span>单元媒体资源</span>
                </div>
              </el-button>
            </div>
          </el-col> -->
          <!-- <el-col :span="12">123</el-col> -->
        </el-row>
        <el-collapse-transition>
          <el-row :gutter="50">
            <el-col :span="24">
              <div>单元图片：</div>
              <ManualImageUploader
                v-model="data.imagesVo"
                :files="data.imagesVo"
                :fileLimit="6"
                :fileSize="50"
                :fileType="['jpeg', 'jpg', 'png']"
                listType="picture-card"
                :ref="'unit-images-' + data.euId"
              />
            </el-col>
            <el-col :span="24">
              <div>单元视频：</div>
              <ManualVideoUploader
                v-model="data.videosVo"
                :files="data.videosVo"
                :fileLimit="6"
                :fileSize="50"
                :fileType="['mp4']"
                listType="picture-card"
                :ref="'unit-videos-' + data.euId"
              />
            </el-col>
          </el-row>
        </el-collapse-transition>
      </div>
    </el-tree>
  </div>
</template>

<script>
let euId = 1000;
import ManualImageUploader from "@/components/Uploader/ManualUploader.vue";
import ManualVideoUploader from "@/components/Uploader/ManualUploader.vue";
import { getCulturalRelicList } from "@/api/culturalRelic";
export default {
  components: {
    ManualImageUploader,
    ManualVideoUploader,
  },
  props: {
    exhibitionUnits: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    exhibitionUnits: {
      handler: function (value) {
        if (value) {
          let that = this;

          // 回填布展单元中的文物、增加显示媒体的字段
          // TODO:
          // if (this.dialogForm.exhibitionUnits.length > 0) {
          //   loopUnit(this.dialogForm.exhibitionUnits);
          //   function loopUnit(arr) {
          //     arr.forEach((unit) => {
          //       if (unit.length > 0) {
          //         // this.$set(unit, "showMediaUploader", true); //设置展示图片单元的为展开
          //         // 如果有文物，回填文物
          //         if (unit.culturalRelics && uni.culturalRelics.length > 0) {
          //           this.$set(unit, "crIds", unit.culturalRelics);
          //         }
          //         if (unit.children) {
          //           loopUnit(unit.children);
          //         }
          //       }
          //     });
          //   }
          // }
          that.treeData = [...value];
          loopData(that.treeData);
          function loopData(arr) {
            if (arr.length > 0) {
              console.log(arr);
              arr.forEach((item) => {
                if (item.culturalRelics && item.culturalRelics.length > 0) {
                  that.$set(that, "CRList", item.culturalRelics);
                  // debugger
                  // that.$set(item,'crIds',item.culturalRelics)
                  // item.crIds = item.culturalRelics;
                  item.crIds = [];
                  item.culturalRelics.map((cr) => {
                    item.crIds.push(cr.crId);
                  });
                  item.imagesVo = item.imagesVo ? item.imagesVo : [];
                  item.videosVo = item.videosVo ? item.videosVo : [];

                  // that.$set(item, "showMediaUploader", false);
                } else {
                  that.$set(that, "CRList", []);
                }
                if (item.children) {
                  loopData(item.children);
                }
              });
            }
          }
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      treeData: [],
      CRList: [], //文物列表，关联文物使用
      // CRModelValue: [], //文献绑定的数组，编辑回显时需要将后台传的值转成[id1,id2,]并赋值给它,新增时记得清空，提交时改成id 的str
      loading: false,
      imagesVo: [],
      videosVo: [],
    };
  },
  mounted() {},
  methods: {
    getUnitData() {
      return this.treeData;
    },
    // 关联文献查询
    searchCR(queryString) {
      if (!queryString.trim()) {
        this.CRList = [];
        return;
      }
      this.loading = true;
      const params = {
        name: queryString,
        page: "1",
        limit: "100",
      };
      setTimeout(async () => {
        this.loading = false;
        const res = await getCulturalRelicList(params);
        if (res.code == 0) {
          this.CRList = res.data.records;
        } else {
          this.CRList = [];
          this.$message.error(res.msg);
        }
      }, 500);
    },
    appendChild(data) {
      const newChild = {
        euId: euId++,
        // unit: "",
        title: "",
        intro: "",
        showMediaUploader: false,
        // showImageUploader: false,
        // showVideoUploader: false,
        images: "",
        crIds: [],
        // imagesVo: [],
        videos: "",
        // videosVo: [],
        children: [],
      };
      if (!data.children) {
        this.$set(data, "children", []);
      }
      data.children.push(newChild);
    },
    appendPeerNode(node, data) {
      // debugger
      const parent = node.parent.data;
      const newChild = {
        euId: euId++,
        unit: "",
        title: "",
        intro: "",
        crIds: [],
        showMediaUploader: false,
        // showImageUploader: false,
        // showVideoUploader: false,
        images: "",
        // imagesVo: [],
        videos: "",
        // videosVo: [],
        children: [],
      };
      parent.push(newChild);
      console.log("parent", parent);
    },
    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      children.splice(index, 1);
    },

    handleAddUnitMedia(node, data) {
      // if (data.images || data.videos) {
      //   this.$set(data, "showMediaUploader", true);
      // }
      // debugger;
      this.$set(data, "showMediaUploader", !data.showMediaUploader);
    },
    // handleAddUnitVideo(node, data) {
    //   this.$set(data, "showVideoUploader", !data.showVideoUploader);
    // },
  },
};
</script>

<style lang="scss" scoped>
.exhibition-units-tree-node {
  display: flex;
  width: 100%;
  flex-direction: column;
}
::v-deep .el-tree-node__content {
  // padding: 10px;
  // min-height: 140px;
  height: auto;
  padding: 10px;
  display: flex;
  align-items: flex-start;
}
.plus-child {
  font-size: 20px;
  font-weight: bold;
  color: #409eff;
  transition: all ease 0.5s;
  padding: 4px;
  border-radius: 4px;
  margin-left: 10px;
  &:hover {
    background-color: rgba($color: #000000, $alpha: 0.05);
    //
  }
}
.plus-peer {
  font-size: 20px !important;
  font-weight: bold;
  color: #409eff;
  transition: all ease 0.5s;
  padding: 4px;
  border-radius: 4px;
  margin-left: 10px;
  &:hover {
    background-color: rgba($color: #000000, $alpha: 0.05);
    //
  }
}
.delete {
  font-size: 20px;
  font-weight: bold;
  color: #f56c6c;
  transition: all ease 0.5s;
  padding: 4px;
  border-radius: 4px;
  margin-left: 10px;
  &:hover {
    background-color: rgba($color: #000000, $alpha: 0.05);
    //
  }
}
.add-image {
  display: flex;
  align-items: center;
  .svg-icon {
    width: 24px;
    height: 24px;
    color: #409eff;
    margin-left: 10px;
    padding: 4px;
    border-radius: 4px;
    box-sizing: border-box;
    // &:hover {
    //   background-color: rgba($color: #000000, $alpha: 0.05);
    //   //
    // }
  }
}
// ::v-deep .el-upload-list--picture-card {
//   display: flex;
//   flex-wrap: wrap;
// }
// ::v-deep .images-list > div {
//   display: flex;
//   flex-wrap: wrap;
// }
</style>
