<template>
    <el-dialog v-model="visible" center width="680" class="list-dialog" :title="pageType === 'add' ? '新建日程' : '编辑日程'">
        <div style='padding-top:15px;text-align: right'>
            <!-- <editor v-model="value" style="height: 600px" /> -->
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm"
                :size="formSize" status-icon>

                <el-form-item label="" prop="">
                    <el-col :span="11">
                        <SelectDict v-model="ruleForm.followUpTypeValue" placeholder="跟进状态" dictCode="follow_up_type">
                        </SelectDict>
                    </el-col>
                    <el-col :span="2">
                    </el-col>
                    <el-col :span="11">
                        <el-date-picker style="width: 100%;" v-model="ruleForm.followUpTime"
                            value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="跟进时间" />
                    </el-col>
                </el-form-item>
                <el-form-item label="" prop="">
                    <el-input v-model="ruleForm.content" maxlength="300" style="width: 100%" placeholder="勤跟进，多签单"
                        show-word-limit type="textarea" />
                </el-form-item>
                <el-form-item label="客户名称：" prop="customerName">
                    <el-input v-model="ruleForm.customerName" disabled />
                </el-form-item>
                <!-- 客户、联系人 -->
                <template v-if="ruleForm.resourceType == '10' || ruleForm.resourceType == '20'">
                    <el-form-item label="客户状态" prop="resourceStageDictValue">
                        <SelectDict v-model="ruleForm.resourceStageDictValue" placeholder="客户状态"
                            dictCode="customer_status"></SelectDict>
                    </el-form-item>
                    <el-form-item label="联系人" prop="liaisonIdList">
                        <el-select-v2 multiple v-model="ruleForm.liaisonIdList" :options="liaisonOption"
                            placeholder="请选择客户联系人" filterable />
                    </el-form-item>
                </template>
                <template v-if="ruleForm.resourceType == '11'">
                    <el-form-item label="线索状态" prop="resourceStageDictValue">
                        <SelectDict v-model="ruleForm.resourceStageDictValue" placeholder="请选择线索状态"
                            dictCode="clue_status"></SelectDict>
                    </el-form-item>
                </template>
                <!-- 商机 -->
                <template v-if="ruleForm.resourceType == '30'">
                    <el-form-item label="商机标题：" prop="resourceName">
                        <el-input v-model="ruleForm.resourceName" disabled />
                    </el-form-item>
                    <el-form-item label="商机阶段" prop="resourceStageDictValue">
                        <SelectDict v-model="ruleForm.resourceStageDictValue" placeholder="请选择商机阶段"
                            dictCode="business_stage"></SelectDict>
                    </el-form-item>
                </template>
                <!-- 订单 -->
                <template v-if="ruleForm.resourceType == '40'">
                    <el-form-item label="订单标题：" prop="resourceName">
                        <el-input v-model="ruleForm.resourceName" disabled />
                    </el-form-item>
                </template>
                <el-form-item label="提醒谁看" prop="remindUserIdsTemp">
                    <SelectUser multiple @onOk="selectsUser" v-model='ruleForm.remindUserIdsTemp'></SelectUser>
                </el-form-item>
                <el-form-item style="padding-left: 82px;">
                    <el-checkbox v-model="ruleForm.setTask" label="创建下次跟进任务" size="large" />
                </el-form-item>
                <div v-if="ruleForm.setTask">
                    <el-form-item label="跟进时间：" prop="taskBeginTime">
                        <el-date-picker v-model="ruleForm.task.taskBeginTime" type="datetime" placeholder="请选择跟进时间"
                            value-format="YYYY-MM-DD HH:mm:ss" />
                    </el-form-item>
                    <el-form-item label="跟进内容：" prop="taskContent">
                        <el-input v-model="ruleForm.task.taskContent" placeholder="请输入跟进内容" />
                    </el-form-item>
                    <el-form-item label="跟进人员：" prop="ownerBy">
                        <SelectUser v-model="ruleForm.task.ownerBy"></SelectUser>
                    </el-form-item>
                    <el-form-item label="跟进提醒：" prop="remindType">
                        <SelectDict v-model="ruleForm.task.remindType" placeholder="请选择跟进提醒"
                            dictCode="task_remind_type"></SelectDict>
                    </el-form-item>
                    <el-form-item label="提醒方式：">
                        <el-checkbox-group v-model="ruleForm.task.remindModels">
                            <el-checkbox v-for="item in dictData.remindModeData" :label="item.label" :value="item.value"
                                :disabled="item.value == 'site'" />
                        </el-checkbox-group>
                    </el-form-item>
                </div>
            </el-form>
            <el-button @click="visible = false">取消</el-button>
            <el-button :loading="buttonLoading" type="primary" @click="save()">提交</el-button>
        </div>
    </el-dialog>
</template>


<script setup lang="ts">
import { addFollow, getFollow } from '@/api/customer/follow';
import { useDictCache } from '@/hooks/web/useDict'
import { listDetialByCodes } from "@/api/system/dict/";
import { listLiaison } from '@/api/customer/liaison';
// import SelectUser from '@/components/SelectOrg/SelectUser.vue'
import { ElMessage } from 'element-plus';
const { queryDictDetailByCodes } = useDictCache(['customer_status', 'follow_up_type', 'sales_phase', 'task_remind_type', 'clue_status','business_stage'])
queryDictDetailByCodes()
const dictData: any = reactive({
    remindModeData: [],
})
listDetialByCodes(['task_priority_grade', 'task_mark_tag', 'task_remind_mode', 'work_data_group']).then((res => {
    if (res.success) {
        dictData.remindModeData = res.result['task_remind_mode']
    }
}))
const visible = ref<boolean>(false)
const pageType = ref()
const followId = ref()
const open = (data: any) => {

    visible.value = true
}
const followDetail = (id: any) => {
    getFollow(id).then(res => {
        if (res.success) {
            Object.assign(ruleForm.value, res.result)
        }
    })
}


const buttonLoading = ref(false);
// 新建跟进
interface RuleForm {
    customerId: any,
    customerName: any,
    resourceType: string,
    resourceTypeId: any,
    resourceName: string,
    resourceStageName: string,
    resourceStageDictValue: any,
    content: string,
    // customerId: any,
    followUpMemberId: any,
    followUpTime: string,
    followUpTypeValue: string,
    id: any,
    liaisonIdList: any,
    remindUserIds: '',
    remindUserIdsTemp: string[] | number[],
    setTask: boolean,
    task: {
        taskBeginTime: string,
        taskContent: string,
        ownerBy: string,
        remindType: string,
        remindModels: any
    },
    taskId?: string
}
const formSize = ref<'' | 'default' | 'small' | 'large'>('default')
const ruleFormRef = ref<ElFormInstance>()
const ruleForm = ref<RuleForm>({
    customerId: '',
    customerName: '',
    resourceType: '',
    resourceTypeId: '',
    resourceName: '',
    resourceStageName: '',
    resourceStageDictValue: '',
    content: '',
    // customerId:customerId?customerId:'',
    followUpMemberId: null,
    followUpTime: '',
    followUpTypeValue: '',
    id: null,
    liaisonIdList: null,
    remindUserIds: '',
    remindUserIdsTemp: [],
    setTask: true,
    task: {
        taskBeginTime: '',
        taskContent: '',
        ownerBy: '',
        remindType: '',
        remindModels: ['site']
    },
    taskId: undefined
})

const rules = reactive({
    customerId: [
        { required: true, message: '请选择跟进客户', trigger: 'blur' },
    ],
    resourceStageDictValue: [
        { required: true, message: '请选择客户状态', trigger: 'blur' },
    ],
    liaisonIdList: [
        { required: true, message: '请选择联系人', trigger: 'blur' },
    ],
})

const remindUserIds = ref([])
const selectsUser = (data: any) => {
    ruleForm.value.remindUserIds = data.map(item => item.id.toString()).join(',')
}

const liaisonOption = ref([])
const getLiaison = (customerId: string) => {
    listLiaison({ pageIndex: 1, pageSize: 999999, customerId }).then(res => {
        if (res.success) {
            liaisonOption.value = res.result.records.map((item: { name: string, id: number }) => {
                let obj = { label: item.name, value: item.id }
                return obj
            })
        }
    })
}

/** 保存按钮 */
const save = () => {
    ruleFormRef.value?.validate(async (valid: boolean) => {
        if (valid) {
            buttonLoading.value = true;
            await addFollow(ruleForm.value).finally(() => buttonLoading.value = false);
            ElMessage.success("新建跟进成功");
            visible.value = false
            ruleFormRef.value?.resetFields();
        }
    });
}


defineExpose({
    open
})


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