<template>
  <div class="home">
    <div class="info">
      <van-image
        width="63"
        height="63"
        :src="require('../assets/img_touxiang.png')"
      />
      <div class="text" v-if="isAdmin && userInfo">
        <div class="name">{{ userInfo.nickname }}</div>
        <div class="sub">管理员</div>
      </div>
      <div class="text" v-else>
        <div class="name">{{ showUserInfo.name }}</div>
        <div class="sub">{{ showUserInfo.type }}</div>
      </div>
      <div class="btn" @click="logout">切换账号</div>
    </div>

    <div class="base">
      <div class="base-info">
        <div class="base-info-item">
          <div class="text1">节目名称</div>
          <div class="text2">{{ info.composition }}</div>
        </div>
        <div class="base-info-item">
          <div class="text1">专业</div>
          <div class="text2">{{ info.artType }}</div>
        </div>
        <div class="base-info-item">
          <div class="text1">参演时间</div>
          <div class="text2" v-if="info.showStartTime">
            {{ info.showStartTime }} {{ info.showEndTime }}
          </div>
          <div class="text2" v-else>
            暂无
          </div>
        </div>
        <div class="base-info-item">
          <div class="text1">参演人员</div>
          <div class="text2">{{ personInfo }}</div>
        </div>

        <div class="base-info-item" v-if="isAdmin">
          <div class="text1">操作状态</div>
          <div class="text2">
            {{ info.signInAt ? (myScore ? "已评分" : "未评分") : "未签到" }}
          </div>
        </div>
      </div>
      <div class="base-info" v-if="info.signInAt && isScore">
        <img class="left-icon icon" src="../assets/icon_lianjie.png" alt="" />
        <img class="right-icon icon" src="../assets/icon_lianjie.png" alt="" />
        <div class="score">
          <div class="score-main" v-if="info.score && (myScore || !isAdmin)">
            <div class="name">总得分</div>
            <div class="val">{{ info.score }}</div>
          </div>

          <div class="score-main" v-if="!myScore && isAdmin">
            <div class="name">评分(0-100)</div>
            <van-field
              type="digit"
              input-align="center"
              v-model="score"
              :maxlength="3"
              @change="scoreChange"
            />
          </div>

          <div class="score-list">
            <div
              class="score-item"
              v-for="(item, index) in scores"
              :key="index"
            >
              <div class="name">得分明细{{ index + 1 }}</div>
              <div class="val">{{ item.score }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <template v-if="isAdmin">
      <div class="bottom" v-if="!info.signInAt">
        <van-button @click="sign" round block :color="$colors.prim">
          立即签到
        </van-button>
      </div>

      <div class="bottom" v-else-if="!myScore && isScore">
        <van-button
          @click="submitScore"
          :disabled="!score"
          round
          block
          :color="$colors.prim"
        >
          提交评分
        </van-button>
      </div>
      <div
        class="bottom btnList"
        v-else-if="myScore && isScore && relatedList.length > 1"
      >
        <van-button
          v-if="nowActive !== 0"
          @click="pre"
          round
          block
          :color="$colors.prim"
        >
          上一个
        </van-button>
        <van-button
          v-if="nowActive !== relatedList.length - 1"
          @click="next"
          round
          block
          :color="$colors.prim"
        >
          下一个
        </van-button>
      </div>
    </template>
  </div>
</template>

<script>
import { mapState } from "vuex";
// import QrcodeVue from "qrcode.vue";
export default {
  name: "home",
  metaInfo() {
    return {
      title: "文旅局艺考"
    };
  },
  data() {
    return {
      tab: 0,
      info: {},
      persons: [],
      isAdmin: false,
      scores: [],
      score: "",
      myScore: null,
      isScore: false,
      relatedList: [],
      nowActive: 0
    };
  },
  computed: {
    ...mapState(["userInfo"]),
    personInfo() {
      return this.persons.length > 0
        ? [...this.persons]
            .map(item => {
              return item.name;
            })
            .join(" ")
        : "暂无";
    },
    url() {
      return (
        "http://wljtest.izouma.com/home?performanceId=" +
        this.info.performanceId +
        "&performanceApplyId=" +
        this.$route.query.performanceApplyId
      );
    },
    showUserInfo() {
      let loginPhone = window.localStorage.getItem("loginPhone");
      if (loginPhone === this.info.phone) {
        return {
          name: this.info.contact,
          type: "领队"
        };
      } else {
        return {
          name: [...this.persons].find(item => {
            return item.phone === loginPhone;
          })?.name,
          type: "考生"
        };
      }
    }
  },
  mounted() {
    if (window.localStorage.getItem("loginPhoneToken")) {
      this.$store.dispatch("getUserInfo");
      this.isAdmin = true;
    } else {
      this.isAdmin = false;
    }
    this.getInfo(this.$route.query.performanceApplyId, true);
  },
  methods: {
    getInfo(performanceApplyId, isFirst = false) {
      this.$http
        .get("/performanceApply/get/" + performanceApplyId, {
          phone: window.localStorage.getItem("loginPhone")
        })
        .then(res => {
          this.info = res;
          if (
            `${performanceApplyId}` === this.$route.query.performanceApplyId &&
            this.isAdmin
          ) {
            this.getRelated();
          }
          return this.$http.post(
            "/person/all",
            {
              size: 100,
              query: { del: false, performanceApplyId: performanceApplyId }
            },
            { body: "json" }
          );
        })
        .then(res => {
          this.persons = res.content;
          if (this.info.signInAt) {
            if (isFirst) {
              this.isScore = true;
            }
            this.$http
              .post(
                "/performanceScore/breakdown?performanceApplyId=" +
                  performanceApplyId
              )
              .then(res => {
                this.scores = res;
              });
            if (this.isAdmin) {
              this.$http
                .post(
                  "/performanceScore/myScore?performanceApplyId=" +
                    performanceApplyId
                )
                .then(res => {
                  if (res) {
                    this.myScore = res;
                  } else {
                    this.myScore = null;
                  }
                });
            }
          }
        })
        .catch(e => {
          if (e) {
            this.$toast(e.error);
          }
        });
    },
    getRelated() {
      this.$http
        .post(
          "/performanceApply/relatedByPer?performanceId=" +
            this.info.performanceId
        )
        .then(res => {
          this.relatedList = res;
          this.nowActive = res.findIndex(item => {
            return item.id === this.info.id;
          });
        });
    },
    sign() {
      this.$http
        .post("/performanceApply/signIn?id=" + this.info.id)
        .then(res => {
          this.$toast.success("签到成功");
          this.getInfo(this.info.id);
        })
        .catch(e => {
          if (e) {
            this.$toast(e.error);
          }
        });
    },
    scoreChange() {
      this.$nextTick(() => {
        if (this.score > 100) {
          this.score = 100;
        }
        if (this.score < 0) {
          this.score = 0;
        }
      });
    },
    submitScore() {
      if (!this.score) {
        this.$toast("请输入评分");
        return;
      }
      this.$http
        .post(
          "/performanceApply/score?id=" + this.info.id + "&score=" + this.score
        )
        .then(res => {
          this.$toast.success("评分成功");
          this.getInfo(this.info.id);
        })
        .catch(e => {
          if (e) {
            this.$toast(e.error);
          }
        });
    },
    next() {
      this.nowActive = this.nowActive + 1;
      this.persons = [];
      this.scores = [];
      this.score = "";
      this.myScore = null;
      this.isScore = false;
      this.getInfo(
        this.relatedList[this.nowActive % this.relatedList.length].id,
        true
      );
    },
    pre() {
      this.nowActive = this.nowActive - 1;
      this.persons = [];
      this.scores = [];
      this.score = "";
      this.myScore = null;
      this.isScore = false;
      this.getInfo(
        this.relatedList[this.nowActive % this.relatedList.length].id,
        true
      );
    },
    logout() {
      this.$dialog
        .confirm({
          title: "提示",
          message: "确认要切换账号吗？"
        })
        .then(() => {
          window.localStorage.removeItem("loginPhone");
          window.localStorage.removeItem("loginPhoneToken");
          localStorage.removeItem("token");
          this.$toast.success("退出成功");
          setTimeout(() => {
            this.$router.replace({
              name: "loginHome",
              query: this.$route.query
            });
          }, 1000);
        })
        .catch(() => {
          // on cancel
        });
    }
  }
};
</script>
<style lang="less" scoped>
.home {
  padding-bottom: 100px;
}
.info {
  background-color: #fff;
  display: flex;
  padding: 16px;
  align-items: center;
  .text {
    flex-grow: 1;
    margin-left: 12px;
    .name {
      font-size: 22px;
      font-weight: bold;
      color: #000000;
      line-height: 30px;
    }

    .sub {
      font-size: 14px;
      color: #939599;
      line-height: 20px;
      margin-top: 2px;
    }
  }

  .btn {
    font-size: 14px;
    color: #c4c7cc;
    line-height: 20px;
    align-self: flex-end;
  }
}

.base {
  padding: 20px 16px;
  .code {
    padding: 30px 60px;
    background-color: #fff;
    border-radius: 12px;
  }

  .base-info {
    position: relative;
    padding: 22px 44px;
    background: #ffffff;
    border-radius: 12px;
    margin-top: 8px;
    .base-info-item {
      display: flex;
      // align-items: center;
      font-size: 14px;
      color: #000000;
      line-height: 26px;

      .text1 {
        font-weight: bold;
        min-width: 60px;
      }

      .text2 {
        font-size: 16px;
        margin-left: 20px;
      }

      &:not(:first-child) {
        margin-top: 12px;
      }
    }
  }

  .icon {
    width: 10px;
    height: 54px;
    position: absolute;
    top: 0;
    transform: translateY(-50%);

    &.left-icon {
      left: 16px;
    }

    &.right-icon {
      right: 16px;
    }
  }
}

.score {
  margin: 20px 16px;
  background: #ffffff;
  border-radius: 12px;
  padding: 0 20px;

  .score-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 47px 0 20px;

    .name {
      font-size: 16px;
      color: #939599;
      line-height: 22px;
    }

    .val {
      font-size: 85px;
      font-weight: bold;
      color: #000000;
      line-height: 119px;
    }
    .text {
      font-size: 18px;
      color: #000;
      line-height: 32px;
    }
  }

  .score-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 38px 0 48px;
    .score-item {
      display: flex;
      .name {
        font-size: 14px;
        color: #939599;
        line-height: 26px;
      }

      .val {
        font-size: 18px;
        font-weight: bold;
        color: #000000;
        line-height: 26px;
        margin-left: 20px;
      }

      &:not(:first-child) {
        margin-top: 16px;
      }
    }

    border-top: 1px solid #f5f7fa;
  }
}

.certificate {
  padding: 20px 16px;

  .certificate-img {
    padding: 16px;
    background: #ffffff;
    border-radius: 12px;
    img {
      width: 331px;
      height: 197px;
      display: block;
    }

    &:not(:first-child) {
      margin-top: 12px;
    }
  }
}
/deep/ .van-field__control {
  font-size: 32px;
  color: #000;
}
</style>

<style lang="less">
.home {
  .van-tabs__line {
    bottom: 20px;
  }
  .van-tabs__wrap {
    height: 50px;
  }
  .van-tabs__nav {
    padding: 0 6px 15px;
  }
  .van-tab {
    flex: 0;
    white-space: nowrap;
    font-size: 16px;
    line-height: 22px;
    padding: 0 10px;

    &.van-tab--active {
      font-size: 20px;
      font-weight: bold;
    }
  }
}

.bottom {
  position: fixed;
  padding: 6px 48px calc(env(safe-area-inset-bottom) + 6px);
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background-color: #fff;
}
.btnList {
  display: flex;
  .van-button {
    flex-grow: 1;
  }
  .van-button + .van-button {
    margin-left: 20px;
  }
}
</style>
