<template>
  <div class="lineUpBox">
    <div class="lineUpBoxTop">
      <ul class="lineUpBoxUl">
        <li :class="[[selecttopType == '' ? 'active' : '']]" @click="gettypeevent('')">
          <div>全部</div>
          <div>{{ tableData.totalCount || 0 }}桌</div>
          <div class="postionStyle" v-if="selecttopType == ''">
            <el-icon style="transform: translateY(-4px)" color="#fff">
              <Check />
            </el-icon>
          </div>
        </li>
        <li v-for="item in tableData.records" :key="item.id" @click="gettypeevent(item.id)"
          :class="[[selecttopType == item.id ? 'active' : '']]">
          <div>{{ item.name }}</div>
          <div>{{ item.totalCount || 0 }}桌</div>
          <div class="postionStyle" v-if="selecttopType == item.id">
            <el-icon style="transform: translateY(-4px)" color="#fff">
              <Check />
            </el-icon>
          </div>
        </li>
      </ul>
      <div class="buttonstyle">
        <el-button type="primary" @click="
          dialogVisibles = true;
        phone = '';
        ">
          取号
        </el-button>
        <el-button plain type="primary" @click="toUrl">叫号记录</el-button>
      </div>
    </div>
    <div style="display: flex; align-items: center; flex-wrap: wrap">
      <div class="lineUpBoxList" v-for="item in list" style="margin-right: 20px" :key="item.id">
        <ul>
          <li>
            <div>用户</div>
            <div>{{ item.phone }}</div>
          </li>
          <li>
            <div>号码</div>
            <div>{{ item.callNum }}</div>
          </li>
          <li>
            <div>桌型</div>
            <div>{{ item.name }}{{ item.note }}</div>
          </li>
          <li>
            <div>等待</div>
            <div>{{ item.waitingCount }}桌</div>
          </li>
        </ul>
        <div>
          <el-button type="primary" @click="dialogConfirm(1, item)">取消</el-button>
          <el-button type="primary" @click="profilepicture(item)">播报</el-button>
        </div>
      </div>
    </div>
    <!-- 播报弹窗 -->
    <el-dialog title="提示" v-model="dialogVisible" center width="30%">
      <div style="text-align: center">
        <div style="font-size: 16px">正在叫号，请稍等</div>
        <div v-if="profilepicturedata.state == 1" style="color: #52c41a; font-size: 16px; margin-top: 17px">
          已发送至用户
          <i class="el-icon-circle-check" style="color: #52c41a"></i>
        </div>
        <div v-else style="color: #ff4d4f; font-size: 16px; margin-top: 17px">
          用户未订阅消息
          <i style="color: #ff4d4f" class="el-icon-circle-close"></i>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button style="
              width: 176px;
              height: 48px;
              background: #f7f7fa;
              box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.02);
              border-radius: 2px 2px 2px 2px;
              border: 1px solid rgba(255, 255, 255, 0);
            " @click="dialogConfirm(2)">
            完成
          </el-button>
          <el-button type="primary" style="
              width: 189px;
              height: 45px;
              background: #ff4d4f;
              box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.02);
              border-radius: 2px 2px 2px 2px;
              border: 1px solid rgba(255, 255, 255, 0.28);
            " @click="dialogConfirm(3)">
            过号
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 取号 -->
    <el-dialog title="取号" v-model="dialogVisibles" width="30%">
      <div>
        <div style="color: #000">选择桌型</div>
        <ul class="lineUpBoxUl" :class="[tableData.records.length > 2 ? 'dfs' : 'dfas']" style="margin-top: 10px">
          <li v-for="item in tableData.records" :key="item.id" @click="selectTabletype = item"
            :class="[[selectTabletype.id == item.id ? 'active' : '']]">
            <div>{{ item.name }}</div>
            <div>{{ item.totalCount }}桌</div>
            <div class="postionStyle" v-if="selectTabletype.id == item.id">
              <el-icon style="transform: translateY(-4px)" color="#fff">
                <Check />
              </el-icon>
            </div>
          </li>
        </ul>
        <div style="margin-top: 20px; color: #000">手机号码</div>
        <div style="margin-top: 10px; border:1px solid #999">
          <input v-model="phone" style="height: 30px" type="text" placeholder="填写号码" />
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="callTabletakeNumberEvent">确认取号</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
const synth = window.speechSynthesis;
const msg = new SpeechSynthesisUtterance();
import callTableApi from "@/api/account/callTable";
export default {
  data() {
    return {
      query: {
        productId: "",
        name: "",
        categoryId: "",
        typeEnum: "",
      },
      tableData: {
        data: [],
        page: 1,
        size: 30,
        loading: false,
        total: 0,
      },
      selecttopType: "",
      list: [],
      dialogVisible: false,
      dialogVisibles: false,
      profilepictureInfo: "",
      phone: "",
      selectTabletype: "",
      // 播报弹窗显示是否订阅
      profilepicturedata: "",
    };
  },
  async mounted() {
    await this.getlist();
    // 获取桌台
    await this.getTable();
  },
  methods: {
    async getTable() {
      const res = await callTableApi.getTable({
        page: 1,
        size: 9999,
      });
      this.tableData.records = res.records
      this.selectTabletype = res.records[0]
    },
    // 确认叫号
    async callTabletakeNumberEvent() {
      const res = await callTableApi.getTakeNumber({
        callTableId: this.selectTabletype.id,
        phone: this.phone,
        note: this.selectTabletype.note,
        name: this.selectTabletype.name,
      });
      if (res.callNum) {
        this.getlist();
        this.dialogVisibles = false;
      }
    },

    handleSpeak(text) {
      msg.text = text; // 文字内容: 小朋友，你是否有很多问号
      msg.lang = "zh-CN"; // 使用的语言:中文
      msg.volume = 3; // 声音音量：1
      msg.rate = 1; // 语速：1
      msg.pitch = 1; // 音高：1
      synth.speak(msg); // 播放
    },
    // // 语音停止
    // handleStop(e) {
    //     msg.text = e;
    //     msg.lang = "zh-CN";
    //     synth.cancel(msg);
    // },

    async profilepicture(d) {
      this.handleSpeak("请" + d.callNum + "用餐");
      let res = await callTableApi.callTableCall({
        shopId: localStorage.getItem("shopId"),
        callQueueId: d.id,
      });
      if (res) {
        this.dialogVisible = true;
        this.profilepicturedata = res;
        this.profilepictureInfo = d;
      }
    },
    gettypeevent(d) {
      this.selecttopType = d;
      this.getlist();
    },
    async dialogConfirm(value, item) {
      if (value == 1) {
        const res = await callTableApi.updateTableState({
          shopId: localStorage.getItem("shopId"),
          state: -1,
          callQueueId: item.id,
        });
        if (res) {
          this.getlist();
        }
      } else {
        const res = await callTableApi.updateTableState({
          shopId: localStorage.getItem("shopId"),
          state: value,
          callQueueId: this.profilepictureInfo.id,
        });
        if (res) {
          this.getlist();
          this.dialogVisible = false;
        }
      }
    },
    toUrl() {
      this.$router.push({ path: "/application/lineUpRecord" });
    },
    async getlist() {
      const res = await callTableApi.getTableNumberList({
        page: 1,
        size: 9999,
        callTableId: this.selecttopType,
        state: 0,
      });
      this.list = res.records;
    },
  },
};
</script>

<style scoped lang="scss">
* {
  margin: 0;
  text-decoration: none;
  outline: none;
}

ul,
li {
  list-style: none;
}

.show {
  display: none !important;
}

.hidden {
  display: block !important;
}

.lineUpBox {}

.lineUpBoxTop {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .lineUpBoxUl {
    display: flex;
    align-items: center;
    padding: 0;

    >li {
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #dddfe6;
      width: 112px;
      text-align: center;
      margin-right: 20px;
      position: relative;

      >div {
        margin-top: 8px;
        color: #999;
      }

      >div:first-child {
        color: #333333;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 14px;
        line-height: 16px;
        text-align: center;
      }

      .postionStyle {
        position: absolute;
        right: 0px;
        top: -9px;
        width: 0;
        height: 0;
        border: 14px solid;
        border-color: #318afe #318afe #fff #fff;
      }

      .postionStyleI {
        position: absolute;
        right: -13px;
        top: -13px;
        color: #fff;
        font-size: 14px;
        width: 0;
        height: 0;
      }
    }

    .active {
      border: 2px solid #318afe;

      >view:first-child {
        color: #318afe;
      }
    }
  }

  .buttonstyle {
    >button {
      height: 31px;

      padding: 5px 16px;
      font-weight: 500;
      font-size: 14px;
    }
  }
}

.lineUpBoxList {
  width: 507px;
  height: 148px;
  background: #ffffff;
  border-radius: 6px 6px 6px 6px;
  border: 1px solid #dddfe6;
  margin-top: 30px;

  >ul {
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    >li {
      >div:nth-child(2) {
        margin-top: 15px;
      }
    }
  }

  >div {
    display: flex;
    justify-content: space-around;

    >button {
      width: 169px;
      height: 32px;
      box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.02);
      border-radius: 1px 1px 1px 1px;
      border: 1px solid #d9d9d9;
    }

    >button:first-child {
      background: #ffffff;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      color: #666666;
      text-align: center;
    }
  }
}

.dfs {
  justify-content: space-between;
}

.dfas {
  >li {
    margin-right: 52px;
  }
}

.lineUpBoxUl {
  display: flex;
  align-items: center;
  padding: 0;

  >li {
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #dddfe6;
    text-align: center;
    position: relative;
    min-width: 110px;
    cursor: pointer;

    >div {
      margin-top: 8px;
      color: #999;
    }

    >div:first-child {
      color: #333333;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 14px;
      line-height: 16px;
      text-align: center;
    }

    .postionStyle {
      position: absolute;
      right: 0px;
      top: -9px;
      border: 14px solid;
      border-color: #318afe #318afe #fff #fff;
      display: flex;
      justify-content: center;
      align-content: center;
      flex-direction: column;
      width: 0;
      height: 0;
    }

    .postionStyleI {
      width: 0;
      height: 0;
      position: absolute;
      right: -13px;
      top: -13px;
      color: #fff;
      font-size: 14px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;
    }
  }

  .active {
    border: 2px solid #318afe;

    >view:first-child {
      color: #318afe;
    }
  }
}

.handle {
  font-size: 18px;
  color: #999;

  &:hover {
    cursor: grab;
  }
}

.shop_info {
  display: flex;

  .info {
    flex: 1;
    padding-left: 8px;
    display: flex;
    flex-direction: column;

    .tag_wrap {
      display: flex;
    }
  }
}
</style>