<template>
    <div class="report-edit-wrapper">
        <Form class="report-edit" v-bind="formOptions" @submit.native.prevent>
            <FormItem :label="$L('汇报类型')">
                <RadioGroup
                    type="button"
                    button-style="solid"
                    v-model="reportData.type"
                    @on-change="typeChange"
                    class="report-radiogroup"
                    :readonly="id > 0">
                    <Radio label="weekly" :disabled="id > 0 && reportData.type =='daily'">{{ $L("周报") }}</Radio>
                    <Radio label="daily" :disabled="id > 0 && reportData.type =='weekly'">{{ $L("日报") }}</Radio>
                </RadioGroup>
                <ButtonGroup v-if="id === 0" class="report-buttongroup">
                    <ETooltip :disabled="$isEEUIApp || windowTouch" :content="prevCycleText" placement="bottom">
                        <Button type="primary" @click="prevCycle">
                            <Icon type="ios-arrow-back" />
                        </Button>
                    </ETooltip>
                    <div class="report-buttongroup-vertical"></div>
                    <ETooltip :disabled="$isEEUIApp || windowTouch || reportData.offset >= 0" :content="nextCycleText" placement="bottom">
                        <Button type="primary" @click="nextCycle" :disabled="reportData.offset >= 0">
                            <Icon type="ios-arrow-forward" />
                        </Button>
                    </ETooltip>
                </ButtonGroup>
            </FormItem>
            <FormItem :label="$L('汇报名称')">
                <Input v-model="reportData.title" disabled/>
            </FormItem>
            <FormItem :label="$L('汇报对象')">
                <div class="report-users">
                    <UserSelect v-model="reportData.receive" :disabledChoice="[userId]" :title="$L('选择接收人')"/>
                    <a class="report-user-link" href="javascript:void(0);" @click="getLastSubmitter">
                        <Icon v-if="receiveLoad > 0" type="ios-loading" class="icon-loading"/>
                        <Icon v-else type="ios-share-outline" />
                        {{ $L("使用我上次的汇报对象") }}
                    </a>
                </div>
            </FormItem>
            <FormItem :label="$L('汇报内容')" class="report-content-editor">
                <TEditor v-model="reportData.content" height="100%"/>
            </FormItem>
            <FormItem class="report-foot">
                <div class="report-bottoms">
                    <Button type="primary" @click="handleSubmit" :loading="loadIng > 0" class="report-bottom">{{$L(id > 0 ? '修改' : '提交')}}</Button>
                    <Button
                        type="default"
                        class="report-bottom"
                        :loading="aiOrganizeLoading"
                        @click="onOrganize">
                        <Icon type="md-construct" />
                        {{ $L("AI 整理汇报") }}
                    </Button>
                </div>
            </FormItem>
        </Form>
        <Modal
            v-model="organizePreviewVisible"
            :title="$L('整理结果预览')"
            :mask-closable="false"
            :styles="{
                width: '90%',
                maxWidth: '800px'
            }">
            <div class="report-content organize-preview user-select-auto" v-html="organizeResult.html"></div>
            <div slot="footer" class="adaption">
                <Button type="default" @click="closeOrganizePreview">{{ $L("取消") }}</Button>
                <Button type="primary" @click="applyOrganize" :loading="aiOrganizeLoading">{{ $L("应用到汇报") }}</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import UserSelect from "../../../components/UserSelect.vue";
import {mapState} from "vuex";

const TEditor = () => import('../../../components/TEditor');
export default {
    name: "ReportEdit",
    components: {
        UserSelect,
        TEditor
    },
    props: {
        id: {
            default: 0,
        }
    },
    data() {
        return {
            loadIng: 0,
            receiveLoad: 0,
            aiOrganizeLoading: false,
            organizePreviewVisible: false,
            organizeResult: {
                html: '',
                model: '',
            },

            reportData: {
                sign: "",
                title: "",
                content: "",
                type: "weekly",
                receive: [],
                id: 0,
                offset: 0 // 以当前日期为基础的周期偏移量。例如选择了上一周那么就是 -1，上一天同理。
            },
            prevCycleText: this.$L("上一周"),
            nextCycleText: this.$L("下一周"),
        };
    },
    watch: {
        id: {
            handler(val) {
                if (val > 0) {
                    this.getDetail(val);
                } else {
                    this.reportData.offset = 0;
                    this.reportData.type = "weekly";
                    this.reportData.receive = [];
                    this.getTemplate();
                }
            },
            immediate: true
        },
    },
    computed: {
        ...mapState(['formOptions']),
    },
    methods: {
        handleSubmit() {
            if (this.id === 0 && this.reportData.id > 0) {
                $A.modalConfirm({
                    title: '覆盖提交',
                    content: '你已提交过此日期的报告，是否覆盖提交？',
                    onOk: () => {
                        this.doSubmit();
                    }
                });
            } else {
                this.doSubmit();
            }
        },

        doSubmit() {
            this.loadIng++;
            this.$store.dispatch("call", {
                url: 'report/store',
                data: this.reportData,
                method: 'post',
            }).then(({data, msg}) => {
                // data 结果数据
                this.reportData.offset = 0;
                this.reportData.type = "weekly";
                this.reportData.receive = [];
                this.getTemplate();
                // msg 结果描述
                !this.$isSubElectron && $A.messageSuccess(msg);
                this.$emit("saveSuccess", {data, msg});
            }).catch(({msg}) => {
                // msg 错误原因
                $A.messageError(msg);
            }).finally(_ => {
                this.loadIng--;
            });
        },

        getTemplate() {
            this.loadIng++;
            this.$store.dispatch("call", {
                url: 'report/template',
                data: {
                    type: this.reportData.type,
                    offset: this.reportData.offset,
                    id: this.id
                },
            }).then(({data}) => {
                // data 结果数据
                if (data.id) {
                    this.reportData.id = data.id;
                    if (this.id > 0) {
                        this.getDetail(data.id);
                    } else {
                        this.reportData.sign = data.sign;
                        this.reportData.title = data.title;
                        this.reportData.content = data.content;
                    }
                } else {
                    this.reportData.id = 0;
                    this.reportData.sign = data.sign;
                    this.reportData.title = data.title;
                    this.reportData.content = data.content;
                }
            }).catch(({msg}) => {
                // msg 错误原因
                $A.messageError(msg);
            }).finally(_ => {
                this.loadIng--;
            });
        },

        typeChange(value) {
            // 切换汇报类型后偏移量归零
            this.reportData.offset = 0;
            if (value === "weekly") {
                this.prevCycleText = this.$L("上一周");
                this.nextCycleText = this.$L("下一周");
            } else {
                this.prevCycleText = this.$L("前一天");
                this.nextCycleText = this.$L("后一天");
            }
            this.getTemplate();
        },

        getDetail(reportId) {
            this.$store.dispatch("call", {
                url: 'report/detail',
                data: {
                    id: reportId
                },
            }).then(({data}) => {
                // data 结果数据
                this.reportData.title = data.title;
                this.reportData.content = data.content;
                this.reportData.receive = data.receives_user.map(({userid}) => userid);
                this.reportData.type = data.type_val;
                this.reportData.id = reportId;
            }).catch(({msg}) => {
                // msg 错误原因
                $A.messageError(msg);
            });
        },

        prevCycle() {
            this.reportData.offset -= 1;
            this.reReportData();
            this.getTemplate();
        },

        nextCycle() {
            // 周期偏移量不允许大于0
            if (this.reportData.offset < 0) {
                this.reportData.offset += 1;
            }
            this.reReportData();
            this.getTemplate();
        },

        // 获取上一次接收人
        getLastSubmitter() {
            setTimeout(_ => {
                this.receiveLoad++;
            }, 300)
            this.$store.dispatch("call", {
                url: 'report/last_submitter',
            }).then(({data}) => {
                this.reportData.receive = data;
                if (data.length === 0) {
                    $A.messageWarning("没有上次的汇报对象");
                }
            }).catch(({msg}) => {
                $A.messageError(msg);
            }).finally(_ => {
                this.receiveLoad--;
            });
        },

        reReportData() {
            this.reportData.title = "";
            this.reportData.content = "";
            this.reportData.receive = [];
            this.reportData.id = 0;
        },

        onOrganize() {
            if (!this.reportData.content || !this.reportData.content.trim()) {
                $A.messageWarning("请先填写汇报内容");
                return;
            }
            if (this.aiOrganizeLoading) {
                return;
            }
            this.aiOrganizeLoading = true;
            this.$store.dispatch("call", {
                url: 'report/ai_organize',
                method: 'post',
                data: {
                    content: this.reportData.content,
                    title: this.reportData.title,
                    type: this.reportData.type,
                },
                timeout: 60 * 1000,
            }).then(({data}) => {
                this.organizeResult = data || {html: '', model: ''};
                if (!this.organizeResult.html) {
                    $A.messageWarning("AI 未返回整理内容");
                    return;
                }
                this.organizePreviewVisible = true;
            }).catch(({msg}) => {
                $A.messageError(msg);
            }).finally(() => {
                this.aiOrganizeLoading = false;
            });
        },

        closeOrganizePreview() {
            this.organizePreviewVisible = false;
        },

        applyOrganize() {
            if (!this.organizeResult.html) {
                $A.messageWarning("没有可应用的内容");
                return;
            }
            this.reportData.content = this.organizeResult.html;
            this.organizePreviewVisible = false;
            $A.messageSuccess("已应用整理结果");
        }
    }
}
</script>