<template>
    <div class="label-title mt-2" required>目前高血压用药及依从性</div>
    <div class="bg-fa">
        <div class="label-title" required style="color: #262626; font-size: 14px; line-height: 24px">您目前是否在服用降压药、降脂(如他汀类)或抗血小板(如阿司匹林)等心血管病相关药物</div>
        <van-field :rules="[{ required: true, message: '请选择' }]" style="padding: 0">
            <template #input>
                <van-radio-group
                    v-model="form.medicationCompliance"
                    shape="dot"
                    direction="horizontal"
                    class="doc-radio-group-now"
                >
                    <van-radio
                        v-for="item in store.getDict('DC00001')"
                        :key="item.value"
                        :name="item.value"
                        label-position="left"
                    >
                        {{ item.name }}
                    </van-radio>
                </van-radio-group>
            </template>
        </van-field>
    </div>
    <div v-if="form.medicationCompliance === 1" class="bg-fa mt-2">
        <div class="label-title" style="color: #262626; font-size: 14px; line-height: 24px">请您确认患者目前服用的降压药、降脂或抗血小板药，在下表中修改或增加，并记录上次随访以来服用的降压药物的依从性</div>
        <div style="background: #fff; padding: 8px" class="mb-2">
            <DocDrug
                v-model:value="currentMedicateCase.drugId"
                placeholder="拼音码查询药品"
                :valueName="currentMedicateCase.pinyinCode"
                @change="drugChange(1, $event)">
            </DocDrug>
            <div class="flex items-center justify-between w-full mt-2">
                <van-field
                    v-model="currentMedicateCase.dose"
                    placeholder="请输入"
                    label="剂量："
                    class="form-input"
                    style="flex: 0.6"
                />
                <van-field
                    v-model="currentMedicateCase.unitName"
                    isLink
                    readonly
                    placeholder="请选择"
                    @click="currentMedicateCase.showUnit = true"
                    class="form-input"
                    style="flex: 0.4"
                />
            </div>
            <van-popup v-model:show="currentMedicateCase.showUnit" position="bottom">
                <div class="p-4" style="height: 100%">
                    <div class="flex justify-between items-center mb-4 pop-title">
                        <div class="greyColor" @click="currentMedicateCase.showUnit = false">取消</div>
                        <div>单位（单选）</div>
                        <div></div>
                    </div>
                    <div style="height: 80%; overflow: auto">
                        <CheckBtn
                            clearable
                            column-1
                            :options="store.getDict('CP00081')"
                            v-model:value="currentMedicateCase.unit"
                            :fieldNames="{ text: 'name', value: 'value' }"
                            @change="unitChange(1)"
                        />
                    </div>
                </div>
            </van-popup>
            <!-- 频次 -->
            <van-field
                label="频次："
                v-model="currentMedicateCase.frequencyName"
                isLink
                readonly
                placeholder="请选择"
                @click="currentMedicateCase.showFrequency = true"
                class="form-input mt-2"
            />
            <van-popup v-model:show="currentMedicateCase.showFrequency" position="bottom">
                <div class="p-4" style="height: 100%">
                    <div class="flex justify-between items-center mb-4 pop-title">
                        <div class="greyColor" @click="currentMedicateCase.showFrequency = false">取消</div>
                        <div>频次（单选）</div>
                        <div></div>
                    </div>
                    <div style="height: 80%; overflow: auto">
                        <CheckBtn
                            clearable
                            column-2
                            :options="store.getDict('CP00084')"
                            v-model:value="currentMedicateCase.frequency"
                            :fieldNames="{ text: 'name', value: 'value' }"
                            @change="frequencyChange(1)"
                        />
                    </div>
                </div>
            </van-popup>
            <!-- 用法 -->
            <van-field
                label="用法："
                v-model="currentMedicateCase.usageName"
                isLink
                readonly
                placeholder="请选择"
                @click="currentMedicateCase.showUsage = true"
                class="form-input mt-2"
            />
            <van-popup v-model:show="currentMedicateCase.showUsage" position="bottom">
                <div class="p-4" style="height: 100%">
                    <div class="flex justify-between items-center mb-4 pop-title">
                        <div class="greyColor" @click="currentMedicateCase.showUsage = false">取消</div>
                        <div>用法（单选）</div>
                        <div></div>
                    </div>
                    <div style="height: 80%; overflow: auto">
                        <CheckBtn
                            clearable
                            column-1
                            :options="store.getDict('CP00083')"
                            v-model:value="currentMedicateCase.usage"
                            :fieldNames="{ text: 'name', value: 'value' }"
                            @change="usageChange(1)"
                        />
                    </div>
                </div>
            </van-popup>
            <!-- 服药依从性 -->
            <van-field
                label="服药依从性："
                v-model="currentMedicateCase.complianceName"
                isLink
                readonly
                placeholder="请选择"
                @click="currentMedicateCase.showCompliance = true"
                class="form-input mt-2"
            />
            <van-popup v-model:show="currentMedicateCase.showCompliance" position="bottom">
                <div class="p-4" style="height: 100%">
                    <div class="flex justify-between items-center mb-4 pop-title">
                        <div class="greyColor" @click="currentMedicateCase.showCompliance = false">取消</div>
                        <div>用法（单选）</div>
                        <div></div>
                    </div>
                    <div style="height: 80%; overflow: auto">
                        <CheckBtn
                            clearable
                            column-1
                            :options="store.getDict('CP00148')"
                            v-model:value="currentMedicateCase.compliance"
                            :fieldNames="{ text: 'name', value: 'value' }"
                            @change="complianceChange"
                        />
                    </div>
                </div>
            </van-popup>
            <!-- 不依从原因 -->
            <van-field
                label="不依从原因："
                v-model="form.noComplianceReasonName"
                isLink
                readonly
                placeholder="请选择"
                @click="showNoComplianceReason = true"
                class="form-input mt-2"
            />
            <van-popup v-model:show="showNoComplianceReason" position="bottom">
                <div class="p-4" style="height: 100%">
                    <div class="flex justify-between items-center mb-4 pop-title">
                        <div class="greyColor" @click="showNoComplianceReason = false">取消</div>
                        <div>不依从原因（可多选）</div>
                        <div class="blueColor" @click="noComplianceReasonConfirm">确定</div>
                    </div>
                    <div style="height: 80%; overflow: auto">
                        <CheckBtn
                            multiple
                            column-2
                            :options="store.getDict('CP00098')"
                            v-model:value="form.noComplianceReason"
                            :fieldNames="{ text: 'name', value: 'value' }"
                        />
                    </div>
                </div>
            </van-popup>
        </div>
        <div v-for="(item, index) in addMedicateCase" :key="index" style="background-color: #fff; padding: 8px" class="mb-2">
            <DocDrug
                v-model:value="item.drugId"
                placeholder="拼音码查询药品"
                :valueName="item.pinyinCode"
                @change="drugChange(2, $event, item)">
            </DocDrug>
            <div class="flex items-center justify-between w-full mt-2">
                <van-field
                    v-model="item.dose"
                    placeholder="请输入"
                    label="剂量："
                    class="form-input"
                    style="flex: 0.6"
                />
                <van-field
                    v-model="item.unitName"
                    isLink
                    readonly
                    placeholder="请选择"
                    @click="item.showUnit = true"
                    class="form-input"
                    style="flex: 0.4"
                />
            </div>
            <van-popup v-model:show="item.showUnit" position="bottom">
                <div class="p-4" style="height: 100%">
                    <div class="flex justify-between items-center mb-4 pop-title">
                        <div class="greyColor" @click="item.showUnit = false">取消</div>
                        <div>单位（单选）</div>
                        <div></div>
                    </div>
                    <div style="height: 80%; overflow: auto">
                        <CheckBtn
                            clearable
                            column-1
                            :options="store.getDict('CP00081')"
                            v-model:value="item.unit"
                            :fieldNames="{ text: 'name', value: 'value' }"
                            @change="unitChange(2, item)"
                        />
                    </div>
                </div>
            </van-popup>
            <!-- 频次 -->
            <van-field
                label="频次："
                v-model="item.frequencyName"
                isLink
                readonly
                placeholder="请选择"
                @click="item.showFrequency = true"
                class="form-input mt-2"
            />
            <van-popup v-model:show="item.showFrequency" position="bottom">
                <div class="p-4" style="height: 100%">
                    <div class="flex justify-between items-center mb-4 pop-title">
                        <div class="greyColor" @click="item.showFrequency = false">取消</div>
                        <div>频次（单选）</div>
                        <div></div>
                    </div>
                    <div style="height: 80%; overflow: auto">
                        <CheckBtn
                            clearable
                            column-2
                            :options="store.getDict('CP00084')"
                            v-model:value="item.frequency"
                            :fieldNames="{ text: 'name', value: 'value' }"
                            @change="frequencyChange(2, item)"
                        />
                    </div>
                </div>
            </van-popup>
            <!-- 用法 -->
            <van-field
                label="用法："
                v-model="item.usageName"
                isLink
                readonly
                placeholder="请选择"
                @click="item.showUsage = true"
                class="form-input mt-2"
            />
            <van-popup v-model:show="item.showUsage" position="bottom">
                <div class="p-4" style="height: 100%">
                    <div class="flex justify-between items-center mb-4 pop-title">
                        <div class="greyColor" @click="item.showUsage = false">取消</div>
                        <div>用法（单选）</div>
                        <div></div>
                    </div>
                    <div style="height: 80%; overflow: auto">
                        <CheckBtn
                            clearable
                            column-1
                            :options="store.getDict('CP00083')"
                            v-model:value="item.usage"
                            :fieldNames="{ text: 'name', value: 'value' }"
                            @change="usageChange(2, item)"
                        />
                    </div>
                </div>
            </van-popup>
            <div @click="onDel(index)" class="del-btn">删除</div>
        </div>
        <van-button type="primary" plain block size="small" @click="onPlus">增加服用药物</van-button>
    </div>
    <!-- <van-button @click="() => console.log(form)">123</van-button> -->
</template>
<script>
import { useStore } from '@/doctor/store'
import DocDrug from '@/doctor/components/docDrug/DocDrug.vue'
import CheckBtn from '@/doctor/components/checkBtn/CheckBtn.vue'
export default {
    name: 'HypertensionDrugs',
    components: { DocDrug, CheckBtn },
    props: {
        form: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            store: useStore(),
            currentMedicateCase: {},
            showNoComplianceReason: false,
            addMedicateCase: [{}]
        }
    },
    methods: {
        drugChange(val, option, item) {
            if (val === 1) {
                this.currentMedicateCase.drugName = option.chemicalName
                this.currentMedicateCase.pinyinCode = option.helpCode
            } else {
                item.drugName = option.chemicalName
                item.pinyinCode = option.helpCode
            }
        },
        unitChange(val, item) {
            if (val === 1) {
                this.store.getDict('CP00081').forEach(e => {
                    if (e.value === this.currentMedicateCase.unit) {
                        this.currentMedicateCase.unitName = e.name
                    }
                })
                this.currentMedicateCase.showUnit = false
            } else {
                this.store.getDict('CP00081').forEach(e => {
                    if (e.value === item.unit) {
                        item.unitName = e.name
                    }
                })
                item.showUnit = false
            }
        },
        frequencyChange(val, item) {
            if (val === 1) {
                this.store.getDict('CP00084').forEach(e => {
                    if (e.value === this.currentMedicateCase.frequency) {
                        this.currentMedicateCase.frequencyName = e.name
                    }
                })
                this.currentMedicateCase.showFrequency = false
            } else {
                this.store.getDict('CP00084').forEach(e => {
                    if (e.value === item.frequency) {
                        item.frequencyName = e.name
                    }
                })
                item.showFrequency = false
            }
        },
        usageChange(val, item) {
            if (val === 1) {
                this.store.getDict('CP00083').forEach(e => {
                    if (e.value === this.currentMedicateCase.usage) {
                        this.currentMedicateCase.usageName = e.name
                    }
                })
                this.currentMedicateCase.showUsage = false
            } else {
                this.store.getDict('CP00083').forEach(e => {
                    if (e.value === item.usage) {
                        item.usageName = e.name
                    }
                })
                item.showUsage = false
            }
            
        },
        complianceChange() {
            this.store.getDict('CP00148').forEach(e => {
                if (e.value === this.currentMedicateCase.compliance) {
                    this.currentMedicateCase.complianceName = e.name
                }
            })
            this.currentMedicateCase.showCompliance = false
        },
        noComplianceReasonConfirm() {
            let list = []
            this.store.getDict('CP00098').forEach(item => {
                let selected = this.form.noComplianceReason.filter(e => e === item.value)
                if (selected && selected.length) {
                    list.push(item.name)
                }
            })
            this.form.noComplianceReasonName = list.join()
            this.showNoComplianceReason = false
        },
        onPlus() {
            this.addMedicateCase.push({})
        },
        onDel(index) {
            this.addMedicateCase.splice(index, 1)
        },
        submit() {
            return new Promise((resolve, reject) => {
                resolve({
                    currentMedicateCase: this.currentMedicateCase,
                    addMedicateCase: this.addMedicateCase
                })
            })
        }
    },
    watch: {
        'form.medicationCompliance': {
            handler() {
                let { currentMedicateCase, addMedicateCase } = this.form
                if (currentMedicateCase) {
                    this.currentMedicateCase = JSON.parse(currentMedicateCase)
                }
                if (addMedicateCase) {
                    this.addMedicateCase = JSON.parse(addMedicateCase)
                }
            }
        }
    }
}
</script>
<style lang="less" scoped>
.label-title {
    font-size: 13px;
    color: #595959;
    font-weight: 500;
    margin-bottom: 8px;
    &[required] {
        &::after {
            content: '*';
            color: #FF4D4F;
            font-weight: bold;
            margin-left: 4px;
        }
    }
}
.bg-fa {
    background-color: #FAFAFA;
    padding: 8px;
    border-radius: 8px;
}
.doc-radio-group-now {
    column-gap: 10px;
    row-gap: 8px;
    background-color: #FAFAFA;
    width: 100%;
    .van-radio {
        background-color: #FFFFFF;
        padding: 8px 12px;
        border-radius: 8px;
        justify-content: space-between;
        margin-right: 0;
        flex-grow: 1;
    }
}
.form-input {
    background-color: #FAFAFA;
    padding: 8px 12px;
    border-radius: 8px;
}
.pop-title {
    color: #262626;
    font-size: 16px;
    font-weight: 600;
}
.greyColor {
    color: var(--van-text-color-2);
    font-weight: 400;
}
.blueColor {
    color: #607FF0;
    font-weight: 500;
}
.del-btn {
    text-align: center;
    margin: 8px auto;
    padding: 4px 8px;
    border-radius: 38px;
    border: 1px solid #BFBFBF;
    width: 112px;
    color: #8C8C8C;
    font-size: 13px;
}
</style>