<template>
<el-dialog v-model="dialogVisible" width="650" class="dialog-box"
    align-center
    destroy-on-close
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false">
    <template #header="{ close, titleId, titleClass }">
        <div class="msg-header" >
            <svg-icon :icon-class="data?'create2':'create1'" class="header-icon" />
            <div class="header-title">{{ data ? t('share.createSys') : t('share.create') }}</div>
            <div class="header-close" >
            <el-icon color="rgba(196, 196, 196, 1)" @click="close" ><Close /></el-icon>
            </div>
        </div>
    </template>
    <div class="msg-body" >
        <el-form ref="postRef" :model="form" :rules="rules" autocapitalize="off" size="large" label-position="top" style="user-select: none;" >
            <el-image v-if="data" class="img" :src="data.img_url.split(',')[0]" fit="cover" />
            <div v-if="userInfo.user_type == 1" style="margin-bottom: 20px;font-size: 20px;font-weight: 700;color: rgba(51, 51, 51, 1);" >{{ t('share.shareType') }}</div>
            <el-form-item v-if="userInfo.user_type == 1" >
                <div style="display: flex;justify-content: space-between;width: 100%;">
                    <div class="identity-type" :class="[form.share_type == '2'?'identity-type-active': '', validateType?'vl-error':'' ]" @click="selectType('2')" >
                        <svg-icon icon-class="share2" style="width: 41px;margin-right: 16px;" />
                        <span>{{ t('share.shareType2') }}</span>
                    </div>
                    <div class="identity-type" :class="[ form.share_type == '1' ? 'identity-type-active': '', validateType?'vl-error':'']" @click="selectType('1')" >
                        <svg-icon icon-class="share1" style="width: 41px;margin-right: 16px;" />
                        <span>{{ t('share.shareType1') }}</span>
                    </div>
                </div>
            </el-form-item>
            <div style="margin-bottom: 20px;font-size: 20px;font-weight: 700;color: rgba(51, 51, 51, 1);" >{{ t('share.setting') }}</div>
            <el-form-item :label="t('share.shareName')" prop="name" >
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item :label="t('share.accountType')" prop="mt_type_arry" >
                <el-checkbox-group v-model="form.mt_type_arry">
                    <el-checkbox v-for="(item, index) in accountType" :key="index" :label="item.name" :value="item.id" />
                </el-checkbox-group>
            </el-form-item>
            <el-form-item >
                <el-button @click="save" style="width: 100%;" type="primary">{{ t('share.save') }}</el-button>
            </el-form-item>
        </el-form>
    </div>
</el-dialog>

</template>

<script setup>
import useUserStore from '@/store/modules/user'
import { useLocale } from 'element-plus'
import { ref, defineModel, watch } from 'vue';
import { queryShareMtTypeList, saveShareRecord } from '@/api/share'

const { proxy } = getCurrentInstance();
const { t } = useLocale()
const userStore = useUserStore()
const userInfo = ref(userStore.userInfo)
const dialogVisible = defineModel("show")
const emit = defineEmits(['save'])
const props = defineProps({
    data: Object
})

const validateType = ref(false)
const accountType = ref([])
const loading = ref(false)

const d = reactive({
  form: {
    share_type: '2',
    name: undefined,
    mt_type_arry: []
  },
  rules: {
    mt_type_arry: [{ required: true, message: "", trigger: "blur", type: "array" }],
    name: [{ required: true, message: "", trigger: "blur" }]
  }
});

const { form, rules } = toRefs(d);

function selectType(type) {
    validateType.value = false
    form.value.share_type = type
}

function save() {
    proxy.$refs["postRef"].validate(valid => {
        if (valid) {
            loading.value = true
            proxy.loading.show()
            const { share_type, name, mt_type_arry } = form.value
            saveShareRecord({
                share_type, name, mt_type: mt_type_arry.toString(),sys_share_system_id:props.data?props.data.id:undefined
            }).then(resp => {
                loading.value = false
                proxy.loading.hide()
                dialogVisible.value = false
                window.showTip({
                    title: t('common.success.action'),
                    status: 'success'
                })
                emit('save', props.data)
            }).catch(() => {
                proxy.loading.hide()
            })
        }
    })
}

function loadTypeList() {
    queryShareMtTypeList({
        sysShareSystemId: props.data?.id
    }).then(resp => {
        accountType.value = resp.data
    })
}

watch(() => props.data, (n, o)  => {
    accountType.value = []
    loadTypeList()
}, {deep: true, immediate: true })

watch(dialogVisible, (n, o) => {
    if(!n) {
        form.value.share_type = '2'
        form.value.mt_type_arry = []
        proxy.resetForm("postRef");
    }
})
</script>
<style lang="scss" scoped>
.img {
    width: 100%;
    height: 212px;
    object-fit: cover;
    margin-bottom: 30px;
    box-shadow: -1px 0px 5px 1px rgba(0, 0, 0, 0.15);
}


.identity-type {
    width: 275px;
    height: 97px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(229, 229, 229, 1);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: 700;
    color: rgba(51, 51, 51, 1);
}

.identity-type-active {
    box-shadow: 0px 2px 9px  rgba(0, 0, 0, 0.25);
}

.vl-error {
    box-shadow: 0 0 0 1px var(--el-color-danger) inset;
}
</style>
<style lang="scss">
.dialog-box {
    border-radius: 16px;
    padding: 0;

    .el-dialog__header {
        margin-right: 0;
        padding: 0;
        overflow: hidden;
    }

    .el-dialog__body {
        box-sizing: border-box;
        padding: 40px;
        min-height: 250px;
    }

    .msg-header {
        border-radius: 16px 16px 0 0;
        width: 100%;
        height: 50px;
        position: relative;
        overflow: hidden;
        background-color: #0F3675;
        display: flex;
        align-items: center;
        color: #fff;

        .header-icon {
            width: 25px;
            height: 28px;
            margin-left: 22px;
            margin-right: 14px;
        }

        .header-title {
            font-size: 26px;
            font-weight: 700;
        }

        .header-close {
            cursor: pointer;
            position: absolute;
            bottom: 0;
            right: 20px;
            font-size: 32px;
        }
    }

    .msg-body {
        background-color: #ffffff;
    }
}
</style>