<template>
<div class="app-container home">
    <div class="page-content" >
        <div class="title-bar" @click="back" >
            <svg-icon icon-class="back" style="width: 30px;height: 30px;margin-right: 20px;" />
            <span style="font-size: 32px;font-weight: 700;color: rgba(51, 51, 51, 1);" >{{ t('common.back') }}</span>
        </div>
        <div v-if="detail" style="display: flex;flex-direction: column;align-items: center;padding: 0 30px;">
            <divc class="news-title">{{ detail.title }}</divc>
            <div class="news-content" v-html="detail.content" ></div>
            <!-- 赠金活动 -->
            <template v-if="type == 1">
                <router-link :to="'/capital/goldin/' + detail.activity_id" v-slot="{ navigate }" >
                    <el-button class="act-btn" type="primary" @click="navigate" >{{ t('activity.activityGoldIn') }}</el-button>
                </router-link>
            </template>
            <!-- 最新活动 -->
            <template v-if="type == 2 && participateData">
                <el-form ref="postRef" :model="form" :rules="rules" auto-complete="off" autocapitalize="off" size="large" label-position="top" style="user-select: none;width: 646px;" >
                    <el-form-item :label="t('activity.presentedMinPay')">
                        <el-input :model-value="participateData.min_amount" readonly :disabled="participateData.code == -1" ></el-input>
                    </el-form-item>
                    <el-form-item :label="t('capital.mt4_server')" prop="mt4_server" >
                        <el-select
                            v-model="form.mt4_server"
                            :placeholder="t('common.selectChoose')"
                            :clearable="false"
                            style="width: 100%"
                            @change="getMt4Login"
                            :disabled="participateData.code == -1"
                        >
                            <el-option v-for="(item, index) in mtServerList" :key="index" :label="item.server_name" :value="item.id" ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="t('capital.mt4_login')" prop="mt4_login" >
                        <el-select
                            v-model="form.mt4_login"
                            :placeholder="t('common.selectChoose')"
                            :clearable="false"
                            style="width: 100%"
                            :disabled="participateData.code == -1"
                        >
                            <el-option v-for="(item, index) in mtLoginList" :key="index" :label="item.mt4_login" :value="item.mt4_login" ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="t('capital.usdAmount')" prop="apply_amount">
                        <el-input type="number" :disabled="participateData.code == -1" :readonly="participateData.code == -1" v-model.number="form.apply_amount" style="width: 100%" />
                    </el-form-item>
                    <el-form-item>
                        <el-button v-if="participateData.code == 0" class="act-btn" type="primary" @click="save" >{{ t('form.apply') }}</el-button>
                    </el-form-item>
                </el-form>
            </template>
            <div class="act-doc-link" style="margin-top: 20px;">
                <el-link v-if="detail.activity_accessory" style="font-size: 12px;" type="primary" :underline="false" :href="baseUrl + detail.activity_accessory" target="_blank" >{{ t('activity.doc') }}</el-link>
            </div>
        </div>
    </div>
</div>
</template>

<script setup name="NewsDetail">
import { useLocale } from 'element-plus'
import { useRoute } from 'vue-router';
import { serverLang } from '@/utils/i18n'
import { getActivityDetail, getNewActivityDetail, participateSave } from '@/api/activity'
import { getFilePath, mtServer, getCustomerMtLoginList } from '@/api/common'

let { proxy } = getCurrentInstance();
const { t } = useLocale()
const route = useRoute();
const detail = ref(null)
const baseUrl = ref('')

const id = route.params.id;
const type = ref(route.params.type);
const participateData = ref(null)

const d = reactive({
  form: {
    apply_amount: undefined,
    mt4_server: undefined,
    mt4_login: undefined,
    act_id: undefined
  },
  rules: {
    apply_amount: [
        { required: true, message: "", trigger: "change", min: 0, type: 'number' },
    ],
    mt4_server: [{ required: true, message: "", trigger: "change" }],
    mt4_login: [{ required: true, message: "", trigger: "change" }]
  }
});

const { form, rules } = toRefs(d);
const mtServerList = ref([])
const mtLoginList = ref([])

getActivityDetail({
    contentId: id,
    contentType: type.value,
    qcc_language: serverLang()
}).then(resp => {
    if (type.value == 2) {
        loadParticipate(resp.data.activity_id)
        form.value.act_id = resp.data.activity_id
        mtServer({qcc_language: serverLang(), server_type: 'live'}).then(resp => {
            mtServerList.value = resp.data
        })
    }
    if (resp.data.content) {
        resp.data.content = handleImages(resp.data.content)
    }
    detail.value = resp.data
})

function handleImages(htmlContent) {
    var parser = new DOMParser();
    var doc = parser.parseFromString(htmlContent, 'text/html');
    var images = doc.getElementsByTagName('img');
    Array.from(images).forEach(function(img) {
    var width = img.getAttribute("width");
    if (!isNaN(parseFloat(width)) && parseFloat(width) > 200) {
        img.setAttribute('width', '100%');
        img.setAttribute('height', 'auto');
    }
    });
    return doc.documentElement.innerHTML;
}

function back() {
  if (proxy.$route.query.noGoBack) {
    proxy.$router.push({ path: "/" });
  } else {
    proxy.$router.go(-1);
  }
}

function getMt4Login() {
    getCustomerMtLoginList({
        qcc_language: serverLang(),
        mt4_server: form.value.mt4_server,
        activity_id: form.value.act_id
    }).then(resp => {
        mtLoginList.value = resp.data
    })
}

getFilePath().then(resp => {
    baseUrl.value = resp.data
})

function save() {
    proxy.$refs.postRef.validate(valid => {
        if (valid) {
            participateSave(form.value).then(resp => {
                participateData.value.code = -1
                window.showTip({
                    title: t('common.success.submit'),
                    status: 'success'
                })
            })
        }
    })
}

function loadParticipate(activity_id) {
    getNewActivityDetail({id: activity_id}).then(resp => {
        participateData.value = resp.data
        rules.value.apply_amount[0].min = Number(resp.data.min_amount)
        form.value.mt4_server = resp.data.mt_server
        form.value.mt4_login = resp.data.mt_login
        form.value.apply_amount = resp.data.apply_amount
    })
}

</script>

<style lang="scss" scoped>
.page-content {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.title-bar {
    display: flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 20px;
    cursor: pointer;
}

.news-title {
    font-size: 42px;
    font-weight: 700;
    letter-spacing: 0px;
    color: rgba(51, 51, 51, 1);
}

.news-content {
    width: 100%;
    min-height: 10vh;
}

.act-btn {
    width: 646px;
    height: 68px;
    font-size: 28px;
    font-weight: 400;
}
</style>