<template>
  <!-- 项目首页 -->
  <div class="fullHeight">
    <vhead
      :titleName="projectName"
      :showR="true"
      v-if="!selectGroupDialog"
    ></vhead>
    <div class="content-part" v-if="!selectGroupDialog">
      <iframe
        id="myIframe"
        :src="
          `${$store.state.WORKFLOWURL}?token=${$store.state.userInfo.token}`
        "
        style="width: 100%; height: 100%; border: medium none"
        frameborder="1"
      ></iframe>
    </div>
    <!-- 选择组织 -->
    <el-dialog
      title="选择组织"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      :visible.sync="selectGroupDialog"
    >
      <div class="content-list">
        <div
          class="content-list-item"
          v-for="(item, index) in groupListData"
          :key="index"
          @click="selectedGroupData(item)"
        >
          <!-- <i class="el-icon-trophy-1"></i> -->
          <img src="@/assets/images/headerImg/icon3.png" />
          <span>{{ item.companyName }}</span>
          <i class="el-icon-arrow-right"></i>
        </div>
        <div class="content-list-item" @click="selectedGroupData()">
          <!-- <i class="el-icon-trophy-1"></i> -->
          <img src="@/assets/images/headerImg/icon4.png" />
          <span>{{ $store.state.userInfo.account }}</span>
          <div>个人租户</div>
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import vhead from "@/components/header";
import { getProjectDetail } from "@/assets/js/api/baseInfo.js";
import { getGroupListApi } from "@/assets/js/api/loginSign.js";
import {
  getAllModuleApi
} from "@/assets/js/api/jxjadmin.js";
export default {
  name: "workSpace",
  components: { vhead },
  data() {
    return {
      projectSn: "",
      projectName: "",
      selectGroupDialog: true,
      groupListData: [],
      selectedDataSn: "",
    };
  },
  created() {
    if (this.$store.state.selectedGroupSn) {
      this.selectGroupDialog = false;
    }
    this.getGroupTreeData();
  },
  methods: {
    // 查询全部模块(拿到工作流的模块菜单)
    async getModuleList() {
      const res = await getAllModuleApi({
        moduleType: 2,
        styleType: this.$store.state.userInfo.styleType,
      });
      console.log(res);
      this.$nextTick(() => {
        setTimeout(() => {
          let iframe = document.getElementById("myIframe");
          iframe.contentWindow.postMessage(
            {
              type: "emitData",
              data: JSON.stringify(this.$store.state.userInfo),
              // authMenuList: JSON.stringify(authStore.showMenuListGet),
            },
            "*"
          );
        }, 1000);
      });
    },
    // 默认选中已选中组织的第一个项目
    selectedDefaultProject(obj) {
      if (obj.list && obj.list.length > 0) {
        obj.list.map((item) => {
          this.selectedDefaultProject(item);
        });
      } else {
        this.projectSn = this.$store.state.projectSn || "";
        if (!this.projectSn) {
          // 加判断是为了在循环中只选中第一个
          this.projectSn = obj.sn;
          // 修改全局projectSn
          this.$store.commit("setProjectSn", obj.sn);
          this.getDataDateils();
        }
      }
    },
    // 点击选中组织
    selectedGroupData(item) {
      if (item) {
        this.selectedDataSn = item.sn;
        this.$store.commit("setSelectedGroupSn", item.sn); // 存储选中的组织Sn
        this.selectedDefaultProject(item);
      } else {
        let storeVal = this.$store.state.userInfo;
        this.selectedDataSn = storeVal.headquartersSn;
        this.$store.commit("setSelectedGroupSn", storeVal.headquartersSn); // 存储选中的组织Sn
        // this.selectedDefaultProject(storeVal.userInfo);
      }
      this.selectGroupDialog = false;
      this.getModuleList();
    },
    getGroupTreeData() {
      let data = {
        userId: this.$store.state.userInfo.userId,
      };
      getGroupListApi(data).then((res) => {
        // console.log(res);
        if (res.code == 200 && res.result) {
          this.groupListData = res.result;
          this.$store.commit("setGroupTreeList", res.result); // 存储组织树数据
        }
      });
    },
    //获取详情
    getDataDateils() {
      let data = {
        projectSn: this.projectSn,
      };
      getProjectDetail(data).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          this.projectName = res.result.projectName;
          document.title = this.projectName;
          this.$store.commit("setProDetail", res.result);
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.flexStyle() {
  display: flex;
  align-items: center;
}
.content-part {
  width: 100%;
  height: calc(100% - 60px);
  border: 1px solid #ccc;
  margin: 0 auto;
}
.content-list {
  &-item {
    .flexStyle();
    padding: 10px 15px;
    border: 1px solid #dadbdb;
    border-radius: 5px;
    cursor: pointer;
    img {
      width: 30px;
      height: 30px;
    }
    // >div{
    //   border: 1px solid #7299F8;
    //   border-radius: 5px;
    //   background-color: #E3F6FF;
    //   padding: 5px 15px;
    //   color: #5A88F7;
    // }
    > span:nth-child(2) {
      margin: 0px 15px 0px 10px;
    }
    > div {
      padding: 3px 10px;
      color: #79acfa;
      background-color: #e4f5ff;
      border: 1px solid #99c3fb;
      border-radius: 5px;
      margin-top: 2px;
      font-size: 10px;
    }
    /deep/.el-icon-arrow-right {
      margin-left: auto;
    }
  }
  &-item:not(:last-child) {
    margin-bottom: 10px;
  }
}
/deep/.el-dialog {
  width: 25%;
  .el-dialog__body {
    padding-top: 10px;
    padding-bottom: 15px;
  }
}
</style>
