<!--蓝牙连接列表-->
<template>
  <view class="bluetoothJoioDig-template">
    <tui-dialog :buttons="buttons"
                :show="show"
                title="选择蓝牙连接"
                @close="close"
                @click="buttonTap">
      <template v-slot:content>
        <view class="blueboothList">
          <view class="item"
                v-for="(item,index) in updateBlueDeviceList"
                @click="$emit('connect',item)"
                :key="index">
            <view class="bluetoothBox">
              <text>设备名称: {{ item.name }}</text>
            </view>
          </view>
        </view>
      </template>
    </tui-dialog>
  </view>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      updateBlueDeviceList: [],
      message: "",
      messageHex: "",
      modal: true,
      show: false,
      tiem: null,
      buttons: [
        {
          text: "取消",
        },
        {
          text: "确定",
          color: "#586c94",
        },
      ],
    };
  },
  props: ["blueDeviceList", "loading"],
  created() {
    this.shown();
  },
  watch: {
    blueDeviceList(newVal) {
      console.log("监听到属性改变:", newVal);
      this.updateBlueDeviceList = newVal;
    },
  },
  methods: {
    ...mapMutations(["setBluetooth"]),
    //调用此方法显示提示，需等组件初始化完成，避免在onLoad中调用
    showToast: function (e) {
      let params = {
        title: "操作成功",
        imgUrl: "/static/images/toast/check-circle.png",
        icon: true,
      };
      this.$refs.toast && this.$refs.toast.show(params);
    },
    // 调用此方法显示dialog
    shown() {
      this.show = true;
    },
    close() {
      console.log("loading:", this.loading);
      if (this.loading) return;
      this.$emit("close");
      this.show = false;
    },
    buttonTap(e) {
      console.log(e);
      this.close();
    },
  },
  computed: {
    ...mapState(["bluetooth"]),
  },
  mounted() {
    setTimeout(() => {
      if (this.updateBlueDeviceList.length <= 0) {
        uni.showToast({
          icon: "none",
          title: "检查蓝牙和定位是否打开,检查打印机状态!",
        });
      }
    }, 1500);
  },
};
</script>
<style lang="scss" scoped>
.bluetoothJoioDig-template {
  .blueboothList {
    height: 40vh;
    overflow: scroll;
    .bluetoothBox {
      border: 1px solid #e6e6e6;
      border-radius: 10px;
      padding: 30rpx;
      margin-bottom: 10rpx;
    }
  }
}
</style>
