<!--
 * @Author: Kane
 * @Date: 2023-02-02 22:19:12
 * @LastEditors: Kane
 * @LastEditTime: 2023-02-24 11:08:39
 * @FilePath: /it-console/src/views/requirement/RequirementManager.vue
 * @Description: 
 * 
 * Copyright (c) ${2022} by Kane, All Rights Reserved. 
-->
<template>
    <div class="requirement_wrapper" v-loading="ui.pageVisible">
        <!-- 查询框 -->
        <div class="search-box">
            <el-row :gutter="10">
                <el-col :span="2">
                    <span>标题：</span>
                </el-col>
                <el-col :span="16">
                    <el-input v-model.trim.lazy="query_param.title"></el-input>
                </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="2">
                    <span>需求编号：</span>
                </el-col>
                <el-col :span="4">
                    <el-input v-model.trim.lazy="query_param.serial_no" placeholder="请输入末尾三位数字"></el-input>
                </el-col>
                <el-col :span="2">
                    <span>申请人：</span>
                </el-col>
                <el-col :span="4">
                    <el-input v-model.trim.lazy="query_param.request_people"></el-input>
                </el-col>
                <el-col :span="2">
                    <span>状态：</span>
                </el-col>
                <el-col :span="4">
                    <!-- <el-input v-model="query_param.status"></el-input> -->
                    <el-select multiple collapse-tags collapse-tags-tooltip v-model.trim.lazy="query_param.selected_status">
                        <el-option v-for="option in statusData" :value="option.status_name" lable="option.status_code"
                            :key="option.status_code + option.status_name"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="6"></el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="2">
                    <span>提交日期：</span>
                </el-col>
                <el-col :span="4">
                    <el-date-picker v-model="query_param.commit_start_date" style="width:100%;"></el-date-picker>
                </el-col>
                <el-col :span="2">
                    <span>至：</span>
                </el-col>
                <el-col :span="4">
                    <el-date-picker v-model="query_param.commit_end_date" style="width:100%;"></el-date-picker>
                </el-col>
                <el-col :span="6">
                    <div class="button-wrapper-right">
                        <el-button type="primary" icon="search">查询</el-button>
                        <el-button icon="Refresh">重置</el-button>
                    </div>
                </el-col>
                <el-col :span="6"></el-col>
            </el-row>
        </div>
        <!-- 工具栏 -->
        <div class="tool-button-wrapper">
            <el-row :gutter="10">
                <el-col :span="4">
                    <div class="button-wrapper-left">
                        <el-button type="success" icon="DocumentAdd" plain @click="addNewRequirement()">新增</el-button>
                        <el-button type="warning" icon="document" plain>导出</el-button>
                    </div>
                </el-col>
                <el-col :span="20">
                    <div class="table-display-wrapper">
                        <span>结果筛选：</span>
                        <div class="result-filter-wrapper">
                            <el-checkbox-button label="已完成" checked></el-checkbox-button>
                            <el-checkbox-button label="已取消" checked></el-checkbox-button>
                            <el-checkbox-button label="被退回" checked></el-checkbox-button>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!-- 需求列表 -->
        <el-table :data="tableData" border stripe style="width:100%;" :height="tableHeight">
            <el-table-column type="selection" align="center"></el-table-column>
            <el-table-column label="需求编号" align="center" width="160">
                <template #default="requirement">
                    <span @click="showRequirementDetail(requirement.row.serial_no)" class="requirement-serial">{{
                        requirement.row.serial_no
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column label="标题" prop="title" min-width="200" align="center">
                <template #default="requirement">
                    <span class="requirement-title">{{ requirement.row.title }}</span>
                </template>
            </el-table-column>
            <el-table-column label="申请人" prop="request_people" align="center" width="100"></el-table-column>
            <el-table-column label="状态" prop="status" align="center" width="100"></el-table-column>
            <el-table-column label="提交日期" prop="submit_date" align="center" width="130"></el-table-column>
            <el-table-column label="操作" align="center" fixed="right" width="200">
                <template #default="scope">
                    <el-button type="warning" icon="edit" @click="editRequirement(scope.row.serial_no)">编辑</el-button>
                    <el-button type="danger" icon="delete">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination_wrapper">
            <el-pagination class="pull_left" @current-change="onCurrentPageIndexChange" @size-change="onTablePageSizeChange"
                size="small" background v-model="ui.table_current_page" :page-size="ui.table_page_size"
                :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
                :total="requirement_data.length">
            </el-pagination>
        </div>
        <!-- 需求详细信息对话框 -->
        <el-dialog title="详情" class="requirement-detail-dialog" v-model="ui.dialogRequirementDetailVisible" width="900px"
            :close-on-click-modal="true" :close-on-press-escape="false" :show-close="true" :center="false"
            @close="closeRequirementDetail">
            <el-tabs v-loading="ui.dialogRequirementDetailLoadingVisible" v-model="ui.activeTabName">
                <el-tab-pane name="requirement-detail" label="基本信息">
                    <el-scrollbar height="400px">
                        <div class="requirement-detail-wrapper">
                            <el-row :gutter="10">
                                <el-col :span="2">
                                    <span>标题</span>
                                </el-col>
                                <el-col :span="22">
                                    <el-input readonly></el-input>
                                </el-col>
                            </el-row>
                            <el-row :gutter="10">
                                <el-col :span="2">
                                    <span>需求编号</span>
                                </el-col>
                                <el-col :span="6">
                                    <el-input v-model="query_param.serial_no" readonly></el-input>
                                </el-col>
                                <el-col :span="2">
                                    <span>主系统</span>
                                </el-col>
                                <el-col :span="14">
                                    <el-input readonly></el-input>
                                </el-col>
                            </el-row>
                            <el-row :gutter="10">
                                <el-col :span="2">
                                    <span>需求分类</span>
                                </el-col>
                                <el-col :span="6">
                                    <el-input readonly v-model="query_param.request_people"></el-input>
                                </el-col>
                                <el-col :span="2">
                                    <span>状态</span>
                                </el-col>
                                <el-col :span="6">
                                    <el-input readonly v-model="query_param.select_status"></el-input>
                                </el-col>
                                <el-col :span="2">
                                    <span>当前处理人</span>
                                </el-col>
                                <el-col :span="6">
                                    <el-input readonly v-model="query_param.select_status"></el-input>
                                </el-col>
                            </el-row>
                            <el-row :gutter="10">
                                <el-col :span="2">
                                    <span>联系人</span>
                                </el-col>
                                <el-col :span="6">
                                    <el-input readonly v-model="query_param.select_status"></el-input>
                                </el-col>
                                <el-col :span="2">
                                    <span>联系方式</span>
                                </el-col>
                                <el-col :span="6">
                                    <el-input readonly v-model="query_param.select_status"></el-input>
                                </el-col>
                                <el-col :span="2">
                                    <span>提交日期</span>
                                </el-col>
                                <el-col :span="6">
                                    <el-input readonly v-model="query_param.select_status"></el-input>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <div style="border: 1px solid #ccc;min-height:230px; padding:0px;">
                                        <Toolbar style="border-bottom: 1px solid #eee" :editor="detailEditorRef"
                                            :defaultConfig="detailToolbarConfig" :mode="mode" />
                                        <Editor readonly style="overflow-y: auto;" v-model="valueHtml"
                                            :defaultConfig="detailEditorConfig" :mode="mode"
                                            @onCreated="handleDetailEditorCreated" />
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </el-scrollbar>
                </el-tab-pane>
                <el-tab-pane name="requirement-content" label="申请材料">
                    <el-scrollbar height="400px"></el-scrollbar>
                </el-tab-pane>
                <el-tab-pane name="issue-date" label="排期">
                    <el-scrollbar height="400px">
                        <el-table style="width:100%;height:400px;" border stripe>
                            <el-table-column label="系统" align="center" min-width="200"></el-table-column>
                            <el-table-column label="功能" align="center" min-width="200"></el-table-column>
                            <el-table-column label="首次排期" align="center" width="150"></el-table-column>
                            <el-table-column label="最新排期" align="center" width="150"></el-table-column>
                        </el-table>
                    </el-scrollbar>
                </el-tab-pane>
                <el-tab-pane name="comment" label="备注">
                    <el-scrollbar height="400px">
                        <div style="border: 1px solid #ccc;height:auto;">
                            <Toolbar style="border-bottom: 1px solid #eee" :editor="commentEditorRef"
                                :defaultConfig="commentToolbarConfig" :mode="mode" />
                            <Editor readonly style="overflow-y: hidden;" v-model="valueHtml"
                                :defaultConfig="commentEditorConfig" :mode="mode" @onCreated="handleCommentEditorCreated" />
                        </div>
                    </el-scrollbar>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>

<script>
import '@wangeditor/editor/dist/css/style.css';

import { reactive, computed, shallowRef, onBeforeMount, onBeforeUnmount } from "vue";
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { requirementTestData } from '@/test/data/TestData';
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { query_requirement_ui } from "@/utils/api/requirement/requirement";
import { loadRequirementUI } from "@/utils/api/LocalStorage.js";

export default {
    name: "requirement-manager",
    components: { Editor, Toolbar, },
    setup()
    {
        const router = useRouter();
        const store = useStore();
        const requirement_data = requirementTestData;
        const ui = reactive(
            {
                table_current_page: 1,//分页组件当前的页面索引
                table_page_size: 10,
                dialogRequirementDetailVisible: false, //需求详情对话框是否显示
                dialogRequirementDetailLoadingVisible: true,
                pageVisible: false,
                activeTabName: "requirement-detail",
            });
        //从localStorage加载
        const query_param = reactive(loadRequirementUI());
        const valueHtml = `<p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px;">我司与慧择渠道合作对接的旅游险产品“任性游”，合作方提出拓展承保港澳地区，原产品医疗保障对应的条款仅支持境内，需切换成境外条款。</span></p><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px;">为满足业务需求，现申请将方案初始化，以便条款切换。 </span></p><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px;">附方案代码：</span></p><ul><li><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px;">P23YD9800H2000001392</span></li><li><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px;">P23YD9800H2000001391</span></li><li><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px;">P23YD9800H2000001390</span></li><li><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px;">P23YD9800H2000001389</span></li></ul><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px;"> 如上需求，烦请各位领导支持，感谢！</span></p><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px;">我司与慧择渠道合作对接的旅游险产品“任性游”，合作方提出拓展承保港澳地区，原产品医疗保障对应的条款仅支持境内，需切换成境外条款。</span></p><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px;">为满足业务需求，现申请将方案初始化，以便条款切换。 </span></p><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px;">附方案代码：</span></p><ul><li><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px;">P23YD9800H2000001392</span></li><li><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px;">P23YD9800H2000001391</span></li><li><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px;">P23YD9800H2000001390</span></li><li><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px;">P23YD9800H2000001389</span></li></ul><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px;"> 如上需求，烦请各位领导支持，感谢！</span></p><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px;">我司与慧择渠道合作对接的旅游险产品“任性游”，合作方提出拓展承保港澳地区，原产品医疗保障对应的条款仅支持境内，需切换成境外条款。</span></p><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px;">为满足业务需求，现申请将方案初始化，以便条款切换。 </span></p><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px;">附方案代码：</span></p><ul><li><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px;">P23YD9800H2000001392</span></li><li><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px;">P23YD9800H2000001391</span></li><li><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px;">P23YD9800H2000001390</span></li><li><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px;">P23YD9800H2000001389</span></li></ul><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px;"> 如上需求，烦请各位领导支持，感谢！</span></p><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px;">我司与慧择渠道合作对接的旅游险产品“任性游”，合作方提出拓展承保港澳地区，原产品医疗保障对应的条款仅支持境内，需切换成境外条款。</span></p><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px;">为满足业务需求，现申请将方案初始化，以便条款切换。 </span></p><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px;">附方案代码：</span></p><ul><li><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px;">P23YD9800H2000001392</span></li><li><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px;">P23YD9800H2000001391</span></li><li><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px;">P23YD9800H2000001390</span></li><li><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px;">P23YD9800H2000001389</span></li></ul><p><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 14px;"> 如上需求，烦请各位领导支持，感谢！</span></p><p><br></p><p>123</p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p>`;

        //#region 初始化需求详情页面的editor
        const detailEditorRef = shallowRef();
        const detailToolbarConfig = {};
        const detailEditorConfig = {
            placeholder: "请输入内容……",
            readOnly: true,
            scroll: true,
        };
        //#endregion

        //#region 初始化需求详情页面的editor
        const commentEditorRef = shallowRef();
        const commentToolbarConfig = {};
        const commentEditorConfig = {
            placeholder: "请输入内容……",
            readOnly: true,
        };
        //#endregion

        /*计算变量 *****************/
        const tableHeight = computed(() =>
        {
            return 10 * 50 + 40;
        });

        const tableData = computed(() =>
        {
            const startIndex = ui.table_page_size * (ui.table_current_page - 1);
            const endIndex = (ui.table_page_size * ui.table_current_page);

            return requirement_data.slice(startIndex, endIndex);
        });

        const statusData = computed(() =>
        {
            return store.state.requirement.status;
        });

        const onTablePageSizeChange = (pageSize) =>
        {
            console.log("选择的pageSize", pageSize);
            ui.table_page_size = pageSize;
        };
        //用户变更当前页时消息处理函数
        const onCurrentPageIndexChange = (pageIndex) =>
        {
            ui.table_current_page = pageIndex;
        };

        const addNewRequirement = () =>
        {
            router.push({
                name: "RequirementEditing",
                query: {
                    serial: "new",
                },
            });
        };

        const editRequirement = (requirement_serial) =>
        {
            window.localStorage.setItem("requirement_serial", requirement_serial);

            router.push({
                name: "RequirementEditing",
                query: {
                    serial: requirement_serial,
                },
            });
        };

        const handleDetailEditorCreated = (editor) =>
        {
            detailEditorRef.value = editor;
        };

        const handleCommentEditorCreated = (editor) =>
        {
            commentEditorRef.value = editor;
        };


        /*****************************************************
         * 响应显示需求详情的点击事件
         * @param serial_no 需求编号
         *****************************************************/
        const showRequirementDetail = (serial_no) =>
        {
            console.log("状态", query_param.select_status);
            setTimeout(() =>
            {
                ui.dialogRequirementDetailLoadingVisible = false;
            }, 1000);

            ui.dialogRequirementDetailVisible = true;

            console.log("查看需求号:", serial_no);
        };


        //#region 需求详情对话框关闭事件
        const closeRequirementDetail = () =>
        {
            ui.dialogRequirementDetailLoadingVisible = true;
        };
        //#endregion

        //用户选择状态时的事件
        const onUIChange = () =>
        {
            //console.log("当前选择的状态：", query_param.status);
            // debugger;

            //保存到浏览器
            window.localStorage.setItem("requirement_ui", JSON.stringify(query_param));

            store.state.requirement.ui.selected_status = query_param.select_status;
        };

        //#region onBeforeMount定义
        onBeforeMount(() =>
        {
            // debugger;
            //判断selected_status是否有保存的值，有的话就直接用，否则从获取到数据中添加
            if (query_param.selected_status.length === 0)
            {
                for (let index in store.state.requirement.status)
                {
                    const status_name = store.state.requirement.status[index].status_name;

                    if (typeof status_name === "string" && status_name.length != 0)
                    {
                        query_param.selected_status.push(status_name);
                    }
                }

                onUIChange();
            }
        });
        //#endregion

        //#region onBeforeUnmount
        onBeforeUnmount(() =>
        {
            onUIChange();

            //销毁详情页面的editor
            const detailEditor = detailEditorRef.value;

            if (detailEditor != null) 
            {
                detailEditor.destroy();
            }

            //销毁备注页的editor
            const commentEditor = commentEditorRef.value;

            if (commentEditor != null)
            {
                commentEditor.destroy();
            }


        });
        //#endregion


        //#region 加载数据
        //需求状态相关，默认全部选择
        query_requirement_ui(store.state.requirement, "ErrorPage");
        //#endregion



        //输出控制台
        console.log(store.state.app);
        console.log(store.state.requirement);

        //#region 返回值
        return {
            //data
            requirement_data,
            ui,
            query_param,
            //组件
            detailEditorRef,
            commentEditorRef,
            //计算属性
            tableHeight,
            tableData,
            statusData,
            detailToolbarConfig,
            detailEditorConfig,
            commentToolbarConfig,
            commentEditorConfig,
            valueHtml,
            //方法
            editRequirement,
            addNewRequirement,
            onCurrentPageIndexChange,
            onTablePageSizeChange,
            showRequirementDetail,
            closeRequirementDetail,
            onUIChange,
            handleDetailEditorCreated,
            handleCommentEditorCreated,
            //生命周期
            //onBeforeMount,
        };
        //#endregion
    },
};
</script>

<style scoped lang="scss">
/* 整个页面的外壳 ******************************/
@import "@/css/public/_public.scss";

.requirement_wrapper {
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: $box-shadow;

    &:hover {
        box-shadow: $box-shadow-hover;
    }
}

.requirement_wrapper>*+* {
    margin-top: 10px;
}


/* 查询框 **********************************/
.search-box {
    @include query-box-wrap // padding: 0 10px;
}

/* 查询结果筛选框 */
.tool-button-wrapper {
    padding: 0px 15px;
    width: 100%;
}

.tool-button-wrapper>.el-row {
    display: flex;
    align-items: center;
    justify-content: left;
}

.tool-button-wrapper span {
    font-weight: small;
    display: block;
    text-align: right;
    font-size: 15px;
    color: #5f5f5f;
}

.tool-button-wrapper .el-checkbox {
    font-size: 15px;
}

.table-display-wrapper {
    display: flex;
    align-items: center;
    justify-content: right;
}


.button-wrapper-left {
    display: flex;
    justify-content: left;
    align-items: center;
}

.result-filter-wrapper {
    padding: 0 5px;
}

/* 需求列表 */
.requirement-title {
    display: block;
    text-align: left;
    width: 100%;
    font-size: 14px;
}

.requirement-serial {
    width: 100%;
    text-align: center;
    cursor: pointer;
}

/***分页组件 *************/
.pagination_wrapper {
    padding-right: 15px;
    display: flex;
    justify-content: right;
}

/*需求详情对话框 */
.requirement-detail-dialog {
    width: 400px;
    height: 600px;
}



.requirement-detail-dialog .el-row+.el-row {
    margin-top: 10px;
}

/* .requirement-detail-wrapper {
    padding: 0px 10px;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
} */

.requirement-detail-wrapper .el-row {
    display: flex;
    justify-content: left;
    align-items: center;
    width: 100%;
    flex-grow: 0;
    /* margin-top: 10px; */
}

.requirement-detail-wrapper span {
    display: block;
    text-align: right;
    width: 100%;
}
</style>
<style>
.requirement-detail-dialog .el-dialog__body {
    padding: 0px 15px 15px 15px !important;
}
</style>