<template>
  <div class="stepsViewScroll">
    <div class="recordBox" v-for="(item, index) in equitListData" :key="index">
      <div class="headerText titleText">
        {{ dictS.getLableByValue("device_type", item.equitType) }}
      </div>
      <div class="describeBox">
        <div class="describeText">精度要求</div>
        <div class="describeText" style="color: black">
          {{ item.accuracy }}
        </div>
      </div>
      <!-- 变量控制样式 -->
      <div class="select">
        <div class="describeText" style="width: 130px">绑定设备：</div>

        <el-select
          v-if="!item.equitCode"
          multiple
          @click="getdevicelist(item.equitType, item)"
          v-model="item.inputValueVal"
          placeholder="选择固有设备请点击"
          size="large"
          v-loading="item.loading"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="selectBtn" v-if="!item.equitCode">
        <el-button
          class="btn"
          v-if="item.selectStatus"
          style="background-color: #0a59f7"
          @click="binding(item)"
          :disabled="item.scanStatus"
          >确认绑定</el-button
        >
        <el-button
          class="btn"
          v-if="item.selectStatus"
          type="info"
          @click="cancel(item)"
          :disabled="item.scanStatus"
          >取消</el-button
        >
      </div>
      <div class="footerBtn" v-if="!item.selectStatus">
        <el-button
          v-if="!item.equitCode && !item.selectStatus"
          class="bottomBtn"
          style="background-color: #0a59f7"
          :disabled="item.selectStatus"
          @click="openScanCode(index)"
          >点击扫描其它设备</el-button
        >
        <div v-if="item.equitCode" class="infoBox">
          <div class="info">
            <div>
              <div class="describeText" style="text-align: left">
                {{ item.equitName }}
              </div>
              <div class="describeText" style="text-align: left">
                {{ item.equitCode }}
              </div>
            </div>
          </div>
          <div class="info">
            <div></div>
            <div>
              <div class="describeText" style="text-align: right">
                检定有效期
              </div>
              <div class="describeText" style="text-align: right">
                {{ item.validDate }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <PopScanCode
      v-model:inputValue="inputValueVal"
      v-model:showStatus="showStatusVal"
      @submit="scanCode"
      title="请扫描设备"
    />
  </div>
</template>

<script lang="ts" setup>
import {
  equitList,
  equitUpdate,
  queryByCode,
  devicelist,
  batchDevice,
} from "@/api/prosteps/shebeijilu";
import { useProcessStore } from "@/store";
defineOptions({ name: "Shebeijilu" });
import { useDictionaryStore } from "@/store";

const dictS = useDictionaryStore();
const selectStatus = ref(false);
const scanStatus = ref(false);
const binding = async (item: any) => {
  try {
    const { data } = await batchDevice({
      deviceNoList: item.inputValueVal,
      recordId: item.id,
    });
    ElMessage.success("绑定成功！");
    getEquitList();
  } catch {
  } finally {
    selectStatus.value = false;
  }
};
const cancel = (item: any) => {
  item.selectStatus = false;
  item.inputValueVal = [];
};
const selectLoading = ref(false);
const store = useProcessStore();
const equitListData = ref([]);
const selectIndex = ref(null);
const getdevicelist = async (type: any, item: any) => {
  item.selectStatus = true;
  item.loading = true;
  try {
    const { data } = await devicelist({ deviceType: type });
    option.value = data;
  } catch {
  } finally {
    item.loading = false;
  }
};
const getEquitList = async () => {
  const { data } = await equitList({
    seqNo: store.scanInfo.seqNo,
    operationId: store.odersData.operationId,
    processId: store.scanInfo.id,
    pageSize: 9999,
    pageNo: 1,
  });
  equitListData.value = data;
};
const inputValueVal = ref("");
const showStatusVal = ref(false);
const equitCheck = async () => {
  await equitUpdate({});
};
const option = ref([]);
const options = computed(() => {
  let array = [];
  for (let i = 0; i < option.value.length; i++) {
    array.push({
      value: option.value[i].deviceNo,
      label: option.value[i].deviceNo,
    });
  }
  return array;
});
const openScanCode = (index) => {
  showStatusVal.value = true;
  selectIndex.value = index;
};
const scanCode = async () => {
  const { data, code } = await queryByCode({
    deviceNo: inputValueVal.value,
    recordId: equitListData.value[selectIndex.value].id,
  });
  if (code == "200") {
    ElMessage.success("绑定成功！");
    equitListData.value[selectIndex.value] = data;
    inputValueVal.value = "";
    showStatusVal.value = false;
  }
};
onMounted(() => {
  getEquitList();
});
</script>

<style lang="scss" scoped>
.recordBox {
  min-width: 600px;
  background-color: white;
  border-radius: 16px;
  display: flex;
  padding: $p20;
  flex-direction: column;
  justify-content: space-between;
  .select {
    display: flex;
    align-items: center;
    padding: 0 5px;
  }
  .headerText {
  }

  .describeBox {
  }
  .selectBtn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    .btn {
      width: 150px;
      color: white;
      height: 50px;
      border-radius: 16px;
      font-size: $f20;
    }
  }

  .footerBtn {
    width: 100%;
    background-color: #00000015;
    border-radius: 16px;
    overflow: hidden;
    height: 50px;
    margin-top: 10px;

    .bottomBtn {
      width: 100%;
      height: 100%;
      font-size: $f20;
      color: white;
    }

    .footerInfo {
      width: 100%;
      height: 70px;
      background-color: #00000015;
      border-radius: 16px;
      overflow: hidden;
    }

    .infoBox {
      display: flex !important;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 100%;
      padding: $p20 $p10;

      .info {
        width: 50%;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }

  //描述样式
}
</style>
