<template>
    <!-- pages/diagnosticEntry/diagnostic/diagnostic.wxml -->
    <view class="diagnostic-wrapper">
        <scroll-view :scroll-y="true" :scrollTop="scrollTop" class="scrollList">
            <view class="section-card section-add">
                <view class="section-header">
                    <text class="section-header__title">添加诊断</text>
                    <view class="section-header__actions">
                        <text class="tag-btn" data-select="0" @tap="addChange">历史诊断</text>
                        <!-- <text class="tag-btn" data-select="1" @tap="addChange">诊断模板</text> -->
                    </view>
                </view>
            </view>
            <customDiagnostics
                ref="customDiagnostics"
                @listData="listData($event, { tagId: 'customDiagnostics' })"
                id="customDiagnostics"
                :editData="editData"
                :editSyndromeList="editSyndromeList"
                :arryLength="arryLength"
            ></customDiagnostics>
            <view class="section-title">
                <text class="section-title__bar"></text>
                <text>诊断列表</text>
                <text class="section-title__count">共 {{ array.length }} 条</text>
            </view>
            <view class="diag-card" v-for="(item, index) in array" :key="index">
                <view class="diag-card__title">
                    <text class="diag-card__mark" v-if="item.diagCMark">{{ item.diagCMark }}</text>
                    <text class="diag-card__type">{{ item.diagTypeDesc }}</text>
                </view>

                <view class="diag-card__body">
                    <view class="diag-card__desc">
                        <text>{{ item.diagDesc }} <text v-if="item.diagCode">({{ item.diagCode }})</text> {{ item.descripts }}</text>
                        <text class="tag tag--main" v-if="item.mainDiagID == 'Y'">主诊断</text>
                        <text class="tag tag--status-done" v-if="item.diagStatusID == '3'">{{ item.diagStatusDesc }}</text>
                        <text class="tag tag--status-pending" v-else-if="item.diagStatusID == '1'">{{ item.diagStatusDesc }}</text>
                        <text class="tag tag--status-other" v-else-if="item.diagStatusDesc">{{ item.diagStatusDesc }}</text>
                    </view>
                    <view class="diag-card__time" v-if="item.onsetDate">发病日期：{{ item.onsetDate }}</view>
                </view>

                <view class="diag-card__actions" v-if="item.diagCMarkID != 'Z' && patientData.changeDataFlag != 'N'">
                    <button class="diag-btn diag-btn--edit" @tap="tapEdit" :data-index="index">编辑</button>
                    <button class="diag-btn diag-btn--remove" @tap="tapRemove" :data-index="index">删除</button>
                </view>
            </view>
            <view v-if="array.length <= 0" class="empty">
                <text class="empty__text">暂无诊断</text>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import Cache from '../../../../../utils/cache';
import customDiagnostics from './addDiagnostic/customDiagnostics/customDiagnostics';
// pages/diagnosticEntry/diagnostic/diagnostic.js
import { $http } from '../../../../../config/https';
import Util from '../../../../../utils/util.js';
import commonUtil from '../../../../../utils/common.js';
const app = getApp();
export default {
    components: {
        customDiagnostics
    },
    data() {
        return {
            array: [],

            patientData: {
                changeDataFlag: ''
            },

            arrayLength: 0,
            editData: {},
            height: app.globalData.height,
            scrollTop: 0,
            select: '',
            editSyndromeList: [],
            arryLength: []
        };
    },
    /**
     * 可以使用全局样式
     */
    options: {
        addGlobalClass: true
    },
    /**
     * 组件的属性列表
     */

    props: {},
    destroyed: function () {
        // 在组件实例被从页面节点树移除时执行
        uni.$off('refreshDiagnostic');
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },
    /**
     * 组件的方法列表
     */
    methods: {
        ready: function () {
            // 在组件在视图层布局完成后执行
            this.listData(); // 获取 下拉框数据
            let that = this;
            commonUtil.canChangeFlag('', (res) => {
                that.setData({
                    patientData: Cache.get('patientData')
                });
            });
        },

        attached: function () {},
        handlePageShow() {},

        // 列表数据
        listData: function (event, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(event, _dataset);
            /* ---处理dataset end--- */
            let patientData = Cache.get('patientData');
            let { admID, patID } = patientData;
            $http.post('urlDeault', this, {
                code: '03050033',
                data: {
                    params: [
                        {
                            admID: admID,
                            //就诊ID session 中获取
                            patID: patID,
                            //患者ID session 中获取
                            historyFlag: 'N',
                            //是否查询历史诊断 小程序端传N
                            historyType: 'O',
                            //历史诊断类型  传O即可
                            syFlag: 'Y' //查询证型信息 小程序端传N
                        }
                    ]
                },

                success: function (res) {
                    let errorCode = res.errorCode;
                    if (errorCode === '0') {
                        this.setData({
                            array: res.result.diagList,
                            //诊断数据列表
                            arrayLength: res.result.diagList.length
                        });
                    }
                }
            });
        },

        // 点击删除
        tapRemove: function (event) {
            let index = event.currentTarget.dataset.index;
            let that = this;
            uni.showModal({
                title: '提示',
                content: '是否确认删除',
                success: function (res) {
                    if (res.confirm) {
                        that.deleteDiag(index);
                    } else if (res.cancel) {
                    }
                },
                fail: function (res) {}
            });
        },

        deleteDiag: function (index) {
            let userData = Cache.get('userData');
            let { array } = this;
            let data = {
                params: [
                    {
                        delData: [
                            {
                                id: array[index].id
                            }
                        ],
                        userID: userData.userID //就诊ID session 中获取
                    }
                ]
            };

            $http.post('urlDeault', this, {
                code: '03050037',
                data: data,
                success: function (res) {
                    let errorCode = res.errorCode;
                    if (errorCode === '0') {
                        this.listData(); // 获取 下拉框数据
                    }
                }
            });
        },

        // 点击编辑
        tapEdit: function (event) {
            this.scrollTop = Math.random(); // 先变再归零，强制触发 scroll-view 回到顶部
            this.$nextTick(() => {
                this.scrollTop = 0;
            });
            let index = event.currentTarget.dataset.index;
            let { array } = this;
            let editData = array[index];
            let editSyndromeList = [];
            if (editData.diagCMarkID == 'Y') {
                for (var i = index + 1; i < array.length; i++) {
                    let obj = array[i];
                    if (obj.diagCMarkID == 'Z') {
                        editSyndromeList.push(obj);
                    } else {
                        break;
                    }
                }
            }
            this.editData = { ...editData };
            this.editSyndromeList = editSyndromeList;
        },

        // 点击添加
        addChange: function (event) {
            console.log('event', event.currentTarget.dataset.select);
            let select = event.currentTarget.dataset.select;
            let pages = getCurrentPages(); //获取当前页面js里面的pages里的所有信息。
            let prevPage = pages[pages.length - 1];
            prevPage.setData(
                {
                    // 将我们想要传递的参数在这里直接setData。上个页面就会执行这里的操作。
                    select: -1
                },
                () => {
                    uni.navigateTo({
                        //目的页面地址
                        url: '/pages/entryWrite/page/Entry/diagnostic/addDiagnostic/addDiagnostic?arryLength=' + this.arrayLength + '&select=' + select // 添加按钮名称,
                    });
                }
            );
        },

        // 获取选中的select数据
        searchSelect: function (selectData) {
            console.log('searchSelect callback', selectData);
            // H5 + Vue2 环境下 zpSelectComponent 通过 vnode.data.attrs.id 查找不稳定,
            // 优先用 Vue ref 直接拿到子组件实例;失败再回退到 zpSelectComponent
            let child = (this.$refs && this.$refs.customDiagnostics) || null;
            if (!child && typeof this.zpSelectComponent === 'function') {
                child = this.zpSelectComponent('#customDiagnostics');
            }
            if (child && typeof child.searchSelect === 'function') {
                child.searchSelect(selectData);
            } else {
                // 兜底:写入缓存,等子组件 handlePageShow 时自取
                try {
                    Cache.set('searchSelect', selectData);
                } catch (e) {}
            }
        }
    },
    created: function () {
        uni.$on('refreshDiagnostic', () => {
            this.listData();
        });
    }
};
</script>
<style>
/* pages/diagnosticEntry/diagnostic/diagnostic.wxss */
.diagnostic-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background: #f4f7fb;
}

.scrollList {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 12rpx 4rpx 24rpx;
}

/* 顶部添加诊断卡片 */
.section-card {
    background: #fff;
    margin: 0 4rpx 14rpx;
    padding: 20rpx 24rpx;
    border-radius: 14rpx;
    box-shadow: 0 6rpx 18rpx rgba(15, 23, 42, 0.04);
    box-sizing: border-box;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.section-header__title {
    font-size: 30rpx;
    font-weight: 600;
    color: #1f2937;
    flex-shrink: 0;
}

.section-header__actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.tag-btn {
    display: inline-block;
    color: #1687ff;
    padding: 0 22rpx;
    background: #eaf4ff;
    border-radius: 999rpx;
    margin-left: 14rpx;
    height: 52rpx;
    line-height: 52rpx;
    font-size: 26rpx;
}

.tag-btn:active {
    background: #d5e8ff;
}

/* 列表标题栏 */
.section-title {
    display: flex;
    align-items: center;
    margin: 18rpx 4rpx 12rpx;
    padding: 18rpx 24rpx;
    background: #fff;
    border-radius: 14rpx;
    font-size: 30rpx;
    font-weight: 600;
    color: #1f2937;
    box-shadow: 0 6rpx 18rpx rgba(15, 23, 42, 0.04);
}

.section-title__bar {
    display: inline-block;
    width: 6rpx;
    height: 28rpx;
    background: #1687ff;
    border-radius: 4rpx;
    margin-right: 12rpx;
}

.section-title__count {
    margin-left: auto;
    color: #7b8794;
    font-size: 24rpx;
    font-weight: normal;
}

/* 诊断卡片 */
.diag-card {
    background: #fff;
    margin: 0 4rpx 14rpx;
    padding: 20rpx 24rpx;
    border-radius: 14rpx;
    box-shadow: 0 6rpx 18rpx rgba(15, 23, 42, 0.04);
    box-sizing: border-box;
}

.diag-card__title {
    display: flex;
    align-items: center;
    padding-bottom: 14rpx;
    border-bottom: 1rpx solid #edf1f6;
}

.diag-card__mark {
    display: inline-block;
    background: #eaf4ff;
    color: #1687ff;
    font-size: 24rpx;
    padding: 4rpx 14rpx;
    border-radius: 6rpx;
    margin-right: 12rpx;
    font-weight: 500;
}

.diag-card__type {
    font-size: 28rpx;
    font-weight: 600;
    color: #1f2937;
}

.diag-card__body {
    background-color: #f7f9fc;
    padding: 16rpx 18rpx;
    border-radius: 10rpx;
    margin-top: 14rpx;
}

.diag-card__desc {
    font-size: 28rpx;
    line-height: 44rpx;
    color: #1f2937;
    word-break: break-all;
}

.diag-card__time {
    margin-top: 8rpx;
    color: #8b98a8;
    font-size: 24rpx;
    line-height: 36rpx;
}

/* 标签 */
.tag {
    display: inline-block;
    border-radius: 6rpx;
    color: #ffffff;
    font-size: 22rpx;
    padding: 2rpx 12rpx;
    margin-left: 12rpx;
    vertical-align: middle;
    line-height: 32rpx;
}

.tag--main {
    background-color: #fa8c16;
}

.tag--status-done {
    background-color: #fa541c;
}

.tag--status-pending {
    background-color: #13c2c2;
}

.tag--status-other {
    background-color: #8b98a8;
}

/* 卡片底部按钮 */
.diag-card__actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 16rpx;
}

.diag-btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 120rpx;
    font-size: 26rpx;
    height: 56rpx;
    line-height: 56rpx;
    padding: 0 24rpx;
    border-radius: 999rpx !important;
    font-weight: normal;
    box-sizing: border-box;
    margin: 0;
}

.diag-btn + .diag-btn {
    margin-left: 16rpx;
}

.diag-btn::after {
    border: initial;
}

.diag-btn--remove {
    background: #fff;
    color: #f5222d;
    border: 1rpx solid #f5222d !important;
}

.diag-btn--edit {
    background: #1890ff;
    color: #fff;
    border: 1rpx solid #1890ff;
}

/* 空状态 */
.empty {
    background: #fff;
    border-radius: 14rpx;
    margin: 0 4rpx;
    padding: 60rpx 0;
    text-align: center;
}

.empty__text {
    color: #8b98a8;
    font-size: 26rpx;
}
</style>
