<template>
  <div class="page-wrap">
    <div class="page card h-100 overflow-hidden">
      <div class="flow-config-container">
        <div class="flow-steps">
          <div
            v-for="item in showFlowConfigList"
            :key="item.code"
            class="flow-step"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="step-button mt-10">
          <el-checkbox v-model="draftSkipInspect">
            跳过质检流程 (跳过后生产完成到待配货状态)
          </el-checkbox>
        </div>
      </div>
    </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 { getPodOrderQualityCountApi } from '@/api/factoryOrderNew'
import type {
  FactoryOrderFlowConfigItem,
  FactoryOrderFlowConfig,
} from '@/types/api/order'
import type { SearchForm } from '@/types/api/factoryOrderNew'

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

const STEP_WIDTH = 150

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

/** 按完整步骤数预留宽度，勾选后容器不收缩，避免居中抖动 */
const fullStepsWidth = computed(
  () => `${flowConfigList.value.length * STEP_WIDTH}px`,
)

// 获取质检状态
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 {
    const prevSkip = factoryOrderFlowConfig.value?.skipQualityInspect ?? false
    // 从未勾选改为勾选时，先查询待质检数量
    if (!prevSkip && draftSkipInspect.value) {
      const res = await getPodOrderQualityCountApi(
        {} as SearchForm,
        20,
        'PENDING_QUALITY',
      )
      if (res.data?.totalCount) {
        await ElMessageBox.confirm(
          `有操作单仍在待质检状态，跳过质检流程将不展示待质检页面，但不影响操作单配货，<br/>
            <span style="color: red; margin: 15px 0">是否确定跳过质检流程？</span>`,
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            dangerouslyUseHTMLString: true,
            type: 'warning',
          },
        )
      }
    } else {
      await ElMessageBox.confirm(`是否确定保存`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
    }
    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>
.page-wrap {
  position: relative;
  height: 100%;
}

.page {
  width: 1200px;
  margin: 0 auto;
}

.flow-config-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: max-content;
  min-width: v-bind(fullStepsWidth);
  margin: 50px auto 0;
}

.footer-actions {
  position: absolute;
  bottom: -10px;
  left: -10px;
  right: -50px;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: 16px 0;
  background: rgba(144, 147, 153, 0.2);
}

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