<template>
  <div class="LinePatrolMain">
    <div class="checkMain">
      <el-checkbox-group v-model="checkList" >
        <el-checkbox
          v-for="(item, index) in checkItems"
          :key="index"
          :label="item.ToolId"
          :value="{
            ToolId: item.ToolId,
            ToolType: item.ToolType,
            ToolName: item.ToolName,
			ThreeToolId: item.ThreeToolId
          }"
        >
          {{item.ToolName}}
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <div class='settingUp'>
      <div class='maintain'>
        <el-button @click="handleSave">保存</el-button>
        <el-button>重置</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps } from 'vue'
import { apiGetTools, SaveTools } from '@/api/index.js'
import { ElMessage } from "element-plus"

const checkList = ref([])
const checkItems = ref([]) // 新增一个ref用于存储从API获取的工具列表

const { ExamId } = defineProps(['ExamId'])

onMounted(() => {
  initFour()
})

const b = {
  ExamId,
  Type: '巡线'
}

const initFour = async () => {
  const res = await apiGetTools(b)
  checkItems.value = res.data.ToolList // 将API返回的工具列表赋值给checkItems
  checkList.value = res.data.ToolList.map(item => {
    if (res.data.SelectToolList.includes(item.ToolId)) {
      return {
        ToolId: item.ToolId,
        ToolType: item.ToolType,
        ToolName: item.ToolName,
		ThreeToolId:item.ThreeToolId
      }
    }
  }).filter(item => item)
}
const handleSave = async () => {
  console.log(checkList.value, 'handleSave--')
  const res = await SaveTools({
    ...b,
    Data: checkList.value
  })
  if (res.code === 0) {
    ElMessage({
      message: '操作成功.',
      type: 'success'
    })
  } else {
    ElMessage.error(res?.data || '操作失敗')
  }
}
</script>

<style scoped  lang="scss">
.LinePatrolMain{
  width: 100%;
  height: 100%;
  padding-top: 24px;
}
.el-checkbox__label{
  font-weight: 400;
  font-size: 14px;
  color: #1D2129;
  line-height: 21px;
}
:deep(.el-checkbox__input.is-checked .el-checkbox__inner){
  background-color: #0D867F !important;
  border-color:#0D867F;
}
:deep(.el-checkbox__input.is-checked+.el-checkbox__label){
  color: #1D2129 !important;
}
.el-checkbox__inner:hover{
  border-color:transparent;
}
.checkMain{
  height: calc(100% - 94px);
  padding: 0 38px;
}
.settingUp{
  width: 100%;
  height: 94px;
  border-top: 3px solid rgba(246, 249, 248, 1);
}
.maintain{
  float: right;
  margin-right: 20px;
  margin-top: 42px;
  .el-button {
    width: 84px;
    height: 32px;
    border: none;
    font-weight: 400;
    font-size: 14px;
    border-radius: 2px 2px 2px 2px;
  }
  .el-button:nth-child(1) {
    background: #0d867f;
    color: #ffffff;
  }
  .el-button:nth-child(2) {
    background: #f2f3f5;
    color: #1d2129;
  }
}
</style>
