<template>
    <div v-loading="loading" class="email-wrapper">
        <el-collapse v-model="activeCollapse" class="setting-config">
            <!-- 发件箱配置 -->
            <el-collapse-item :title="$t('trials:emailManageCfg:title:sendEmailCfg')" name="1">
                <!-- 配置信息表单 -->
                <el-form ref="emailRulesForm" v-loading="loading" :model="form" style="width:800px;margin-top: 10px;"
                    :rules="rules" label-width="230px" size="small">
                    <!-- 发件箱账号 -->
                    <el-form-item :label="$t('trials:emailManageCfg:title:sendEmailAccount')" prop="EmailFromEmail">
                        <el-input v-model="form.EmailFromEmail" :disabled="!isEdit" />
                    </el-form-item>
                    <!-- 发件人 -->
                    <el-form-item :label="$t('trials:emailManageCfg:title:fromName')" prop="EmailFromName">
                        <el-input v-model="form.EmailFromName" disabled />
                    </el-form-item>
                    <!-- 密码/授权码 -->
                    <el-form-item :label="$t('trials:emailManageCfg:title:password')" prop="EmailAuthorizationCode">
                        <el-input v-model="form.EmailAuthorizationCode" :disabled="!isEdit" />
                    </el-form-item>
                    <!-- SMTP服务器 -->
                    <el-form-item :label="$t('trials:emailManageCfg:title:SMTPServerAddress')"
                        prop="EmailSMTPServerAddress">
                        <el-input v-model="form.EmailSMTPServerAddress" :disabled="!isEdit" />
                    </el-form-item>
                    <!-- SMTP端口 -->
                    <el-form-item :label="$t('trials:emailManageCfg:title:SMTPServerPort')" prop="EmailSMTPServerPort">
                        <el-input v-model.number="form.EmailSMTPServerPort" type="number" :disabled="!isEdit" />
                    </el-form-item>
                    <el-form-item v-if="hasPermi(['trials:trials-panel:setting:email-manage:edit'])">
                        <el-button v-if="isEdit" size="small" type="primary" @click="setTrialEmail">
                            {{ $t('common:button:confirm') }}
                        </el-button>
                        <el-button v-else size="small" type="primary" @click="isEdit = true">
                            {{ $t('trials:trialCfg:button:update') }}
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
            <!-- 自动邮件模版 -->
            <el-collapse-item :title="$t('trials:emailManageCfg:title:emailTpl')" name="2">
                <el-tabs v-model="activeTab" type="border-card">
                    <!-- 通用 -->
                    <el-tab-pane :label="$t('trials:emailManageCfg:title:commom')" name="0">
                        <EmailList v-if="activeTab === '0'" ref="emailList" :is-distinguish-criteria="false"
                            :is-edit="isEdit" />
                    </el-tab-pane>
                    <!-- 标准相关 -->
                    <el-tab-pane :label="$t('trials:emailManageCfg:title:criterions')" name="1">
                        <EmailList v-if="activeTab === '1'" ref="emailList" :is-distinguish-criteria="true"
                            :is-edit="isEdit" />
                    </el-tab-pane>
                </el-tabs>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>
<script>
import EmailList from './components/EmailList'
import { getTrialCriterionList } from '@/api/trials/reading'
import { setTrialEmail, getTrialEmail } from '@/api/trials'
export default {
    name: 'emailConfig',
    components: {
        EmailList
    },
    data() {
        return {
            activeCollapse: ['1', '2'],
            trialId: '',
            activeTab: '0',
            trialCriterionList: [],
            loading: false,
            isEdit: true,
            form: {
                EmailFromEmail: '',
                EmailFromName: '',
                EmailAuthorizationCode: '',
                EmailSMTPServerAddress: '',
                EmailSMTPServerPort: null,
                IsConfigureEmail: true
            },
            rules: {
                EmailFromEmail: [{ required: true, message: this.$t('common:ruleMessage:specify') }],
                EmailFromName: [{ required: true, message: this.$t('common:ruleMessage:specify') }],
                EmailAuthorizationCode: [{ required: true, message: this.$t('common:ruleMessage:specify') }],
                EmailSMTPServerAddress: [{ required: true, message: this.$t('common:ruleMessage:specify') }],
                EmailSMTPServerPort: [{ required: true, message: this.$t('common:ruleMessage:specify') }, {
                    type: "number",
                    min: 1,
                    max: 65535,
                    message: this.$t("common:ruleMessage:portPattern"),
                    trigger: "blur",
                },
                {
                    validator: (rule, value, callback) => {
                        if (
                            value &&
                            (String(value).includes(".") ||
                                new RegExp(/\D/g).test(String(value)))
                        ) {
                            callback(new Error(this.$t("common:ruleMessage:portPattern")));
                        } else {
                            callback();
                        }
                    },
                    trigger: "blur",
                },]
            },
            NODE_ENV: process.env.NODE_ENV,
            VUE_APP_OSS_PATH: process.env.VUE_APP_OSS_PATH,
        }
    },
    // watch: {
    //   activeTab(v) {
    //     console.log(v)
    //   }
    // },
    // created() {
    //     if (this.VUE_APP_OSS_PATH === '/uat/dist') {
    //         this.form = {
    //             EmailFromEmail: 'uat@extimaging.com',
    //             EmailFromName: 'Uat EIC lmaging Trial Management System',
    //             EmailAuthorizationCode: 'SHzyyl2021',
    //             EmailSMTPServerAddress: 'smtp.qiye.aliyun.com',
    //             EmailSMTPServerPort: 465,
    //             IsConfigureEmail: true
    //         };
    //     }
    //     if (this.VUE_APP_OSS_PATH === '/test/dist') {
    //         this.form = {
    //             EmailFromEmail: 'test@extimaging.com',
    //             EmailFromName: 'Test EIC lmaging Trial Management System',
    //             EmailAuthorizationCode: 'SHzyyl2021',
    //             EmailSMTPServerAddress: 'smtp.qiye.aliyun.com',
    //             EmailSMTPServerPort: 465,
    //             IsConfigureEmail: true
    //         };
    //     }
    // },
    mounted() {
        this.trialId = this.$route.query.trialId
        this.getTrialEmail()
        this.getTrialCriterionList()
    },
    methods: {
        handleClick(a) {
            this.activeName = a.name
        },
        setTrialEmail() {
            this.$refs['emailRulesForm'].validate((valid) => {
                if (!valid) {
                    // resolve(false)
                } else {
                    this.form.TrialId = this.trialId
                    setTrialEmail(this.form).then(res => {
                        this.$message.success(this.$t('common:message:savedSuccessfully'))
                        this.isEdit = false
                        this.$refs['emailList'].getList()
                    })
                }
            })
        },
        getTrialEmail() {
            getTrialEmail({
                TrialId: this.trialId
            }).then(res => {
                if (res.Result.IsConfigureEmail) {
                    this.form = Object.assign(this.form, res.Result)
                    this.isEdit = false
                }
            })
        },
        getTrialCriterionList() {
            this.loading = true
            getTrialCriterionList(this.trialId, false).then(res => {
                this.trialCriterionList = res.Result
                // this.activeTab = this.trialCriterionList[0].TrialReadingCriterionId
                this.loading = false
            }).catch(() => {
                this.loading = false
            })
        }
    }
}
</script>
<style lang="scss">
.email-wrapper {
    height: 100%;
    background-color: #fff;

    .el-tabs {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .el-tabs__header {
        height: 40px;
        margin-bottom: 5px;
    }

    .el-tabs__content {
        flex: 1;

        .el-tab-pane {
            height: 100%;
        }
    }
}
</style>
<style lang="scss" scoped>
.email-wrapper {
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;

    .content {
        flex: 1;
        overflow-y: auto;
    }

    ::v-deep .el-collapse-item__header {
        background: #e5ecef;
        padding-left: 10px;
    }

    ::v-deep .el-collapse-item__content {
        padding: 10px;
    }

    .bottom {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        border-top: 1px solid #e1e1e1;
    }
}
</style>
