<template>
    <!-- 对话框表单 -->
    <el-dialog custom-class="ba-operate-dialog" :close-on-click-modal="false"
               :model-value="baTable.form.operate ? true : false" @close="baTable.toggleForm">
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                {{ baTable.form.operate ? baTable.form.operate == 'edit' ? '编辑' : '添加' : '无标题' }}
            </div>
        </template>
        <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
            <div class="ba-operate-form" :class="'ba-' + baTable.form.operate + '-form'"
                 :style="'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'">
                <el-form ref="formRef" @keyup.enter="baTable.onSubmit(formRef)" :model="baTable.form.items"
                         label-position="right" :label-width="baTable.form.labelWidth + 'px'" :rules="rules"
                         v-if="!baTable.form.loading">
                    <el-form-item prop="adTitle" label="广告标题">
                        <el-input v-model="baTable.form.items!.adTitle"></el-input>
                    </el-form-item>
                    <el-form-item prop="sceneType" label="场景">
                        <el-select v-model="baTable.form.items!.sceneType" placeholder="请选择场景" style="width: 100%"
                                   clearable>
                            <el-option label="开机" :value="0"/>
                            <el-option label="轮播" :value="1"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="adType" label="类型">
                        <el-select v-model="baTable.form.items!.adType" placeholder="请选择类型" style="width: 100%"
                                   clearable
                                   @change="onChange">
                            <el-option label="展示" :value="0"/>
                            <el-option label="推广" :value="1"/>
                            <el-option label="好物" :value="2"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="documentId" label="关联" v-if="baTable.form.items.adType>0">
                        <el-select v-model="baTable.form.items!.documentId" placeholder="请选择关联" style="width: 100%"
                                   clearable
                                   filterable>
                            <el-option v-for="(item,index) in datas.selectList" :label="item.label" :value="item.value"
                                       :key="index"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="adStatus" label="状态">
                        <el-select v-model="baTable.form.items!.adStatus" placeholder="请选择状态" style="width: 100%"
                                   clearable>
                            <el-option label="下架" :value="1"/>
                            <el-option label="上架" :value="0"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="screenDisplayHorizontalUrl" label="大屏横屏展示"
                                  v-if="baTable.form.items!.sceneType==0">
                        <pictureUpload v-model="baTable.form.items!.screenDisplayHorizontalUrl"></pictureUpload>
                    </el-form-item>
                    <el-form-item prop="screenDisplayVerticalUrl" label="大屏竖屏展示"
                                  v-if="baTable.form.items!.sceneType==0">
                        <pictureUpload v-model="baTable.form.items!.screenDisplayVerticalUrl"></pictureUpload>
                    </el-form-item>
                    <el-form-item prop="screenDisplayHorizontalUrl" label="大屏轮播展示"
                                  v-if="baTable.form.items!.sceneType==1">
                        <pictureUpload v-model="baTable.form.items!.screenDisplayHorizontalUrl"></pictureUpload>
                    </el-form-item>
                    <el-form-item prop="appDisplayUrl" label="移动APP展示">
                        <pictureUpload v-model="baTable.form.items!.appDisplayUrl"></pictureUpload>
                    </el-form-item>
                    <div style="font-size: 10px;color: #92969a;margin-left: 150px">
                        仅限jpg/png格式文件，大小不超过1MB
                    </div>
                </el-form>
            </div>
        </el-scrollbar>
        <template #footer>
            <div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
                <el-button @click="baTable.toggleForm('')">取消</el-button>
                <el-button v-blur :loading="baTable.form.submitLoading" @click="baTable.onSubmit(formRef)"
                           type="primary">
                    {{ baTable.form.operateIds && baTable.form.operateIds.length > 1 ? '保存并编辑下一项' : '保存' }}
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import {ref, reactive, inject, onMounted, watch} from 'vue'
import type baTableClass from '/@/utils/baTable'
import type {ElForm, FormItemRule} from 'element-plus'
import request from '/@/api/request'
import {document} from '/@/api/controllerUrls'
import pictureUpload from '/@/components/pictureUpload/index.vue'
import {getRecommendList} from '/@/api/backend/enterprise/advertisement'

const formRef = ref<InstanceType<typeof ElForm>>()
const baTable = inject('baTable') as baTableClass

onMounted(() => {
    getDocList()
})

let datas = reactive({
    selectList: [],
})

function getDocList() {
    request.index(document, undefined, 'list').then((res) => {
        datas.selectList = []
        baTable.form.items!.documentId = ''
        res.data.map((item: any) => {
            let selectItem = {
                label: item.documentTitle,
                value: item.id,
            }
            datas.selectList.push(selectItem)
        })

    })
}

const onChange = (val: any) => {
    if (val === 1) {
        getDocList()
    }

    if (val === 2) {
        getRecommendList().then((res) => {
            datas.selectList = []
            baTable.form.items!.documentId = ''
            res.data.map((item: any) => {
                let selectItem = {
                    label: item.recommendTitle,
                    value: item.id,
                }

                datas.selectList.push(selectItem)
            })
        })
    }
}

const rules: Partial<Record<string, FormItemRule[]>> = reactive({
    adTitle: [
        {
            required: true,
            message: '请输入标题',
            trigger: 'blur',
        },
    ],
    sceneType: [
        {
            required: true,
            message: '请选择场景',
            trigger: 'blur',
        },
    ],
    adType: [
        {
            required: true,
            message: '请选择类型',
            trigger: 'blur',
        },
    ],
    documentId: [
        {
            required: true,
            message: '请选择关联',
            trigger: 'blur',
        },
    ],
    adStatus: [
        {
            required: true,
            message: '请选择状态',
            trigger: 'blur',
        },
    ],
})
</script>

<style scoped lang="scss">
.avatar-uploader {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: var(--el-border-radius-small);
    box-shadow: var(--el-box-shadow-light);
    border: 1px dashed var(--color-sub-1);
    cursor: pointer;
    overflow: hidden;
    width: 110px;
    height: 110px;
}

.avatar-uploader:hover {
    border-color: var(--color-primary);
}

.avatar {
    width: 110px;
    height: 110px;
    display: block;
}

.image-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
</style>

function getRecommendList() {
throw new Error('Function not implemented.')
}
