<template>
    <view>
        <!-- pages/components/mesicalRcordSelect/mesicalRcordSelect.wxml -->
        <nav-bar :navbarData="navbarData"></nav-bar>
        <view :style="'margin-top: ' + (height * 2 + 10) + 'rpx; height: calc(100vh - ' + (height * 2 + 10) + 'rpx)'">
            <view class="page-mesicalRcordSelect">
                <view class="searchList">
                    <textarea class="textarea" placeholder="请输入内容" auto-focus focus maxlength="10000" :value="content" @input="checkChange"></textarea>
                </view>
                <view class="button">
                    <button class="saveKnowledge" @tap="showSave">保存到知识库</button>
                </view>
                <view class="knowledgeList">
                    <view
                        class="knowledgeItem"
                        @tap="addKnowledge"
                        @longpress="displayDelbtn"
                        :data-index="index"
                        :data-item="item"
                        v-for="(item, index) in knowledgeList"
                        :key="index"
                    >
                        <view class="addicon">+</view>

                        {{ item.title }}

                        <mp-icon
                            @tap.native="deleteKnowledge($event, { item })"
                            :data-item="item"
                            icon="delete"
                            extClass="delicon"
                            v-if="item.delete"
                            color="red"
                            :size="20"
                        ></mp-icon>
                    </view>
                </view>
            </view>
            <view class="multimeBtn-content">
                <button class="multimeBtn-left" @tap="clearnbtn">清空</button>
                <block v-if="hasChange == true"><button class="multimeBtn-right" @tap="defaultFun">保存</button></block>
                <block v-else><button class="multimeBtn-right" disabled="disabled">保存</button></block>
            </view>
        </view>
        <mp-halfScreenDialog :closabled="false" class="halfScreen" @buttontap="saveKnowledge" :show="show" :maskClosable="true" :buttons="buttons" extClass="extClass1">
            <view slot="title">
                <view class="title">填写知识库标题</view>
            </view>
            <view slot="desc" class="infoBody">
                <input :value="title" @input="titleChage" class="titleInput" placeholder="请输入" :auto-focus="true" />
            </view>
        </mp-halfScreenDialog>
    </view>
</template>

<script>
import Cache from '../../../utils/cache';
import navBar from '@/pages/components/navbar/index';
// pages/components/mesicalRcordSelect/mesicalRcordSelect.js.js
import { $http } from '../../../config/https.js';
const app = getApp();
export default {
    components: {
        navBar
    },
    data() {
        return {
            content: '',
            title: '',
            ID: '',
            knowledgeList: [],

            navbarData: {
                isGoBack: true,
                background: '',
                title: '编辑',
                //导航栏 中间的标题
                bottom: false
            },

            height: app.globalData.height,
            show: false,

            buttons: [
                {
                    type: 'default',
                    className: 'sureBtn',
                    text: '确定',
                    value: 0
                }
            ],

            /**
             * 组件的生命周期
             */
            lifetimes: {
                attached: function () {
                    // 在组件实例进入页面节点树时执行
                },
                detached: function () {
                    // 在组件实例被从页面节点树移除时执行
                },
                ready: function () {
                    // 在组件在视图层布局完成后执行
                    //this.selectData()   // 获取数据
                }
            },

            name: '',
            oldvalue: '',
            hasChange: false
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        this.setData(
            {
                content: options.content,
                name: options.name,
                ID: options.ID
            },
            () => {
                let { navbarData, name } = this;
                name = name.replace(new RegExp(/(：)/g), '');
                navbarData.title = name;
                this.setData({
                    navbarData
                });
                this.getKnowledgeList();
            }
        );
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 清空
        clearnbtn: function (event) {
            this.setData({
                content: ''
            });
        },

        checkChange: function (e) {
            if (this.oldvalue != e.detail.value) {
                this.setData({
                    oldvalue: e.detail.value
                });
                this.setData({
                    hasChange: true
                });
                this.setData({
                    content: e.detail.value
                });
            }
        },

        defaultFun: function (e) {
            // console.log('default', e, this.data)
            const eventChannel = this.getOpenerEventChannel();
            eventChannel.emit('acceptDataFromOpenedPage', {
                data: this.content
            });
            let pages = getCurrentPages();
            //上一个页面实例对象
            let prevPage = pages[pages.length - 2];
            // console.log(prevPage);

            //关键在这里
            prevPage.callData3();
            // wx.navigateBack({
            //   delta: 1
            // })
            uni.navigateBack({});
            // eventChannel.emit('someEvent', {data: 'test2'});
        },

        /**
         * 弹框保存知识库
         */
        showSave: function () {
            this.setData({
                show: true
            });
        },

        /**
         * 标题输入框改变事件
         */
        titleChage: function (event) {
            this.setData({
                title: event.detail.value
            });
        },

        /**
         * 保存知识库
         */
        saveKnowledge: function () {
            let { ID, content, title } = this;
            let that = this;
            $http.post(
                'urlDeault',
                this,
                {
                    code: '03100152',
                    data: {
                        params: [
                            {
                                title: title,
                                content: content,
                                element: ID
                            }
                        ]
                    },
                    success: function (res) {
                        if (res.errorCode == '0') {
                            that.setData({
                                show: false
                            });
                            uni.showToast({
                                title: '保存成功',
                                icon: 'none'
                            });
                            that.getKnowledgeList();
                        } else {
                            uni.showToast({
                                title: res.errorMessage,
                                icon: 'none'
                            });
                        }
                    }
                },
                {
                    error: 'Y'
                }
            );
        },

        getKnowledgeList: function () {
            let { ID } = this;
            const userData = Cache.get('userData');
            let that = this;
            $http.post(
                'urlDeault',
                this,
                {
                    code: '03100154',
                    data: {
                        params: [
                            {
                                docID: userData.userID,
                                element: ID
                            }
                        ]
                    },
                    success: function (res) {
                        console.log(res);
                        if (res.errorCode == '0') {
                            that.setData({
                                knowledgeList: res.result
                            });
                        } else {
                            uni.showToast({
                                title: res.errorMessage,
                                icon: 'none'
                            });
                        }
                    }
                },
                {
                    error: 'Y'
                }
            );
        },

        /**
         * 添加知识库
         */
        addKnowledge: function (event) {
            let { item } = event.currentTarget.dataset;
            let { content } = this;
            if (content != '') {
                content = content + ',';
            }
            this.setData({
                content: content + item.content
            });
        },

        /**
         *
         * @param {显示删除按钮} event
         */
        displayDelbtn: function (event) {
            let { item, index } = event.currentTarget.dataset;
            item.delete = !item.delete;
            let { knowledgeList } = this;
            knowledgeList[index] = item;
            this.setData({
                knowledgeList
            });
        },

        /**
         * 删除知识库
         */
        deleteKnowledge: function (event, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(event, _dataset);
            /* ---处理dataset end--- */
            let { item } = event.currentTarget.dataset;
            let that = this;
            $http.post(
                'urlDeault',
                this,
                {
                    code: '03100153',
                    data: {
                        params: [
                            [
                                {
                                    ID: item.id
                                }
                            ]
                        ]
                    },
                    success: function (res) {
                        if (res.errorCode == '0') {
                            that.getKnowledgeList();
                        } else {
                            uni.showToast({
                                title: res.errorMessage,
                                icon: 'none'
                            });
                        }
                    }
                },
                {
                    error: 'Y'
                }
            );
        }
    }
};
</script>
<style>
/* pages/components/mesicalRcordSelect/mesicalRcordSelect.js.wxss */
.page-mesicalRcordSelect {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    height: calc(100% - 102rpx);
}

.searchSave {
    flex: 0 0 100rpx;
    width: 100%;
    /* border:1px solid red; */
}

.searchSave-btn {
    background: #fff;
    padding: 10rpx;
    width: 100%;
    font-size: 30rpx;
    position: fixed;
    bottom: 0;
}

.searchList {
    width: calc(100% - 50rpx);
    /* border:1px  solid green; */
    background: #eee;
    padding: 10rpx 25rpx;
    height: 500rpx;
    /* padding-bottom: 120rpx; */
}

.section {
    height: 100%;
}

.searchList .textarea {
    width: 100%;
    min-height: 500rpx;
    height: 100%;
    border: 2px solid #cccccc;
    background: #fff;
    font-size: 20px;
}

.button {
    height: 70rpx;
    line-height: 70rpx;
    width: 100%;
    padding: 10rpx;
}

.saveKnowledge {
    width: 300rpx;
    border: 1px solid #1890ff;
    color: #1890ff;
    border-radius: 30rpx;
    margin: 0 28rpx;
    font-size: 34rpx;
    height: 70rpx;
    line-height: 70rpx;
}

.knowledgeList {
    height: calc(100% - 610rpx);
    overflow-y: auto;
    padding: 0 10rpx;
}

.knowledgeItem {
    float: left;
    border: 1px solid #1890ff;
    border-radius: 30rpx;
    padding: 0 10rpx;
    font-size: 36rpx;
    color: #1890ff;
    margin: 0 10rpx;
}

.addicon {
    float: left;
    font-size: 36rpx;
}

.delicon {
    left: 1px;
}

.multimeBtn-content {
    height: 100rpx;
    font-size: 30rpx;
    color: #fff;
    padding: none;
    display: flex;
}

.multimeBtn-left {
    flex: 1;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 0 !important;
}

.multimeBtn-right {
    flex: 1;
    align-items: center;
    justify-content: center;
    display: flex;
    background-color: #1890ff;
    color: #ffffff;
    border-radius: 0 !important;
}

.multimeBtn-right::after {
    border-radius: 0 !important;
}

.multimeBtn-left::after {
    border-radius: 0 !important;
}

.halfScreen {
    height: 400rpx;
}

.title {
    text-align: center;
}

.titleInput {
    border-bottom: 1px solid #f5f4f4;
    width: calc(100% - 2px);
    height: 70rpx;
    line-height: 70rpx;
    font-size: 36rpx;
}

.infoBody {
    height: 100rpx;
    width: 100%;
}

.weui-half-screen-dialog__bd {
    padding-bottom: 10rpx;
}

.sureBtn {
    width: 70vw;
    background: #1890ff !important;
    color: #fff !important;
    border-radius: 30rpx;
}

.titleDesc {
    height: 100rpx;
    width: 50vw;
}
</style>
