text: const draft = new Vue({
    el: "#app",
    delimiters: ["[[", "]]"],
    data: {
      timer: 0,
      timerF: null,
      start: false,
      laneBlue: false,
      laneRed: false,
      order: 0,
      draft: {
        banpick: "",
        temp: "",
      },
      championsList: "",
      championsValid: [],
    },
    watch: {
      timer: function (newTimer, oldTimer) {
        if (master == roomId) {
          if (this.start && newTimer == 31) {
            const self = this;
            if ([0, 1, 2, 3, 4, 5, 12, 13, 14, 15].includes(self.order)) {
              self.draft.temp = "999";
            } else {
              self.draft.temp = randomArray(self.championsValid);
            }
            self.draftChoice();
          }
        }
      },
      order: function (newOrder, oldOrder) {
        const blue = [0, 2, 4, 6, 9, 10, 13, 15, 17, 18];
        if (blue.includes(newOrder)) {
          this.draft.team = "blue";
        } else {
          this.draft.team = "red";
        }
      },
    },
    filters: {
      timerDp(timer) {
        return timer / 30 < 1 ? 29 - (timer % 30) : 0;
      },
      selectClassName(order) {
        return [0, 1, 2, 3, 4, 5, 12, 13, 14, 15].includes(order)
          ? "ban"
          : "pick";
      },
      selectHtml(order) {
        return [0, 1, 2, 3, 4, 5, 12, 13, 14, 15].includes(order)
          ? "禁用"
          : "选中";
      },
      cpClassName(no) {
        return "sp-" + no;
      },
      cpStyle(no) {
        return "backgroundPosition:0px -" + String(Number(no) * 80) + "px;";
      },
    },
    created: function () {
      this.draftRefresh();
      this.championsRefresh();
    },
    methods: {
      draftStart() {
        const self = this;
        axios
          .post(
            "/draft/draft/" + roomCode,
            { no: "" },
            { xsrfCookieName: "csrftoken", xsrfHeaderName: "X-CSRFToken" }
          )
          .then(function (response) {
            self.championsRefresh();
            self.draftRefresh();
          });
      },
      championsRefresh() {
        const self = this;
        const lane = document.querySelector("input[name='lane']:checked")
          ? document.querySelector("input[name='lane']:checked").value
          : "";
        const name = document.querySelector("input[name='name']")
          ? document.querySelector("input[name='name']").value
          : "";
        const code = roomCode;
        axios
          .get("/draft/champion?lane=" + lane + "&name=" + name + "&code=" + code)
          .then(function (response) {
            self.championsList = response.data;
          });
      },
      draftRefresh() {
        const self = this;
        const now = Math.floor(Date.now() / 1000);
        axios.get("/draft/draft/" + roomCode).then(function (response) {
          if (response.data.blue_done) {
            self.laneBlue = true;
          }
          if (response.data.red_done) {
            self.laneRed = true;
          }
          if (response.data.timer) {
            if (master == roomId) {
              if (self.timerF) {
                clearInterval(self.timerF);
                self.timerF = false;
              }
              self.timer = now - response.data.timer;
              self.countDownTimer();
            }
            self.start = true;
          }
          self.championsValid = response.data.champions_valid;
          if (response.data.banpick) {
            banpick = response.data.banpick.split("/");
            self.draft.banpick = banpick;
            self.order = banpick.length;
            if (self.laneBlue && self.laneRed) {
              self.order++;
            }
            for (let i = 0; i < banpick.length; i++) {
              const el = document.querySelector(
                "#team_wrap .od_" + String(i) + " .sp"
              );
              if ([6, 7, 8, 9, 10, 11, 16, 17, 18, 19].includes(i)) {
                el.style.backgroundImage = "url(/assets/img/genshin_all.png)";
                el.style.backgroundPosition =
                  "0px -" + String(banpick[i] * 80) + "px";
              } else {
                if (banpick[i] == "999") {
                  el.style.backgroundImage = "radial-gradient(black, #555555)";
                  el.style.backgroundSize = "100% 100%";
                } else {
                  if (self.order == 21) {
                    el.style.backgroundImage = "url(/assets/img/genshin_all.png)";
                    el.style.backgroundPosition =
                      "0px -" + String(banpick[i] * 80) + "px";
                  } else {
                    el.style.backgroundImage = "url(/assets/img/genshin_all.png)";
                    el.style.backgroundPosition =
                      "0px -" + String(banpick[i] * 50) + "px";
                  }
                }
              }
            }
          }
          if (document.querySelector(".team .container.now")) {
            document.querySelector(".team .container.now .order").innerHTML = "";
            document
              .querySelector(".team .container.now")
              .classList.remove("now");
          }
          if (document.querySelector(".team .container.next")) {
            document.querySelector(".team .container.next .order").innerHTML = "";
            document
              .querySelector(".team .container.next")
              .classList.remove("next");
          }
          if (self.order < 20) {
            document.querySelector(".od_" + self.order).classList.add("now");
            document.querySelector(".od_" + self.order + " .order").innerHTML =
              "选择中...";
          }
          if (self.order < 19) {
            document
              .querySelector(".od_" + String(self.order + 1))
              .classList.add("next");
            document.querySelector(
              ".od_" + String(self.order + 1) + " .order"
            ).innerHTML = "选择下一个";
          }
          if (self.order >= 20) {
            clearInterval(self.timerF);
            self.timer = 30;
            self.laneChoice();
          }
          if (self.order == 21) {
            self.draftEnd();
          }
        });
      },
      draftSelect(no) {
        el2 = document.querySelector(".sp-" + String(no));
        if (el2.hasAttribute("disabled")) {
          return false;
        }
        this.draft.temp = String(no);
        el1 = document.querySelector(".sp.selected");
        if (el1) {
          el1.classList.remove("selected");
        }
        el2.classList.add("selected");
        if ([6, 7, 8, 9, 10, 11, 16, 17, 18, 19].includes(this.order)) {
          document.querySelector(
            ".od_" + this.order + " .sp"
          ).style.backgroundImage = "url(/assets/img/genshin_all.png)";
          document.querySelector(
            ".od_" + this.order + " .sp"
          ).style.backgroundPosition = "0px -" + String(Number(no) * 80) + "px";
        }
      },
      draftChoice() {
        const self = this;
        const order = this.order;
        const no = this.draft.temp;
        if (no) {
          const postData = { no };
          axios
            .post("/draft/draft/" + roomCode, postData, {
              xsrfCookieName: "csrftoken",
              xsrfHeaderName: "X-CSRFToken",
            })
            .then(function (response) {
              self.draftRefresh();
              el = document.querySelector(".sp-" + no);
              if (document.querySelector("input[name='name']").value) {
                document.querySelector("input[name='name']").value == "";
              }
              if (document.querySelector("input[name='lane']:checked")) {
                document.querySelector(
                  "input[name='lane']:checked"
                ).checked = false;
              }
              self.championsRefresh();
              self.draft.temp = "";
            });
        }
      },
      laneChoice() {
        if (team != "none") {
          const el_array = document.querySelectorAll(".lane .container");
          for (let i = 0; i < 10; i++) {
            const order = el_array[i].className.split("_")[1];
            const pick = this.draft.banpick[order];
            const el_sp = document.querySelector(".lane .od_" + order + " .sp");
            el_sp.style.backgroundImage = "url(/assets/img/genshin_all.png)";
            el_sp.style.backgroundPosition = "0px -" + String(pick * 100) + "px";
          }
        }
      },
      laneChoiceDone(team) {
        const self = this;
        let postData = new FormData();
        let cnt = 0;
        if (team == "blue") {
          for (let i = 0; i < 5; i++) {
            const temp = document.querySelector(
              "input[name='b" + i + "']:checked"
            );
            // if (temp) {
            //   postData.append(i, temp.value);
            //   cnt++;
            // } else {
            //   alert("请选择所有.");
            //   break;
            // }
          }
        }
        if (team == "red") {
          for (let i = 0; i < 5; i++) {
            const temp = document.querySelector(
              "input[name='r" + i + "']:checked"
            );
            // if (temp) {
            //   postData.append(i, temp.value);
            //   cnt++;
            // } else {
            //   alert("请选择所有.");
            //   break;
            // }
          }
        }
        postData.append("team", team);
        if (cnt == 5) {
          axios
            .post("/draft/lane/" + roomCode, postData, {
              xsrfCookieName: "csrftoken",
              xsrfHeaderName: "X-CSRFToken",
            })
            .then(function (response) {
              if (response.data == "error") {
                alert("有重复选择.");
                return false;
              } else {
                self.draftRefresh();
              }
            });
        }
      },
      laneChoiceDoneSingle() {
        const self = this;
        let postData = new FormData();
        let cnt = 0;
        for (let i = 0; i < 10; i++) {
          const temp = document.querySelector(
            ".laneicon_wrap input[name='" + i + "']:checked"
          );
          if (temp) {
            console.log(temp);
            postData.append(i, temp.value);
            cnt++;
          } else {
            alert("请选择所有.");
            break;
          }
        }
        if (cnt == 10) {
          axios
            .post("/draft/lane/" + roomCode, postData, {
              xsrfCookieName: "csrftoken",
              xsrfHeaderName: "X-CSRFToken",
            })
            .then(function (response) {
              if (response.data == "error") {
                alert("有重复选择.");
                return false;
              } else {
                self.draftRefresh();
              }
            });
        }
      },
      draftEnd() {},
      countDown() {
        this.timer = this.timer + 1;
      },
      countDownTimer() {
        if (this.timerF) {
          return false;
        } else {
          this.timerF = setInterval(this.countDown, 1000);
        }
      },
    },
  });
  