<template>
  <div class="mobile-page" v-loading="formLoading">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-position="top"
    >
      <!-- 公海规则设置 -->
      <div class="mobile-form__section">
        <div class="mobile-form__section-header">
          <span class="mobile-form__section-title">客户公海规则设置</span>
          <el-button
            type="primary"
            size="small"
            @click="onSubmit"
            v-hasPermi="['crm:customer-pool-config:update']"
          >
            保存
          </el-button>
        </div>
        <el-form-item label="客户公海规则" prop="enabled">
          <el-radio-group v-model="formData.enabled" @change="changeEnable">
            <el-radio :value="false">不启用</el-radio>
            <el-radio :value="true">启用</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>

      <!-- 规则详情 -->
      <div class="mobile-form__section" v-if="formData.enabled">
        <div class="mobile-form__section-title">规则详情</div>
        <div class="mobile-form__inline-group">
          <el-input-number v-model="formData.contactExpireDays" :min="1" style="width: 80px" />
          <span class="mobile-form__inline-text">天不跟进或</span>
          <el-input-number v-model="formData.dealExpireDays" :min="1" style="width: 80px" />
          <span class="mobile-form__inline-text">天未成交</span>
        </div>
        <el-form-item label="提前提醒设置" prop="notifyEnabled" style="margin-top: 16px">
          <el-radio-group v-model="formData.notifyEnabled" @change="changeNotifyEnable">
            <el-radio :value="false">不提醒</el-radio>
            <el-radio :value="true">提醒</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="mobile-form__inline-group" v-if="formData.notifyEnabled">
          <span class="mobile-form__inline-text">提前</span>
          <el-input-number v-model="formData.notifyDays" :min="1" style="width: 80px" />
          <span class="mobile-form__inline-text">天提醒</span>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import * as CustomerPoolConfigApi from '@/api/crm/customer/poolConfig'
import { CardTitle } from '@/components/Card'

defineOptions({ name: 'CrmCustomerPoolConfig' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const formLoading = ref(false)
const formData = ref({
  enabled: false,
  contactExpireDays: undefined,
  dealExpireDays: undefined,
  notifyEnabled: false,
  notifyDays: undefined
})
const formRules = reactive({
  enabled: [{ required: true, message: '是否启用客户公海不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref

/** 获取配置 */
const getConfig = async () => {
  try {
    formLoading.value = true
    const data = await CustomerPoolConfigApi.getCustomerPoolConfig()
    if (data === null) {
      return
    }
    formData.value = data
  } finally {
    formLoading.value = false
  }
}

/** 提交配置 */
const onSubmit = async () => {
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as CustomerPoolConfigApi.CustomerPoolConfigVO
    await CustomerPoolConfigApi.saveCustomerPoolConfig(data)
    message.success(t('common.updateSuccess'))
    await getConfig()
    formLoading.value = false
  } finally {
    formLoading.value = false
  }
}

/** 更改客户公海规则设置 */
const changeEnable = () => {
  if (!formData.value.enabled) {
    formData.value.contactExpireDays = undefined
    formData.value.dealExpireDays = undefined
    formData.value.notifyEnabled = false
    formData.value.notifyDays = undefined
  }
}

/** 更改提前提醒设置 */
const changeNotifyEnable = () => {
  if (!formData.value.notifyEnabled) {
    formData.value.notifyDays = undefined
  }
}

onMounted(() => {
  getConfig()
})
</script>

<style lang="scss" scoped>
.mobile-page {
  padding: 12px;
  background: #f5f7fa;
  min-height: 100vh;
}
.mobile-form__section {
  background: #fff;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.mobile-form__section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}
.mobile-form__section-title {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
}
.mobile-form__inline-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.mobile-form__inline-text {
  color: #606266;
  font-size: 14px;
}
</style>
