<template>
    <div>
        <a-button size="small" type="primary" @click="show = true">
            <template #icon>
                <icon-edit />
            </template>
            创建任务
        </a-button>
        <a-modal
            v-model:visible="show"
            width="760px"
            @close="this.$refs.form.resetFields()"
            @before-ok="submit"
        >
            <a-form auto-label-width :model="form" ref="form">
                <a-row gutter="16">
                    <a-col :span="12">
                        <a-form-item
                            label="任务标题"
                            :rules="[
                                { required: true, message: '请输入任务标题' }
                            ]"
                            field="name"
                        >
                            <a-input
                                placeholder="请输入任务标题"
                                v-model="form.name"
                            ></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item
                            label="优先级"
                            :rules="[
                                { required: true, message: '请选择优先级' }
                            ]"
                            field="level"
                        >
                            <a-select
                                :options="levelOptions"
                                v-model="form.level"
                                placeholder="请选择优先级"
                            />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-form-item
                    label="任务周期"
                    :rules="[{ required: true, message: '请选择任务周期' }]"
                    field="time"
                >
                    <a-range-picker style="width: 100%" v-model="form.time" />
                </a-form-item>
                <a-row gutter="16">
                    <a-col :span="12">
                        <a-form-item
                            label="任务标签"
                            :rules="[
                                { required: true, message: '请选择任务标签' }
                            ]"
                            field="tag"
                        >
                            <a-select
                                :options="tagsOptions"
                                v-model="form.tag"
                                placeholder="请选择任务标签"
                            />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item
                            label="执行人"
                            :rules="[
                                { required: true, message: '请选择执行人' }
                            ]"
                            field="executors"
                        >
                            <a-select
                                multiple
                                :options="userOptions"
                                allow-search
                                @search="handleSearch"
                                @focusin="handleFocus"
                                v-model="form.executors"
                                placeholder="请选择执行人"
                            />
                        </a-form-item>
                    </a-col>
                </a-row>

                <a-form-item label="任务描述" field="remark">
                    <a-textarea
                        v-model="form.remark"
                        placeholder="请添加任务描述"
                        :auto-size="{ minRows: 4 }"
                    />
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script>
export default {
    props: {
        projectId: {
            required: true,
            type: String,
            default: ''
        }
    },
    watch: {
        show: {
            handler(val) {
                if (val) {
                    this.form.projectId = this.projectId
                    this.fetchDict()
                }
            }
        }
    },
    data() {
        return {
            levelOptions: [],
            tagsOptions: [],
            userOptions: [],
            show: false,
            form: {
                projectId: '',
                name: '',
                level: '2',
                time: '',
                tag: '',
                executors: '',
                remark: '',
                files: null
            }
        }
    },

    methods: {
        fetchDict() {
            this.$api.sys.dict({ code: 'project_task_level' }).then(res => {
                if (res.code === 200) {
                    this.levelOptions = res.data.map(e => {
                        return { label: e.label, value: e.value }
                    })
                }
            })

            this.$api.sys.dict({ code: 'project_task_type' }).then(res => {
                if (res.code === 200) {
                    this.tagsOptions = res.data.map(e => {
                        return { label: e.label, value: e.value }
                    })
                }
            })
        },
        handleFocus(e) {
            this.handleSearch('')
        },
        handleSearch(value) {
            this.$api.user.list({ name: value }).then(res => {
                if (res.code === 200) {
                    this.userOptions = res.data.map(e => {
                        return { label: e.name, value: e.id }
                    })
                }
            })
        },
        submit(done) {
            this.$refs.form.validate(errors => {
                if (errors === undefined) {
                    const data = { ...this.form }
                    data.startDate = data.time[0]
                    data.endDate = data.time[1]
                    data.executorIds = data.executors.join(',')
                    this.$api.task.submit(data).then(res => {
                        if (res.code === 200) {
                            this.$notification.success(res.msg)
                            this.$emit('ok')
                            done()
                        } else {
                            this.$notification.error(res.msg)
                            done(false)
                        }
                    })
                } else {
                    done(false)
                }
            })
        }
    }
}
</script>

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