<template>
    <el-tabs v-model="activeTab" style="position: relative;height: 100%;">
        <el-tab-pane name="hospital" :label="$t('system:hospital:tab:hospital')">
            <div class="hospital">
                <el-form ref="hospitalForm" size="small" :model="hospital" :rules="hospitalFormRules"
                    label-width="150px" style="width: 800px">
                    <el-card class="Basic" shadow="never" size="small">
                        <el-form-item :label="$t('system:hospital:name')" prop="HospitalName">
                            <el-input v-model.trim="hospital.HospitalName" :disabled="disabled" clearable />
                        </el-form-item>
                        <el-form-item :label="$t('system:hospital:code')" prop="HospitalCode">
                            <el-input v-model.trim="hospital.HospitalCode" :disabled="disabled || hasPermi(['role:sa'])"
                                clearable />
                        </el-form-item>

                        <el-form-item :label="$t('system:hospital:aliasName')" prop="HospitalAliasName">
                            <el-input v-model="hospital.HospitalAliasName" :disabled="disabled" clearable />
                        </el-form-item>

                        <el-form-item :label="$t('system:hospital:country')" prop="Country">
                            <el-input v-model="hospital.Country" :disabled="disabled" clearable />
                        </el-form-item>
                        <el-form-item :label="$t('system:hospital:province')" prop="Province">
                            <el-input v-model="hospital.Province" :disabled="disabled" clearable />
                        </el-form-item>
                        <el-form-item :label="$t('system:hospital:city')" prop="City">
                            <el-input v-model="hospital.City" :disabled="disabled" clearable />
                        </el-form-item>
                        <el-form-item :label="$t('system:hospital:address')" prop="Address">
                            <el-input v-model="hospital.Address" :disabled="disabled" clearable />
                        </el-form-item>
                        <el-form-item :label="$t('system:hospital:phone')" prop="Phone">
                            <el-input v-model="hospital.Phone" :disabled="disabled" clearable />
                        </el-form-item>
                        <el-form-item :label="$t('system:hospital:trialKeepCount')" prop="TrialKeepCount">
                            <el-input v-model="hospital.TrialKeepCount" :disabled="disabled || hasPermi(['role:sa'])"
                                type="number" clearable />
                        </el-form-item>
                        <el-form-item :label="$t('system:hospital:isCanConnectInternet')"
                            v-hasPermi="['system:hospital:connectInternet']">
                            <el-switch v-model="hospital.IsCanConnectInternet" active-color="#13ce66"
                                inactive-color="#ff4949" :active-text="$fd('YesOrNo', true)"
                                :inactive-text="$fd('YesOrNo', false)" :disabled="disabled">
                            </el-switch>
                        </el-form-item>
                        <el-form-item :label="$t('system:hospital:logo')" prop="HospitalLogoPath">
                            <upload-logo :path.sync="hospital.HospitalLogoPath" :disabled="disabled" />
                        </el-form-item>
                    </el-card>
                    <el-form-item v-if="status === 'default' && hasPermi(['system:hospital:edit'])">
                        <el-button type="primary" size="small" style="margin: 10px 15px" :loading="btnLoading"
                            :disabled="btnLoading" @click="handleSave">{{ $t("system:hospital:save") }}</el-button>
                    </el-form-item>
                </el-form>
                <div class="btnBox" v-if="status !== 'default'">
                    <el-button type="primary" size="small" style="margin: 10px 15px" :loading="btnLoading"
                        :disabled="btnLoading" @click="handleSave">{{ $t("system:hospital:save") }}</el-button>
                    <el-button type="primary" size="small" style="margin: 10px 15px" @click="handleCancel">{{
                        $t("common:button:cancel") }}</el-button>
                </div>
            </div>
        </el-tab-pane>
        <el-tab-pane name="group" :label="$t('system:hospital:tab:group')">
            <group-list v-if="activeTab === 'group'" />
        </el-tab-pane>
    </el-tabs>

</template>
<script>
import { getHospital } from "@/api/hospital.js";
import { addOrUpdateHIRHospital } from '@/api/admin'
import uploadLogo from "./uploadLogo.vue";
import groupList from "./groupList.vue";
export default {
    name: "systemHospital",
    components: { "upload-logo": uploadLogo, groupList },
    props: {
        status: {
            type: String,
            default: "default" // add edit default
        },
        rowData: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data() {
        return {
            activeTab: 'hospital',
            hospital: {
                HospitalName: null,
                HospitalAliasName: null,
                HospitalCode: null,
                Country: null,
                City: null,
                Province: null,
                Address: null,
                Phone: null,
                IsCanConnectInternet: true,
                Id: null,
                TrialKeepCount: null,
                HospitalLogoPath: null,
                IsDefault: false
            },
            hospitalFormRules: {
                HospitalName: [
                    { required: true, message: 'Please specify', trigger: "blur" },
                ],
                HospitalCode: [
                    { required: true, message: 'Please specify', trigger: "blur" },
                ],
                // HospitalLogoPath: [
                //   { required: true, message: "请上传医院logo", trigger: "blur" },
                // ],
                TrialKeepCount: [
                    { required: true, message: 'Please specify', trigger: "blur" },
                ],
                // HospitalAliasName: [
                //   { required: true, message: "请输入医院别称", trigger: "blur" },
                // ],
                // Country: [{ required: true, message: "请输入国家", trigger: "blur" }],
                // City: [{ required: true, message: "请输入所在城市", trigger: "blur" }],
                // Province: [
                //   { required: true, message: "请输入所在省份", trigger: "blur" },
                // ],
                // Address: [
                //   { required: true, message: "请输入医院地址", trigger: "blur" },
                // ],
                // Phone: [
                //   { required: true, message: "请输入医院联系方式", trigger: "blur" },
                // ],
            },
            btnLoading: false,
        };
    },
    mounted() {
        if (this.status === 'default') {
            this.getInfo();
        }
        if (this.status === 'edit') {
            Object.keys(this.hospital).forEach(key => {
                this.hospital[key] = this.rowData[key]
            })
        }
    },
    computed: {
        disabled() {
            return !this.hasPermi(["system:hospital:edit"]);
        },
    },
    methods: {
        clickTab(tab, event) {
            this.activeTab = tab
            console.log(this.activeTab)
            // this.$router.push({ path: `/dictionary/template?tabActive=${tab.name}` });
        },
        async handleSave() {
            if (this.btnLoading) return;
            try {
                let validate = await this.$refs.hospitalForm.validate();
                if (!validate) return;
                this.btnLoading = true;
                let res = await addOrUpdateHIRHospital(this.hospital);
                this.btnLoading = false;
                if (res.IsSuccess) {
                    this.$message.success(this.$t("common:message:savedSuccessfully"));
                    if (this.status !== 'default') {
                        this.$emit("getList")
                        this.$emit("close")
                    }
                }
            } catch (err) {
                this.btnLoading = false;
                console.log(err);
            }
        },
        // 获取医院信息
        async getInfo() {
            try {
                let res = await getHospital();
                if (res.IsSuccess) {
                    Object.keys(this.hospital).forEach((key) => {
                        this.hospital[key] = res.Result[key];
                    });
                }
            } catch (err) {
                console.log(err);
            }
        },
        handleCancel() {
            this.$emit("close")
        }
    },
};
</script>
<style scoped>
::v-deep .is-error.my_new_pwd {
    margin-bottom: 40px;
}

::v-deep .el-tabs__header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
}

::v-deep .el-tabs__content {
    padding-top: 50px;
    height: 100%;

}

::v-deep .el-tab-pane {
    height: 100%;
}

.hospital {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.btnBox {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
</style>