<template>
    <!-- pages/entryWrite/page/Entry/prescription/addExamine/addExamine.wxml -->
    <view class="examine-content">
        <van-search placeholder="搜索内容" :value="searchCode" @change="onSearch" />
        <view class="content-flex">
            <view class="content-left">
                <view :class="'left-item ' + (appTypeID === '' ? 'active' : '')" @tap="tapChange" data-id=""><text>全部</text></view>
                <view :class="'left-item ' + (appTypeID === item.id ? 'active' : '')" @tap="tapChange" :data-id="item.id" v-for="(item, index) in examineList" :key="index">
                    <text>{{ item.descripts }}</text>
                </view>
            </view>
            <view class="content-right">
                <view :class="'left-item ' + (item.medID === '' ? 'isTitle' : '')" v-for="(item, index) in medicalList" :key="index">
                    <view class="item-around">
                        <text class="around-flex">{{ item.medDesc }}</text>
                        <view v-if="item.medID !== ''" :class="'tapchecked ' + (item.checked ? 'isChecked' : '')" @tap="checkedChange" :data-id="item.medID">
                            {{ item.checked ? '取消选中' : '选择' }}
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="c-buttomBtn" @tap="onComplete">
            选择完成
            {{ tempCheckedArr.length > 0 ? '（已选项目：' + tempCheckedArr.length + '）' : '' }}
        </view>
    </view>
</template>

<script>
import Cache from '../../../../../../utils/cache';
import { $http } from '../../../../../../config/https';
import Toast from '../../../../../../utils/toast';
// import store from './store';
// import create from '../../../../../../utils/create.js';
// import create from '../../../../../../utils/create'

export default {
    data() {
        return {
            searchCode: '',
            //检索内容
            examineList: [],
            medicalList: [],
            appTypeID: '',
            tempArr: [],
            //用来存储未保存的数据
            tempCheckedArr: [],
            //用来存储选择的数据
            motto: null
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        let tempArr = JSON.parse(options.jList);
        this.setData({
            tempArr
        });
        this.getClassifyQuery().then(() => {
            this.getClassifyMedical();
        });

        // setTimeout(() => {
        //   this.update({motto:'Hello Westore'})
        // }, 5000);
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        let newArr = this.medicalList.map((item) => {
            let { checked, ...other } = item;
            return {
                checked: false,
                ...other
            };
        });
        this.setData({
            medicalList: newArr,
            tempCheckedArr: []
        });
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 检查申请单分类查询
        getClassifyQuery: function () {
            return new Promise((resolve, reject) => {
                let userData = Cache.get('userData');
                let data = {
                    params: [
                        {
                            searchCode: this.searchCode,
                            language: 'CN',
                            hospID: userData.hospID
                        }
                    ]
                };
                $http.post('urlDeault', this, {
                    code: '03100155',
                    data: data,
                    success: function (res) {
                        if (res.errorCode == '0') {
                            this.setData(
                                {
                                    examineList: res.result
                                },
                                () => {
                                    resolve();
                                }
                            );
                        } else {
                            reject();
                        }
                    },
                    fail: function (err) {
                        reject();
                    }
                });
            });
        },

        // 获取检查分类医嘱
        getClassifyMedical: function () {
            return new Promise((resolve, reject) => {
                let userData = Cache.get('userData');
                let data = {
                    params: [
                        {
                            searchCode: this.searchCode,
                            language: 'CN',
                            appTypeID: this.appTypeID,
                            hospID: userData.hospID
                        }
                    ],
                    pagination: [
                        {
                            pageSize: 10000,
                            currentPage: 1
                        }
                    ]
                };
                $http.post('urlDeault', this, {
                    code: '03100156',
                    data: data,
                    success: function (res) {
                        if (res.errorCode == '0') {
                            // TODO 对比是否选择,默认选中状态
                            let newArr = res.result.data.map((item) => {
                                return {
                                    checked: false,
                                    ...item
                                };
                            });
                            this.setData(
                                {
                                    medicalList: newArr
                                },
                                () => {
                                    resolve();
                                }
                            );
                        }
                    },
                    fail: function (err) {
                        reject();
                    }
                });
            });
        },

        tapChange: function (e) {
            let { id } = e.currentTarget.dataset;
            if (this.appTypeID !== id) {
                this.setData(
                    {
                        appTypeID: id
                    },
                    () => {
                        this.getClassifyMedical().then(() => {
                            this.medicalList.forEach((data, index) => {
                                this.tempCheckedArr.forEach((item, sindex) => {
                                    if (data.medID === item.medID) {
                                        this.medicalList[index].checked = item.checked;
                                    }
                                });
                            });
                            this.setData({
                                medicalList: this.medicalList
                            });
                        });
                    }
                );
            }
        },

        checkedChange: function (e) {
            let { id } = e.currentTarget.dataset;
            let index = this.medicalList.findIndex((item) => item.medID === id);
            this.medicalList[index].checked = !this.medicalList[index].checked;
            let newTemp = this.tempCheckedArr;
            if (this.medicalList[index].checked) {
                newTemp.push(this.medicalList[index]);
            } else {
                let findIndex = newTemp.findIndex((item) => item.medID === id);
                newTemp.splice(findIndex, 1);
                console.log('findIndex==', findIndex);
            }
            console.log('data==', newTemp);
            this.setData({
                medicalList: this.medicalList,
                tempCheckedArr: newTemp
            });
        },

        onComplete: function () {
            let newArr = this.tempCheckedArr
                .filter((item) => item.checked === true)
                .map((item) => {
                    return {
                        medID: item.medID,
                        ordSetID: ''
                    };
                });
            if (newArr.length <= 0) {
                uni.showToast({
                    title: '请选择项目',
                    icon: 'none'
                });
                return;
            }
            let urlAddress =
                '/pages/entryWrite/page/Entry/prescription/addExamine/completeExamine/completeExamine?handle=add&medIds=' +
                JSON.stringify(newArr) +
                '&jList=' +
                JSON.stringify(this.tempArr); // 添加按钮名称
            uni.navigateTo({
                //目的页面地址
                url: urlAddress,
                success: function (res) {}
            });
        },

        onSearch: function (e) {
            console.log(e);
            this.setData(
                {
                    searchCode: e.detail
                },
                () => {
                    this.getClassifyMedical();
                }
            );
        }
    }
};
</script>
<style>
/* pages/entryWrite/page/Entry/prescription/addExamine/addExamine.wxss */
page {
    height: 100%;
    width: 100%;
}
.examine-content {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
}
.content-flex {
    display: flex;
    height: 100%;
}
.content-left {
    flex: 1;
    border-right: 3rpx solid #f5f4f4;
    position: relative;
    height: 100%;
    overflow: auto;
}

.content-right {
    flex: 2;
    position: relative;
    height: 100%;
    overflow: auto;
}
.left-item {
    /* height: 100rpx;
  line-height: 100rpx; */
    padding-left: 10rpx;
    padding: 20rpx 10rpx;
    border-bottom: 1rpx solid #f5f4f4;
}
.active {
    color: #1890ff;
    border-left: 5rpx solid #1890ff;
}
.isTitle {
    background-color: #f5f4f4;
    font-size: 32rpx;
    font-weight: bold;
}
.item-around {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.around-flex {
    flex: 1;
}
.tapchecked {
    height: 50rpx;
    line-height: 50rpx;
    font-size: 24rpx;
    margin-right: 10rpx;
    width: 120rpx;
    text-align: center;
    border: 1rpx solid #f5f4f4;
    border-radius: 25rpx;
}
.isChecked {
    background-color: #0079fe;
    color: #ffffff;
}
.c-buttomBtn {
    background: #0079fe;
    color: white;
    font-size: 30rpx;
    text-align: center;
    height: 100rpx;
    line-height: 100rpx;
}
</style>
