<template>
    <div>
        <div class="mytasksinif-all">
            <div class="mytasksinif-title">任务状态</div>
            <div class="mytasksinif-form">
                <el-form label-width="70px" class="demo-ruleForm">
                    <el-form-item label="指派给" prop="name">
                        <el-select
                        :disabled="true"
                        size="medium"
                        style="width: 100%;"
                        v-model="finish.taskperson"
                        multiple
                        filterable
                        allow-create
                        default-first-option
                        @change="selectchg"
                        placeholder="请选择人员">
                            <el-option
                            v-for="item in persolist"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <div class="mytasksinif-form-first">
                        <el-form-item label="实际开始" prop="name">
                            <el-date-picker
                            value-format="yyyy-MM-dd hh:mm:ss"
                            :disabled="true"
                            style="width:100%;"
                            v-model="finish.actuallyStarted"
                            type="datetime"
                            placeholder="选择日期时间"
                            default-time="12:00:00">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="实际结束" prop="name">
                            <el-date-picker
                            value-format="yyyy-MM-dd hh:mm:ss"
                            style="width:100%;"
                            :disabled="true"
                            v-model="finish.actuallyOver"
                            type="datetime"
                            placeholder="选择日期时间"
                            default-time="12:00:00">
                            </el-date-picker>
                        </el-form-item>
                    </div>
                    <div class="quill-box">
                        <label class="quill-title">任务描述</label>
                        <quill-editor class="editor"
                            ref="myTextEditor"
                            v-model="content"
                            :options="editorOption"
                            @blur="onEditorBlur($event)"
                            @focus="onEditorFocus($event)"
                            @ready="onEditorReady($event)"
                            @change="onEditorChange($event)">
                            <button id="custom-button">defineAsyncComponent</button>
                        </quill-editor>
                    </div>
                </el-form>
                <div class="mytasksinif-btn">
                    <!-- <el-button size="medium" type="primary">完成</el-button> -->
                    <el-button size="medium" @click="goback">取消</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    beforeRouteLeave(to, from, next) {
        console.log(to);
        console.log(from);
        if(to.name=='TaskList'){
            to.meta.keepAlive = true;
        }
        next()
    },
    data () {
        return {
            id:'',
            token:'',
            pageId:'',
            userId:'',
            finish:{
                taskperson:[],
                actuallyStarted:'',
                actuallyOver:'',
            },
            persolist: [],
            //富文本
            content: null,
            contents: '',
            editorOption: {
                modules: {
                toolbar: [
                    ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
                    ["blockquote", "code-block"], // 引用  代码块
                    [{ header: 1 }, { header: 2 }], // 1、2 级标题
                    [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
                    [{ script: "sub" }, { script: "super" }], // 上标/下标
                    [{ indent: "-1" }, { indent: "+1" }], // 缩进
                    // [{'direction': 'rtl'}],                         // 文本方向
                    [{ size: ["small", false, "large", "huge"] }], // 字体大小
                    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
                    [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
                    [{ font: [] }], // 字体种类
                    [{ align: [] }], // 对齐方式
                    ["clean"], // 清除文本格式
                    ["link", "image", "video"], // 链接、图片、视频
                    ["sourceEditor"]
                ], //工具菜单栏配置
                },
                placeholder: '请在这里添加产品描述', //提示
                readyOnly: false, //是否只读
                theme: 'snow', //主题 snow/bubble
                syntax: true, //语法检测
            }
        }
    },
    methods: {
        // 失去焦点
        onEditorBlur(editor) {
            this.content=this.contents
        },
        // 获得焦点
        onEditorFocus(editor) {},
        // 开始
        onEditorReady(editor) {},
        // 值发生变化
        onEditorChange(editor) {
            console.log(editor);
            this.contents = editor.text;
        },
        selectchg(){
            console.log(this.values)
        },
        //基础数据原
        PostTaskAllocationInit(){
            var url = "/api/PersonnelModule/PostTaskAllocationInit"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.userId
                },
                data:{
                    portType:1,
                    userId: that.userId
                }
            }).then(function (res) {
                console.log(res)
                if(res.data.code==200){
                    that.persolist=res.data.data.executeTaskUserInfos;
                    that.PostTaskAllocationDetails()
                }else{
                    that.$message.error(res.data.msg);
                }
            }).catch(function (error) {
                that.$message.error("获取数据源失败！");
            });
        },
        //获取详情
        PostTaskAllocationDetails(){
            if(this.id==undefined){
                return
            }
            var url = "/api/PersonnelModule/PostTaskAllocationDetails"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.userId
                },
                data:{
                    portType:1,
                    userId: that.userId,
                    pageId: that.pageId,
                    id: that.id,
                }
            }).then(function (res) {
                console.log(res)
                if(res.data.code==200){
                    for(var i=0;i<res.data.data.userTaskInfos.length;i++){
                        that.finish.taskperson.push(res.data.data.userTaskInfos[i].userId);
                    }
                    that.content=res.data.data.taskContent;
                    that.finish.actuallyStarted=res.data.data.predictBeginTime;
                    that.finish.actuallyOver=res.data.data.predictEndTime;
                }else{
                    that.$message.error(res.data.msg);
                }
            }).catch(function (error) {
                that.$message.error("获取详情");
            });
        },
        //返回上一页
        goback(){
            this.$router.go(-1);
        },
    },
    computed: {
        editor() {
            return this.$refs.myTextEditor.quillEditor;
        }
    },
    mounted(){
        this.id = Number(this.$route.query.id);
        this.token=JSON.parse(localStorage.getItem('userinif')).token;
        this.pageId=Number(localStorage.getItem('indexs').split('-')[1]);//页面id
        this.userId=JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.PostTaskAllocationInit()
    }
}
</script>
<style>
.mytasksinif-all{
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    height: 100%;
    min-height: 830px;
}
.mytasksinif-title{
    font-size: 17px;
    font-weight: 600;
}
.mytasksinif-form{
    margin-top: 20px;
}
.mytasksinif-form-first{
    display: flex;
    flex-wrap: wrap;
}
.mytasksinif-form-first .el-form-item{
    width: 350px;
    margin-right: 30px;
}
.mytasksinif-form-first .el-select{
    width: 100%;
}
.mytasksinif-form.el-range-editor.el-input__inner{
    width: 45%;
}
.mytasksinif-btn{
    text-align:right;
    padding-top: 20px;
}

.quill-box{
    display: flex;
    align-items: baseline;
    margin-bottom: 22px;
}
.quill-box .ql-container{
    height: 86%;
}
.quill-title{
    font-size: 14px;
    color: #606266;
    width: 58px;
    padding: 0 12px 0 0;
}
.quill-box .editor {
    line-height: normal !important;
    height: 300px;
    width: 96%;
}
.quill-box .ql-snow .ql-tooltip[data-mode=link]::before {
content: "请输入链接地址:";
}
.quill-box .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0px;
    content: '保存';
    padding-right: 0px;
}

.quill-box .ql-snow .ql-tooltip[data-mode=video]::before {
    content: "请输入视频地址:";
}

.quill-box .ql-snow .ql-picker.ql-size .ql-picker-label::before,
.quill-box .ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: '14px';
}
.quill-box .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.quill-box .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
content: '10px';
}
.quill-box .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.quill-box .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
content: '18px';
}
.quill-box .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.quill-box .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
content: '32px';
}

.quill-box .ql-snow .ql-picker.ql-header .ql-picker-label::before,
.quill-box .ql-snow .ql-picker.ql-header .ql-picker-item::before {
content: '文本';
}
.quill-box .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.quill-box .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
content: '标题1';
}
.quill-box .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.quill-box .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
content: '标题2';
}
.quill-box .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.quill-box .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
content: '标题3';
}
.quill-box .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.quill-box .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
content: '标题4';
}
.quill-box .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.quill-box .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
content: '标题5';
}
.quill-box .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.quill-box .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
content: '标题6';
}

.quill-box .ql-snow .ql-picker.ql-font .ql-picker-label::before,
.quill-box .ql-snow .ql-picker.ql-font .ql-picker-item::before {
content: '标准字体';
}
.quill-box .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.quill-box .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
content: '衬线字体';
}
.quill-box .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.quill-box .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
content: '等宽字体';
}
</style>