<!--
 * @Description: 问题管理管理
 * @Author: xiaofengzhou
 * @Email: 2946471396@qq.com
 * @Date: 2022-08-28 20:25:46
 * @LastEditTime: 2022-09-14 13:51:52
 * @LastEditors: xiaofengzhou
-->

<!--  -->
<template>
    <div class=''>
        <div class="problemContent">
            <div class="textContent" @click="goToMainPage">
                帮助文档
            </div>
            <div class="searchProblem">
                <div class="searchExpand">

                    <ul>
                        <li @click="change('1')" :class="isActive === '1' ? 'active' : ''"><span
                                class="iconfont icon-list"></span> 代码规范</li>
                        <li @click="change('2')" :class="isActive === '2' ? 'active' : ''"><span
                                class="iconfont icon-list"></span> 产品使用手册</li>
                        <li @click="change('3')" :class="isActive === '3' ? 'active' : ''"><span
                                class="iconfont icon-list"></span> 其他资料</li>
                    </ul>

                </div>

                <div class="problemDetail">
                    <!-- 详情内容 -->
                    <div v-show="isDetails">
                        <div class="title">
                            <span>[{{helpDetail.helpName}}]</span>
                        </div>
                        <div class="problemDetails">
                            <span>[简介]</span>
                            <p>{{helpDetail.helpDescription}}
                            </p>
                        </div>
                        <div class="problemExample">
                            <span>[示例]</span>
                            <div v-html="helpDetail.helpExample"></div>
                        </div>
                    </div>
                    <!-- 列表 -->
                    <div class="problemDescribe" v-show="isActive === '1' && !isDetails">
                        <span class="iconfont icon-list headDescribe">&nbsp;代码规范</span>
                        <div class="describeContent" >
                            <div class="describeCard" @click="getDetails(item)" :key="index" v-for="(item,index) in helpData.standard">
                                <span>【{{item.helpName}}】</span>
                                <p>简介:{{item.helpDescription}}</p>
                            </div>
                            

                        </div>
                    </div>
                    <div class="problemDescribe" v-show="isActive === '2' && !isDetails">
                        <span class="iconfont icon-list headDescribe">&nbsp;产品使用手册</span>
                        <div class="describeContent">
                            <div class="describeCard" @click="getDetails(item)" :key="index" v-for="(item,index) in helpData.manual">
                                <span>【{{item.helpName}}】</span>
                                <p>简介:{{item.helpDescription}}</p>
                            </div>
                        </div>
                    </div>
                    <div class="problemDescribe" v-show="isActive === '3' && !isDetails">
                        <span class="iconfont icon-list headDescribe">&nbsp;其他资料</span>
                        <div class="describeContent">
                            <div class="describeCard" @click="getDetails(item)" :key="index" v-for="(item,index) in helpData.other">
                                <span>【{{item.helpName}}】</span>
                                <p>简介:{{item.helpDescription}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import '../../../static/icons2/iconfont.css'
import { getHelpList } from '../../../packages/api/manage'
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            isActive: '1',
            isDetails: false,
            
            helpData: {},
            helpDetail:{
                helpName:'',
                helpDescription:'',
                helpExample:""
            }
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        getData(pageNum = 1, pageSize = 100, helpName = '') {
            getHelpList({ pageNum: pageNum, pageSize: pageSize, helpName: helpName }).then((res) => {
                let result = res.result.data
                let category = { standard: [], manual: [], other: [] }

                // 0 代码使用规范 1 产品手册 2 其他资料

                result.map((item, index) => {
                    if (item.helpCategory === '0') {
                        category.standard.push(item)
                    } else if (item.helpCategory === '1') {
                        category.manual.push(item)
                    } else if (item.helpCategory === '2') {
                        category.other.push(item)
                    }
                })
                this.helpData = category
               
            })
        },
        // 切换标签
        change(val) {
            this.isActive = val
            this.isDetails = false
        },
        // 切换详情显示

        getDetails(item) {
            this.isDetails = true
            this.helpDetail.helpName=item.helpName
            this.helpDetail.helpDescription=item.helpDescription
            this.helpDetail.helpExample=item.helpExample
            
            // 查询详情，包括图文信息
        },
        // 跳转
        goToMainPage() {
            this.isDetails = false

        }
    },
    created() {
        this.getData()
    },

}
</script>
<style scoped lang="less">
.problemContent .searchProblem .problemDetail .problemExample {
    background-color: #fafafa;
    margin-left: 10px;
    padding-left: 20px;
    padding-top: 5px;
    padding-right: 20px;
    border-radius: 10px;
    box-shadow: 1px 1px 5px 0px #B2D6FE;
    height: 500px;
    overflow: scroll;
    width: 100%;

    & span {
        font-weight: bolder;
        color: #B2D6FE;
    }
}

.problemContent .searchProblem .problemDetail .problemDescribe {
    background-color: #fafafa;
    margin-left: 10px;
    padding-left: 20px;
    padding-top: 20px;
    padding-right: 20px;
    border-radius: 10px;
    box-shadow: 1px 1px 5px 0px #B2D6FE;
    height: 600px;
    overflow: scroll;
    width: 100%;

    .describeContent {
        width: 1050px;
        display: flex;
        flex-wrap: wrap;
        // height: 520px;
        overflow: scroll;

        .describeCard {
            height: 100px;
            width: 250px;
            background: #F0EFEF;
            padding-top: 5px;
            margin-top: 20px;
        }

        .describeCard:nth-child(3n-2) {
            margin-left: 20px;
        }

        .describeCard:nth-child(3n-1) {
            margin-left: 80px;
        }

        .describeCard:nth-child(3n) {
            margin-left: 80px;
        }

        .describeCard>span {
            margin-top: 15px;
            margin-left: 5px;
            color: #489efb;
            font-weight: bolder;
        }

        .describeCard>p {
            margin-left: 5px;
            margin-top: 5px;
        }
    }
}

.problemContent .searchProblem .problemDetail .title {
    margin-top: 10px;

    & span {
        font-weight: bolder;
        color: #134495;
        margin-left: 20px;

    }

}

.problemContent .searchProblem .problemDetail .problemDescribe .headDescribe {
    font-size: 18px;
    color: #134495;
    margin-left: 20px;
}

.problemContent .searchProblem {
    color: black;
    display: flex;
    border-radius: 7px;
    width: 1337px;
}

.problemContent .searchProblem .problemDetail {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

}

.problemContent .searchProblem .problemDetails {
    height: 50px;
    margin: 10px 10px;
    background-color: #fafafa;
    padding-left: 20px;
    border-radius: 10px;
    box-shadow: 1px 1px 5px 0px #B2D6FE;
    width: 100%;
    padding-top: 5px;
    overflow: hidden;

    & span {
        font-weight: bolder;
        color: #B2D6FE;
    }
}

.problemContent .searchProblem .searchExpand {
    width: 300px;
    height: 100%;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 1px 1px 5px 0px #B2D6FE;

}

.problemContent .searchProblem .searchExpand ul {
    list-style: none;
    padding-left: 10px;
    margin-top: 10px;

    .active {
        background-color: #e6f7ff;
        border-right: 2px solid #134495;
        color: #388cff;
    }
}

.problemContent .searchProblem .searchExpand ul li {
    padding: 10px 0 10px 0;
    padding-left: 10px;


}

.problemContent .searchProblem {
    height: 600px;
}

.problemContent {
    padding-left: 50px;
    padding-right: 50px;
    color: #134495;

}

.problemContent .textContent {
    height: 40px;
    font-size: 24px;
    font-weight: bolder;
}
</style>