<template>
  <div class="home">
    <div class="base">
      <div class="base-info">
        <div class="base-info-item">
          <div class="text1">节目名称</div>
          <div class="text2">{{ info.name }}</div>
        </div>
        <div class="base-info-item">
          <div class="text1">参赛专业</div>
          <div class="text2">{{ info.specialty }}</div>
        </div>
        <div class="base-info-item">
          <div class="text1">参演人员</div>
          <div class="text2">
            {{ info.participant ? info.participant.join(",") : "" }}
          </div>
        </div>
        <div class="base-info-item">
          <div class="text1">参赛人数</div>
          <div class="text2">{{ info.quantity }}</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" style="padding:22px 22px">
        <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.myScore">
            <div class="name">总得分</div>
            <div class="val">{{ info.myScore }}</div>
            <div class="text">备注：{{ info.remark }}</div>
          </div>

          <div class="score-main" v-if="!info.second">
            <div class="name">{{ info.score ? "修改" : "" }}评分(0-100)</div>
            <van-field
              type="digit"
              input-align="center"
              v-model="score"
              :maxlength="3"
              class="scoreInput"
              @change="scoreChange"
            />

            <van-field
              v-model="message"
              rows="4"
              autosize
              type="textarea"
              maxlength="200"
              placeholder="请输入备注信息…"
              class="textfield"
            />
          </div>
        </div>
      </div>
    </div>

    <div class="bottom" v-if="!info.second">
      <van-button
        @click="submitScore"
        :disabled="!score"
        round
        block
        :color="$colors.prim"
      >
        提交评分
      </van-button>
    </div>
  </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,
      message: ""
    };
  },
  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() {
    this.getInfo();
  },
  methods: {
    getInfo() {
      this.$http.post("/programme/getDTO/" + this.$route.query.id).then(res => {
        this.info = res;
        this.score = "";
        this.message = "";
      });
    },
    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("/programmeScore/saveScore?programmeId=" + this.$route.query.id, {
          score: this.score,
          remark: this.message
        })
        .then(res => {
          this.$toast.success("评分成功");
          this.getInfo();
        })
        .catch(e => {
          if (e) {
            this.$toast(e.error);
          }
        });
    }
  }
};
</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: 14px;
      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;
    }
  }
}
.scoreInput {
  /deep/ .van-field__control {
    font-size: 32px;
    color: #000;
  }
}
.textfield {
  background-color: #f2f4f5;
  margin-top: 20px;
  border-radius: 4px;
  overflow: hidden;
}
</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>
