<template>
  <!-- 这里是关于农合联页面主入口 编辑模式(菜单栏有修改,删除,新增按钮)-->
  <div class="website-aboutNhl" v-cloak>
    <!-- 菜单横向排列 -->
    <template v-if="arrangeWay === 'crosswise'">
      <div class="crosswise">
        <contentWrap
          v-if="detailData.contentsType == 'text'"
          class="news_content"
          :data="customData"
        ></contentWrap>
        <div class="news_content" v-else>
          <div class="box_height" v-show="showList">
            <div v-if="detailData.type == 'content_dynamic'">
              <!-- 样式一行三列 -->
              <!-- <el-row :gutter="20">
                <el-col :span="8" v-for="items in listData" :key="items.id">
                  <contentDynamic :data="items.customData"></contentDynamic>
                </el-col>
              </el-row> -->
              <contentDynamic :data="listData"></contentDynamic>
            </div>
            <div v-else>
              <contentList
                v-for="item in listData"
                :key="item.id"
                :data="item.customData"
              ></contentList>
            </div>
          </div>
          <div v-show="!showList">
            <el-button type="primary" @click="showList = !showList"
              >返回</el-button
            >
            <contentWrap
              class="news_content"
              :data="customDataInfo"
            ></contentWrap>
          </div>
          <div
            style="text-align: center"
            class="pagination"
            v-if="showList && detailData.type != 'content_dynamic'"
          >
            <page-nation
              :total="totals"
              @pageChange="pageChange"
              :defaultPage.sync="currentPage"
              :pageSizes="pageSizes"
            ></page-nation>
          </div>
          <!--样式一行三列的分页  -->
          <div
            style="text-align: center"
            class="pagination"
            v-if="showList && detailData.type == 'content_dynamic'"
          >
            <page-nation
              :total="totals2"
              @pageChange="pageChange2"
              :defaultPage.sync="currentPage2"
              :pageSizes="pageSizes2"
            ></page-nation>
          </div>
        </div>
      </div>
    </template>
    <!-- 竖向排列 -->
    <template v-else>
      <div class="out_box">
        <div class="left_box">
          <ul>
            <li
              v-for="(item, index) in typeList"
              :key="index"
              :class="{ active: activeIndex == index }"
              @click="changeTab(item, index)"
              :title="item.title"
            >
              <div class="textSide">{{ item.title }}</div>
              <div class="iconSide" v-if="isEditModel">
                <el-tooltip content="修改" placement="bottom" effect="light">
                  <i
                    class="el-icon-edit"
                    @click.stop="editTab(item, index)"
                    style="margin-left:8px"
                  ></i>
                </el-tooltip>
                <el-tooltip content="删除" placement="bottom" effect="light">
                  <i
                    class="el-icon-delete"
                    @click.stop="removeTab(item, index)"
                    style="margin-left:10px"
                  ></i>
                </el-tooltip>
                <!-- <i class="el-icon-arrow-right right-icon"></i> -->
              </div>
            </li>
          </ul>
          <el-button class="addbtn" @click="addbtn" v-if="isEditModel">
            <el-tooltip content="新增" placement="bottom" effect="light">
              <i class="el-icon-plus" style="margin-left:8px"></i>
            </el-tooltip>
          </el-button>
        </div>
        <div class="right_box">
          <div class="news_title">
            <p class="split_line"></p>
            <p class="titleText">{{ detailData.title }}</p>
          </div>
          <contentWrap
            v-if="detailData.contentsType == 'text'"
            class="news_content"
            :data="customData"
          ></contentWrap>
          <div class="news_content" v-else>
            <div class="box_height" v-show="showList">
              <div v-if="detailData.type == 'content_dynamic'">
                <!-- 样式一行三列 -->
                <!-- <el-row :gutter="20">
                  <el-col :span="8" v-for="items in listData" :key="items.id">
                    <contentDynamic :data="items.customData"></contentDynamic>
                  </el-col>
                </el-row> -->
                <contentDynamic :data="listData"></contentDynamic>
              </div>
              <div v-else>
                <contentList
                  v-for="item in listData"
                  :key="item.id"
                  :data="item.customData"
                ></contentList>
              </div>
            </div>
            <div v-show="!showList">
              <el-button type="primary" @click="showList = !showList"
                >返回</el-button
              >
              <contentWrap
                class="news_content"
                :data="customDataInfo"
              ></contentWrap>
            </div>
            <div
              style="text-align: center"
              class="pagination"
              v-if="showList && detailData.type != 'content_dynamic'"
            >
              <page-nation
                :total="totals"
                @pageChange="pageChange"
                :defaultPage.sync="currentPage"
                :pageSizes="pageSizes"
              ></page-nation>
            </div>
            <!--样式一行三列的分页  -->
            <div
              style="text-align: center"
              class="pagination"
              v-if="showList && detailData.type == 'content_dynamic'"
            >
              <page-nation
                :total="totals2"
                @pageChange="pageChange2"
                :defaultPage.sync="currentPage2"
                :pageSizes="pageSizes2"
              ></page-nation>
            </div>
          </div>
        </div>
      </div>
    </template>
    <menu-add-two
      :dataObj="dataObj"
      :getWebIndex="data.webIndex"
      :activeIndex="activeIndex"
    ></menu-add-two>
  </div>
</template>

<script>
import _ from "lodash";
import pageNation from "../common/PageNation";
import contentDynamic from "./components/custom-content_list/content_dynamic2.vue";
import contentList from "./components/custom-content_list/index.vue";
import contentWrap from "./components/custom-content_wrap/index.vue";
import menuAddTwo from "../common/menuAddTwo.vue";
import { getMenuContents } from "../../apis/modules/aboutNhl.js";
export default {
  props: ["data"],
  inject: ["initMenu", "getMenu", "clickTab"],
  provide() {
    return {
      changeTab: this.changeTab,
    };
  },
  data() {
    return {
      activeIndex: 0,
      arrangeWay: "",
      isEditModel: false, //是否是编辑模式,true则显示新增按钮
      typeList: [],
      detailData: {
        title: "",
        contentsType: "text",
      },
      customData: {
        content: "",
        type: "",
      },
      customDataInfo: {
        content: "",
        type: "",
      },
      loadingCustom: false,
      listData: [],
      showList: true,
      pageSizes: [10, 30, 50, 120], //控制每页显示的条数
      pageSizes2: [18, 27, 36, 72], //控制每页显示的条数,适用一行显示三个
      currentPage: 1,
      currentPage2: 1, //一行三列
      totals: 1,
      totals2: 1, //一行三列
      pageSize: 10,
      pageSize2: 18, //一行三列
      selectItem: {},
      dataObj: {
        isShowDialog: false,
        title: "",
        menuTabList: [],
        item: {},
      },
    };
  },
  computed: {},
  components: {
    pageNation,
    contentDynamic,
    contentList,
    contentWrap,
    menuAddTwo,
  },
  methods: {
    addbtn() {
      this.dataObj.isShowDialog = true;
      this.dataObj.menuTabList = this.data;
      this.dataObj.title = "新增二级菜单";
      this.dataObj.item = this.data.NowMenuInfo;
      // console.log("this.dataObj.isShowDialog");
    },
    editTab(item, index) {
      this.dataObj.isShowDialog = true;

      this.dataObj.title = "修改二级菜单";
      this.dataObj.id = item.id || null;
      this.dataObj.parentId = this.data.NowMenuInfo.id;
      // console.log(this.dataObj.item, "dataObj.item editTab中");
      this.dataObj.item = item;
      this.dataObj.index = index;
    },

    removeTab(item, index) {
      // 删除二级菜单
      this.$confirm("是否删除?点击确定将删除该菜单", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //后端太懒,先这样
          let data = {
            id: item.id,
            title: item.title,
            intro: item.intro,
            background: "",
            arrangeWay: item.arrangeWay,
            menuType: "index",
            client: "Web",
            areaCode: localStorage.getItem("areaCode") || "",
            parentId: "",
            menuChildList: item.children,
            contentsType: "text",
            menuContents: "",
            del: 1, //del为1说明是删除
            userId: null,
            roleId: null,
            url: "",
            icon: "",
            name: "",
            component: "",
            parameter: "",
            imageUrl: "",
            memberId: "",
            industry: "",
            showOrder: item.showOrder,
            createTime: "",
            updateTime: "",
          };
          // console.log(item, "二级item", data, "data");
          this.$apis.menuConfig.menuConfig(data).then((res) => {
            if (res.status === 0) {
              // this.currentIndex = index - 1;
              this.currentIndex = 0;
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.asyncInitMenu();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async asyncInitMenu() {
      await this.initMenu();
      this.clickTab(this.data.webIndex);
      this.typeList = this.data.NowMenuInfo.children;
      this.activeIndex = 0;
    },
    //竖向切换走这里
    changeTab(item, index) {
      this.showList = true;
      this.activeIndex = index;
      this.currentPage = 1;
      this.currentPage2 = 1;
      this.pageSize = 10;
      this.pageSize2 = 18;
      this.selectItem = item;
      // console.log("竖向select", this.selectItem);
      this.getMenuContentsFn();
    },
    getMenuFn() {
      this.typeList = this.data.NowMenuInfo.children;
      this.arrangeWay = this.data.NowMenuInfo.arrangeWay;
      this.isEditModel = this.data.NowMenuInfo.isEditModel || false;

      if (this.typeList.length) {
        //初始化加载第一个子级
        let oneData = _.cloneDeep(this.data.NowMenuInfo.children[0]);
        if (oneData.contentsType == "text") {
          oneData.content = oneData.menuContents;
          this.customData.content = oneData.content;
          this.customData.type = oneData.type;
          this.customData.title = oneData.title;
        } else {
          let listData = this.data.NowMenuInfo.menuContents;
          listData.forEach((el) => {
            el.paramInfo = JSON.parse(el.paramInfo);
            el.customData = {
              content: el.contents,
              id: el.id,
              type: el.type,
              tip: el.paramInfo[0].description || "",
              image: el.paramInfo[0].image || "",
              title: el.paramInfo[0].title || "",
              selectTitle: this.titleFn,
            };
          });
          this.totals = this.data.NowMenuInfo.total;
          this.totals2 = this.data.NowMenuInfo.total;
          this.listData = listData;
        }
        this.detailData = {
          title: this.data.NowMenuInfo.children[0].title,
          contentsType: oneData.contentsType,
          type: oneData.type,
        };
      }
    },
    titleFn(item) {
      this.customDataInfo.content = item.content;
      this.customDataInfo.type = "content_wrap";
      this.showList = false;
    },
    pageChange(pageNum) {
      this.currentPage = pageNum.page;
      this.pageSize = pageNum.pageSize;
      this.getMenuContentsFn();
    },
    // 分页为9,18...
    pageChange2(pageNum) {
      this.currentPage2 = pageNum.page;
      this.pageSize2 = pageNum.pageSize;
      this.getMenuContentsFn();
    },
    //点击切换二级菜单,加载对应内容
    getMenuContentsFn() {
      // console.log(this.selectItem, "selectItem getMenuContentsFn 看id");
      let item = this.selectItem;
      if (item) {
        var params = {
          menuId: item.id,
        };

        let type = "";
        this.typeList.forEach((items, index) => {
          if (index == this.activeIndex) {
            type = items.type;
          }
        });
        //一行一列样式列表,分页为10,30...
        if (item.contentsType != "text" && type != "content_dynamic") {
          params.page = this.currentPage;
          params.pageSize = this.pageSize;
        }
        // 一行一列样式列表,分页为9,18...
        if (item.contentsType != "text" && type == "content_dynamic") {
          params.page = this.currentPage2;
          params.pageSize = this.pageSize2;
        }
        getMenuContents(params).then((res) => {
          const { status, data } = res;
          if (status === 0) {
            if (data.contentsType == "text") {
              data.content = data.menuContents;
              this.customData.content = data.content;
              this.customData.type = data.type;
            } else {
              let listData = data.menuContents;
              // console.log(
              //   "listData (resdata.menuContents)初始",
              //   data.menuContents
              // );
              listData.forEach((el) => {
                el.paramInfo = JSON.parse(el.paramInfo);
                el.customData = {
                  content: el.contents,
                  id: el.id,
                  type: el.type,
                  tip: el.paramInfo[0].description || "",
                  image: el.paramInfo[0].image || "",
                  title: el.paramInfo[0].title || "",
                  selectTitle: this.titleFn,
                };
              });
              this.totals = data.total;
              this.totals2 = data.total;
              this.listData = listData;
              // console.log("listData 整理后;", listData);
            }
            this.detailData = {
              title: item.title,
              contentsType: data.contentsType,
              type: data.type,
            };
          }
        });
      }
    },
  },
  watch: {
    "data.webIndex": {
      handler(value) {
        if (value) {
          // this.getMenu();
          this.getMenuFn();
        }
      },
      immediate: true,
    },
    //横向点击二级菜单走这里,竖向走changeTab()
    "data.childIndex": {
      handler(value) {
        if (value) {
          // console.log("走横向的childIndex:", value, "this.selectItem:",this.selectItem);
          this.showList = true;
          this.currentPage = 1;
          this.currentPage2 = 1;
          this.pageSize = 10;
          this.pageSize2 = 18;
          this.typeList = this.data.NowMenuInfo.children;
          this.selectItem = this.typeList[value];
          this.getMenuContentsFn();
        }
      },
      immediate: true,
    },
    "data.NowMenuInfo": {
      handler(value, oldvalue) {
        //这里是因为修改二级菜单时不会更改data.childIndex(即当前选中值),为了补充data.childIndex的监听
        // console.log("看看传进来的data.NowMenuInfo -监听NowMenuInfo", value);
        this.showList = true;
        this.currentPage = 1;
        this.currentPage2 = 1;
        this.pageSize = 10;
        this.pageSize2 = 18;
        this.$nextTick(() => {
          this.typeList = value.children;
          if (this.data.childIndex) {
            this.selectItem = this.typeList[this.data.childIndex];
          } else {
            this.selectItem =
              // this.typeList[this.dataObj.index] || this.typeList[0];
              this.typeList[this.activeIndex] || this.typeList[0];
          }
          //删除所有二级节点会发现内容还是原有的第一个(这时this.selectItem值为undefined),所以把内容置空
          if (!this.selectItem) {
            // console.log("当selectItem不存在", this.selectItem);
            this.detailData = {
              title: "",
              contentsType: "text",
              type: "content_wrap",
            };

            this.customData = {
              content: "",
              type: "",
            };
            this.customDataInfo = {
              content: "",
              type: "",
            };
          }
          // console.log(
          //   this.typeList,
          //   "data.NowMenuInfo监听typeList",
          //   this.data.childIndex,
          //   "childIndex",
          //   this.selectItem,
          //   "this.selectItem"
          // );
          this.getMenuContentsFn();
        });
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>
<style type="text/css">
[v-cloak] {
  display: none !important;
}
</style>
<style scoped lang="scss">
.website-aboutNhl {
  .out_box {
    min-height: 576px;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
    display: flex;
    .left_box {
      width: 300px;
      min-height: 501px;
      height: auto;
      border-right: 1px solid rgba(222, 222, 222, 1);
      box-sizing: border-box;
      .addbtn {
        height: 50px;
        width: 200px;
        background: #20b75e;
        color: #fff;
        margin-left: 40px;
        /deep/ .el-icon-plus {
          font-weight: bold;
        }
      }
      li {
        height: 60px;
        line-height: 60px;
        font-size: 16px;
        color: #666666;
        cursor: pointer;
        white-space: nowrap;
        display: flex;
        justify-content: center;
        align-items: center;
        // overflow: hidden;
        // text-overflow: ellipsis;
        padding: 0 30px;
        position: relative;
        border-left: 5px solid transparent;
        padding-right: 20px;
        .textSide {
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .iconSide {
          height: 60px;
        }
        &::after {
          content: "";
          display: block;
          visibility: visible;
          position: absolute;
          left: 30px;
          right: 30px;
          bottom: 0;
          height: 1px;
          background: rgba(222, 222, 222, 1);
        }
        // .right-icon {
        // float: right;
        // margin-top: 22px;
        // }
        &.active {
          color: #16a952;
          font-weight: bold;
          background: rgb(203, 231, 218);
          border-left: 5px solid #16a952;
          // .right-icon {
          //   color: #16a952;
          //   font-weight: bold;
          // }
        }
      }
    }
    .right_box {
      flex: 1;
      overflow: hidden;
      .news_title {
        font-size: 20px;
        color: #333333;
        height: 80px;
        line-height: 80px;
        text-align: center;
        background: #f5f5f5;
        font-weight: 600;
        position: relative;
        .split_line {
          width: 750px;
          height: 2px;
          background: #999999;
          margin: 0 auto;
          position: absolute;
          top: 39px;
          left: 50%;
          transform: translateX(-50%);
        }
        .titleText {
          position: absolute;
          min-width: 140px;
          max-width: 700px;
          width: auto;
          padding: 0 10px;
          line-height: 24px;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          background: #f5f5f5;
        }
      }
      .news_content {
        padding: 30px;
        line-height: 30px;
        box-sizing: border-box;
        font-size: 14px;
        color: #666666;
      }
    }
  }
}
/deep/.content_wrap {
  img {
    display: inline-block;
    max-width: 100% !important;
  }
  table {
    width: 100% !important;
  }
}
</style>
