<template>
  <main :class="['aui-content', { 'aui-content--tabs': $route.meta.isTab }]">
    <!-- tab展示内容 -->
    <template v-if="$route.meta.isTab && !$store.state.inIframe">
      <el-dropdown class="aui-content--tabs-tools">
        <i class="el-icon-arrow-down"></i>
        <el-dropdown-menu slot="dropdown" :show-timeout="0">
          <el-dropdown-item
            @click.native="tabRemoveHandle($store.state.contentTabsActiveName)"
            >{{ $t("contentTabs.closeCurrent") }}</el-dropdown-item
          >
          <el-dropdown-item @click.native="tabsCloseOtherHandle()">{{
            $t("contentTabs.closeOther")
          }}</el-dropdown-item>
          <el-dropdown-item @click.native="tabsCloseAllHandle()">{{
            $t("contentTabs.closeAll")
          }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-tabs
        v-model="$store.state.contentTabsActiveName"
        @tab-click="tabSelectedHandle"
        @tab-remove="tabRemoveHandle"
      >
      <!-- item.name !== 'indexWork', -->
        <el-tab-pane
          v-for="item in $store.state.contentTabs"
          :key="item.name"
          :name="item.name"
          :label="item.title"
          :closable=" item.name !== 'home'"
          :class="{ 'is-iframe': tabIsIframe(item.iframeURL) }"
        >
          <template v-if="tabIsIframe(item.iframeURL)">
            <iframe
              :src="
                item.iframeURL + '?token=' + token + '&customerId=' + customerId
              "
              ref="iframes"
              class="iframes"
              id="iframes"
              width="100%"
              height="100%"
              frameborder="0"
              scrolling="yes"
            ></iframe>
            <!-- <div v-if="tabIsIframe(item.iframeURL)" id="addend-iframe" style="height: 100%;"> </div> -->
          </template>
          <keep-alive v-else>
            <router-view
              v-if="item.name === $store.state.contentTabsActiveName"
              @changeCustomerName="changeCustomerName"
            />
          </keep-alive>
        </el-tab-pane>
      </el-tabs>
    </template>
    <!-- 其他方式, 展示内容 -->
    <template v-else>
      <keep-alive>
        <router-view />
      </keep-alive>
    </template>

    <template v-for="(item, index) in msgList">
      <Tips
        :key="item.memoId"
        :info="item"
        :show="msgList.length > 0 ? true : false"
        @look="handleLook(item, index)"
        @close="handleClose(item, index)"
      />
    </template>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      top="5vh"
      width="950px"
      class="dialog-h"
      append-to-body
    >
      <work-form
        v-if="formType == 'work_diary'"
        ref="ref_form"
        @dialogCancle="
          dialogFormVisible = false;
          formType = '';
        "
      />

      <h-form
        v-if="formType == 'concern'"
        ref="concern_form"
        @dialogCancle="
          dialogFormVisible = false;
          formType = '';
        "
      />

      <d-form
        v-if="formType == 'difficulty'"
        ref="difficulty_form"
        @dialogCancle="
          dialogFormVisible = false;
          formType = '';
        "
      />
    </el-dialog>
  </main>
</template>

<script>
import { isURL } from "@/utils/validate";
import Cookie from "js-cookie";
import Tips from "./tips.vue";
import { requestPost } from "@/js/dai/request";
import workForm from "./modules/secretaryLog/workLog/form.vue";
import dForm from "./modules/secretaryLog/difficulty/difficultyForm.vue";
import hForm from "./modules/secretaryLog/humanisticCare/careForm.vue";
export default {
  components: {
    Tips,
    workForm,
    dForm,
    hForm,
  },
  data() {
    return {
      dialogTitle: "",
      dialogFormVisible: false,
      iframeUrl: "",
      token: "",
      customerId: "",
      form: {},
      formType: "",
      formLabelWidth: "120px",
      tipsList: [],
    };
  },
  created() {
    // this.$nextTick(() => {
    //   this.sendMessage()
    // })
    this.token = localStorage.getItem("token");
    this.customerId = localStorage.getItem("customerId");

    this.loopTips();
  },
  destroyed() {
    this.$store.dispatch("clearInter");
  },
  computed: {
    msgList() {
      return this.$store.state.tipsList;
    },
  },
  methods: {
    toPage(path) {
      if (path) {
        this.$router.push({
          path,
        });
      }
    },
    changeCustomerName(customerName) {
      this.$emit("changeCustomerName", customerName);
    },
    // tabs, 是否通过iframe展示
    tabIsIframe(url) {
      // this.appendIframe(url)
      this.iframeUrl =
        url +
        "?token=" +
        localStorage.getItem("token") +
        "&customerId=" +
        localStorage.getItem("customerId");
      return isURL(url);
    },
    // tabs, 选中tab
    tabSelectedHandle(tab) {
      tab = this.$store.state.contentTabs.filter(
        (item) => item.name === tab.name
      )[0];
      if (tab) {
        this.$router.push({
          name: tab.name,
          params: { ...tab.params },
          query: { ...tab.query },
        });
      }
    },
    // tabs, 删除tab
    tabRemoveHandle(tabName) {
      if (tabName === "home") {
        return false;
      }
      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
        (item) => item.name !== tabName
      );
      if (this.$store.state.contentTabs.length <= 0) {
        this.$store.state.sidebarMenuActiveName =
          this.$store.state.contentTabsActiveName = "home";
        return false;
      }
      // 当前选中tab被删除
      if (tabName === this.$store.state.contentTabsActiveName) {
        let tab =
          this.$store.state.contentTabs[
            this.$store.state.contentTabs.length - 1
          ];
        this.$router.push({
          name: tab.name,
          params: { ...tab.params },
          query: { ...tab.query },
        });
      }
    },
    // tabs, 关闭其它
    tabsCloseOtherHandle() {
      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
        (item) => {
          return (
            item.name === "home" ||
            item.name === this.$store.state.contentTabsActiveName
          );
        }
      );
    },
    // tabs, 关闭全部
    tabsCloseAllHandle() {
      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
        (item) => item.name === "home"
      );
      this.$router.push({ name: "home" });
    },
    sendMessage() {
      // const iframe = this.$refs.iframes.contentWindow
      const iframe =
        document.getElementsByClassName("iframes")[0].contentWindow;

      console.log("iframe", iframe);
      // iframe.postMessage({
      //   token: localStorage.getItem('token'),
      //   customerId: localStorage.getItem('customerId')
      // }, '*')
      iframe.postMessage({ name: "lalalal" }, "*");
    },
    loopTips() {
      this.$store.dispatch("setTipsList");
      this.$store.dispatch("setTipsTime");
      // let id = 1
      // this.timer = setInterval(() => {
      //   id = id + 1
      //   if (id == 5) clearInterval(this.timer)
      //   this.tipsList.push(id)
      //   console.log('id------0', id)
      // }, 1000)
    },
    async closeTips(memoId) {
      const url = "/governance/memoAttr/setReaded";
      const params = {
        memoId,
      };
      const { data, code, msg } = await requestPost(url, params);
      if (code != 0) this.$message.error(msg);
    },
    async getInfo(item) {
      const urls = {
        work_diary: "/governance/memoWorkDiary",
        concern: "/governance/memoConcern",
        difficulty: "/governance/memoDifficulty/detail",
      };
      const params = {
        id: item.memoId,
        readFlag: 0,
      };
      const { data, code, msg } = await requestPost(urls[item.type], params);
      if (code == 0) {
        this.form = { ...data };
      } else this.$message.error(msg);
    },
    handleClose(item, index) {
      console.log("close-----", item);
      this.$store.state.tipsList.splice(index, 1);
      this.closeTips(item.memoId);
    },
    async handleLook(item, index) {
      console.log("look-----", item);
      const formType = {
        work_diary: "ref_form",
        concern: "concern_form",
        difficulty: "difficulty_form",
      };
      this.dialogTitle = item.typeName;
      // await this.getInfo(item)
      this.formType = item.type;
      this.dialogFormVisible = true;

      console.log("ref0-----", this.formType);
      this.$nextTick(() => {
        console.log("this.$refs-----", this.$refs);
        this.$refs[formType[item.type]].initForm("look", item.memoId);
        this.$store.state.tipsList.splice(index, 1);
        this.closeTips(item.memoId);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/scss/c/function.scss";
.aui-content {
  position: relative;
  // height: calc(100vh -50px) !important;
  overflow: hidden;
}
</style>
