<template>
  <div>
    <div style=" display: flex;justify-content: center;">
      <h2 style="color: #0aa6e0">欢迎使用现场作业工作台</h2>
    </div>
    <el-divider/>
    <!-- 分割线 -->
    <el-form :model="query" class="query-form" size="mini" label-width="100px" :inline="true">
      <el-form-item prop="key" label="工位信息:">
        <el-input v-model="query.workKey" clearable placeholder="请输入或扫描工位二维码" style="width: 400px"  ref="inputField" ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button-group style="margin-left: 10px;display:flex;">
          <el-button type="primary" icon="el-icon-search" @click.native.stop="getStationList()">搜索</el-button>
        </el-button-group>
      </el-form-item>

    </el-form>


    <el-row :gutter="8">
      <el-col v-for="(info, index)  in stationList"  :key="index" :xs="12" :sm="8" :md="8" :lg="6" >
        <el-card :body-style="{margin:'20px'}"
                 style="margin:20px 20px 20px 20px;height: 200px;background-color: #e1f3fb;border-radius: 12px; position: relative;"
        >

          <div style="display: flex; justify-content: space-between; align-items: center; height: 66px; /* 约为 200px 的 1/3 */" >
            <p style="font-size: 20px;background-color: #e1f3fb;font-weight: bold;">{{ info.workplaceName }}</p> <!-- 假设你的信息对象中包含一个title属性 -->
<!--            <div style="width: 60px; height: 60px;  display: flex; justify-content: center; align-items: center;">-->
<!--              &lt;!&ndash; 二维码占位，这里用灰色方块代替 &ndash;&gt;-->
<!--&lt;!&ndash;              <span>QR</span>&ndash;&gt;-->
<!--              <div ref="qrcode" :id="'qrcode-'+index" style="width: 60px;height: 60px;"></div>-->

<!--            </div>-->
          </div>
          <div style="flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 10px;"  >
            <!-- 假设这里有一些信息内容 -->
            <p style="font-size: 14px;background-color: #e1f3fb" >{{ info.remake }}</p>
            <el-button type="primary" style="position: absolute; bottom: 20px; right: 20px;" icon="el-icon-thumb" @click="handleClick(index)">开始作业</el-button>

          </div>



        </el-card>
      </el-col>
    </el-row>


    </div>
</template>

<script>
import {listPage} from "@/api/basic/workPlace/sysWorkplaceManage.js";
import QRCode from 'qrcodejs2'
import { getUserBindWork } from '@/api/basic/collectPoint/userWorkplace'

export default {
  name: 'fieldOperation',
  data() {
    return {
      query:{
        workKey: '',
        workplaceStatus: 1,
        userId: this.$store.getters.adminId,
        // invCode: this.$store.getters.locInvCode,
        page: 1,
        limit: 200
      },
      // 假设这是你的卡片数据
      stationList: []
    };
  },
  created() {
    //获取工位list
    this.getStationList()
    // this.generateQRCodes()
  },
  methods: {
    generateQRCodes() {
      this.stationList.forEach((info, index) => {
        new QRCode(document.getElementById(`qrcode-${index}`), {
          text: info.workplaceId,
          width: 60,
          height: 60,
          colorDark: "#000000",
          colorLight: "transparent",
          correctLevel: QRCode.CorrectLevel.H
        });
      });
    },
    handleClick(index) {
      let url = window.location.origin + `/UDI_WMS_NEW#/tagCodeBlank?workplaceId=` + this.stationList[index].workplaceId
      // this.$router.push( workplaceId)
      window.open(url, '_blank');
    },
    getStationList() {
      getUserBindWork(this.query).then(res => {
        this.stationList = res.data?.list || []
        // this.generateQRCodes
      })

    },
  },
  mounted() {
    // this.getStationList()
    // this.generateQRCodes();
    this.$nextTick(() => {
      this.$refs.inputField.focus();
    });
  }
}
</script>

<style >

.custom-disabled-input input.el-input__inner:disabled {
  color: #000000; /* 修改为需要的颜色 */
}
/* 添加样式来定位左上角的删除按钮 */
.close-button {
  position: absolute;
  top: 10px; /* 你可以根据需要调整这个值 */
  right: 10px; /* 你可以根据需要调整这个值 */
  z-index: 1; /* 确保按钮在卡片内容之上 */
}

</style>
