<template>
	<div class="component-page">
		<section class="flex items-center h-20 gap-3 pl-3">
			<button class="btn-light px-3 py-1 text-xs">添加矿石</button>
			<button :disabled="opDisable" class="btn-light px-3 py-1 text-xs disabled:btn-light-disabled">编辑矿石</button>
			<button class="btn-light px-3 py-1 text-xs">删除矿石</button>

			<button class="btn-light px-3 py-1 text-xs ml-12" @click="onAddCraft">添加工艺</button>
			<button class="btn-light px-3 py-1 text-xs">编辑工艺</button>
			<button class="btn-light px-3 py-1 text-xs">删除工艺</button>
		</section>

		<section>
			<header class="h-10 flex items-center bg-[#000]/[0.02] text-xs pr-3 text-text">
				<div class="w-10 self-stretch flex justify-center items-center">
					<img src="@/assets/Icon-unselect.svg" alt="icon" />
				</div>
				<p class="w-14">序号</p>
				<p class="w-[18rem]">矿石名称</p>
				<p>工艺</p>
			</header>
			<div class="h-10 flex items-center text-xs pr-3 text-[#6e6e6e]  border-b border-b-[#f8f8f8]">
				<div class="w-10 self-stretch flex justify-center items-center">
					<img :src="isSelect ? icon_select : icon_unselect" alt="" />
				</div>
				<p class="w-14">1</p>
				<p class="w-[18rem]">矿石名称1</p>
				<div class="flex-auto">
					<ul class="appearance-none flex items-center gap-x-3 text-sm">
						<li class="bg-[#F4F4F4] rounded-sm px-2 h-7 leading-7" :class="`${true && 'bg-primary text-white'}`">
							工艺名称1
						</li>
						<li class="bg-[#F4F4F4] rounded-sm px-2 h-7 leading-7" :class="`${false && 'bg-primary text-white'}`">
							工艺名称2
						</li>
					</ul>
				</div>
			</div>
		</section>

		<van-overlay :show="showCraftEditDialog">
			<div class="flex justify-center items-center h-full">
				<CraftConfig @ok="confirmCraftEdit" @cancel="showCraftEditDialog = false" />
			</div>
		</van-overlay>
	</div>
</template>

<script lang="ts" setup>
import CraftConfig from "./components/CraftConfig.vue";
import icon_unselect from "@/assets/Icon-unselect.svg";
import icon_select from "@/assets/Icon-select.svg";
import { ref } from "vue";

const isSelect = ref<boolean>(true);
const opDisable = ref<boolean>(true);
const showCraftEditDialog = ref<boolean>(false);

function confirmCraftEdit() {
	showCraftEditDialog.value = false
}
function onAddCraft() {
	showCraftEditDialog.value = true
}
</script>
