<template>
  <div class="vue-admin-beautiful-wrapper" :class="classObj">
    <div
      v-if="'horizontal' === layout"
      class="layout-container-horizontal"
      :class="{
        fixed: header === 'fixed',
        'no-tags-bar': tagsBar === 'false' || tagsBar === false,
      }"
    >
      <div :class="header === 'fixed' ? 'fixed-header' : ''">
        <top-bar></top-bar>
        <div
          v-if="tagsBar === 'true' || tagsBar === true"
          :class="{ 'tag-view-show': tagsBar }"
        >
          <div class="vab-main">
            <tags-bar></tags-bar>
          </div>
        </div>
      </div>
      <div class="vab-main main-padding">
        <app-main></app-main>
      </div>
    </div>
    <div
      v-else
      class="layout-container-vertical"
      :class="{
        fixed: header === 'fixed',
        'no-tags-bar': tagsBar === 'false' || tagsBar === false,
      }"
    >
      <div :class="header === 'fixed' ? 'fixed-header' : ''">
        <nav-bar
          :cur-selected-index="curSelectedIndex"
          @openModalFlag="openModalFlag"
        ></nav-bar>
      </div>
      <side-bar></side-bar>
      <div class="vab-main" :class="collapse ? 'is-collapse-main' : ''">
        <app-main></app-main>
      </div>
    </div>
    <back-to-top transition-name="fade"></back-to-top>
    <el-dialog
      custom-class="homeDialog"
      :title="''"
      :visible="modalFlag"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      width="70%"
      top="10vh"
    >
      <div class="modalContent">
        <div class="title">请选择您的筛查填报场景</div>
        <ul class="list">
          <li
            v-for="(item, index) in screeningList"
            :key="index"
            @click="selectedIndex = item.value"
          >
            <div class="screeningItem">
              <div class="circle">
                <img
                  v-if="selectedIndex !== item.value"
                  src="~@/assets/img/DataCenter/circle.png"
                  alt
                  srcset
                />
                <img
                  v-if="selectedIndex == item.value"
                  src="~@/assets/img/DataCenter/selected.png"
                  alt
                  srcset
                />
              </div>
              <div class="itemTitle">{{ item.title }}</div>
            </div>
            <div class="desc">
              {{ item.desc }}
            </div>
            <div class="ItemIamge">
              <img :src="item.src" alt />
            </div>
          </li>
        </ul>
        <div class="submit">
          <el-button type="primary" class="btn" @click="setSelectedIndex"
            >确定</el-button
          >
        </div>
        <div class="tips">
          注意，本系统筛查对象为：<br />
          无消化道症状（腹痛，腹泻，消化道出血等）的一般人群，住院及胃癌术后患者切勿上传至本系统，详细条件见入排标准。<br />
          <el-button type="text" @click="innerVisible = true"
            >点击查看详情</el-button
          >
        </div>
      </div>
      <el-dialog
        width="70%"
        custom-class="homeDialog"
        :title="''"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
        :visible.sync="innerVisible"
        append-to-body
        top="10vh"
      >
        <div class="innerBody">
          <div class="title">入排标准</div>
          <div class="innerTable">
            <div
              v-for="(item, index) in innerTable"
              :key="index"
              class="col_item"
            >
              <div
                class="left"
                :style="{ borderBottom: index == 0 ? '1px solid #eff0f3' : '' }"
              >
                {{ item.title }}
              </div>
              <div class="right">
                <div
                  v-for="(listItem, i) in item.list"
                  :key="i"
                  class="r_col_item"
                  :style="{
                    borderBottom:
                      index == innerTable.length - 1 &&
                      i == item.list.length - 1
                        ? ''
                        : '1px solid #eff0f3',
                  }"
                >
                  <img
                    v-if="index == 0"
                    src="@/assets/img/DataCenter/right.png"
                    alt=""
                  />
                  <img v-else src="@/assets/img/DataCenter/wrong.png" alt="" />

                  <template v-if="listItem.type == 'text'">
                    <span class="r_text">{{ listItem.value }}</span>
                  </template>
                  <template v-if="listItem.type == 'list'">
                    <div class="r_list">
                      <div class="r_list_title r_text">
                        {{ listItem.value.value }}
                      </div>
                      <ul>
                        <li
                          v-for="listItem_item in listItem.value.list"
                          :key="listItem_item"
                        >
                          ● {{ listItem_item }}
                        </li>
                      </ul>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="submit">
          <el-button type="primary" class="btn" @click="innerVisible = false"
            >返回</el-button
          >
        </div>
      </el-dialog>
    </el-dialog>
    <!-- 自动提醒 -->
    <el-dialog
      custom-class="autoDialog"
      :title="''"
      :visible.sync="autoFlag"
      :close-on-click-modal="true"
      :close-on-press-escape="false"
      :show-close="true"
      width="750px"
    >
      <div class="innerBody">
        <div class="title">驳回修改提醒</div>
        <div class="refuteList">
          <div
            v-for="(item, index) in autoDialogList"
            :key="index"
            class="rufuteItem"
          >
            <div class="title">{{ item.title }}病例数据驳回修改</div>
            <div class="num">【{{ item.num }}条】</div>
            <div class="btn">
              <el-button type="warning" @click="goSearch(item.title)"
                >去处理</el-button
              >
            </div>
          </div>
          <div>
            <h3>有问题？扫码入群</h3>
            <div class="qrcode">
              <div class="img"></div>
              <div class="text">问题反馈群</div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  AppMain,
  NavBar,
  SideBar,
  TagsBar,
  TopBar,
  BackToTop,
} from "./components"
import { mapGetters, mapActions } from "vuex"
import { tokenName } from "@/config/settings"
import Media from "./mixin/Media"
import { getRefuteMessage } from "@/api/user"

export default {
  name: "Layout",
  components: {
    TopBar,
    NavBar,
    SideBar,
    AppMain,
    TagsBar,
    BackToTop,
  },
  mixins: [Media],
  data() {
    return {
      modalFlag: false,
      autoFlag: false,
      innerVisible: false,
      screeningList: [
        {
          title: "社区筛查",
          value: "1",
          desc: "在社区对该地区居民进行招募与筛查",
          src: require("@/assets/img/DataCenter/shequ.png"),
        },
        {
          title: "医院筛查",
          value: "2",
          desc: "无消化道症状的门诊人群",
          src: require("@/assets/img/DataCenter/yiyuan.png"),
        },
        {
          title: "体检筛查",
          value: "3",
          desc: "参加单位或个人体检的人群",
          src: require("@/assets/img/DataCenter/tijian.png"),
        },
      ],
      selectedIndex: "1",
      curSelectedIndex: "",
      innerTable: [
        {
          title: "纳入标准（同时满足2条）",
          list: [{ type: "text", value: "男性年龄40～79岁，女性50~79岁；" }],
        },
        {
          title: "排除标准（任意一条符合即排除）",
          list: [
            { type: "text", value: "距上次胃镜检查间隔时间一年内；" },
            { type: "text", value: "胃大部切除术手术史；" },
            {
              type: "text",
              value:
                "两周内服用PPI（埃索美拉唑、泮托拉唑、雷贝拉唑、兰索拉唑等）或H2受体拮抗剂（法莫替丁等）；",
            },
            {
              type: "list",
              value: {
                value: "有下列一种或多种症状：",
                list: [
                  "6个月内缺铁性贫血；",
                  "12个月内消化道出血（黑便、血便等）；",
                  "体重减轻（非减肥原因6个月内体重减轻≥4.5Kg）；",
                  "经常性腹泻；",
                  "吞咽困难或哽噎感；",
                  "腹部肿块。",
                ],
              },
            },
            {
              type: "text",
              value:
                "有以下任何一种疾病史：食管癌、胃癌、结直肠肿瘤、息肉病、炎症性肠病、其它器官恶性肿瘤（乳腺、卵巢、子宫及泌尿系统等）；",
            },
            {
              type: "text",
              value: "影像、肿瘤标志物等检查高度怀疑罹患肿瘤可能；",
            },
            {
              type: "text",
              value: "严重心、肺、肝、肾功能不全，或严重精神疾患。",
            },
          ],
        },
      ],
      autoDialogList: [],
    }
  },
  computed: {
    ...mapGetters({
      layout: "settings/layout",
      tagsBar: "settings/tagsBar",
      collapse: "settings/collapse",
      header: "settings/header",
      device: "settings/device",
      // selectedIndex: "table/selectedIndex",
    }),
    classObj() {
      return {
        mobile: this.device === "mobile",
      }
    },
  },
  watch: {
    curSelectedIndex: {
      handler(v) {
        this.getRefuteMessage()
      },
      immediate: false,
    },
  },
  created() {
    this.selectedIndex = sessionStorage.getItem("selectedIndex") || ""
    this.curSelectedIndex = String(this.selectedIndex) ? this.selectedIndex : ""
    if (this.curSelectedIndex) {
      // this.getRefuteMessage()
    }
  },
  mounted() {
    if (!this.selectedIndex) {
      this.modalFlag = true
      this.selectedIndex = "1"
    } else {
      this.selectedIndex = this.selectedIndex
      this.curSelectedIndex = String(this.selectedIndex)
        ? this.selectedIndex
        : ""
    }
    // console.log(this.curSelectedIndex)
    // if (this.curSelectedIndex) {
    //   this.getRefuteMessage()
    // }
    this.$nextTick(() => {
      window.addEventListener(
        "storage",
        (e) => {
          if (e.key === tokenName || e.key === null) window.location.reload()
          if (e.key === tokenName && e.value === null) window.location.reload()
        },
        false
      )
    })
  },
  methods: {
    ...mapActions({
      handleFoldSideBar: "settings/foldSideBar",
    }),
    goSearch(title) {
      if (title == "筛查") {
        this.$router.push("/screening/index?checkStatus=2")
      } else if (title == "随访") {
        this.$router.push("/followupquery?checkStatus=2")
      }
      this.autoFlag = false
    },
    // 获取消息
    getRefuteMessage() {
      getRefuteMessage(this.curSelectedIndex)
        .then((res) => {
          if (res.code == 1) {
            this.autoDialogList = []
            if (res.data.筛查) {
              this.autoDialogList.push({
                title: "筛查",
                num: res.data.筛查 || 0,
              })
            }
            if (res.data.随访) {
              this.autoDialogList.push({
                title: "随访",
                num: res.data.随访 || 0,
              })
            }
            if (this.autoDialogList.length > 0) {
              this.autoFlag = true
            }
          }
        })
        .catch()
    },
    setSelectedIndex() {
      console.log(this.selectedIndex)
      this.curSelectedIndex = this.selectedIndex
      this.$store.commit("table/setSelectedIndex", this.selectedIndex)
      this.modalFlag = false
    },
    openModalFlag() {
      this.modalFlag = true
    },
  },
}
</script>

<style lang="scss" scoped>
@mixin fix-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: $base-z-index - 2;
  width: 100%;
  overflow: hidden;
}

.vue-admin-beautiful-wrapper {
  position: relative;
  width: 100%;
  height: 100%;

  .layout-container-horizontal {
    position: relative;

    &.fixed {
      padding-top: 96px;
    }

    &.fixed.no-tags-bar {
      // padding-top: 56px;
    }

    ::v-deep {
      .vab-main {
        width: 88%;
        margin: auto;
      }

      .fixed-header {
        @include fix-header;
      }

      .tag-view-show {
        background: $base-color-white;
        box-shadow: $base-box-shadow;
      }

      .nav-bar-container {
        .fold-unfold {
          display: none;
        }
      }

      .main-padding {
        margin-top: 15px;
        margin-bottom: 15px;

        .app-main-container {
          min-height: calc(100vh - 180px);
          background: $base-color-white;
        }
      }
    }
  }

  .layout-container-vertical {
    position: relative;
    .fixed-header {
      @include fix-header;
      box-shadow: $base-box-shadow;
      transition: $base-transition;
    }
    .mask {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: $base-z-index - 1;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      background: #000;
      opacity: 0.5;
    }

    &.fixed {
      padding-top: 90px;
    }

    &.fixed.no-tags-bar {
      // padding-top: 56px;
    }

    .vab-main {
      position: relative;
      min-height: 100%;
      margin-left: $base-left-menu-width;
      background: #f6f8f9;
      transition: $base-transition;
      ::v-deep {
        .nav-bar-container {
          position: relative;
          box-sizing: border-box;
        }

        .tags-bar-container {
          box-sizing: border-box;
          padding-right: 5px;
          padding-left: 5px;
        }

        .app-main-container {
          width: calc(100% - 30px);
          margin: 4px auto;
          background: $base-color-white;
          border-radius: $base-border-radius;
        }
      }

      &.is-collapse-main {
        margin-left: $base-left-menu-width-min;

        ::v-deep {
          .fixed-header {
            left: $base-left-menu-width-min;
            width: calc(100% - 65px);
          }
        }
      }
    }
  }

  .side-bar-container {
    top: 90px;
    height: calc(100vh - 90px);
    border-radius: 0px 4px 4px 0px;
    box-shadow: none;
  }
}
::v-deep .homeDialog {
  min-width: 1036px;
}
::v-deep .homeDialog .el-dialog__header {
  display: none;
}
::v-deep .autoDialog .el-dialog__header {
  // display: none;
  padding: 0px;
}
.modalContent {
  padding: 60px;
  .title {
    text-align: center;
    height: 30px;
    font-size: 24px;
    font-family: AlibabaPuHuiTiM;
    color: #333333;
    line-height: 30px;
    margin-bottom: 60px;
  }
  .list {
    display: flex;
    justify-content: space-between;
    li {
      cursor: pointer;
    }
    .desc {
      font-size: 14px;
      font-family: AlibabaPuHuiTiR;
      color: #666666;
      text-indent: 38px;
    }
    .screeningItem {
      display: flex;
      .circle {
        width: 26px;
        height: 26px;
        margin-right: 12px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .itemTitle {
        height: 24px;
        font-size: 18px;
        font-family: AlibabaPuHuiTiM;
        color: #333333;
        font-weight: bold;
        line-height: 24px;
      }
    }
    .ItemIamge {
      width: 90%;
      // height: 180px;
      margin-top: 14px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .tips {
    width: 100%;
    background: #f5f5f5;
    border-radius: 4px;
    line-height: 22px;
    padding: 20px;
    margin-top: 40px;
  }
}
.innerBody {
  padding: 0 40px;
  .title {
    font-size: 24px;
    font-family: AlibabaPuHuiTiM;
    color: #333333;
    text-align: center;
    margin-bottom: 40px;
  }
  .innerTable {
    border-radius: 4px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    .col_item {
      display: flex;
      .left {
        width: 35%;
        min-height: 72px;
        display: flex;
        justify-content: flex-start;
        padding-left: 20px;
        align-items: center;
        font-size: 18px;
        font-family: AlibabaPuHuiTiM;
        font-weight: bold;
        color: #333333;
        border-right: 1px solid #eff0f3;
        // border-bottom: 1px solid #eff0f3;
      }
      .right {
        flex: 1;
        .r_col_item:nth-child(4) {
          img {
            align-self: flex-start;
          }
        }
        .r_col_item {
          min-height: 72px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding: 20px 0 20px 20px;

          img {
            width: 26px;
            height: 26px;
          }
          .r_text {
            font-size: 16px;
            font-family: AlibabaPuHuiTiR;
            color: #333333;
            font-weight: bold;
          }
          ul {
            li {
              height: 30px;
              font-size: 16px;
              font-family: AlibabaPuHuiTiR;
              color: #666666;
              line-height: 30px;
            }
          }
        }
      }
    }
  }
  .refuteList {
    display: flex;
    justify-content: space-around;
    h3 {
      transform: translateY(-25px);
      color: #546184;
    }
    .qrcode {
      transform: translateY(-15px);
      width: 108px;
      height: 136px;
      background: #546184;
      border-radius: 4px;
      padding: 8px;
      margin-left: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .img {
        width: 92px;
        height: 92px;
        background: url("~@/assets/img/DataCenter/qrcode.jpg") no-repeat;
        background-size: cover;
        background-position: center center;
        border-radius: 2px;
      }
      .text {
        font-size: 14px;
        font-family: AlibabaPuHuiTiR;
        color: #ffffff;
        text-align: center;
        margin-top: 8px;
      }
    }
    .rufuteItem {
      width: 200px;
      height: 148px;
      border-radius: 4px;
      border: 1px solid #dddddd;
      display: flex;
      flex-direction: column;
      align-items: center;
      &:first-child {
        margin-right: 20px;
      }

      .title {
        font-size: 16px;
        margin: 16px 0;
        font-family: AlibabaPuHuiTiR;
        color: #333333;
      }
      .num {
        font-size: 16px;
        font-family: AlibabaPuHuiTiM;
        color: #4e68ff;
        margin-bottom: 16px;
      }
      .btn {
        .el-button {
          width: 100px;
          background: #ff7900;
          border-radius: 5px;
        }
      }
    }
  }
}
.submit {
  margin-top: 60px;
  text-align: center;
  .btn {
    width: 100px;
    border-radius: 4px;
    height: 32px;
  }
}
</style>