<template>
  <div>

    <div class="caozuo">
      <button @click="start">开始</button>
      <button @click="init">重置</button>
      <button @click="showset = true;">设置</button>
    </div>
    <div class="time">
      {{time}}
    </div>
    <div class="saolei">
      <div class="shezhi" v-show="showset">
        <button @click="setLeave(1)">初级</button>
        <button @click="setLeave(2)">中级</button>
        <button @click="setLeave(3)">高级</button>
        <button @click="setLeave(4)">自定义</button>
        <div>
          <button @click="showset = false;">确定</button>
        </div>
      </div>
      <div class="shezhi" v-show="!showset">
      </div>
      <div class="qipan">
        <div ref="heng" class="heng" v-for="i in heng" :key="i">
          <div ref="shu" class="shu" v-for="t in shu" :key="t" @mouseup="shang(i-1,t-1,$event)"></div>
          <!-- <div ref="shu" class="shu" v-for="t in shu" :key="t" @mousedown="xia(i-1,t-1)" @mouseup="shang(i-1,t-1)"></div> -->
        </div>
      </div>
      <div class="paihangbang">
        <h3>排行榜：</h3>

      </div>
    </div>

  </div>

</template>
<script>
export default {
  data() {
    return {
      heng: 8,
      shu: 8,
      leishu: 10,
      time: "00:00",
      lei: [],
      leiList: [],
      startganme: false,
      showset: false,
      timeInterval: null,
      shukainum: 0,
    };
  },
  methods: {
    //初始化棋盘
    init() {
      this.lei = [];
      this.leiList = [];
      this.startganme = false;
      this.clear();
      this.setlei();
      this.getnum();
      clearInterval(this.timeInterval);
      this.timeInterval = null;
    },
    //开始游戏
    start() {
      let date = new Date().getTime();
      let time = 0;
      this.timeInterval = setInterval(() => {
        time = new Date().getTime() - date;
        this.time = `${parseInt(time / 10000) % 10}${
          parseInt(time / 1000) % 10
        }:${parseInt(time / 100) % 10}${parseInt(time / 10) % 10}`;
      }, 10);
      this.startganme = true;
    },
    //重置
    // reset() {
    //   this.init();
    // },
    //打开难度设置
    set() {},
    //设置难度
    setLeave(num) {
      if (num === 1) {
        this.heng = 8;
        this.shu = 8;
        this.leishu = 10;
        this.init();
      } else if (num === 2) {
        this.heng = 16;
        this.shu = 16;
        this.leishu = 40;
        this.init();
      } else if (num === 3) {
        this.heng = 16;
        this.shu = 30;
        this.leishu = 99;
        this.init();
      } else if (num === 4) {
      }
    },
    //点击下去
    // xia(i, t) {
    //   if (!this.startganme) {
    //     return;
    //   }
    //   if (this.$refs.heng[i + 0].children[t + 0].className != "shukai") {
    //     this.$refs.heng[i + 0].children[t + 0].className = "shuxia";
    //   }
    // },
    //点击上来
    shang(i, t, event) {
      console.log(event);
      if (event && event.button !== 0) {
        return;
      }
      if (!this.startganme) {
        return;
      }
      if (
        this.leiList.some((item) => {
          return item[0] === i && item[1] === t;
        })
      ) {
        this.$refs.heng[i + 0].children[t + 0].className = "shukai lei";
        setTimeout(() => {
          alert("你死了");
          this.init();
        }, 200);
      } else {
        this.$refs.heng[i + 0].children[t + 0].className = "shukai";
        this.shukainum = 0;
        for (let i = 0; i < this.heng; i++) {
          for (let t = 0; t < this.shu; t++) {
            if (this.$refs.heng[i + 0].children[t + 0].className === "shukai") {
              this.shukainum += 1;
            }
          }
        }
        console.log(this.shukainum);
        if (this.shukainum === this.heng * this.shu - this.leiList.length) {
          setTimeout(() => {
            alert("你赢了");
            this.init();
          }, 200);
        }
        // console.log(
        //   this.$refs.heng[i + 0].children[t + 0].className.indexOf("shukai")
        // );
        // console.log(
        //   this.$refs.heng[i + 0].children[t + 0].className.indexOf("shukai") ===
        //     -1
        // );
        // 在点击空白的时候展开所有空白项  （枚举法 写的特别丑陋）
        // 整个地图分为左上角、右上角、左下角、右下角、第一行、第一列、最后一行、最后一列、中间9块
        // 每块需要计算的方块不一样分别是3、3、3、3、5、5、5、5、8，不知道有没有人能优化一下
        if (this.$refs.heng[i + 0].children[t + 0].innerHTML === "") {
          if (i === 0 && t === 0) {
            //头一行、头一个
            if (
              this.$refs.heng[i + 1].children[t + 1].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i + 1, t + 1);
            }
            if (
              this.$refs.heng[i + 0].children[t + 1].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i + 0, t + 1);
            }
            if (
              this.$refs.heng[i + 1].children[t + 0].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i + 1, t + 0);
            }
          } else if (i === this.heng - 1 && t === this.shu - 1) {
            //最后一行、最后一个
            // if (
            //   this.$refs.heng[i + 1].children[t + 0].className.indexOf(
            //     "shukai"
            //   ) === -1
            // ) {
            // }
            if (
              this.$refs.heng[i - 1].children[t - 1].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i - 1, t - 1);
            }
            if (
              this.$refs.heng[i + 0].children[t - 1].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i + 0, t - 1);
            }
            if (
              this.$refs.heng[i - 1].children[t + 0].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i - 1, t + 0);
            }
          } else if (i === 0 && t === this.shu - 1) {
            //头一行、最后一个
            if (
              this.$refs.heng[i + 1].children[t - 1].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i + 1, t - 1);
            }
            if (
              this.$refs.heng[i + 0].children[t - 1].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i + 0, t - 1);
            }
            if (
              this.$refs.heng[i + 1].children[t + 0].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i + 1, t + 0);
            }
          } else if (i === this.heng - 1 && t === 0) {
            //最后一行、头一个
            if (
              this.$refs.heng[i - 1].children[t + 1].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i - 1, t + 1);
            }
            if (
              this.$refs.heng[i + 0].children[t + 1].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i + 0, t + 1);
            }
            if (
              this.$refs.heng[i - 1].children[t + 0].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i - 1, t + 0);
            }
          } else if (i === 0) {
            //第一行
            if (
              this.$refs.heng[i + 1].children[t - 1].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i + 1, t - 1);
            }
            if (
              this.$refs.heng[i + 1].children[t + 1].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i + 1, t + 1);
            }
            if (
              this.$refs.heng[i + 1].children[t + 0].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i + 1, t + 0);
            }
            if (
              this.$refs.heng[i + 0].children[t - 1].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i + 0, t - 1);
            }
            if (
              this.$refs.heng[i + 0].children[t + 1].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i + 0, t + 1);
            }
          } else if (t === 0) {
            //第一列
            if (
              this.$refs.heng[i + 1].children[t + 1].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i + 1, t + 1);
            }
            if (
              this.$refs.heng[i + 1].children[t + 0].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i + 1, t + 0);
            }
            if (
              this.$refs.heng[i - 1].children[t + 0].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i - 1, t + 0);
            }
            if (
              this.$refs.heng[i + 0].children[t + 1].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i + 0, t + 1);
            }
            if (
              this.$refs.heng[i - 1].children[t + 1].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i - 1, t + 1);
            }
          } else if (i === this.heng - 1) {
            //最后一行
            if (
              this.$refs.heng[i - 1].children[t - 1].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i - 1, t - 1);
            }
            if (
              this.$refs.heng[i - 1].children[t + 1].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i - 1, t + 1);
            }
            if (
              this.$refs.heng[i - 1].children[t + 0].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i - 1, t + 0);
            }
            if (
              this.$refs.heng[i + 0].children[t - 1].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i + 0, t - 1);
            }
            if (
              this.$refs.heng[i + 0].children[t + 1].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i + 0, t + 1);
            }
          } else if (t === this.shu - 1) {
            //最后一列
            if (
              this.$refs.heng[i - 1].children[t - 1].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i - 1, t - 1);
            }
            if (
              this.$refs.heng[i + 0].children[t - 1].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i + 0, t - 1);
            }
            if (
              this.$refs.heng[i + 1].children[t - 1].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i + 1, t - 1);
            }
            if (
              this.$refs.heng[i + 1].children[t + 0].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i + 1, t + 0);
            }
            if (
              this.$refs.heng[i - 1].children[t + 0].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i - 1, t + 0);
            }
          } else {
            //普通的
            if (
              this.$refs.heng[i + 1].children[t + 1].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i + 1, t + 1);
            }
            if (
              this.$refs.heng[i + 0].children[t + 1].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i + 0, t + 1);
            }
            if (
              this.$refs.heng[i + 0].children[t - 1].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i + 0, t - 1);
            }
            if (
              this.$refs.heng[i + 1].children[t + 0].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i + 1, t + 0);
            }
            if (
              this.$refs.heng[i + 1].children[t - 1].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i + 1, t - 1);
            }
            if (
              this.$refs.heng[i - 1].children[t + 1].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i - 1, t + 1);
            }
            if (
              this.$refs.heng[i - 1].children[t - 1].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i - 1, t - 1);
            }
            if (
              this.$refs.heng[i - 1].children[t + 0].className.indexOf(
                "shukai"
              ) === -1
            ) {
              this.shang(i - 1, t + 0);
            }
          }

          // if (i === 0 && t === 0) {
          //   //头一行、头一个
          // } else if (i === this.heng - 1 && t === this.shu - 1) {
          //   //最后一行、最后一个
          // } else if (i === 0 && t === this.shu - 1) {
          //   //头一行、最后一个
          // } else if (i === this.heng - 1 && t === 0) {
          //   //最后一行、头一个
          // } else if (i === 0) {
          //   //头一行
          // } else if (t === 0) {
          //   //头一列
          // } else if (i === this.heng - 1) {
          //   //最后一行
          // } else if (t === this.shu - 1) {
          //   //最后一列
          // } else {
          //   //普通的
          // }
          // if (i - 1 >= 0 && t - 1 >= 0) {
          //   this.shang(i - 1, t - 1);
          // } else if (i - 1 >= 0 && t + 1 <= this.shu) {
          //   this.shang(i - 1, t + 1);
          // } else if (i + 1 <= this.heng && t - 1 >= 0) {
          //   this.shang(i + 1, t - 1);
          // } else if (i + 1 <= this.heng && t + 1 <= this.shu) {
          //   this.shang(i + 1, t + 1);
          // } else if (i + 1 <= this.heng) {
          //   this.shang(i + 1, t);
          // } else if (i - 1 >= 0) {
          //   this.shang(i - 1, t);
          // } else if (t + 1 <= this.shu) {
          //   this.shang(i, t + 1);
          // } else if (t - 1 >= 0) {
          //   this.shang(i, t + 1);
          // }
          // if (this.$refs.heng[i - 1].children[t + 1]) {
          //   this.shang(i - 1, t + 1);
          // }
          // if (this.$refs.heng[i+0].children[t - 1]) {
          //   this.shang(i, t - 1);
          // }
          // if (this.$refs.heng[i+0].children[t + 1]) {
          //   this.shang(i, t + 1);
          // }
          // if (this.$refs.heng[i + 1].children[t - 1]) {
          //   this.shang(i + 1, t - 1);
          // }
          // if (this.$refs.heng[i + 1].children[t+0]) {
          //   this.shang(i + 1, t);
          // }
          // if (this.$refs.heng[i + 1].children[t + 1]) {
          //   this.shang(i + 1, t + 1);
          // }
        }
      }
    },
    clear() {
      for (let i = 0; i < this.heng; i++) {
        for (let t = 0; t < this.shu; t++) {
          this.$refs.heng[i + 0].children[t + 0].className = "shu";
        }
      }
    },
    //随机在横*竖个数字中生成leishu个雷数，添加时去重
    setlei() {
      for (let i = 0; this.lei.length < this.leishu; i++) {
        let a = parseInt(Math.random() * this.heng * this.shu);
        if (i === 0) {
          this.lei.push(a);
        } else {
          if (
            !this.lei.some((t) => {
              a === t;
            })
          ) {
            this.lei.push(a);
          }
        }
      }
      //将一维数组转换成二维坐标组得到雷的坐标
      this.leiList = this.lei.map((i) => {
        return [parseInt(i / this.heng), i % this.heng];
      });
      //添加雷
      this.leiList.forEach((i) => {
        this.$refs.heng[i[0]].children[i[1]].className = "shu lei";
      });
    },
    //获取每个格子的数量  （枚举法 写的特别丑陋）
    // 整个地图分为左上角、右上角、左下角、右下角、第一行、第一列、最后一行、最后一列、中间9块
    // 每块需要计算的方块不一样分别是3、3、3、3、5、5、5、5、8，不知道有没有人能优化一下
    getnum() {
      for (let i = 0; i < this.heng; i++) {
        for (let t = 0; t < this.shu; t++) {
          if (i === 0 && t === 0) {
            //头一行、头一个
            let num = "";
            let a =
              this.$refs.heng[i + 1].children[t + 1].className +
              ` ${this.$refs.heng[i + 0].children[t + 1].className}` +
              ` ${this.$refs.heng[i + 1].children[t + 0].className}`;
            a = a.split(" ");
            a.forEach((i) => {
              if (i === "lei" && num !== "") {
                num = num + 1;
              } else if (i === "lei") {
                num = 1;
              }
            });
            this.$refs.heng[i + 0].children[t + 0].innerHTML = num;
          } else if (i === this.heng - 1 && t === this.shu - 1) {
            //最后一行、最后一个
            let num = "";
            let a =
              this.$refs.heng[i - 1].children[t - 1].className +
              ` ${this.$refs.heng[i + 0].children[t - 1].className}` +
              ` ${this.$refs.heng[i - 1].children[t + 0].className}`;
            a = a.split(" ");
            a.forEach((i) => {
              if (i === "lei" && num !== "") {
                num = num + 1;
              } else if (i === "lei") {
                num = 1;
              }
            });
            this.$refs.heng[i + 0].children[t + 0].innerHTML = num;
          } else if (i === 0 && t === this.shu - 1) {
            //头一行、最后一个
            let num = "";
            let a =
              this.$refs.heng[i + 1].children[t - 1].className +
              ` ${this.$refs.heng[i + 0].children[t - 1].className}` +
              ` ${this.$refs.heng[i + 1].children[t + 0].className}`;
            a = a.split(" ");
            a.forEach((i) => {
              if (i === "lei" && num !== "") {
                num = num + 1;
              } else if (i === "lei") {
                num = 1;
              }
            });
            this.$refs.heng[i + 0].children[t + 0].innerHTML = num;
          } else if (i === this.heng - 1 && t === 0) {
            //最后一行、头一个
            let num = "";
            let a =
              this.$refs.heng[i - 1].children[t + 1].className +
              ` ${this.$refs.heng[i + 0].children[t + 1].className}` +
              ` ${this.$refs.heng[i - 1].children[t + 0].className}`;
            a = a.split(" ");
            a.forEach((i) => {
              if (i === "lei" && num !== "") {
                num = num + 1;
              } else if (i === "lei") {
                num = 1;
              }
            });
            this.$refs.heng[i + 0].children[t + 0].innerHTML = num;
          } else if (i === 0) {
            //第一行
            let num = "";
            let a =
              this.$refs.heng[i + 1].children[t - 1].className +
              ` ${this.$refs.heng[i + 1].children[t + 1].className}` +
              ` ${this.$refs.heng[i + 1].children[t + 0].className}` +
              ` ${this.$refs.heng[i + 0].children[t - 1].className}` +
              ` ${this.$refs.heng[i + 0].children[t + 1].className}`;
            a = a.split(" ");
            a.forEach((i) => {
              if (i === "lei" && num !== "") {
                num = num + 1;
              } else if (i === "lei") {
                num = 1;
              }
            });
            this.$refs.heng[i + 0].children[t + 0].innerHTML = num;
          } else if (t === 0) {
            //第一列
            let num = "";
            let a =
              this.$refs.heng[i + 1].children[t + 1].className +
              ` ${this.$refs.heng[i + 0].children[t + 1].className}` +
              ` ${this.$refs.heng[i - 1].children[t + 1].className}` +
              ` ${this.$refs.heng[i - 1].children[t + 0].className}` +
              ` ${this.$refs.heng[i + 1].children[t + 0].className}`;
            a = a.split(" ");
            a.forEach((i) => {
              if (i === "lei" && num !== "") {
                num = num + 1;
              } else if (i === "lei") {
                num = 1;
              }
            });
            this.$refs.heng[i + 0].children[t + 0].innerHTML = num;
          } else if (i === this.heng - 1) {
            //最后一行
            let num = "";
            let a =
              this.$refs.heng[i - 1].children[t - 1].className +
              ` ${this.$refs.heng[i - 1].children[t + 1].className}` +
              ` ${this.$refs.heng[i - 1].children[t + 0].className}` +
              ` ${this.$refs.heng[i + 0].children[t - 1].className}` +
              ` ${this.$refs.heng[i + 0].children[t + 1].className}`;
            a = a.split(" ");
            a.forEach((i) => {
              if (i === "lei" && num !== "") {
                num = num + 1;
              } else if (i === "lei") {
                num = 1;
              }
            });
            this.$refs.heng[i + 0].children[t + 0].innerHTML = num;
          } else if (t === this.shu - 1) {
            //最后一列
            let num = "";
            let a =
              this.$refs.heng[i - 1].children[t - 1].className +
              ` ${this.$refs.heng[i + 0].children[t - 1].className}` +
              ` ${this.$refs.heng[i + 1].children[t - 1].className}` +
              ` ${this.$refs.heng[i + 1].children[t + 0].className}` +
              ` ${this.$refs.heng[i - 1].children[t + 0].className}`;
            a = a.split(" ");
            a.forEach((i) => {
              if (i === "lei" && num !== "") {
                num = num + 1;
              } else if (i === "lei") {
                num = 1;
              }
            });
            this.$refs.heng[i + 0].children[t + 0].innerHTML = num;
          } else {
            //普通的
            let num = "";
            let a =
              this.$refs.heng[i + 1].children[t + 1].className +
              ` ${this.$refs.heng[i + 0].children[t + 1].className}` +
              ` ${this.$refs.heng[i + 0].children[t - 1].className}` +
              ` ${this.$refs.heng[i + 1].children[t + 0].className}` +
              ` ${this.$refs.heng[i + 1].children[t - 1].className}` +
              ` ${this.$refs.heng[i - 1].children[t + 1].className}` +
              ` ${this.$refs.heng[i - 1].children[t - 1].className}` +
              ` ${this.$refs.heng[i - 1].children[t + 0].className}`;
            a = a.split(" ");
            a.forEach((i) => {
              if (i === "lei" && num !== "") {
                num = num + 1;
              } else if (i === "lei") {
                num = 1;
              }
            });
            this.$refs.heng[i + 0].children[t + 0].innerHTML = num;
          }
        }
      }
    },
  },

  mounted() {
    this.init();
  },
};
</script>
<style scoped>
.caozuo {
  display: flex;
  justify-content: space-around;
}
.time {
  text-align: center;
}
.saolei {
  width: 1000px;
  height: 800px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border: 1px solid #000;
}
.paihangbang {
  width: 200px;
  height: 100%;
}
.shezhi {
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.qipan {
  position: relative;
  display: inline-block;
  line-height: 16px;
}
.heng {
  margin: 0;
  padding: 0;
  height: 20px;
}
.shukai {
  display: inline-block;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 1px solid #000;
  position: relative;
  font-size: 12px;
  text-align: center;
  vertical-align: middle;
  background-color: rgb(194, 194, 194);
  border-radius: 0px;
  background: linear-gradient(315deg, #f0f0f0, #cacaca);
  box-shadow: -2px -2px 4px #7b7b7b, 2px 2px 4px #ffffff;
}
.shuxia {
  display: inline-block;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 1px solid #000;
  position: relative;
  font-size: 12px;
  text-align: center;
  vertical-align: middle;
  background-color: #b3b3b3;
  border-radius: 0px;
  background: linear-gradient(315deg, #cacaca, #f0f0f0);
  box-shadow: -2px -2px 4px #7b7b7b, 2px 2px 4px #ffffff;
}
.shuxia::before {
  content: "";
  position: absolute;
  display: inline-block;
  width: 17px;
  height: 17px;
  top: 1px;
  left: 1px;
  z-index: 10;
  background-color: #d8d8d8;
}
.shu {
  display: inline-block;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 1px solid #000;
  position: relative;
  font-size: 12px;
  text-align: center;
  vertical-align: middle;
  background-color: #a8a8a8;
  border-radius: 0px;
  background: linear-gradient(315deg, #f0f0f0, #cacaca);
  box-shadow: -2px -2px 4px #7b7b7b, 2px 2px 4px #ffffff;
}
.shu::before {
  content: "";
  position: absolute;
  display: inline-block;
  width: 17px;
  height: 17px;
  top: 1px;
  left: 1px;
  z-index: 10;
  background-color: #777777;
}
.lei {
  position: relative;
}
.lei::after {
  content: "";
  position: absolute;
  display: inline-block;
  width: 10px;
  top: 4px;
  height: 10px;
  left: 4px;
  border-radius: 50%;
  background-color: #f00;
  /* z-index: 20; */
}
</style>