<template>
  <ifrm ref="ifrm">
    <!-- 解绑 -->
    <uni-forms ref="wrForm" class="formBox">
      <uni-forms-item label="模式：" label-width="100px" class="label-left">
        <template #label>
          <view class="required-label">
            <text>扫描模式：</text>
          </view>
        </template>
        <view class="mode-switch">
          <view class="switch-btn" :class="{ active: scanMode === 'add' }" @click="handleModeChange('add')">
            新增
          </view>
          <view class="switch-btn" :class="{ active: scanMode === 'del' }" @click="handleModeChange('del')">
            删除
          </view>
        </view>
      </uni-forms-item>
      <uni-forms-item>
        <input type="text" :focus="cardNoFcous" @confirm="cardNoBlur" v-model="cardNoInfo" class="uni-input-border"
          placeholder="流程卡" />
      </uni-forms-item>
      <div v-if="scanMode === 'del'">

      </div>
      <div v-if="scanMode === 'add'">
        <uni-forms-item name="allegation"><input type="text" :focus="oneInputFcous" @confirm="oneInputData"
            v-model="oneInput" class="uni-input-border" placeholder="挂具" /></uni-forms-item>
        <uni-forms-item name="allegation"><input type="text" :focus="twoInputFcous" v-model="twoInput"
            @confirm="twoInputData" class="uni-input-border" placeholder="飞靶" /></uni-forms-item>
        <uni-forms-item name="allegation"><input type="text" :focus="therrInputFcous" v-model="therrInput"
            @confirm="therrInputData" class="uni-input-border" placeholder="设备" /></uni-forms-item>
      </div>
    </uni-forms>
    <view class="tableBox" v-if="scanMode === 'add'">
      <uni-card title="工序信息" v-if="Object.keys(processSet).length > 0">
        <t-table>
          <t-tr>
            <t-td>车间订单号</t-td>
            <t-td>{{ processSet.woCode }}</t-td>
          </t-tr>
          <t-tr>
            <t-td>零件号</t-td>
            <t-td>{{ processSet.partCode }}</t-td>
          </t-tr>
          <t-tr>
            <t-td>批次号</t-td>
            <t-td>{{ processSet.batchNo }}</t-td>
          </t-tr>
          <t-tr>
            <t-td>加工数量</t-td>
            <t-td>{{ processSet.makeQty }}</t-td>
          </t-tr>
          <t-tr>
            <t-td>班组</t-td>
            <t-td>{{ processSet.makeTeam }}</t-td>
          </t-tr>
          <t-tr>
            <t-td>当前工序号</t-td>
            <t-td>{{ processSet.orders }}</t-td>
          </t-tr>
          <t-tr>
            <t-td>当前工序名称</t-td>
            <t-td>{{ processSet.ppsName }}</t-td>
          </t-tr>
        </t-table>
      </uni-card>
      <uni-card title="挂具信息" v-if="Object.keys(bsRackSet).length > 0">
        <t-table>
          <t-tr>
            <t-td>同槽编号</t-td>
            <t-td>{{ bsRackSet.code }}</t-td>
          </t-tr>
          <t-tr>
            <t-td>挂具编号</t-td>
            <t-td>{{ bsRackSet.rsCode }}</t-td>
          </t-tr>
          <t-tr>
            <t-td>飞靶编号</t-td>
            <t-td>{{ bsRackSet.fsCode }}</t-td>
          </t-tr>
          <t-tr>
            <t-td>设备编号</t-td>
            <t-td>{{ bsRackSet.deviceCode }}</t-td>
          </t-tr>
          <t-tr>
            <t-td>挂次号</t-td>
            <t-td>{{ bsRackSet.hangNum }}</t-td>
          </t-tr>
          <t-tr>
            <t-td>绑定时间</t-td>
            <t-td>{{ bsRackSet.bindTime }}</t-td>
          </t-tr>
          <t-tr>
            <t-td>绑定人</t-td>
            <t-td>{{ bsRackSet.name }}</t-td>
          </t-tr>
        </t-table>
      </uni-card>
      <uni-card title="飞靶信息" v-if="Object.keys(feibaObj).length > 0">
        <t-table>
          <t-tr>
            <t-td>同槽编号</t-td>
            <t-td>{{ feibaObj.code }}</t-td>
          </t-tr>
          <t-tr>
            <t-td>挂具编号</t-td>
            <t-td>{{ feibaObj.rsCode }}</t-td>
          </t-tr>
          <t-tr>
            <t-td>飞靶编号</t-td>
            <t-td>{{ feibaObj.fsCode }}</t-td>
          </t-tr>
          <t-tr>
            <t-td>设备编号</t-td>
            <t-td>{{ feibaObj.deviceCode }}</t-td>
          </t-tr>
          <t-tr>
            <t-td>挂次号</t-td>
            <t-td>{{ feibaObj.hangNum }}</t-td>
          </t-tr>
          <t-tr>
            <t-td>绑定时间</t-td>
            <t-td>{{ feibaObj.bindTime }}</t-td>
          </t-tr>
          <t-tr>
            <t-td>绑定人</t-td>
            <t-td>{{ feibaObj.name }}</t-td>
          </t-tr>
        </t-table>
      </uni-card>
      <uni-card title="设备信息" v-if="Object.keys(facilityObj).length > 0">
        <t-table>
          <t-tr>
            <t-td>同槽编号</t-td>
            <t-td>{{ facilityObj.code }}</t-td>
          </t-tr>
          <t-tr>
            <t-td>挂具编号</t-td>
            <t-td>{{ facilityObj.rsCode }}</t-td>
          </t-tr>
          <t-tr>
            <t-td>飞靶编号</t-td>
            <t-td>{{ facilityObj.fsCode }}</t-td>
          </t-tr>
          <t-tr>
            <t-td>设备编号</t-td>
            <t-td>{{ facilityObj.deviceCode }}</t-td>
          </t-tr>
          <t-tr>
            <t-td>挂次号</t-td>
            <t-td>{{ facilityObj.hangNum }}</t-td>
          </t-tr>
          <t-tr>
            <t-td>绑定时间</t-td>
            <t-td>{{ facilityObj.bindTime }}</t-td>
          </t-tr>
          <t-tr>
            <t-td>绑定人</t-td>
            <t-td>{{ facilityObj.name }}</t-td>
          </t-tr>
        </t-table>
      </uni-card>
    </view>
    <view class="tableBox" v-if="scanMode === 'del'">
      <view v-if="rackList.length === 0" class="empty-tip">暂无绑定记录</view>

      <view v-for="(item, index) in rackList" :key="index" class="record-card-container">
        <!-- 移除 title 属性，改为内部自定义头部 -->
        <uni-card padding="0">
          <!-- 自定义头部：包含标题和删除按钮 -->
          <view class="card-header">
            <view class="header-title">记录 {{ index + 1 }}</view>
            <button class="header-btn" size="mini" type="warn" plain @click="removeClick(item)">
              删除
            </button>
          </view>

          <!-- 分割线 -->
          <view class="divider"></view>

          <!-- 内容区域 -->
          <view class="card-content">
            <view class="info-row">
              <text class="label">挂具编号：</text>
              <text class="value">{{ item.rsCode || '-' }}</text>
            </view>
            <view class="info-row">
              <text class="label">飞靶编号：</text>
              <text class="value">{{ item.fsCode || '-' }}</text>
            </view>
            <view class="info-row">
              <text class="label">设备编号：</text>
              <text class="value">{{ item.deviceCode || '-' }}</text>
            </view>
            <!-- 注意：你之前代码里这里也是 deviceCode，如果是挂次号请确认字段名 -->
            <view class="info-row">
              <text class="label">挂次号：</text>
              <text class="value">{{ item.hangNum || '-' }}</text>
            </view>
          </view>
        </uni-card>
      </view>
    </view>
    <view class="buttonBox" v-if="scanMode === 'add'">
      <button class="button" type="primary" :disabled="((Object.keys(processSet).length == 0) &&
       ( Object.keys(bsRackSet).length == 0 ||
        Object.keys(feibaObj).length == 0 ||
        Object.keys(facilityObj).length == 0)
      )
        " @click="submitClick">
        <!-- {{Object.keys(processSet).length  }}
        {{Object.keys(bsRackSet).length  }}
        {{ Object.keys(feibaObj).length }}
        {{ Object.keys(facilityObj).length }} -->
        确认
      </button>
    </view>
  </ifrm>
</template>

<script>
import ifrm from "@/pages/index/ifrm";
import tTable from "@/components/t-table/t-table.vue";
import tTh from "@/components/t-table/t-th.vue";
import tTr from "@/components/t-table/t-tr.vue";
import tTd from "@/components/t-table/t-td.vue";
import inputBlur from "@/mixin/inputBlur.js";
export default {
  // mixins: [inputBlur],
  components: {
    ifrm,
    tTable,
    tTh,
    tTr,
    tTd,
  },
  data() {
    return {
      scanMode: "add",
      therrInput: "",
      bsRackSet: {},
      feibaObj: {},
      facilityObj: {},
      oneFlag: false,
      twoFlag: false,
      therrFlag: false,
      cardNoFcous: true,
      cardNoInfo: '',//
      rackList: [],
      oneInputFcous: false,
      twoInputFcous: false,
      therrInputFcous: false,
      oneInput: '',
      twoInput: '',
      therrInput: '',
      processSet: {}
    };
  },
  onNavigationBarButtonTap(btn) {
    this.$refs.ifrm.topMenuClick(btn);
  },
  onShow() {

  },
  methods: {
    // 切换模式
    handleModeChange(mode) {
      this.scanMode = mode;
      this.hasData = false;
      this.cardNoInfo = ''
      uni.showToast({
        title: `已切换到${mode === "add" ? "新增" : "删除"}模式`,
        icon: "none",
      });
    },
    // 流程卡号查询
    cardNoBlur() {
      if (this.cardNoInfo == '') {
        return false
      }
      uni.showLoading({
        title: "查询中...",
        mask: true,
      });
      if (this.scanMode === 'add') {
        this.$u.api.bindingQuery({ cardNo: this.cardNoInfo }).then((res) => {
          console.log('流程卡号查询重量', res.data)
          this.cardNoInfo = ''
          this.processSet = res.data
          uni.hideLoading();
        }).catch((err) => {
          this.cardNoInfo = ''
          uni.hideLoading();
        });
      } else {
        this.$u.api.getMacToolUseByWpId({ cardNo: this.cardNoInfo }).then((res) => {
          console.log('流程卡号查询重量', res.data)
          this.cardNoInfo = ''
          this.rackList = res.data
          uni.hideLoading();
        }).catch((err) => {
          this.cardNoInfo = ''
          uni.hideLoading();
        });
      }

    },
    // 删除
    removeClick(obj) {
      this.rackList.forEach((item, index) => {
        if (item.rsId == obj.rsId) {
          this.rackList.splice(index, 1);
        }
      });
      this.$u.api.bindingRemove({ ids: obj.id }).then((res) => {
      });
    },

    // 挂具
    oneInputData() {
      this.feibaObj = {};
      this.facilityObj = {}
      uni.hideKeyboard();
      this.getData(this.oneInput, 1);
    },
    twoInputData() {
      uni.hideKeyboard();
      this.bsRackSet = {};
      this.facilityObj = {}
      this.getData(this.twoInput, 2);
    },
    therrInputData(code) {
      uni.hideKeyboard();
      this.bsRackSet = {};
      this.feibaObj = {};
      this.getEcByDeviceCode(code);
    },
    clearInput() {
      this.oneInput = ''
      this.oldOneInput = ''
      this.twoInput = ''
      this.oldTwoInput = ''
      this.therrInput = ''
      this.oldTherrInput = ''
      this.fourInput = ''
      this.oldFourInput = ''
    },
    clearOneInput() {
      this.oneInput = ''
    },
    clearTwoInput() {
      this.twoInput = ''
    },
    clearTherrInput() {
      this.therrInput = ''
    },

    getData(code, num) {
      this.bsRackSet = {};
      this.feibaObj = {};
      this.facilityObj = {};
      this.clearInput();

      if (num == 1) {
        this.$u.api.getMacToolUseByToolId({ rsCode: code }).then((res) => {
          let data = res.data;
          this.bsRackSet = data;
          this.twoFlag = true;
          this.therrFlag = true;
          this.clearOneInput();

          uni.showToast({
            title: "数据获取成功",
            icon: "none",
          });
        });
      }
      if (num == 2) {
        this.$u.api.getBindMacToolUseByFsCode({ fsCode: code }).then((res) => {
          let data = res.data;

          this.feibaObj = data;
          this.oneFlag = true;
          this.therrFlag = true;
          this.clearTwoInput();

          uni.showToast({
            title: "数据获取成功",
            icon: "none",
          });
        });
      }
    },
    // 查询设备 绑定记录
    getEcByDeviceCode(code) {
      // this.therrInput = code;
      this.$u.api.getBindMacToolUseByDeviceCode({ deviceCode: this.therrInput }).then((res) => {
        let data = res.data;
        this.facilityObj = data;
        this.oneFlag = true;
        this.twoFlag = true;
        this.clearTherrInput();
      });

    },

    // 新增绑定记录
    submitClick() {
      let query = {

      }
      const rackId = (this.bsRackSet && Object.keys(this.bsRackSet).length > 0) ? (this.bsRackSet.id || this.bsRackSet.rsId) : null;
      const feibaId = (this.feibaObj && Object.keys(this.feibaObj).length > 0) ? (this.feibaObj.id || this.feibaObj.fsId) : null;
      const deviceId = (this.facilityObj && Object.keys(this.facilityObj).length > 0) ? (this.facilityObj.id || this.facilityObj.deviceId) : null;
      if (!rackId && !feibaId && !deviceId) {
        uni.showToast({
          title: "当前查询的数据没有绑定记录(请扫描挂具/飞靶/设备)",
          icon: "none",
          duration: 2000
        });
        return;
      }
      const params = {
        wpId: this.processSet.id,
      }
      if (rackId) {
        params.toolId = rackId;
      }
      if (feibaId) {
        params.toolId = feibaId;
      }
      if (deviceId) {
        params.toolId = deviceId;
      }
      uni.showLoading({
        title: "提交中...",
        mask: true
      });
      this.$u.api
        .addMacToolUse(params)
        .then((res) => {
          this.bsRackSet = {};
          this.feibaObj = {};
          this.facilityObj = {};
          this.processSet={}
          this.clearInput();
          uni.showToast({
            title: "操作成功",
          });
          uni.hideLoading()
          this.oneFlag = false;
          this.twoFlag = false;
          this.therrFlag = false;
        });
    },
  },
};
</script>

<style scoped lang="scss">
.uni-forms-item {
  margin-bottom: 6px !important;
}

.required-label {
  display: flex;
  align-items: center;
}

.mode-switch {
  display: flex;
  width: 140px;
  height: 34px;
  border-radius: 4px;
  border: 1px solid rgba(21, 93, 252, 1);
  overflow: hidden;
  margin-left: auto;
}

.switch-btn {
  flex: 1;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
  color: rgba(21, 93, 252, 1);
  background-color: #fff;
  transition: all 0.2s;
}

.switch-btn.active {
  background-color: rgba(21, 93, 252, 1);
  color: #fff;
}

.label-left {
  flex-direction: row !important;
  margin-top: 20rpx;
}

.record-card-container {
  margin-bottom: 15px;

  ::v-deep .uni-card {
    margin: 0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    /* 确保圆角生效 */
  }
}

/* 自定义卡片头部 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background-color: #f9f9f9;
  /* 浅灰色背景区分头部 */
}

.header-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.header-btn {
  margin: 0;
  padding: 0 10px;
  height: 28px;
  line-height: 26px;
  font-size: 12px;

  /* 覆盖 uni-button 的一些默认样式，使其更紧凑 */
  &::after {
    border: none;
  }
}

.divider {
  height: 1px;
  background-color: #eee;
  width: 100%;
}

.card-content {
  padding: 10px 15px;
  /* 给内容区域添加内边距 */
  display: flex;
  flex-direction: column;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;

  &:last-of-type {
    border-bottom: none;
  }
}

.label {
  color: #666;
  font-size: 14px;
}

.value {
  color: #333;
  font-size: 14px;
  font-weight: 500;
}

/* 保留原有的 empty-tip 样式 */
.empty-tip {
  text-align: center;
  padding: 20px;
  color: #999;
  font-size: 14px;
}
</style>