<template>
  <div style="min-width: 1440px; overflow: overlay">
    <Layout>
      <Header class="layout-header">
        <div class="logotitle">
          <div class="leftLogo"></div>
          <div class="rightText">
            国家消化道早癌防治中心联盟 <br />早期胃癌筛查项目
          </div>
        </div>
        <div v-if="!allianceToken" class="login">
          <div class="login_title text-center">
            筛查随访数据库登录
            <Form ref="form" :model="form" :rules="rules" inline>
              <FormItem prop="username" label="登录名:">
                <Input
                  v-model="form.username"
                  type="text"
                  placeholder="请输入登录名"
                >
                </Input>
              </FormItem>
              <FormItem prop="password" label="密码:">
                <Input
                  v-model="form.password"
                  type="password"
                  placeholder="请输入密码"
                >
                </Input>
              </FormItem>
              <FormItem>
                <Button
                  type="primary"
                  class="login_button"
                  :loading="loading"
                  @click="handleSubmit('form')"
                  >登录</Button
                >
              </FormItem>
            </Form>
          </div>
        </div>
        <div v-if="allianceToken" class="userInfo">
          <div class="white"></div>
          <div class="text">欢迎，LIXid胡</div>
          <div class="exit" @click="logout">退出</div>
        </div>
      </Header>
      <div class="sider">
        <Menu mode="horizontal" :active-name="currentRoute" class="siderMenu">
          <MenuItem
            v-for="(item, index) in menuList"
            :key="index"
            :name="item.route"
            :to="item.route"
            style="width: 10%; text-align: center; min-width: 120px"
          >
            {{ item.name }}
          </MenuItem>
        </Menu>
      </div>
      <Content style="overflow: hidden; padding: 32px 10%; background: #f3f3f3">
        <transition name="fade-transform" mode="out-in">
          <router-view></router-view>
        </transition>
      </Content>
      <Footer class="layout-footer-center text-center"
        >copyright@ 联盟信息等</Footer
      >
    </Layout>
  </div>
</template>
<script>
import { loginRSA } from "@/config/settings"
import { getAccessToken } from "@/utils/accessToken"
import { encrypt, decrypt } from "@/utils/encryption"
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      menuList: [
        {
          route: "/home",
          name: "首页",
        },
        {
          route: "/allianceintroduction",
          name: "联盟介绍",
        },
        {
          route: "/healthpopularization",
          name: "健康科普",
        },
        {
          route: "/scientificresearch",
          name: "科学研究",
        },
        {
          route: "/casesharing",
          name: "案例分享",
        },
      ],
      loading: false,
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            type: "string",
            min: 6,
            message: "The password length cannot be less than 6 bits",
            trigger: "blur",
          },
        ],
      },
      allianceToken: getAccessToken(),
      currentRoute: this.$route.path,
    }
  },
  watch: {
    $route: {
      handler(v) {
        this.currentRoute = this.$route.path
      },
      deep: true,
    },
  },
  mounted() {
    // if (localStorage.getItem('allianceToken')) {
    //   this.$router.push('/datacenter/home')
    // }
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.loading = true
          const data = Object.assign({}, this.form)
          if (loginRSA) {
            data.password = encodeURIComponent(encrypt(data.password))
            data.userName = encodeURIComponent(encrypt(data.username))
          }
          this.$store
            .dispatch("user/login", data)
            .then(() => {
              const routerPath =
                !this.redirect || this.redirect === "/404" ? "/" : this.redirect
              this.$router.push({ path: routerPath }).catch((e) => {})
              this.loading = false
            })
            .catch((e) => {
              this.loading = false
            })
        }
      })
    },
    logout() {
      this.$Modal.confirm({
        title: "提示",
        content:
          '<p style="text-align:center;font-size:16px;">是否确认退出？</p>',
        onOk: () => {
          setTimeout(() => {
            localStorage.removeItem("agcs")
            this.allianceToken = ""
          }, 500)
        },
        onCancel: () => {},
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.layout-header {
  height: 400px;
  width: 100%;
  background: url("~@/assets/img/Home/homeheaderbg.png") no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  padding-right: 10%;
  justify-content: space-between;
  align-items: center;
  .logotitle {
    height: 220px;
    display: flex;
    .leftLogo {
      width: 72px;
      height: 72px;
      background: url("~@/assets/img/Home/stomach.png") no-repeat;
      background-position: center;
      background-size: cover;
    }
    .rightText {
      min-width: 570px;
      font-size: 42px;
      font-family: AlibabaPuHuiTiB;
      color: #ffffff;
      margin-left: 14px;
    }
  }
  .login {
    width: 23%;
    min-width: 334px;
    height: 326px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0px 12px 36px 0px rgba(26, 35, 87, 0.4);
    border-radius: 8px;
    padding: 18px 40px;
    .login_title {
      height: 26px;
      font-size: 22px;
      font-family: AlibabaPuHuiTiM;
      color: #4e68ff;
      // line-height: 60px;
    }
    .login_button {
      width: 100%;
      height: 40px;
      margin-top: 20px;
      background: #4e68ff;
    }
  }
  .userInfo {
    height: 160px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    .white {
      width: 32px;
      height: 4px;
      background: #ffffff;
    }
    .text {
      font-size: 20px;
      font-family: AlibabaPuHuiTiM;
      color: #ffffff;
    }
    .exit {
      font-size: 16px;
      cursor: pointer;
      font-family: AlibabaPuHuiTiR;
      text-decoration: underline;
      color: rgba(255, 255, 255, 0.8);
      line-height: 16px;
      &:active {
        color: #4e68ff;
      }
    }
  }
}
.siderMenu {
  padding: 0 10%;
  background: #edefff;
}
.layout-footer-center {
  width: 100%;
  height: 108px;
  background: #efefef;
  line-height: 68px;
}
::v-deep {
  .ivu-form {
    .ivu-form-item {
      display: block;
      margin-bottom: 10px;
    }
    .ivu-form-item-label {
      font-size: 14px;
      font-family: AlibabaPuHuiTiR;
      color: #333333;
    }
  }
}
/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.3s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>
