<template>
  <div>
    <div
      style="
        height: 60px;
        text-align: center;
        font-size: 20px;
        display: block;
        font-weight: bold;
        background-color: #0071a9;
        color: #fff;
        line-height: 60px;
      "
    >
      <span class="lib_title">{{ dataxself.title }}</span>
    </div>

    <div style="height: calc(100% - 60px); overflow-y: auto">
      <div class="layui-collapse collaps" lay-filter="test3" lay-accordion="">
        <div class="layui-colla-item" v-for="(item, index) in tree_list">
          <h2
            class="layui-colla-title"
            v-bind:style="{ backgroundColor: item.color }"
            @click=" showright(item, index, $event)"
          >
            {{ item.name }}
            <img
              v-show="item.icon"
              style="height: 20px; width: 20px; margin-top: 10px; float: right"
              v-bind:src="item.icon"
            />
          </h2>
          <div
            class="layui-colla-content"
            style="height: 217px; margin-left: 20px"
            v-bind:title="item.name"
          >
            <div style="width: 100%; height: 225px">
              <div class="TreeWrap">
                <div
                  v-for="(item1, index1) in item.children"
                  @click="locate(item1)"
                  style="cursor: pointer"
                >
                  {{ item1.name }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="layui-colla-item" v-for="(item, index) in daylist">
          <h2
            class="layui-colla-title"
            v-bind:style="{ backgroundColor: item.color }"
            @click="open(item, index, $event)"
          >
            {{ item.name }}
            <img
              v-show="item.icon"
              style="height: 20px; width: 20px; margin-top: 10px; float: right"
              v-bind:src="item.icon"
            />
          </h2>
          <div
            class="layui-colla-content"
            style="height: 217px; margin-left: 0px"
            v-bind:title="item.name"
          >
            <div style="width: 100%; height: 225px">
              <div
                class="layui-colla-item"
                v-for="(item2, index) in item.children"
              >
                <h2
                  class="layui-colla-title"
                  v-bind:style="{ backgroundColor: item2.color }"
                  @click="open2(item2, index, $event)"
                >
                  {{ item2.name }}
                  <img
                    v-show="item.icon"
                    style="
                      height: 20px;
                      width: 20px;
                      margin-top: 10px;
                      float: right;
                    "
                    v-bind:src="item2.icon"
                  />
                </h2>
                <div
                  class="layui-colla-content"
                  name="layui"
                  style="height: 217px; margin-left: 0px"
                  v-bind:title="item2.name"
                >
                  <div style="width: 100%; height: 225px">
                    <div class="TreeWrap">
                      <div
                        v-for="(item3, index1) in item2.children"
                        @click="
                          item3.href
                            ? showphotos(item3.href)
                            : play(item3.palyhref)
                        "
                        style="cursor: pointer"
                      >
                        <a> {{ item3.name }}</a>
                        <img v-show="item3.palyhref" src="/img/monitor.png" width="12px" height="12px">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script src="../../js/httpVueLoader.js"></script>
<script>
module.exports = {
  data: function () {
    return {
      searchText: "",
      tree_list: [
        {
          marktype: "1",
          text1: "五类重点青少年群体",
          name: "五类重点青少年群体",
          color: "turquoise",
          show: true,
          layers: [],
          children: [],
          icon: "img/icon/th.png",
          event: "showright",
          rightview: "fivetype",
          width:"400",
          height:"400"
        },
        {
          marktype: "2",
          text1: "困境青少年",
          name: "困境青少年",
          color: "teal",
          show: true,
          layers: [],
          children: [],
          icon: "img/icon/th.png",
          rightview: "",
          
        },
        {
          marktype: "3",
          text1: "双零数据",
          name: "双零数据（零发生）",
          color: "cornflowerblue",
          show: true,
          layers: [],
          children: [],
          icon: "",
          event: "showright",
          rightview: "doublezero",
          width:"400",
          height:"420"
        },
      ],
      daylist: [
        {
          marktype: "3",
          text1: "青年风采",
          name: "青年风采",
          color: "coral",
          show: true,
          layers: [],
          children: [
            {
              marktype: "3",
              text1: "青年行动",
              name: "青年行动",
              show: true,
              children: [
                    {
                  name: "联青服务站",
                  palyhref: "489",
                },
                {
                  name: "2019.11.09 微公益微心愿捐赠仪式",
                  href: {
                    data: [
                      { src: "/img/1/1.jpg" },
                      { src: "/img/1/2.jpg" },
                      { src: "/img/1/3.jpg" },
                      { src: "/img/1/4.jpg" },
                      { src: "/img/1/5.jpg" },
                      { src: "/img/1/6.jpg" },
                      { src: "/img/1/7.jpg" },
                      { src: "/img/1/8.jpg" },
                      { src: "/img/1/9.jpg" },
                      { src: "/img/1/10.jpg" },
                      { src: "/img/1/11.jpg" },
                      { src: "/img/1/12.jpg" },
                      { src: "/img/1/13.jpg" },
                    ],
                  },
                },
                {
                  name: "2019.12.15 联合杭州银行举办“小小银行家”活动",
                  href: {
                    data: [
                      { src: "/img/2/1.jpg" },
                      { src: "/img/2/2.jpg" },
                      { src: "/img/2/3.jpg" },
                      { src: "/img/2/4.jpg" },
                      { src: "/img/2/5.jpg" },
                      { src: "/img/2/6.jpg" },
                    ],
                  },
                },
                {
                  name: "青年志愿者参与文明城市创建",
                  href: {
                    data: [
                      { src: "/img/3/1.jpg" },
                      { src: "/img/3/2.jpg" },
                      { src: "/img/3/3.jpg" },
                      { src: "/img/3/4.jpg" },
                      { src: "/img/3/5.jpg" },
                      { src: "/img/3/6.jpg" },
                    ],
                  },
                },
                {
                  name: "青年志愿者自发参与到社区组织的清明祭扫大型活动",
                  href: {
                    data: [
                      { src: "/img/4/1.jpg" },
                      { src: "/img/4/2.jpg" },
                      { src: "/img/4/3.jpg" },
                      { src: "/img/4/4.jpg" },
                      { src: "/img/4/5.jpg" },
                    ],
                  },
                },
                {
                  name: "青少年参与环境整治",
                  href: {
                    data: [
                      { src: "/img/5/1.jpg" },
                      { src: "/img/5/2.jpg" },
                      { src: "/img/5/3.jpg" },
                      { src: "/img/5/4.jpg" },
                      { src: "/img/5/5.jpg" },
                    ],
                  },
                },
                {
                  name:
                    "社区党委联合社区团支部开展“火红的五月，我们在行动”大型文艺活动",
                  href: {
                    data: [
                      { src: "/img/6/1.jpg" },
                      { src: "/img/6/2.jpg" },
                      { src: "/img/6/3.jpg" },
                      { src: "/img/6/4.jpg" },
                    ],
                  },
                },
                {
                  name: "兴卫村社区团支部开展少儿阅读系列活动",
                  href: {
                    data: [
                      { src: "/img/7/1.jpg" },
                      { src: "/img/7/2.jpg" },
                      { src: "/img/7/3.jpg" },
                      { src: "/img/7/4.jpg" },
                      { src: "/img/7/5.jpg" },
                    ],
                  },
                },
                {
                  name: "兴卫村社区团支部联合国网英大开展“少年DIY”系列活动",
                  href: {
                    data: [
                      { src: "/img/8/1.jpg" },
                      { src: "/img/8/2.jpg" },
                      { src: "/img/8/3.jpg" },
                      { src: "/img/8/4.jpg" },
                    ],
                  },
                },
                {
                  name: "兴卫村社区团支部联合辖区内幼儿园开展学习小能手活动",
                  href: {
                    data: [
                      { src: "/img/9/1.jpg" },
                      { src: "/img/9/2.JPG" },
                      { src: "/img/9/3.JPG" },
                    ],
                  },
                },
                {
                  name: "兴卫村社区团支部走访困境儿童",
                  href: {
                    data: [
                      { src: "/img/10/1.JPG" },
                      { src: "/img/10/2.JPG" },
                      { src: "/img/10/3.JPG" },
                      { src: "/img/10/4.JPG" },
                    ],
                  },
                },
                {
                  name:
                    "兴卫村社区团支部组织辖区内青年参加环境大整治，提升地区整体形象",
                  href: {
                    data: [
                      { src: "/img/11/1.jpg" },
                      { src: "/img/11/2.jpg" },
                      { src: "/img/11/3.jpg" },
                      { src: "/img/11/4.jpg" },
                    ],
                  },
                },
              
              ],
            },
            {
              marktype: "3",
              text1: "团青阵地",
              name: "团青阵地",
              show: true,
              children: [
                {
                  name: "团青阵地",
                  palyhref: "487",
                  icon: "",
                },
                {
                  name: "垃圾分类青少年示范岗",
                  palyhref: "488",
                },
                {
                  name: "兴都花园85号“红色少年”活动阵地",
                  href: {
                    data: [
                      { src: "/img/13/1.jpg" },
                      { src: "/img/13/2.jpg" },
                      { src: "/img/13/3.jpg" },
                      { src: "/img/13/4.jpg" },
                    ],
                  },
                },
                {
                  name: "兴都花园86号“青之翼”广场",
                  href: {
                    data: [
                      { src: "/img/14/1.jpg" },
                      { src: "/img/14/2.jpg" },
                      { src: "/img/14/3.jpg" },
                      { src: "/img/14/4.jpg" },
                    ],
                  },
                },
              ],
            },
          ],
        },
      ],
    };
  },
  props: ["dataxself"],
  methods: {
    locate: function (item) {
      parent.vue_left.locate(item);
    },
    showright: function (item,n, dom) {
      parent.vue_left.showright(item);
      this.open(item, n, dom);
    },
    showphotos: function (item) {
      layer.photos({
        photos: item,
        anim: 5,
      });
    },
    play: function (url) {
      //var sd = "/api/v1/getchannels?channel=" + url;
      //var hostname = window.location.hostname;
     // var port = window.location.port;
     // var easynvr =
       // window.location.protocol + "//" + hostname + ":" + port + sd;
      //$.ajax({
       // url: easynvr,
       // type: "GET",
        //data: {},
       // success: function (data) {
         // var online = data.EasyDarwin.Body.Channels[0].Online;
          //if (online == "1") {
            layui_open_option = {
              type: 2,
              title: '<span class="layer_span9">监控画面</span>',
              area: ["977px", "678px"], //宽高
              content:
                "nvrurl/play.html?channel=" +
                url +
                "&iframe=yes&aspect=640x360",
            };
            layerOpen(layui_open_option);
          //} else if (online == "0") {
           // layer.msg("视频不在线");
          //}
        //},
     // });
    },
    open2: function (item, n, dom) {
      $("#layui").css("display", "none");
      if (item.show) {
        $(dom.srcElement).next().css("display", "block");
      } else {
        $(dom.srcElement).next().css("display", "none");
      }
      item.show = !item.show;
    },
    open: function (item, n, dom) {
      $(".layui-colla-content").css("display", "none");

      if (item.show) {
        $(dom.srcElement).next().css("display", "block");
      } else {
        $(dom.srcElement).next().css("display", "none");
      }

      // if(n==1&&item.show){
      //     parent.vue_top.setLayerStatusbyId(this.data_filter.data[0].layerID,true);
      //     parent.vue_top.setLayerStatusbyId(this.data_filter.data[1].layerID,true);
      // }
      parent.vue_top.setLayerStatusbyId(
        this.data_filter.data[1].layerID,
        !item.show
      );
      parent.vue_top.setLayerStatusbyId(this.data_filter.data[0].layerID, true);

      //其他逻辑
      item.show = !item.show;

      //判断是否是第三个统一行动日
      // if(item.name=="统一行动日")
      // {
      //     console.log("统一行动日");
      //     let href = this.$router.resolve({name: 'pagedetail/showoneday', params: {}});
      //     console.log(href);
      //     window.open(href.href, '_blank');
      // }
    },
  },
  computed: {
    datax: {
      set: function (value) {
        //this.dataxself=value;
        //console.log(value);
      },
      get: function () {
        return this.dataxself;
        //console.log(this.dataxself);
      },
    },
    data_filter: function () {
      return this.datax;
    },
  },
  mounted() {
    //挂载的时候执行
    for (var i = 0; i < this.tree_list.length; i++) {
      //遍历本模块的一级树
      var tempList = [];

      for (var j = 0; j < this.data_filter.data[0].data.length; j++) {
        //遍历集合数据，塞入一级树结构中、
        if (
          this.data_filter.data[0].data[j].ldls &&
          this.data_filter.data[0].data[j].ldls.strcontains(
            this.tree_list[i].marktype
          )
        ) {
          tempList.push(this.data_filter.data[0].data[j]);
        }
      }
      //chilren tianchong
      this.tree_list[i].children = tempList;


    }

      //遍历本模块的一级树
      var tempList = [];
      for (var j = 0; j < this.data_filter.data[0].data.length; j++) {
        //遍历集合数据，塞入一级树结构中、
        if (
          this.data_filter.data[0].data[j].ldls &&
          this.data_filter.data[0].data[j].ldls.strcontains("1"
          ) && j<44
        ) {
          tempList.push(this.data_filter.data[0].data[j]);
        }
      }
      //chilren tianchong
      this.tree_list[2].children = tempList;

    // for (var i = 0; i < this.tree_list.length; i++) { //遍历本模块的一级树
    // if(this.data_filter.data[0].data && this.data_filter.data[0].data.length>0){
    //     var tempList=[];
    //      //判断是否含有子节点
    //      if(this.tree_list[i].children.length>0)
    //      {
    //         //  for (var k = 0; k < this.tree_list[i].children.length; k++) { //遍历本模块的二级树

    //         //         tempList=[];
    //         //         // for (var j = 0; j < this.data_filter.data[0].data.length; j++) { //遍历集合数据，塞入一级树结构中
    //         //         //         // if (this.data_filter.data[0].data[j].ldls && this.data_filter.data[0].data[j].ldls.strcontains(this.tree_list[i].children[k].marktype)) {

    //         //         //         //     tempList.push(this.data_filter.data[0].data[j]);
    //         //         //         // }
    //         //         //     }

    //         //         this.tree_list[i].children[k].children=tempList;
    //         //         console.log(this.tree_list[i].children[k])
    //         //     }

    //      }
    //      else{
    //           for (var j = 0; j < this.data_filter.data[0].data.length; j++) { //遍历集合数据，塞入一级树结构中

    //                 if (this.data_filter.data[0].data[j].ldls && this.data_filter.data[0].data[j].ldls.strcontains(this.tree_list[i].marktype) ) {
    //                     tempList.push(this.data_filter.data[0].data[j]);
    //                 }
    //           }
    //         this.tree_list[i].children=tempList;
    //     //chilren tianchong
    //      }
    // }
    // }

    // this.tree_list[1].children=this.data_filter.data[1].data;
  },
};
</script>
<style >
/* @import "../../js/layui/css/layui.css"; */
</style>
