<template>
  <div>
    <div class="recordBox">
      <div class="select">
        <el-select
          multiple
          size="large"
          style="width: 200px"
          collapse-tags
          v-model="selectValues"
          placeholder="选择固有设备请点击"
        >
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <div class="selectBtn">
          <el-button class="btn" style="background-color: #0a59f7" @click="binding(item)">确认绑定</el-button>
          <el-button class="btn" type="info" @click="cancel(item)">取消</el-button>
        </div>
      </div>

      <div class="footerBtn">
        <el-button class="bottomBtn" style="background-color: #0a59f7" @click="openScanCode(index)"
          >点击扫描其它设备</el-button
        >
      </div>
    </div>
    <el-table :data="equitListData" class="tableView-sbjl">
      <el-table-column prop="equitCode" label="设备编码" align="center" />
      <el-table-column prop="equitName" label="设备名称" align="center" />
      <el-table-column prop="created" label="创建时间" align="center" />
      <el-table-column prop="validDate" label="设备有效期" align="center" />
      <el-table-column label="操作" fixed="right" width="200">
        <template #default="scope">
          <el-popconfirm
            :visible="scope.row.dialogVisible"
            title="您确认删除吗？（此操作不可逆）"
            width="300"
            @cancel="scope.row.dialogVisible = false"
            @confirm="handleDelete(scope.row)"
          >
            <el-button> 取消 </el-button>
            <el-button type="primary"> 确认 </el-button>
            <template #reference>
              <el-button link class="btnText" type="primary" @click="scope.row.dialogVisible = true">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
      <!--      <el-table-column prop="flag" align="center" label="是否合格">-->
      <!--        <template #default="scope">-->
      <!--          <span-->
      <!--            :class="{-->
      <!--              'red-text': scope.row.flag == 0,-->
      <!--              'green-text': scope.row.writeData == 1,-->
      <!--            }"-->
      <!--          >-->
      <!--            {{ scope.row.flag == 1 ? "合格" : "不合格" }}-->
      <!--          </span>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
    </el-table>
    <div
      style="height: 100%; width: 100%; display: flex; justify-content: center; align-items: center"
      v-if="equitListData.length == 0"
    >
      <Empty />
    </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, deleteDevice } from "@/api/prosteps/shebeijilu";
import { useProcessStore } from "@/store";
defineOptions({ name: "Shebeijilu" });
import { useDictionaryStore } from "@/store";

const dictS = useDictionaryStore();
const selectStatus = ref(false);

const selectValues = ref([]);
const binding = async (item: any) => {
  try {
    const { data } = await batchDevice({
      deviceNoList: selectValues.value,
      processId: store.scanInfo.id,
    });
    ElMessage.success("绑定成功！");
    getEquitList();
  } catch {
  } finally {
    selectStatus.value = false;
  }
};
const cancel = (item: any) => {
  selectValues.value = [];
};

const store = useProcessStore();
const equitListData = ref([]);
const selectIndex = ref(null);

const getEquitList = async () => {
  const { data } = await equitList({
    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,
    processId: store.scanInfo.id,
  });
  if (code == "200") {
    ElMessage.success("绑定成功！");
    equitListData.value[selectIndex.value] = data;
    inputValueVal.value = "";
    showStatusVal.value = false;
  }
  getEquitList();
};
onMounted(async () => {
  getEquitList();

  const { data } = await devicelist();
  option.value = data;
});

const handleDelete = async (row) => {
  console.log("dddd", row);
  await deleteDevice(row.id);
  ElMessage.success("删除成功！");
  getEquitList();
};
</script>

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

  .describeBox {
  }
  .selectBtn {
    display: flex;
    justify-content: start;
    align-items: center;
    .btn {
      width: 150px;
      color: white;
      height: 40px;
      border-radius: 16px;
      font-size: $f20;
    }
  }

  .footerBtn {
    width: 300px;
    background-color: #00000015;
    border-radius: 16px;
    overflow: hidden;
    height: 40px;

    .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;
      }
    }
  }

  //描述样式
}

.tableView-sbjl {
  width: 100%;
  height: calc(100vh - 335px);
  padding: 20px 0px;
  border-radius: 16px;
  margin-top: 10px;
}
</style>
