<template>
    <el-card class="myMediaFormCard">
        <template #header>
            <div class="card-header">
                <span>{{ formTitle }}</span>
                <el-icon style="float: right;cursor: pointer;" @click="handleClose">
                    <Close />
                </el-icon>
            </div>
        </template>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="160px" class="myInsertForm">
            <el-row :gutter="30" class="my_form_row">
                <el-col :span="6">
                    <el-form-item label="业务部门" prop="business">
                        <el-select v-model="ruleForm.business" placeholder="请选择" clearable style="min-width: 30px;">
                            <el-option v-for="dict in business" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="媒体编号">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="媒体名称">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30" class="my_form_row">
                <el-col :span="6">
                    <el-form-item label="展示形式">
                        <el-select v-model="ruleForm.display_form" placeholder="请选择" style="min-width: 30px;" clearable>
                            <el-option v-for="dict in display_form" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="媒介形式">
                        <el-select v-model="ruleForm.media_form" placeholder="请选择" style="min-width: 30px;" clearable>
                            <el-option v-for="dict in media_form" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="是否照明">
                        <el-select v-model="ruleForm.whether_lighting" placeholder="请选择" style="min-width: 30px;"
                            clearable>
                            <el-option v-for="dict in whether_lighting" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="是否实地考察">
                        <el-radio-group v-model="ruleForm.radio2">
                            <el-radio value="是">是</el-radio>
                            <el-radio value="否">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30" class="my_form_row">
                <el-col :span="6">
                    <el-form-item label="夏季照明时间">
                        <el-time-picker v-model="timeRange" style="width: 100%;" is-range range-separator="至"
                            start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" format="HH:mm"
                            value-format="HH:mm"></el-time-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="冬季照明时间">
                        <el-time-picker v-model="timeRange" style="width: 100%;" is-range range-separator="至"
                            start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" format="HH:mm"
                            value-format="HH:mm"></el-time-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="日均人流量">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入">
                            <template #suffix>
                                <span>人次/天</span>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="日均车流量">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入">
                            <template #suffix>
                                <span>辆/天</span>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30" class="my_form_row">
                <el-col :span="6">
                    <el-form-item label="播放时间">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="播放频次">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入">
                            <template #suffix>
                                <span>次/天</span>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="批文情况">
                        <el-select v-model="ruleForm.approval_document_status" placeholder="请选择" clearable
                            style="min-width: 30px;">
                            <el-option v-for="dict in approval_document_status" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="归属">
                        <el-select v-model="ruleForm.supplier" placeholder="请选择" style="min-width: 30px;" clearable>
                            <el-option v-for="dict in supplierList" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30" class="my_form_row">
                <el-col :span="6">
                    <el-form-item label="媒体尺寸">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="面积">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="高">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入">
                            <template #suffix>
                                <span>m</span>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="宽">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入">
                            <template #suffix>
                                <span>m</span>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30" class="my_form_row">
                <el-col :span="6">
                    <el-form-item label="可上画日期">
                        <el-date-picker v-model="ruleForm.value1" style="width: 100%;" type="date" placeholder="请选择" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="当前画面">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="入城时间">
                        <el-date-picker v-model="ruleForm.value2" style="width: 100%;" type="date" placeholder="请选择" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="出城时间">
                        <el-date-picker v-model="ruleForm.value3" style="width: 100%;" type="date" placeholder="请选择" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30" class="my_form_row">
                <el-col :span="6">
                    <el-form-item label="媒体档期">
                        <el-select v-model="ruleForm.media_schedule" placeholder="请选择" style="min-width: 30px;"
                            clearable>
                            <el-option v-for="dict in media_schedule" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="三面翻">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="媒介类型" style="margin-bottom: 0;">
                        <el-row :gutter="20" class="my_form_row">
                            <el-col :span="8">
                                <el-select v-model="ruleForm.mediaTypeOne" placeholder="请选择" @change="getMediaTypeTwo"
                                    clearable style="min-width: 30px">
                                    <el-option v-for="item in mediaTypeOne" :key="item.id" :label="item.name"
                                        :value="item.id" />
                                </el-select>
                            </el-col>
                            <el-col :span="8">
                                <el-select v-model="ruleForm.mediaTypeTwo" placeholder="请选择" @change="getMediaTypeThree"
                                    clearable style="min-width: 30px">
                                    <el-option v-for="item in mediaTypeTwo" :key="item.id" :label="item.name"
                                        :value="item.id" />
                                </el-select>
                            </el-col>
                            <el-col :span="8">
                                <el-select v-model="ruleForm.mediaTypeThree" placeholder="请选择" clearable
                                    style="min-width: 30px">
                                    <el-option v-for="item in mediaTypeThree" :key="item.id" :label="item.name"
                                        :value="item.id" />
                                </el-select>
                            </el-col>
                        </el-row>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30" class="my_form_row">
                <el-col :span="18">
                    <el-form-item label="地区商圈" style="margin-bottom: 0;">
                        <el-row :gutter="20" class="my_form_row">
                            <el-col :span="6">
                                <el-select v-model="ruleForm.provinceId" placeholder="请选择" @change="getCityList"
                                    clearable style="min-width: 30px">
                                    <el-option v-for="item in province" :key="item.id" :label="item.name"
                                        :value="item.id" />
                                </el-select>
                            </el-col>
                            <el-col :span="6">
                                <el-select v-model="ruleForm.cityId" placeholder="请选择" @change="getCountyList" clearable
                                    style="min-width: 30px">
                                    <el-option v-for="item in city" :key="item.id" :label="item.name"
                                        :value="item.id" />
                                </el-select>
                            </el-col>
                            <el-col :span="6">
                                <el-select v-model="ruleForm.countyId" placeholder="请选择" @change="getTownList" clearable
                                    style="min-width: 30px">
                                    <el-option v-for="item in county" :key="item.id" :label="item.name"
                                        :value="item.id" />
                                </el-select>
                            </el-col>
                            <el-col :span="6">
                                <el-select v-model="ruleForm.townId" placeholder="请选择" clearable
                                    style="min-width: 30px">
                                    <el-option v-for="item in town" :key="item.id" :label="item.name"
                                        :value="item.id" />
                                </el-select>
                            </el-col>
                        </el-row>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="商圈">
                        <el-select v-model="ruleForm.mediaTypeOne" placeholder="请选择" @change="getMediaTypeTwo" clearable
                            style="min-width: 30px">
                            <el-option v-for="item in mediaTypeOne" :key="item.id" :label="item.name"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30" class="my_form_row">
                <el-col :span="24">
                    <el-form-item label="所选商圈">

                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30" class="my_form_row">
                <el-col :span="24">
                    <el-form-item label="地理位置">
                        <el-row :gutter="30" class="my_form_row">
                            <el-col :span="12">
                                <el-input v-model="ruleForm.postCode" placeholder="请输入" />
                            </el-col>
                            <el-col :span="12">
                                <el-input v-model="ruleForm.postCode" placeholder="请输入" />
                            </el-col>
                        </el-row>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30" class="my_form_row">
                <el-col :span="24">
                    <el-form-item label="地址">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30" class="my_form_row">
                <el-col :span="6">
                    <el-form-item label="刊例价" prop="business">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入">
                            <template #suffix>
                                <span>元</span>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="常规折扣">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="常规净价">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入">
                            <template #suffix>
                                <span>元</span>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="成本折扣">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30" class="my_form_row">
                <el-col :span="6">
                    <el-form-item label="成本净价" prop="business">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入">
                            <template #suffix>
                                <span>元</span>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="销售方式">
                        <el-select v-model="ruleForm.sales_method" placeholder="请选择" style="min-width: 30px;" clearable>
                            <el-option v-for="dict in sales_method" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="CPM">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="SOV">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30" class="my_form_row">
                <el-col :span="6">
                    <el-form-item label="价格情况说明" prop="business">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="付款要求">
                        <el-select v-model="ruleForm.sales_method" placeholder="请选择" style="min-width: 30px;" clearable>
                            <el-option v-for="dict in sales_method" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="供应商">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="供应商联系人">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30" class="my_form_row">
                <el-col :span="6">
                    <el-form-item label="供应商联系方式" class="my_form_label" prop="business">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="首次是否包含安装制作费用" class="my_form_label">
                        <el-select v-model="ruleForm.sales_method" placeholder="请选择" style="min-width: 30px;" clearable>
                            <el-option v-for="dict in sales_method" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="发票类型">
                        <el-select v-model="ruleForm.invoice_type" placeholder="请选择" style="min-width: 30px;" clearable>
                            <el-option v-for="dict in invoice_type" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="税点">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入" >
                            <template #suffix>
                                <span>%</span>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30" class="my_form_row">
                <el-col :span="24">
                    <el-form-item label="换刊费用">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入">
                            <template #suffix>
                                <span>元/次</span>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30" class="my_form_row">
                <el-col :span="6">
                    <el-form-item label="品牌" prop="business">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="标签">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="关键词">
                        <el-select v-model="ruleForm.key_words" placeholder="请选择" style="min-width: 30px;" clearable>
                            <el-option v-for="dict in key_words" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="地标">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30" class="my_form_row">
                <el-col :span="6">
                    <el-form-item label="适用人群" prop="business">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="最短发布期">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="MR">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="行车可视情况">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30" class="my_form_row">
                <el-col :span="6">
                    <el-form-item label="可视距离" prop="business">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="可视角度">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入">
                            <template #suffix>
                                <span>度</span>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="媒体朝向">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="周边广告环境">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30" class="my_form_row">
                <el-col :span="6">
                    <el-form-item label="遮挡情况" prop="business">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="媒体距地面高度">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="地图显示比例">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="小区">
                        <el-input v-model="ruleForm.postCode" placeholder="请输入" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30" class="my_form_row">
                <el-col :span="24">
                    <el-form-item label="优势" prop="business">
                        <el-input v-model="ruleForm.remark" :rows="5" type="textarea" placeholder="请输入内容"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30" class="my_form_row">
                <el-col :span="24">
                    <el-form-item label="劣势" prop="business">
                        <el-input v-model="ruleForm.remark" :rows="5" type="textarea" placeholder="请输入内容"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30" class="my_form_row">
                <el-col :span="24">
                    <el-form-item label="备注" prop="business">
                        <el-input v-model="ruleForm.remark" :rows="5" type="textarea" placeholder="请输入内容"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30" class="my_form_row">
                <el-col :span="24">
                    <el-form-item label="文件上传" prop="business">
                        <template v-if="docUploadList.length > 0">
                            <div v-for="itemFile in docUploadList" class="image-wrapper">
                                <img v-if="isImageFile(itemFile.suffix)" :src="itemFile.url" class="avatar viewFile" />
                                <img v-else-if="itemFile.suffix == 'doc' || itemFile.suffix == 'docx'" :src="iconDoc"
                                    class="avatar viewFile" />
                                <img v-else-if="itemFile.suffix == 'xls' || itemFile.suffix == 'xlsx'" :src="iconXls"
                                    class="avatar viewFile" />
                                <img v-else-if="itemFile.suffix == 'ppt' || itemFile.suffix == 'pptx'" :src="iconPpt"
                                    class="avatar viewFile" />
                                <img v-else-if="itemFile.suffix == 'zip'" :src="iconZip" class="avatar viewFile" />
                                <img v-else-if="itemFile.suffix == 'pdf'" :src="iconPdf" class="avatar viewFile" />
                                <img v-else-if="itemFile.suffix == 'mp3'" :src="iconVideo" class="avatar viewFile" />
                                <img v-else-if="itemFile.suffix == 'mp4'" :src="iconMove" class="avatar viewFile" />
                                <img v-else-if="itemFile.suffix == 'txt'" :src="iconTxt" class="avatar viewFile" />
                                <img v-else :src="iconOther" class="avatar viewFile" />
                                <div class="actions">
                                    <span class="delete" @click.stop="handleRemoveImage(itemFile)">
                                        <el-icon>
                                            <Delete />
                                        </el-icon>
                                    </span>
                                </div>
                            </div>
                        </template>
                        <el-upload action="#" :http-request="requestUpload" list-type="picture-card"
                            :show-file-list="false">
                            <el-icon class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30" class="my_form_row">
                <el-col :span="24">
                    <el-form-item label="图片上传" prop="business">
                        <template v-if="docUploadList.length > 0">
                            <div v-for="itemFile in docUploadList" class="image-wrapper">
                                <img v-if="isImageFile(itemFile.suffix)" :src="itemFile.url" class="avatar viewFile" />
                                <img v-else-if="itemFile.suffix == 'doc' || itemFile.suffix == 'docx'" :src="iconDoc"
                                    class="avatar viewFile" />
                                <img v-else-if="itemFile.suffix == 'xls' || itemFile.suffix == 'xlsx'" :src="iconXls"
                                    class="avatar viewFile" />
                                <img v-else-if="itemFile.suffix == 'ppt' || itemFile.suffix == 'pptx'" :src="iconPpt"
                                    class="avatar viewFile" />
                                <img v-else-if="itemFile.suffix == 'zip'" :src="iconZip" class="avatar viewFile" />
                                <img v-else-if="itemFile.suffix == 'pdf'" :src="iconPdf" class="avatar viewFile" />
                                <img v-else-if="itemFile.suffix == 'mp3'" :src="iconVideo" class="avatar viewFile" />
                                <img v-else-if="itemFile.suffix == 'mp4'" :src="iconMove" class="avatar viewFile" />
                                <img v-else-if="itemFile.suffix == 'txt'" :src="iconTxt" class="avatar viewFile" />
                                <img v-else :src="iconOther" class="avatar viewFile" />
                                <div class="actions">
                                    <span class="delete" @click.stop="handleRemoveImage(itemFile)">
                                        <el-icon>
                                            <Delete />
                                        </el-icon>
                                    </span>
                                </div>
                            </div>
                        </template>
                        <el-upload action="#" :http-request="requestUpload" list-type="picture-card"
                            :show-file-list="false">
                            <el-icon class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30" class="my_form_row">
                <el-col :span="24">
                    <el-form-item label="视频上传" prop="business">
                        <template v-if="docUploadList.length > 0">
                            <div v-for="itemFile in docUploadList" class="image-wrapper">
                                <img v-if="isImageFile(itemFile.suffix)" :src="itemFile.url" class="avatar viewFile" />
                                <img v-else-if="itemFile.suffix == 'doc' || itemFile.suffix == 'docx'" :src="iconDoc"
                                    class="avatar viewFile" />
                                <img v-else-if="itemFile.suffix == 'xls' || itemFile.suffix == 'xlsx'" :src="iconXls"
                                    class="avatar viewFile" />
                                <img v-else-if="itemFile.suffix == 'ppt' || itemFile.suffix == 'pptx'" :src="iconPpt"
                                    class="avatar viewFile" />
                                <img v-else-if="itemFile.suffix == 'zip'" :src="iconZip" class="avatar viewFile" />
                                <img v-else-if="itemFile.suffix == 'pdf'" :src="iconPdf" class="avatar viewFile" />
                                <img v-else-if="itemFile.suffix == 'mp3'" :src="iconVideo" class="avatar viewFile" />
                                <img v-else-if="itemFile.suffix == 'mp4'" :src="iconMove" class="avatar viewFile" />
                                <img v-else-if="itemFile.suffix == 'txt'" :src="iconTxt" class="avatar viewFile" />
                                <img v-else :src="iconOther" class="avatar viewFile" />
                                <div class="actions">
                                    <span class="delete" @click.stop="handleRemoveImage(itemFile)">
                                        <el-icon>
                                            <Delete />
                                        </el-icon>
                                    </span>
                                </div>
                            </div>
                        </template>
                        <el-upload action="#" :http-request="requestUpload" list-type="picture-card"
                            :show-file-list="false">
                            <el-icon class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button type="primary" class="submitBtn" @click="handleSubmit">提交信息</el-button>
        </template>
    </el-card>
</template>
<script setup>
import { onMounted, defineEmits, ref } from 'vue'
import { Close } from '@element-plus/icons-vue'
import { sysRegionListByPid } from "@/api/system/administrativeRegion"
import { sysMediaTypeListByPid } from "@/api/system/mediaType"
import iconDoc from '@/assets/images/iconDoc.png'
import iconOther from '@/assets/images/iconOther.png'
import iconPdf from '@/assets/images/iconPdf.png'
import iconVideo from '@/assets/images/iconVideo.png'
import iconXls from '@/assets/images/iconXls.png'
import iconZip from '@/assets/images/iconZip.png'
import iconMove from '@/assets/images/iconMove.png'
import iconTxt from '@/assets/images/iconTxt.png'
import iconPpt from '@/assets/images/iconPpt.png'
import { useBackgroundStore } from '@/store/modules/background'
import otherbg from '@/assets/images/otherbg.png'
const bgStore = useBackgroundStore()

const { proxy } = getCurrentInstance()
const emit = defineEmits(['handleShowList']);
const route = useRoute()
const formTitle = ref('新建') 

// 媒体类型数据
const mediaTypeOne = ref([])
const mediaTypeTwo = ref([])
const mediaTypeThree = ref([])
// 省、市、县、镇数据
const province = ref([])
const city = ref([])
const county = ref([])
const town = ref([])

const supplierList = ref([])
const data = reactive({
    ruleForm: {},
    rules: {
        business: [{ required: true, message: "业务部门不能为空", trigger: "change" }]
    },
})
const { ruleForm, rules } = toRefs(data)
const { media_form, display_form, whether_lighting, invoice_type, key_words, media_schedule, media_format, sales_method, business, media_status, approval_document_status } = proxy.useDict("media_form", "display_form", "whether_lighting", "invoice_type", "key_words", "media_schedule", "media_format", "sales_method", "business", "media_status", "approval_document_status")
 

// 获取一级媒体类型
const getMediaTypeOne = () => {
    sysMediaTypeListByPid({ parentId: 0 }).then(res => {
        mediaTypeOne.value = res.data
    })
}
// 获取二级媒体类型
const getMediaTypeTwo = (value) => {
    sysMediaTypeListByPid({ parentId: value }).then(res => {
        ruleForm.value.mediaTypeTwo = undefined
        ruleForm.value.mediaTypeThree = undefined
        mediaTypeTwo.value = res.data
    })
}
// 获取三级媒体类型
const getMediaTypeThree = (value) => {
    sysMediaTypeListByPid({ parentId: value }).then(res => {
        ruleForm.value.mediaTypeThree = undefined
        mediaTypeThree.value = res.data
    })
}

// 获取省/直辖市数据
const getProvinceList = () => {
    sysRegionListByPid({ parentId: '0' }).then(res => {
        province.value = res.data
    })
}
// 获取地级市/区数据
const getCityList = (value) => {
    sysRegionListByPid({ parentId: value }).then(res => {
        ruleForm.value.cityId = undefined
        ruleForm.value.countyId = undefined
        ruleForm.value.townId = undefined
        city.value = res.data
    })
}
// 获取区/县数据
const getCountyList = (value) => {
    sysRegionListByPid({ parentId: value }).then(res => {
        ruleForm.value.countyId = undefined
        ruleForm.value.townId = undefined
        county.value = res.data
    })
}
// 获取镇数据
const getTownList = (value) => {
    sysRegionListByPid({ parentId: value }).then(res => {
        ruleForm.value.townId = undefined
        town.value = res.data
    })
}

// 营业执照集合
const docUploadList = ref([])
const baseUrl = import.meta.env.VITE_APP_BASE_API
// 判断是否为图片文件
const isImageFile = (suffix) => {
    return ['jpeg', 'jpg', 'png'].includes(suffix?.toLowerCase())
}

// 自定义上传
const requestUpload = (options) => {
    const { file } = options
    const formData = new FormData()
    formData.append('file', file)

    try {
        // uploadFile(formData).then(res => {
        //     if (res.code === 200) {
        //         docUploadList.value.push({
        //             name: res.originalFilename,
        //             url: baseUrl + res.fileName,
        //             suffix: res.suffix
        //         })
        //     }
        // })

    } catch (error) {
        console.error('上传失败:', error)
    }
}

// 删除附件
const handleRemoveImage = (fileInfo) => {
    docUploadList.value = docUploadList.value.filter(
        item => item.name != fileInfo.name
    );
}
const handleSubmit = () => {
    proxy.$refs["ruleFormRef"].validate(valid => {
        if (valid) {
            emit('handleShowList')
            // if (form.value.postId != undefined) {
            //     updatePost(form.value).then(response => {
            //         proxy.$modal.msgSuccess("修改成功")
            //         open.value = false
            //         getList()
            //     })
            // } else {
            //     addPost(form.value).then(response => {
            //         proxy.$modal.msgSuccess("新增成功")
            //         open.value = false
            //         getList()
            //     })
            // }
        }
    })
}

const handleClose = () => {
    emit('handleShowList')
}

// 初始化
onMounted(() => {
    bgStore.setBgImage(otherbg)
    getMediaTypeOne()
    getProvinceList()
    const id = route.params && route.params.Id
    if (id) {
        ruleForm.value.id = id
        formTitle.value = '编辑供应商'
    } else {
        ruleForm.value.id = null
        formTitle.value = '新建供应商'
    }
});
// 暴露方法\属性给父组件
defineExpose({
    formTitle
});
</script>
<style lang='scss'>
.el-upload--picture-card {
    width: 80px;
    height: 80px;
    border-radius: 4px;
}

.viewFile {
    width: 80px;
    height: 80px;
    border: 1px solid #dedede;
    border-radius: 4px;
}

.upload-container {
    position: relative;
    display: inline-block;
}

.image-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    margin-right: 20px;
    overflow: hidden;
}

.avatar {
    object-fit: cover;
}

.actions {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
}

.image-wrapper:hover .actions {
    display: block;
}

.delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border-radius: 50%;
    cursor: pointer;
    margin: 5px;
    transition: background 0.3s;

    &:hover {
        background: rgba(0, 0, 0, 0.7);
    }
}
</style>