<template>
  <Dialog :title="title" v-model="show" :width="formType == 'create' ? '700px' : '1000px'">
    <div class="flex items-baseline">
      <el-form
        :model="form"
        ref="formRef"
        :disabled="formType == 'do'"
        :rules="rules"
        label-width="80px"
        class="flex-1"
      >
        <el-row :gutter="20">
          <el-col :span="24" :offset="0">
            <el-form-item label="标题" prop="title">
              <el-input v-model="form.title" placeholder="请输入待办标题" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="内容" prop="content">
              <Editor
                v-model:modelValue="form.content"
                height="400px"
                :disabled="formType == 'do'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="优先级" prop="priority">
              <el-select v-model="form.priority" placeholder="选择优先级" filterable>
                <el-option
                  v-for="item in props.priorityOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="完成状态" prop="status">
              <el-select v-model="form.status" placeholder="选择完成状态" filterable>
                <el-option
                  v-for="item in props.statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="截止日期" prop="dueDate">
              <el-date-picker
                v-model="form.dueDate"
                type="date"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                placeholder="选择日期时间"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="执行人" prop="executorIds">
              <el-select
                v-model="form.executorIds"
                placeholder="选择执行人，可多选"
                multiple
                clearable
                filterable
                style="width: 100%"
              >
                <el-option
                  v-for="item in employeeOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div v-if="formType != 'create'" class="w-350px ml-10px h-full">
        <div class="mb-10px" v-if="formType == 'do'">
          <Editor
            v-model:modelValue="form.followUpContent"
            height="150px"
            :toolbarConfig="toolbarConfig"
          />
          <el-button class="absolute" style="right: 20px; top: 195px" type="primary" @click="addDo">
            更新进度
          </el-button>
        </div>
        <div class="overflow-y-auto pl-15px" style="height: calc(100% - 50px)">
          <el-timeline class="ml-10px">
            <el-timeline-item placement="bottom" timestamp="2025-01-20" color="#30d1fc">
              <div>张三</div>
              <div class="mt-10px text-14px" style="line-height: 24px; color: #666">
                今天成交了15个
              </div>
            </el-timeline-item>
            <el-timeline-item placement="bottom" timestamp="2025-01-15" color="#30d1fc">
              <div>张三</div>
              <div class="mt-10px text-14px" style="line-height: 24px; color: #666">
                下午跟进了100条线索
              </div>
            </el-timeline-item>
            <el-timeline-item placement="bottom" timestamp="2025-01-01" color="#30d1fc">
              <div>张三</div>
              <div class="mt-10px text-14px" style="line-height: 24px; color: #666">
                上午跟进了100条线索
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </div>

    <template #footer v-if="formType != 'do'">
      <span>
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" :disabled="formLoading" @click="handleSave">保 存</el-button>
      </span>
    </template>
  </Dialog>
</template>

<script setup name="DialogWait">
const props = defineProps({
  priorityOptions: {
    type: Array,
    default: () => [
      { label: '高', value: 1 },
      { label: '中', value: 2 },
      { label: '低', value: 3 }
    ]
  },
  statusOptions: {
    type: Array,
    default: () => [
      { label: '未完成', value: 1, tagType: 'warning' },
      { label: '已关闭', value: 2, tagType: 'success' }
    ]
  }
})

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

const toolbarConfig = {
  toolbarKeys: []
}

const show = ref(false)
const title = ref('')
const formType = ref('create')

const form = ref({})
const formLoading = ref(false)
const rules = ref({
  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  dueDate: [{ required: true, message: '请选择截止日期', trigger: 'change' }],
  executorIds: [{ required: true, message: '请选择执行人', trigger: 'change' }]
})

async function open(type, id) {
  show.value = true
  title.value = { create: '新增待办', update: '修改待办', do: '更新待办进度' }[type]
  formType.value = type
  resetForm()
  if (id) {
    formLoading.value = true
    try {
      // 模拟表单数据
      form.value = {
        title: '2025年1月20日，张三成交了15个',
        content: '今天成交了15个',
        priority: 1,
        status: 1,
        dueDate: '2025-01-20',
        executorIds: [1, 2]
      }
      // form.value = await KpiApi.getKpiDetail(id)
    } finally {
      formLoading.value = false
    }
  }
  getOptions()
}

function getOptions() {
  employeeOptions.value = [
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },
    { id: 3, name: '王五' }
  ]
}

function resetForm() {
  form.value = {
    title: undefined,
    content: undefined,
    priority: 1,
    status: 1,
    dueDate: undefined,
    executorIds: []
  }
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const formRef = ref()

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
async function handleSave() {
  // 校验表单
  if (!formRef.value) return
  const valid = await formRef.value.validate()
  if (!valid) return
  // 提交请求
  formLoading.value = true
  try {
    if (formType.value === 'create') {
      await KpiApi.createKpi(form.value)
      message.success(t('common.createSuccess'))
    } else {
      await KpiApi.updateKpi(form.value)
      message.success(t('common.updateSuccess'))
    }
    show.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

const employeeOptions = ref([])
</script>

<style lang="scss" scoped></style>
