<template>
  <div class="device_container">
    <div class="header" @click="router.back()">
      <el-icon style="position: relative; top: 2px; margin-right: 4px" size="22">
        <ArrowLeft />
      </el-icon>
      <el-text>设备管理</el-text>
    </div>
    <div class="d_content">
      <div class="d_list">
        <div class="row_title">打印设备</div>
        <div class="row_list">
          <div class="item" v-for="item in list" :key="item.id">
            <div class="left">
              <div class="icon">
                <el-image :src="icons[item.subType]" style="width: 40px; height: 40px"></el-image>
              </div>
              <div class="info">
                <div class="name">{{ item.name }}</div>
                <div class="xh">{{ item.address }}</div>
              </div>
            </div>
            <div class="right">
              <div class="switch">
                <el-switch v-model="item.status" inline-prompt active-text="开" inactive-text="关" :active-value="1"
                  :inactive-value="0" width="90" @change="statusChange($event, item)" />
              </div>
              <div class="editor">
                <el-text type="primary" @click="
                  router.push({
                    name: deviceRoute[item.subType],
                    query: { id: item.id },
                  })
                  ">
                  编辑
                </el-text>
                <el-text type="primary" @click="showDelete(item)">删除</el-text>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="row_title">云打印设备</div>
        <div class="row_list">
          <div class="item" v-for="item in list" :key="item.id">
            <div class="left">
              <div class="icon"></div>
              <div class="info">
                <div class="name">{{ item.name }}</div>
                <div class="xh">{{ item.xh }}</div>
              </div>
            </div>
            <div class="right">
              <div class="switch">
                <el-switch
                  v-model="item.state"
                  inline-prompt
                  active-text="开"
                  inactive-text="关"
                  :active-value="1"
                  :inactive-value="0"
                  width="90"
                />
              </div>
              <div class="editor">
                <el-text type="primary">编辑</el-text>
                <el-text type="primary">删除</el-text>
              </div>
            </div>
          </div>
        </div> -->
      </div>
      <div class="menu_wrap">
        <div class="row" @click="router.push({ name: 'add_device' })">
          <div class="icon" style="background-color: var(--primary-color)">
            <el-image :src="icons.cash" style="width: 36px; height: 36px"></el-image>
          </div>
          <div class="info">
            <div class="name">添加小票打印机</div>
            <div class="intro">用来打印客户（收银）小票的打印机。</div>
          </div>
        </div>
        <div class="row" @click="router.push({ name: 'add_label' })">
          <div class="icon" style="background-color: #79c3d5">
            <el-image :src="icons.label" style="width: 38px; height: 38px"></el-image>
          </div>
          <div class="info">
            <div class="name">添加标签打印机</div>
            <div class="intro">用来打印商品标签的打印机。</div>
          </div>
        </div>
        <!-- <div class="row">
          <div class="icon" style="background-color: #8fc783">
            <el-image :src="icons.kitchen" style="width: 44px; height: 44px"></el-image>
          </div>
          <div class="info">
            <div class="name">添加出品打印机</div>
            <div class="intro">用来打印商品至厨房或出品台的打印机。</div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" title="注意" width="500">
    <span class="dialog_content">确定删除该打印机吗？</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="delLoading" @click="tbPrintMachineDeleteAjax">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { printerList, printerAdd } from '@/api/account.js'
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import icons from "./icons";
import { usePrint } from "@/store/print.js";

const printStore = usePrint();

const router = useRouter();
const list = ref([]);
const dialogVisible = ref(false);
const deleteId = ref("");
const delLoading = ref(false);
const deviceRoute = ref({
  cash: "add_device",
  label: "add_label",
  kitchen: "add_kitchen",
});

async function statusChange(e, item) {
  try {
    await printerAdd(item, "put");
    tbPrintMachineGetAjax();
    printStore.init();
  } catch (error) {
    console.log(error);
  }
}

// 显示删除打印机弹窗
function showDelete(item) {
  deleteId.value = item.id;
  dialogVisible.value = true;
}

// 删除打印机
async function tbPrintMachineDeleteAjax() {
  try {
    delLoading.value = true;
    await printerAdd({ id: deleteId.value }, 'delete');
    dialogVisible.value = false;
    ElMessage.success("删除成功");
    tbPrintMachineGetAjax();
    printStore.init();
  } catch (error) {
    console.log(error);
  }
  delLoading.value = false;
}

// 获取打印机列表
async function tbPrintMachineGetAjax() {
  try {
    const res = await printerList();
    list.value = res.records;
  } catch (error) {
    console.log(error);
  }
}

onMounted(() => {
  tbPrintMachineGetAjax();
});
</script>

<style scoped lang="scss">
.dialog_content {
  font-size: var(--el-font-size-base);
}

.dialog-footer {
  padding: 0 var(--el-font-size-base) var(--el-font-size-base);
}

.device_container {
  width: 100vw;
  height: 100vh;
  padding: 15px;
  background-color: #f1f1f1;
}

.header {
  height: 50px;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.d_content {
  padding-top: 15px;
  display: flex;
  height: calc(100vh - 15px * 2 - 50px);

  .d_list {
    flex: 2;
    border-radius: 10px;
    background-color: #fff;
    padding: 15px;

    .row_title {
      color: #555;
      margin-bottom: 15px;
    }

    .row_list {
      .item {
        border-radius: 6px;
        background-color: #f1f1f1;
        margin-bottom: 10px;
        padding: 15px;
        display: flex;
        justify-content: space-between;

        .left {
          display: flex;
          align-items: center;

          .icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
          }

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

            .xh {
              color: #999;
              padding-top: 6px;
            }
          }
        }

        .right {
          display: flex;
          flex-direction: column;
          align-items: center;

          .editor {
            display: flex;
            gap: 20px;
          }
        }
      }
    }
  }

  .menu_wrap {
    flex: 1.5;
    margin-left: 15px;
    background-color: #fff;
    border-radius: 10px;
    padding: 0 15px;

    .row {
      display: flex;
      align-items: center;
      padding: 20px 0;

      &:not(:last-child) {
        border-bottom: 1px solid #ececec;
      }

      .icon {
        --size: 60px;
        width: var(--size);
        height: var(--size);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 15px;

        .name {
          font-size: 20px;
        }

        .intro {
          color: #999;
          padding-top: 8px;
        }
      }
    }
  }
}
</style>
