<template>
    <div class="container" style="justify-content: space-between;">
      <div class="login-header">
        <svg-icon icon-class="logo" class="logo-img" />
          <i18n class="lang-menu" @change="changeLang"/>
      </div>
      <div class="login">
        <el-form label-width="auto" size="large" v-if="info" >
            <el-form-item :label="t('audit.col1')">
                <span>{{ info.user_code +'('+info.user_id+')' }}</span>
            </el-form-item>
            <el-form-item :label="t('audit.col2')">
                <span>{{ info.user_name }}</span>
            </el-form-item>
            <el-form-item :label="t('capital.mt4_server')">
                <span>{{ info.mt4_server_in_name }}</span>
            </el-form-item>
            <el-form-item :label="t('capital.mt4_login')">
                <span>{{ info.mt4_login }}</span>
            </el-form-item>
            <el-form-item :label="t('audit.mt4_server_out')">
                <span>{{ info.mt4_server_out_name }}</span>
            </el-form-item>
            <el-form-item :label="t('audit.mt4_login_out')">
                <span>{{ info.mt4_login_out }}</span>
            </el-form-item>
            <el-form-item :label="t('capital.usdAmount')">
                <span>{{ '$ '+info.usd_amount }}</span>
            </el-form-item>
            <el-form-item :label="t('audit.remark')">
                <span>{{ info.remark }}</span>
            </el-form-item>
            
            <el-form-item :label="t('form.auditTime')" v-if="info.status == 1 || info.status == 2" >
                <span>{{ info.audit_time_format }}</span>
            </el-form-item>
            <el-form-item :label="t('audit.auditOpinion')" v-if="info.status == 1 || info.status == 2">
                <span>{{ info.audit_opinion }}</span>
            </el-form-item>
            <el-form-item :label="t('audit.auditOpinion')" v-if="info.status == 0 || info.status == 3" >
                <el-input v-model="audit_opinion" style="width: 240px" :rows="2" type="textarea" :maxlength="500" />
            </el-form-item>
            <el-form-item v-if="info.status == 0 || info.status == 3" >
                <div style="width: 100%;display: flex;justify-content: space-around;">
                    <el-button type="primary" @click="ratify">{{ t('form.ratify') }}</el-button>
                    <el-button @click="reject">{{ t('form.reject') }}</el-button>
                </div>
            </el-form-item>
        </el-form>
      </div>
      <!--  底部  -->
      <div class="login-footer">
        <el-divider />
        <div v-html="footerText"></div>
      </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import useUserStore from '@/store/modules/user'
import { useLocale } from 'element-plus'
import { getTemplateDetailByCode } from "@/api/common";
import { agencyQuery, agencyAudit } from "@/api/audit";
import { serverLang } from '@/utils/i18n'
import I18n from "@/components/I18n"

const { t } = useLocale()
const userStore = useUserStore()
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();

const auditData = ref(null)
const info = ref(null)

const audit_opinion = ref('')

const footerText = ref('')

const { language, p } = route.query

agencyQuery({
    language, p
}).then(resp => {
    auditData.value = resp.data
    info.value = resp.data.info
})

function getFooterText() {
    getTemplateDetailByCode({
        qcc_language: serverLang(),
        templateCode: 'COMPANY_INFO'
    }).then(resp => {
        if (resp.data && resp.data.content) {
        footerText.value = resp.data.content
        }
    })
}

function ratify() {
    agencyAudit({
        id: info.value.id,
        audit_opinion: audit_opinion.value,
        sign: auditData.value.sign,
        status: 1,
        location
    }).then(resp => {
        window.showTip({
            title: t('common.success.action'),
            status: 'success'
        })
        agencyQuery({
            language, p
        }).then(resp => {
            auditData.value = resp.data
            info.value = resp.data.info
        })
    })
}

function reject() {
    agencyAudit({
        id: info.value.id,
        audit_opinion: audit_opinion.value,
        sign: auditData.value.sign,
        status: 2,
        language
    }).then(resp => {
        window.showTip({
            title: t('common.success.action'),
            status: 'success'
        })
        agencyQuery({
            language, p
        }).then(resp => {
            auditData.value = resp.data
            info.value = resp.data.info
        })
    })
}

function changeLang(lang) {
    getFooterText();
}


getFooterText();
</script>

<style lang='scss' scoped>
.login-header, .login-footer {
    height: 60px;
    flex-shrink: 0;
    width: 100%;
}

.login-header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 0 3.85%;

    .logo-img {
        align-self: center;
        width: 120px;
        height: 45px;
    }

    .lang-menu {
        margin-top: 30px;
    }
}

.login-footer {
    padding: 0 3.85%  1%;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 27px;
    color: rgba(184, 184, 184, 1);
    text-align: left;
    vertical-align: top;
    flex-shrink: 0;
    height: auto;
}

.login {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    width: 564px;
}

.login-tabs {
    width: 100%;
    .tab-items {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        height: 56px;
        justify-content: space-between;
        color: rgba(102, 102, 102, 1);
        user-select: none;

        .tab-item {
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26px;
        cursor: pointer;
        }

        .tab-item-active {
        color: rgba(51, 51, 51, 1);
        font-weight: 700;
        position: relative;
        &::after {
            content: '';
            position: absolute;
            bottom: -4px;
            height: 4px;
            width: 100%;
            background-color: rgba(51, 51, 51, 1);
        }
        }
    }

    .tab-active-bar {
        width: 100%;
        height: 4px;
        background: rgba(236, 236, 236, 1);
    }
    }

    .title {
        width: 100%;
        text-align: left;
        margin-bottom: 20px;
        font-weight: 700;
        font-size: 40px;
        color: rgba(51, 51, 51, 1);
    }

    .login-form {
        border-radius: 6px;
        background: #ffffff;
        width: 100%;

    :deep(.el-form-item__label) {
        margin-top: 25px;
        font-size: 20px;
        font-weight: 400;
        letter-spacing: 0px;
        color: rgba(51, 51, 51, 1);
    }

    :deep(.el-input__password) {
        font-size: 20px;
    }

    .el-input {
        height: 50px;
        width: 100%;
        font-size: 20px;
        input {
        height: 50px;
        }
    }

    :deep(.el-select) {
        height: 50px;
        width: 100%;
        font-size: 20px;
        input {
        height: 48px;
        }
    }
}

.login-code {
    height: 60px;
    float: right;
    img {
        cursor: pointer;
        vertical-align: middle;
    }
}

.login-code-img {
    height: 60px;
    padding-left: 12px;
}

.login-btn {
    margin-top: 30px;
    width: 100%;
    height: 50px;
    font-size: 20px;
}

.sign-btn {
    width: 100%;
    height: 50px;
    font-size: 20px;
}
</style>
  