<template>
  <div class="header">
    <div class="left">
      <i class="iconfont icon-xiangzuo-moren"
         @click="backHome"></i>
      <div class="question-name">{{ project_name }}</div>
    </div>
    <div class="tab-container">
      <div class="tab-item"
           v-for="(tab, index) in tabs"
           :key="index"
           :class="[tab.link === currentPath ? 'active' : '']"
           @click="toPage(tab.link, tab.title)">
        <span :class="tab.link === currentPath ? 'click' : 'click2'">{{ index+1 }}</span>
        <span>{{ tab.title }}</span>
        <span v-if="index!=3"
              style="width:54px;margin:0 10px;border-top: 1px dashed #C4C0C0;"></span>
      </div>
    </div>
    <div class="right"
         v-if="showPreview || isRenderBtn || showShare">
      <template v-if="!showLoading">
        <div v-show="showPreview"
             class="preview-btn"
             @click="toPreview">
          <i class="iconfont icon-yulan"></i>
          <span style="margin-left: 6px;width: 29px;">预览</span>
        </div>
        <a-button v-show="!showPublish && isRenderBtn"
                  type="primary"
                  class="publish-btn"
                  @click="openPublishModal">
          <template #icon>
            <i class="iconfont icon-Path"
               style="font-size: 15px; margin-right: 6px"></i>
          </template>
          发布
        </a-button>
      </template>
      <template v-else>
        <div style="display: flex; align-items: center;">
          <a-spin size="small" style="padding-left: 40px;"/>
          <span style="margin-left: 10px;width: 90px;">正在保存中...</span>
        </div>
      </template>
      <a-button type="primary"
                class="publish-btn share-button"
                @click.stop="clickEntrance">
        <template #icon>
          <i class="iconfont icon-fenxiang"
             style="font-size: 15px; margin-right: 6px"></i>
        </template>
        分享
      </a-button>
      <a-button type="primary"
                class="download-btn share-button"
                @click.stop="toDownload"
                v-if="showDownload">
        <template #icon>
          <img class="download_img"
               :src="require('@/assets/img/download_center.png')" />
        </template>
        下载中心
      </a-button>
      <!-- <Avatar :onlyUserShow="false" /> -->
    </div>
    <div class="right"
         v-if="!showPreview && !isRenderBtn && !showShare">
      <a-button type="primary"
                class="publish-btn share-button"
                @click.stop="clickEntrance">
        <template #icon>
          <i class="iconfont icon-fenxiang"
             style="font-size: 15px; margin-right: 6px"></i>
        </template>
        分享
      </a-button>
      <a-button type="primary"
                class="download-btn share-button"
                @click.stop="toDownload"
                v-if="showDownload">
        <template #icon>
          <img class="download_img"
               :src="require('@/assets/img/download_center.png')" />
        </template>
        下载中心
      </a-button>
      <!-- <Avatar :onlyUserShow="false" /> -->
    </div>
  </div>
  <Group ref="groupInfo"
         :visible="visibleShare"
         :sn="sn"></Group>
  <div class="big_box"
       @click.stop="visibleShare = false"
       v-show="visibleShare"
       style="z-index: 1"></div>

  <a-modal v-model:visible="visible"
           @ok="handlePublish">
    <div class="content">
      <div class="tips">
        <div class="iconfont icon-tixing"></div>
        <div>提示!</div>
      </div>
      <div class="text">确定发布该问卷吗？</div>
    </div>
  </a-modal>
  <!-- 下载中心 -->
  <DownloadCenter v-model:visible="downloadVisible" v-if="downloadVisible"></DownloadCenter>
</template>

<script setup>
import { ref, computed, onMounted, createVNode } from "vue";
import { useRouter, useRoute } from "vue-router";
import useEmitter from "@/composables/useEmitter";
import { publishSurvey, getSurveyInfo } from "@/api/publish";
import { useStore } from "vuex";
import {
  ExclamationCircleFilled,
  ShareAltOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
import Group from "./components/Group/Group.vue";
import Avatar from "@/views/Home/components/Avatar.vue";
import { tr } from "element-plus/lib/locale";
import { Modal } from "ant-design-vue";
import { cloneDeep } from "lodash";
import DownloadCenter from "@/views/DownloadCenter/index.vue";
import { canPlanetPublish } from "./utils";

const router = useRouter();
const route = useRoute();
const store = useStore();
const emitter = useEmitter();
const publish_type = 0;
const sn = route.query.sn;
const tabs = ref([
  {
    title: "问卷设计",
    link: "/survey/planet",
  },
  {
    title: "问卷投放",
    link: "/survey/publish",
  },
  {
    title: "执行进度",
    link: "/survey/schedule/recycle",
  },
  {
    title: "数据分析",
    link: "/survey/analyse",
  },
]);
const getParentNode = () => {
  return document.querySelector(".header");
};
const visible = ref(false);
const project_name = ref("");
const currentPath = computed(() => {
  const matches = route.matched.map((item) => item.path);
  if (!matches) {
    return "";
  }
  let paths = cloneDeep(matches);

  const links = tabs.value.map((item) => item.link);
  let nearestPath = "";
  while (paths.length > 0) {
    const pop = paths.pop();
    if (links.includes(pop)) {
      nearestPath = pop;
    }
  }
  return nearestPath;
});

const toJump = (url) => {
  router.push(url);
};

const toTeamCenter = () => {
  toJump("/team-manage/team-center");
};

const isRenderBtn = computed(() => {
  // return currentPath.value.includes('design')
  return (
    route.matched.some((item) => item.meta?.showPublish) &&
    (store.state.common.surveyStatus !== 1 || route.path !== "/survey/planet/answer-setting")
  );
});

const showPreview = computed(() => {
  return route.matched.some((item) => item.meta?.showPreview);
});

const showDownload = computed(() => {
  return route.matched.some((item) => item.meta?.showDownload);
});

const showShare = computed(() => {
  return route.matched.some((item) => item.meta?.showShare);
});

const showPublish = computed(() => {
  return store.state.common.surveyStatus;
});

const showLoading = computed(() => {
  if (store.state.common.websocket.param !== undefined) {
    return !store.state.common.websocket.param.is_cache;
  }
  return false;
});
const toPage = (path, title) => {
  router.push({
    path,
    query: route.query,
  });
  document.title = title;
};

const toPreview = async () => {
  var res = await canPlanetPublish(route.query.sn);
  if (res) {
    router.push({
      path: "/preview",
      query: route.query,
    });
    document.title = name;
  }
};

const openPublishModal = async () => {

  var res = await canPlanetPublish(route.query.sn);

  if(res){
    visible.value = true;
    return;
  }

  // //console.log();
  // //  return;
  // let isFb = true;
  // let content = "";
  // const qSteams = [];
  // let type = 0;
  // let title = "推荐提示";
  // store.state.common.questionInfo.questions &&
  //   store.state.common.questionInfo.questions.forEach((s) => {
  //     if (s.question_type === 105 && s.config.design_version <= 0) {
  //       isFb = false;
  //       content = createVNode(<div>maxdiff未生成设计，请先进行生成设计才能进行发布</div>);
  //       title = "推荐提示";
  //       type = 1;
  //     }
  //     if (s.question_type === 25 || s.question_type === 26) {
  //       if ((s.options?.[0]?.length || 0) <= 0 && (s?.associate?.length || 0) <= 0) {
  //         isFb = false;
  //         qSteams.push(`(${s.title})`);
  //         type = 2;
  //       }
  //     }
  //   });

  // if (isFb === true) {
  //   visible.value = true;
  // } else {
  //   if (type === 2) {
  //     const titleStr = qSteams.join(",");
  //     title = "添加选区";
  //     content = createVNode(<div>{titleStr} 未添加选区，请添加选区后进行发布</div>);
  //   }
  //   Modal.confirm({
  //     title: title,
  //     icon: createVNode(ExclamationCircleOutlined),
  //     content: content,
  //     onOk () { },
  //     width: "640px",
  //     height: "364px",
  //     onCancel () { },
  //     class: "test",
  //   });
  // }
};

const handlePublish = () => {
  publishSurvey({
    sn,
    publish_type,
  }).then((res) => {
    visible.value = false;
    store.commit("common/M_COMMON_SET_SURVEY_STATUS", 1);
    router.push({
      path: "/survey/publish",
      query: {
        sn,
        is_publish: true, //添加标识
      },
    });
  });
};

const backHome = () => {
  router.push("/home");
  document.title = "智能调研工具";
};

const fetchInfo = () => {
  getSurveyInfo(sn).then((res) => {
    project_name.value = res.data.project_name;
    store.commit("common/M_COMMON_SET_SURVEY_NAME", res.data.project_name);
    store.commit("common/M_COMMON_SET_SURVEY_STATUS", res.data.status);
  });
};

const visibleShare = ref(false);
// 展示分享入口
const clickEntrance = () => {
  console.log("展示入口");
  visibleShare.value = true;
};
const groupInfo = ref(null);

const downloadVisible = computed(() => {
  return store.state.downloadCenter.isShow;
});
// 下载中心
const toDownload = () => {
  console.log("下载中心");
  store.dispatch('downloadCenter/changeCenterUrl', route.path)
  // downloadVisible.value = true
  store.dispatch('downloadCenter/changeCenterShow',true)
  // router.push({
  //   path: "/downloadCenter",
  //   query: { path: route.path, sn },
  // });
};
onMounted(() => {
  fetchInfo();
});
</script>

<style lang="scss" scoped>
.header {
  box-sizing: border-box;
  padding: 0 34px;
  height: 70px;
  display: flex;
  align-items: center;
  background: #fff;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
  .left,
  .right {
    display: flex;
    align-items: center;
    width: 40%;
    .question-name {
      margin-left: 17px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #434343;
    }
    .icon-xiangzuo-moren {
      cursor: pointer;
      font-size: 10px;
    }
  }
  .tab-container {
    width: 60%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .tab-item {
      position: relative;
      width: auto;
      height: 100%;
      display: flex;
      align-items: center;
      font-size: 16px;
      color: #434343;
      white-space: nowrap;
      font-family: PingFangSC-Regular, PingFang SC;
      cursor: pointer;
      &.active {
        font-size: 20px;
        color: #70b936;
        font-weight: 500;
        font-family: PingFangSC-Semibold, PingFang SC;
        .click {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 18px;
          height: 18px;
          line-height: 9px;
          border-radius: 60%;
          background-color: #70b936;
          color: #fff;
        }
        .click2 {
          width: 18px;
          height: 18px;
          line-height: 9px;
          border-radius: 60%;
          background-color: #f5f5f5;
          color: black;
          text-align: center;
        }
      }
    }
  }
  .right {
    justify-content: flex-end;
  }
  .preview-btn {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #646a73;
    cursor: pointer;
  }
  .preview-btn:hover {
    color: #70b936;
  }
  .publish-btn {
    margin-left: 20px;
    height: 36px;
    line-height: 18px;
    border-radius: 6px;
  }
  .download-btn {
    margin-left: 32px;
    // width: 88px;
    height: 36px;
    line-height: 18px;
    border-radius: 6px;
  }
  .share-button {
    margin-left: 20px;
  }
  .head-portrait {
    width: 32px;
    height: 32px;
    background: #70b936;
    border-radius: 50%;
    opacity: 1;
    margin-left: 32px;
    color: #fff;
    font-size: 12px;
    font-family: PingFang SC-中粗体, PingFang SC;
    font-weight: normal;
    text-align: center;
    line-height: 32px;
  }
  &::v-deep .ant-dropdown-menu-item {
    padding: 0;
  }
}

.ant-dropdown-menu {
  margin: 0;
}
.ant-dropdown-placement-bottomRight {
  height: 398px;
}
.head-portrait-menu {
  width: 360px;
  height: 398px;
  margin-top: 26px;
  .wai {
    width: auto;
    // height: 398px;
    .one {
      width: 296px;
      height: 124px;
      border-bottom: 1px solid #e8e8e8;
      margin-left: 32px;
      display: flex;
      .leftt {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: #70b936;
        opacity: 1;
        margin-top: 32px;
        text-align: center;
        line-height: 60px;
        color: #fff;
      }
      .rightt {
        width: 60px;
        height: 60px;
        margin-left: 12px;
        margin-top: 39px;
        .wenzi {
          font-size: 16px;
          font-family: PingFang SC-中粗体, PingFang SC;
          font-weight: 700;
        }
      }
    }
    .two {
      width: 296px;
      height: 124px;
      border-bottom: 1px solid #e8e8e8;
      margin-left: 32px;
      overflow: hidden;
      .homepage {
        font-size: 16px;
        margin-top: 32px;
        font-weight: 700;
      }
      .team-members {
        font-size: 16px;
        margin-top: 32px;
        // margin-bottom: 16px;
        font-weight: 700;
      }
    }
    .three {
      width: 296px;
      height: 124px;
      margin-left: 32px;
      // overflow: hidden;
      .switch-team {
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        margin-top: 32px;
        font-weight: 700;
      }
      .log-out {
        font-size: 16px;
        margin-top: 32px;
        font-weight: 700;
      }
    }
  }
}
.tips {
  display: flex;
  align-items: center;
  .icon-tixing {
    margin-right: 8px;
    color: #fbad13;
    font-size: 14px;
    font-weight: bold;
  }
}
.text {
  margin-top: 12px;
}
.big_box {
  width: 100%;
  height: calc(100% + 70px);
  position: fixed;
  top: 0;
  // background-color: #000;
}
.iconfont {
  transform-origin: right;
}
.icon-chexiao {
  transform: rotateY(180deg);
}
.download_img {
  width: 16px;
  height: 14px;
  margin-right: 6px;
}
.click {
  width: 18px;
  height: 18px;
  font-size: 12px;
  line-height: 9px;
  border-radius: 60%;
  background-color: #70b936;
  color: #fff;
  text-align: center;
  margin-right: 8px;
}
.click2 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  line-height: 9px;
  font-size: 12px;
  border-radius: 60%;
  background-color: #f5f5f5;
  margin-right: 8px;
}
</style>
