<template>
  <div class="user-page flex-column card h-100 overflow-hidden">
    <div class="header-filter-form">
      <el-button type="success" @click="addDialog" :disabled="tableData.length">
        {{ '新增' }}
      </el-button>
    </div>
    <div class="user-content flex-1 flex-column overflow-hidden">
      <div class="user-list flex-1 overflow-hidden" v-loading="loading">
        <el-row :gutter="20">
          <el-col v-for="(item, index) in tableData as rowData[]" :key="index">
            <div class="address-item">
              <div class="left">
                <div class="box">
                  所有生产单按{{ getLabels(item.groupField) }}进行自动排单
                </div>
                <div class="box">批次数量:{{ item.arrangeMax }}</div>
                <div class="box">每天{{ getTime(item) }}开始自动排单</div>
              </div>
              <div class="action">
                <div style="display: flex; align-items: center; gap: 2px">
                  <div>状态：</div>
                  <el-switch
                    v-model="item.status"
                    active-value="ACTIVE"
                    inactive-value="INACTIVE"
                    active-text="开"
                    inactive-text="关"
                    inline-prompt
                    class="ml-2"
                    style="
                      --el-switch-on-color: #42b983;
                      --el-switch-off-color: #f56c6c;
                    "
                    @change="(val:string) => ruleSwitch(item.id, val)"
                  />
                </div>
                <el-icon
                  size="24"
                  title="编辑"
                  color="#EF6C00"
                  style="cursor: pointer; vertical-align: middle"
                  @click="editAddress(item)"
                >
                  <Edit />
                </el-icon>
              </div>
            </div>
          </el-col>
          <el-col :span="24" v-if="tableData.length === 0">
            <div class="empty-box">
              <el-empty description="暂无排单规则" />
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>

  <LogDialog
    :title="editForm.id ? '编辑排单规则' : '新增排单规则'"
    v-model="dialogVisible"
    dialogWidth="1000px"
    @close="cancelFn"
    width="800px"
  >
    <div class="cardBox">
      <el-form
        class="form"
        ref="editFormRef"
        label-width="270"
        :model="editForm"
      >
        <div class="formBox">
          <div class="formContent">
            <div
              v-for="(_, index) in paramsList"
              :key="index"
              class="select-row"
            >
              <el-form-item
                :label="index == 0 ? `所有生产单按` : '按'"
                prop="appKey"
              >
                <el-select
                  v-model="paramsList[index]"
                  placeholder="请选择"
                  style="width: 200px"
                  @change="disabledFn"
                  :disabled="index == 0"
                >
                  <el-option
                    v-for="option in rulesList"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value"
                    :disabled="option.disabled"
                  />
                </el-select>
                <div
                  class="iconClass"
                  v-if="index < 3 && paramsList.length < 4"
                  @click="addSelect(index)"
                >
                  <el-icon color="#fff" size="20"> <Plus /></el-icon>
                </div>

                <div
                  class="iconClass"
                  v-if="index !== 0"
                  @click="removeSelect(index)"
                >
                  <el-icon color="#fff" size="20"><Minus /></el-icon>
                </div>
              </el-form-item>
            </div>
            <el-form-item
              label="在每天"
              prop="time"
              :rules="[
                {
                  required: true,
                  message: '请选择时间',
                  trigger: ['change', 'blur'],
                },
              ]"
            >
              <div style="display: flex">
                <!-- <el-select
                  v-model="editForm.hour"
                  placeholder="请选择时"
                  style="width: 200px"
                >
                  <el-option
                    v-for="(_, index) in 24"
                    :key="index"
                    :label="index"
                    :value="index"
                  />
                </el-select> -->
                <el-time-picker
                  v-model="editForm.time"
                  value-format="HH:mm:ss"
                  placeholder="任意时间点"
                >
                </el-time-picker>
                <div
                  style="white-space: nowrap; margin-left: 10px; color: #606266"
                >
                  时进行自动排单
                </div>
              </div>
            </el-form-item>
            <div
              style="border-top: 1px solid; color: #dcdfe6; padding-top: 10px"
            >
              <el-form-item
                label="自动排单一个批次里生产单的最大值为:"
                prop="arrangeMax"
                :rules="[
                  {
                    required: true,
                    message: '请输入数量',
                    trigger: ['blur'],
                  },
                  {
                    pattern: /^\d+$/,
                    message: '请输入整数',
                    trigger: ['blur', 'change'],
                  },
                ]"
              >
                <el-input
                  v-model="editForm.arrangeMax"
                  style="width: 200px"
                  placeholder="请输入数量"
                ></el-input>
              </el-form-item>
              <div style="color: #f56c6c; margin: 10px 0">
                注：系统限制烫画工艺一个批次不超过50个生产单！
              </div>
              <div style="display: flex; align-items: center">
                <div style="color: #606266; margin-right: 10px">
                  烫画工艺自动排版:
                </div>
                <el-switch
                  v-model="editForm.isAuto"
                  @change="changeSwitch"
                  active-text="是"
                  inactive-text="否"
                  inline-prompt
                  class="ml-2"
                  style="
                    --el-switch-on-color: #42b983;
                    --el-switch-off-color: #f56c6c;
                  "
                />
              </div>
              <div style="display: flex; align-items: center">
                <div style="color: #606266; margin-right: 10px">状态:</div>
                <el-switch
                  v-model="editForm.status"
                  active-value="ACTIVE"
                  inactive-value="INACTIVE"
                  active-text="开"
                  inactive-text="关"
                  inline-prompt
                  class="ml-2"
                  style="
                    --el-switch-on-color: #42b983;
                    --el-switch-off-color: #f56c6c;
                  "
                />
              </div>
              <div v-if="editForm.isAuto">
                <div label="排版类型：">
                  <el-radio-group v-model="editForm.type">
                    <el-radio label="tiff">tiff排版</el-radio>
                    <el-radio label="png">png排版</el-radio>
                  </el-radio-group>
                </div>
                <div label="排版宽度：">
                  <el-radio-group v-model="editForm.templateWidth">
                    <el-radio :value="42">40+2cm</el-radio>
                    <el-radio :value="60">60cm</el-radio>
                  </el-radio-group>
                </div>
              </div>
            </div>

            <el-form-item>
              <ElButton class="btn" @click="cancelFn">取消</ElButton>
              <ElButton class="btn" type="primary" @click="save">保存</ElButton>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
  </LogDialog>
</template>

<script setup lang="tsx">
defineOptions({
  name: 'ShippingAddress',
})
import {
  usArrangeRuleApi,
  getByFactoryNoApi,
  updateRuleByIdApi,
  ruleSwitchApi,
} from '@/api/podUsSchedulingRules.ts'
import { Plus, Minus } from '@element-plus/icons-vue'

import LogDialog from '.././components/dialog.tsx'
import CustomizeForm from '@/components/CustomizeForm.tsx'
import { Edit } from '@element-plus/icons-vue'
import { debounce } from 'lodash-es'

const editForm = ref<BaseForm>({ isAuto: false, status: 'ACTIVE' })
const tableData = ref([])
import userUserStore from '@/store/user'
const userStore = userUserStore()
const userInfo = userStore.user
const loading = ref(false)

const getList = async () => {
  loading.value = true
  try {
    const result = await getByFactoryNoApi({
      factoryNo: userInfo?.factoryId as number,
    })
    tableData.value = result.data ? [result.data] : []
    console.log(231, tableData.value)
  } catch (error) {
    console.log(error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  getList()
})

const dialogVisible = ref(false)

const editFormRef = ref<InstanceType<typeof CustomizeForm> | null>(null)

const paramsList = ref(['craft_type'])

const rulesList = ref([
  { label: '工艺', value: 'craft_type', disabled: false },
  { label: '款号', value: 'supplier_product_no', disabled: false },
  { label: '尺码', value: 'size', disabled: false },
  { label: '类型', value: 'customized_quantity', disabled: false },
])

/**
 * @description: 取消按钮
 */
function cancelFn() {
  dialogVisible.value = false
  editFormRef.value?.resetFields()
}

/**
 * @description: 编辑按钮
 */
async function editAddress(item: rowData) {
  try {
    editForm.value = { ...item }
    paramsList.value = item.groupField
      .split(';')
      .filter((value) => value.trim() !== '')
    editForm.value.time = `${item.hour || '00'}:${item.minute || '00'}:${
      item.second || '00'
    }`
    console.log(372, editForm.value)
    if (editForm.value.templateWidth) {
      editForm.value.isAuto = true
    }
    dialogVisible.value = true
  } catch (e) {
    console.log(e)
  }
}

/**
 * @description: 检查数据
 */

interface rowData extends BaseForm {
  groupField: string
}
interface BaseForm {
  id?: number
  time?: string
  arrangeMax?: number
  isAuto?: boolean
  factoryNo?: number
  type?: string
  templateWidth?: string
  jobId?: string
  hour?: string | number
  minute?: string | number
  second?: string | number
  status?: string
}
type ParamKey = `param${number}`
type ParamValue = string | number | boolean | null | undefined
type PostData = BaseForm & Record<ParamKey, ParamValue>
async function checkData() {
  // 先进行表单校验
  const isValid = await new Promise<boolean>((resolve) => {
    editFormRef.value
      ?.validate()
      .then(() => resolve(true))
      .catch((err) => {
        console.log('表单校验失败:', err)
        resolve(false)
      })
  })

  // 如果表单校验失败，直接返回，不处理数据
  if (!isValid) {
    return { isValid: false, postData: null }
  }

  // 表单校验通过后，再处理数据
  const postData: PostData = { ...editForm.value }
  console.log()

  const timeArr = editForm.value.time?.split(':')
  if (timeArr?.length) {
    postData.hour = timeArr[0]
    postData.minute = timeArr[1]
    postData.second = timeArr[2]
  }
  paramsList.value.forEach((el: ParamValue, index: number) => {
    const key: ParamKey = `param${index + 1}`
    if (el) {
      postData[key] = el
    }
  })
  postData.factoryNo = userInfo?.factoryId
  return { isValid, postData }
}

/**
 * @description: 保存按钮
 */
const save = debounce(async () => {
  const { isValid, postData } = await checkData()
  if (isValid) {
    try {
      if (!postData?.id) {
        await usArrangeRuleApi({
          ...postData,
        })
      } else {
        const params = {
          param: { ...postData },
          id: postData.id,
          jobId: postData.jobId,
        }
        params.param.id && delete params.param.id
        params.param.jobId && delete params.param.jobId

        await updateRuleByIdApi({
          ...params,
        })
      }
      ElMessage({
        message: postData?.id ? '更新成功' : '新增成功',
        type: 'success',
        offset: window.innerHeight / 2,
      })
      cancelFn()
      getList()
    } catch (e) {
      return
    }
  }
}, 200)

const disabledFn = () => {
  console.log(328, paramsList.value)
  rulesList.value.forEach((el) => {
    if (paramsList.value.includes(el.value)) {
      el.disabled = true
    } else {
      el.disabled = false
    }
  })
}

const addSelect = (index: number) => {
  paramsList.value.splice(index + 1, 0, '')
  disabledFn()
}
const removeSelect = (index: number) => {
  //   selectItems.value.splice(index, 1)
  paramsList.value.splice(index, 1)
  disabledFn()
}

const getLabels = (item: string) => {
  if (!item) return ''
  const ruleValues = new Set(item.split(';'))
  return rulesList.value
    .filter((rule) => ruleValues.has(rule.value))
    .map((rule) => rule.label)
    .join(',')
}

/**
 * @description: 新增按钮打开弹窗
 */
function addDialog() {
  editForm.value = { isAuto: false }
  paramsList.value = ['craft_type']
  dialogVisible.value = true
}

const changeSwitch = () => {
  editForm.value.type = undefined
  editForm.value.templateWidth = undefined
}

const ruleSwitch = async (id: number | undefined, status: string) => {
  if (!id) {
    return
  }
  try {
    const res = await ruleSwitchApi({
      id,
      status,
    })
    ElMessage({
      message: res.message,
      type: 'success',
      offset: window.innerHeight / 2,
    })
    getList()
  } catch (e) {
    console.error(e)
  }
}

const padTimeUnit = (value: string | number): string => {
  const num = Number(value)
  // 若转换后是 NaN（无效值），或原始值不存在（null/undefined/''），均返回 '00'
  if (isNaN(num) || !value) {
    return '00'
  }
  // 确保结果为字符串，补位后返回
  return num < 10 ? `0${num}` : `${num}`
}

const getTime = (item: BaseForm) => {
  const { hour, minute, second } = item
  const newHour = padTimeUnit(hour as string | number)
  const newMinute = padTimeUnit(minute as string | number)
  const newSecond = padTimeUnit(second as string | number)
  return `${newHour}:${newMinute}:${newSecond}`
}
</script>

<style lang="scss" scoped>
.header-filter-form {
  margin-bottom: 20px;

  :deep(.el-form-item) {
    margin-right: 14px;
    margin-bottom: 10px;
  }
}

.user-operate-btn {
  margin-bottom: 10px;
}

.dialog-footer {
  text-align: center;
}

:deep() {
  .rowClass {
    background-color: red;
  }
}

.address-item {
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ececec;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .check {
    margin-right: 10px;
  }

  .left {
    flex: 1;
    flex-shrink: 0;
    overflow: hidden;
    margin-right: 10px;
    display: flex;
    .box {
      margin-right: 20px;
    }
  }

  .address {
    margin-bottom: 10px;
    font-size: 14px;
    overflow: hidden;
    /* 确保超出的文本被裁剪 */
    white-space: nowrap;
    /* 确保文本在一行内显示 */
    text-overflow: ellipsis;
    /* 超出的文本显示为省略号 */
    width: 100%;
  }

  .action {
    display: flex;
    align-items: center;
    gap: 100px;
    .iconView {
    }
  }

  .name {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

    p {
      flex: 1;
      flex-shrink: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin: 0 10px;
      font-size: 14px;
    }

    b {
      font-size: 17px;
    }

    span {
      margin: 0 10px;
      font-size: 14px;
    }
  }
}
.iconClass {
  cursor: pointer;
  width: 32px;
  height: 32px;
  background-color: #409eff;

  text-align: center;
  border-radius: 5px;
  margin-left: 10px;

  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
