<template>
  <div class="page card h-100 flex-gap-10 overflow-hidden flex flex-column">
    <div class="flow-steps">
      <div
        v-for="item in showFlowConfigList"
        :key="item.code"
        class="flow-step"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="flex-1 mt-10">
      <el-checkbox v-model="draftSkipInspect">
        跳过质检流程 (跳过后生产完成到待配货状态)
      </el-checkbox>
    </div>
    <div class="footer-actions">
      <el-button type="primary" @click="updateConfig"> 保存 </el-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import {
  listFactoryOrderFlowConfigApi,
  updateFactoryOrderFlowConfigApi,
  getFactoryOrderFlowConfigApi,
} from '@/api/order'
import type {
  FactoryOrderFlowConfigItem,
  FactoryOrderFlowConfig,
} from '@/types/api/order'

const flowConfigList = ref<FactoryOrderFlowConfigItem[]>([])
const factoryOrderFlowConfig = ref<FactoryOrderFlowConfig>()
/** 勾选草稿，仅保存后同步到已生效配置 */
const draftSkipInspect = ref(false)

const showFlowConfigList = computed(() =>
  factoryOrderFlowConfig.value?.skipQualityInspect ?? false
    ? flowConfigList.value.filter((item) => item.code !== 'INSPECTION')
    : flowConfigList.value,
)

// 获取质检状态
const getConfig = async () => {
  const res = await getFactoryOrderFlowConfigApi()
  factoryOrderFlowConfig.value = res.data
  draftSkipInspect.value = res.data?.skipQualityInspect ?? false
}

// 获取流程配置列表
const getList = async () => {
  try {
    const res = await listFactoryOrderFlowConfigApi()
    flowConfigList.value = res.data
  } catch (e) {
    console.error(e)
  }
}

// 更新配置
const updateConfig = async () => {
  try {
    await updateFactoryOrderFlowConfigApi({
      id: factoryOrderFlowConfig.value?.id ?? 0,
      skipQualityInspect: draftSkipInspect.value,
    })
    ElMessage.success('更新成功')
    await getConfig()
  } catch (e) {
    console.error(e)
  }
}

onMounted(async () => {
  await Promise.all([getList(), getConfig()])
})
</script>

<style lang="scss" scoped>
.footer-actions {
  display: flex;
  justify-content: center;
}

.flow-steps {
  display: flex;
  height: 40px;
  gap: 0px;
}

.flow-step {
  flex: none;
  width: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #409eff;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  clip-path: polygon(
    0 0,
    calc(100% - 14px) 0,
    100% 50%,
    calc(100% - 14px) 100%,
    0 100%,
    14px 50%
  );

  &:first-child {
    clip-path: polygon(
      0 0,
      calc(100% - 14px) 0,
      100% 50%,
      calc(100% - 14px) 100%,
      0 100%
    );
  }

  &:last-child {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%);
  }
}
</style>
