<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 { 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 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 {
    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: #f56c6c">是否确定跳过质检流程？</span>`,
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            dangerouslyUseHTMLString: true,
          },
        )
      }
    } 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>
.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>
