<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-collapse class="my-collapse" v-model="activeNames" @change="handleChange">
                <el-collapse-item title="业务部门" name="1">
                    <el-row :gutter="30" class="my_form_row">
                        <el-col :span="6">
                            <el-form-item label="业务部门" prop="businessType">
                                <el-select v-model="ruleForm.businessType" placeholder="请选择" @change="handleChangeDept"
                                    clearable style="min-width: 30px;">
                                    <el-option v-for="item in deptList" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-collapse-item>
                <el-collapse-item title="媒体基础信息" name="2">
                    <el-row :gutter="30" class="my_form_row">
                        <el-col :span="6" v-if="ruleForm.id">
                            <el-form-item label="媒体编号">
                                <el-input v-model="ruleForm.mediaCode" placeholder="请输入" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="媒体形式/名称" prop="mediaName">
                                <el-input v-model="ruleForm.mediaName" 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="mediaType">
                                <el-select v-model="ruleForm.mediaType" 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-col :span="6">
                            <el-form-item label="媒体大类" prop="mediaCategory">
                                <el-select v-model="ruleForm.mediaCategory" 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-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="展示形式" prop="displayForm">
                                <el-select v-model="ruleForm.displayForm" 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-form-item>
                        </el-col>
                        <el-col :span="6" v-if="businessTypeName == '优势媒体部'">
                            <el-form-item label="是否有照明" prop="hasLighting">
                                <el-select v-model="ruleForm.hasLighting" 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-row>
                    <el-row :gutter="30" class="my_form_row" v-if="businessTypeName == '优势媒体部'">
                        <el-col :span="6">
                            <el-form-item label="播放时间" prop="playbackTime">
                                <el-input v-model="ruleForm.playbackTime" placeholder="请输入" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="媒体尺寸" prop="mediaSize">
                                <el-input v-model="ruleForm.mediaSize" placeholder="请输入" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="MR">
                                <el-input v-model="ruleForm.mr" placeholder="请输入" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="日均车流量">
                                <el-input v-model="ruleForm.dailyAvgVehicleFlow" placeholder="请输入">
                                    <template #suffix>
                                        <span>辆/天</span>
                                    </template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="30" class="my_form_row" v-if="businessTypeName == '优势媒体部'">
                        <el-col :span="24">
                            <el-form-item label="媒体朝向" prop="mediaOrientation">
                                <el-input v-model="ruleForm.mediaOrientation" placeholder="请输入" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="30" class="my_form_row">
                        <el-col :span="18">
                            <el-form-item label="城市" prop="mediaCity" style="margin-bottom: 0;">
                                <el-row :gutter="20" class="my_form_row">
                                    <el-col :span="6">
                                        <el-select v-model="ruleForm.provinceCode" 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.cityCode" 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.areaCode" 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.townCode" placeholder="请选择" @change="setTown"
                                            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="商圈" prop="businessDistrictId">
                                <el-select v-model="ruleForm.businessDistrictId" placeholder="请选择"
                                    @change="handleChosebusiness" clearable style="min-width: 30px;">
                                    <el-option v-for="item in businessAreaList" :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-input v-model="ruleForm.address" placeholder="请输入" />
                            </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="latVal" placeholder="请获取经纬度" readonly>
                                    <template #append>
                                        <el-button type="info" @click="handlePickLat">
                                            <el-icon style="top: -4px">
                                                <LocationInformation />
                                            </el-icon>
                                        </el-button>
                                    </template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="30" class="my_form_row" v-if="businessTypeName == '优势媒体部'">
                        <el-col :span="8">
                            <el-form-item label="最小购买周期">
                                <el-input v-model="ruleForm.minPurchaseCycle" placeholder="请输入" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="首次制作安装费" prop="firstInstallFee">
                                <el-input v-model="ruleForm.firstInstallFee" placeholder="请输入" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="换刊制作安装费" prop="changeInstallFee">
                                <el-input v-model="ruleForm.changeInstallFee" placeholder="请输入" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-collapse-item>
                <el-collapse-item title="媒体报价信息" name="3">
                    <div v-if="businessTypeName == '优势媒体部'">
                        <competitiveOffer ref="competitiveOfferRef"
                            @setCompetOfferMediaPrice="handleSetCompetOfferMediaPrice" />
                    </div>
                    <div v-if="businessTypeName == '网络媒体部'">
                        <el-tabs v-model="activePriceType" @tab-click="handlePriceTypeClick">
                            <el-tab-pane label="门禁" name="门禁">
                                <accessControlPrice ref="accessControlPriceRef"
                                    @setCompetOfferMediaPrice="handleSetCompetOfferMediaPrice" />
                            </el-tab-pane>
                            <el-tab-pane label="候车厅" name="候车厅">
                                <waitingHallPrice ref="waitingHallPriceRef"
                                    @setCompetOfferMediaPrice="handleSetCompetOfferMediaPrice" />
                            </el-tab-pane>
                            <el-tab-pane label="道闸" name="道闸">
                                <barrierGatePrice ref="barrierGatePriceRef"
                                    @setCompetOfferMediaPrice="handleSetCompetOfferMediaPrice" />
                            </el-tab-pane>
                            <el-tab-pane label="地铁" name="地铁">
                                <subwayPrice ref="subwayPriceRef"
                                    @setCompetOfferMediaPrice="handleSetCompetOfferMediaPrice" />
                            </el-tab-pane>
                            <el-tab-pane label="高铁" name="高铁">
                                <highSpeedRailway ref="highSpeedRailwayRef"
                                    @setCompetOfferMediaPrice="handleSetCompetOfferMediaPrice" />
                            </el-tab-pane>
                            <el-tab-pane label="写字楼" name="写字楼">
                                <officeBuilding ref="officeBuildingRef"
                                    @setCompetOfferMediaPrice="handleSetCompetOfferMediaPrice" />
                            </el-tab-pane>
                            <el-tab-pane label="车库灯箱" name="车库灯箱">
                                <garageLightBox ref="garageLightBoxRef"
                                    @setCompetOfferMediaPrice="handleSetCompetOfferMediaPrice" />
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </el-collapse-item>
                <el-collapse-item title="媒体深度信息" name="4">
                    <el-row :gutter="30" class="my_form_row">
                        <el-col :span="6">
                            <el-form-item label="媒体归属名称">
                                <el-select class="filterSelect" v-model="ruleForm.belongSupplierId"
                                    @change="handleChoseSupplier" filterable remote reserve-keyword
                                    :remote-method="getSupplierList" :loading="selectLoading" placeholder="请输入"
                                    remote-show-suffix clearable style="min-width: 70px;">
                                    <el-option v-for="item in supplierList" :key="item.supplierId"
                                        :label="item.supplierName" :value="item.supplierId" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="联系人">
                                <el-input v-model="ruleForm.contactUserName" placeholder="请输入" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="联系电话" prop="business">
                                <el-input v-model="ruleForm.contactUserPhone" placeholder="请输入" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="媒体是否有改造" prop="business">
                                <el-select v-model="ruleForm.hasReform" placeholder="请选择" style="min-width: 30px;"
                                    clearable>
                                    <el-option v-for="item in hasReformList" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="30" class="my_form_row" v-if="businessTypeName == '优势媒体部'">
                        <el-col :span="6">
                            <el-form-item label="发票类型">
                                <el-select v-model="ruleForm.invoiceType" 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.taxRate" 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.paymentRequirements" 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="媒体公司名称" prop="business">
                                <el-input v-model="ruleForm.mediaCompanyName" placeholder="请输入" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="30" class="my_form_row" v-if="businessTypeName == '优势媒体部'">
                        <el-col :span="6">
                            <el-form-item label="物业公司名称" prop="business">
                                <el-input v-model="ruleForm.propertyCompanyName" placeholder="请输入" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="审批部门" prop="business">
                                <el-input v-model="ruleForm.approvalDept" placeholder="请输入" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="批文情况">
                                <el-select v-model="ruleForm.approvalSituation" 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-date-picker v-model="ruleForm.approvalReleaseTime" style="width: 100%;" type="date"
                                    placeholder="请选择" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="30" class="my_form_row" v-if="businessTypeName == '优势媒体部'">
                        <el-col :span="6">
                            <el-form-item label="媒体独家授权" prop="business">
                                <el-input v-model="ruleForm.soleAgentAuth" placeholder="请输入" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="独家授权时间">
                                <el-date-picker v-model="ruleForm.soleAgentAuthTime" style="width: 100%;" type="date"
                                    placeholder="请选择" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="媒体行业授权" prop="business">
                                <el-input v-model="ruleForm.industryAuth" placeholder="请输入" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="媒体行业授权时间">
                                <el-date-picker v-model="ruleForm.industryAuthTime" style="width: 100%;" type="date"
                                    placeholder="请选择" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="30" class="my_form_row" v-if="businessTypeName == '优势媒体部'">
                        <el-col :span="24">
                            <el-form-item label="行业限制" prop="business">
                                <el-input v-model="ruleForm.industryLimit" :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.everManagerCompany" :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.mediaTimeline" :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.everMediaSituation" :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.mediaHistory" :rows="5" type="textarea"
                                    placeholder="请输入内容"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="30" class="my_form_row" v-if="businessTypeName == '网络媒体部'">
                        <el-col :span="24">
                            <el-form-item label="同类媒体公司" prop="business">
                                <el-input v-model="ruleForm.equalsMediaCompany" :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.other" :rows="5" type="textarea"
                                    placeholder="请输入内容"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="30" class="my_form_row" v-if="businessTypeName == '优势媒体部'">
                        <el-col :span="24">
                            <el-form-item label="批文文件">
                                <multiFileUpload ref="approvalDocumentRef" @set-form-file="handleSetMediaFile" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="30" class="my_form_row" v-if="businessTypeName == '优势媒体部'">
                        <el-col :span="24">
                            <el-form-item label="独家授权文件">
                                <multiFileUpload ref="exclusiveLicenseFileRef" @set-form-file="handleSetMediaFile" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="30" class="my_form_row" v-if="businessTypeName == '优势媒体部'">
                        <el-col :span="24">
                            <el-form-item label="媒体行业授权文件">
                                <multiFileUpload ref="mediaLicenseFileRef" @set-form-file="handleSetMediaFile" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="30" class="my_form_row" v-if="businessTypeName == '网络媒体部'">
                        <el-col :span="24">
                            <el-form-item label="媒体归属附件">
                                <multiFileUpload ref="mediaOwnershipRef" @set-form-file="handleSetMediaFile" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="30" class="my_form_row">
                        <el-col :span="24">
                            <el-form-item label="曾经媒体照片">
                                <multiFileUpload ref="onceMediaPhotoRef" @set-form-file="handleSetMediaFile" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-collapse-item>
                <el-collapse-item title="其他信息" name="5">
                    <el-row :gutter="30" class="my_form_row">
                        <el-col :span="24">
                            <el-form-item label="优势">
                                <el-input v-model="ruleForm.advantages" :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="备注">
                                <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="图片上传">
                                <multiFileUpload ref="mediaPicRef" @set-form-file="handleSetMediaFile" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="30" class="my_form_row">
                        <el-col :span="24">
                            <el-form-item label="视频上传">
                                <multiFileUpload ref="mediaVideoRef" @set-form-file="handleSetMediaFile" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="30" class="my_form_row" v-if="businessTypeName == '优势媒体部'">
                        <el-col :span="24">
                            <el-form-item label="盖章刊例">
                                <multiFileUpload ref="stampedPublicationRef" @set-form-file="handleSetMediaFile" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="30" class="my_form_row" v-if="businessTypeName == '优势媒体部'">
                        <el-col :span="24">
                            <el-form-item label="资质文件">
                                <multiFileUpload ref="qualificationFileRef" @set-form-file="handleSetMediaFile" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="30" class="my_form_row" v-if="businessTypeName == '优势媒体部'">
                        <el-col :span="24">
                            <el-form-item label="媒体链条">
                                <multiFileUpload ref="mediaChainRef" @set-form-file="handleSetMediaFile" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="30" class="my_form_row" v-if="businessTypeName == '优势媒体部'">
                        <el-col :span="24">
                            <el-form-item label="刊例照片">
                                <multiFileUpload ref="journalCataloguePhotoRef" @set-form-file="handleSetMediaFile" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="30" class="my_form_row" v-if="businessTypeName == '网络媒体部'">
                        <el-col :span="24">
                            <el-form-item label="MR和制作要求">
                                <multiFileUpload ref="mRProductionRequirementsRef"
                                    @set-form-file="handleSetMediaFile" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-collapse-item>
            </el-collapse>
        </el-form>

        <template #footer>
            <el-button type="primary" class="submitBtn" @click="handleSubmit">提交信息</el-button>
        </template>
        <pickLat ref="pickLatRef" @closePickLat="handleClosePickLat" />
    </el-card>
</template>
<script setup>
import { onMounted, nextTick, defineEmits, ref } from 'vue'
import { Close, LocationInformation } from '@element-plus/icons-vue'
import { listBusSupplier } from "@/api/supplier"
import { sysRegionListByPid } from "@/api/system/administrativeRegion"
import { sysMediaTypeListByPid } from "@/api/system/mediaType"
// import { listDept } from "@/api/system/dept"
import { busTradingAreaPage } from "@/api/system/businessArea"
import { addMedia, updateMedia, mediaDetail } from "@/api/mediaLibrary"

import multiFileUpload from '../../components/FileUpload/multiFileUpload.vue'
import pickLat from './pickLat.vue'
import competitiveOffer from './components/competitiveOffer.vue'
import accessControlPrice from './components/accessControlPrice.vue'
import waitingHallPrice from './components/waitingHallPrice.vue'
import barrierGatePrice from './components/barrierGatePrice.vue'
import subwayPrice from './components/subwayPrice.vue'
import highSpeedRailway from './components/highSpeedRailway.vue'
import officeBuilding from './components/officeBuilding.vue'
import garageLightBox from './components/garageLightBox.vue'

const { proxy } = getCurrentInstance()
const emit = defineEmits(['handleShowList']);

// 表单标题
const formTitle = ref('新建')
// 网络报价类型
const activePriceType = ref('门禁')
// 选择的经纬度
const latVal = ref(null)
const pickLatRef = ref(null)

// 报价信息列表 
const mediaPrice = ref([])
// 优势媒体报价组件
const competitiveOfferRef = ref(null)
// 网络媒体门禁报价组件
const accessControlPriceRef = ref(null)
// 网络媒体门候车厅报价组件
const waitingHallPriceRef = ref(null)
// 网络媒体道闸报价组件
const barrierGatePriceRef = ref(null)
// 网络媒体地铁报价组件
const subwayPriceRef = ref(null)
// 网络媒体高铁报价组件
const highSpeedRailwayRef = ref(null)
// 网络媒体写字楼报价组件
const officeBuildingRef = ref(null)
// 网络媒体车库灯箱报价组件
const garageLightBoxRef = ref(null)

// 附件信息
const mediaFile = ref([])
// 批文文件组件
const approvalDocumentRef = ref(null)
// 独家授权文件
const exclusiveLicenseFileRef = ref(null)
// 媒体行业授权文件
const mediaLicenseFileRef = ref(null)
// 媒体归属附件
const mediaOwnershipRef = ref(null)
// 曾经媒体照片
const onceMediaPhotoRef = ref(null)
// 图片上传
const mediaPicRef = ref(null)
// 视频上传
const mediaVideoRef = ref(null)
// 盖章刊例
const stampedPublicationRef = ref(null)
// 资质文件
const qualificationFileRef = ref(null)
// 媒体链条
const mediaChainRef = ref(null)
// 刊例照片
const journalCataloguePhotoRef = ref(null)
// MR和制作要求
const mRProductionRequirementsRef = ref(null)

// 媒体类型数据
const mediaTypeOne = ref([])
const mediaTypeTwo = ref([])
const mediaTypeThree = ref([])
// 省、市、县、镇数据
const province = ref([])
const city = ref([])
const county = ref([])
const town = ref([])
// 业务部门
const deptList = ref([
    { value: 1, label: '优势媒体部' },
    { value: 2, label: '网络媒体部' }
])
// 归属选项
const supplierList = ref([])
const selectLoading = ref(false)
// 商圈信息列表
const businessAreaList = ref([])
// 是否有改造
const hasReformList = ref([
    { value: 0, label: '否' },
    { value: 1, label: '是' }
])

const data = reactive({
    ruleForm: {},
    rules: {
        businessType: [{ required: true, message: "业务部门不能为空", trigger: "change" }],
        mediaName: [{ required: true, message: "媒体形式/名称不能为空", trigger: "blur" }],
        mediaType: [{ required: true, message: "媒体类型不能为空", trigger: "change" }],
        mediaCategory: [{ required: true, message: "媒体大类不能为空", trigger: "change" }],
        hasLighting: [{ required: true, message: "是否有照明不能为空", trigger: "change" }],
        playbackTime: [{ required: true, message: "播放时间不能为空", trigger: "change" }],
        mediaSize: [{ required: true, message: "媒体尺寸不能为空", trigger: "blur" }],
        mediaOrientation: [{ required: true, message: "媒体朝向不能为空", trigger: "blur" }],
        mediaCity: [{ required: true, message: "城市不能为空", trigger: "change" }],
        businessDistrictId: [{ required: true, message: "商圈不能为空", trigger: "change" }],
        firstInstallFee: [{ required: true, message: "首次制作安装费不能为空", trigger: "blur" }],
        changeInstallFee: [{ required: true, message: "换刊制作安装费不能为空", trigger: "blur" }],
    },
})
const { ruleForm, rules } = toRefs(data)
const { whether_lighting, invoice_type, sales_method, approval_document_status } = proxy.useDict("whether_lighting", "invoice_type", "sales_method", "approval_document_status")
const activeNames = ref(['1', '2', '3', '4', '5'])
// 折叠面板点击
const handleChange = (val) => {
    activeNames.value = val
}
// 报价类型切换
const handlePriceTypeClick = (tab, event) => {
    activePriceType.value = tab
}
// 打开拾取经纬度弹窗
const handlePickLat = () => {
    pickLatRef.value.loadMap()
}
const handleClosePickLat = (backValue) => {
    latVal.value = backValue.lat + ',' + backValue.lng
    ruleForm.value.mapX = backValue.lng  //经度
    ruleForm.value.mapY = backValue.lat //纬度
}
// 业务部门切换
const businessTypeName = ref('优势媒体部')
const handleChangeDept = (val) => {
    const choseDep = deptList.value.filter(item => item.value == val)[0]
    ruleForm.value.businessType = choseDep?.value
    businessTypeName.value = choseDep?.label
    nextTick(() => {
        if (businessTypeName.value == '优势媒体部' && competitiveOfferRef.value) competitiveOfferRef.value.getMediaPrice(ruleForm.value.id, true)
        if (businessTypeName.value == '网络媒体部' && activePriceType.value == '门禁') accessControlPriceRef.value.getMediaPrice(ruleForm.value.id, true)
        if (businessTypeName.value == '网络媒体部' && activePriceType.value == '候车厅') waitingHallPriceRef.value.getMediaPrice(ruleForm.value.id, true)
        if (businessTypeName.value == '网络媒体部' && activePriceType.value == '道闸') barrierGatePriceRef.value.getMediaPrice(ruleForm.value.id, true)
        if (businessTypeName.value == '网络媒体部' && activePriceType.value == '地铁') subwayPriceRef.value.getMediaPrice(ruleForm.value.id, true)
        if (businessTypeName.value == '网络媒体部' && activePriceType.value == '高铁') highSpeedRailwayRef.value.getMediaPrice(ruleForm.value.id, true)
        if (businessTypeName.value == '网络媒体部' && activePriceType.value == '写字楼') officeBuildingRef.value.getMediaPrice(ruleForm.value.id, true)
        if (businessTypeName.value == '网络媒体部' && activePriceType.value == '车库灯箱') garageLightBoxRef.value.getMediaPrice(ruleForm.value.id, true)
    })
}
// 选择商圈
const handleChosebusiness = (val) => {
    const choseBusiness = businessAreaList.value.filter(item => item.id == val)[0]
    ruleForm.value.businessDistrictName = choseBusiness?.name
}
// 选择供应商
const handleChoseSupplier = (val) => {
    const choseSupplier = supplierList.value.filter(item => item.supplierId == val)[0]
    ruleForm.value.belongSupplierId = choseSupplier?.supplierId
    ruleForm.value.belongSupplierName = choseSupplier?.supplierName
}
// 获取一级媒体类型
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 getDepList = () => {
//     listDept({ businessFlag: 1 }).then(response => {
//         deptList.value = response.data
//     })
// }
// 查询条件获取供应商
const getSupplierList = (queryText) => {
    if (queryText) {
        selectLoading.value = true
        listBusSupplier({ keyword: queryText }).then(res => {
            supplierList.value = res.data
            selectLoading.value = false
        })
    } else {
        selectLoading.value = false
        supplierList.value = []
    }
}
// 获取省/直辖市数据
const getProvinceList = () => {
    sysRegionListByPid({ parentId: '0' }).then(res => {
        province.value = res.data
    })
}
// 获取地级市/区数据
const getCityList = (value) => {
    var choseProvince = province.value.filter(item => item.id == value)[0]
    if (choseProvince) {
        ruleForm.value.mediaCity = choseProvince.name
        ruleForm.value.provinceName = choseProvince.name
    } else {
        ruleForm.value.mediaCity = undefined
        ruleForm.value.provinceCode = undefined
        ruleForm.value.provinceName = undefined
        ruleForm.value.cityCode = undefined
        ruleForm.value.cityName = undefined
        ruleForm.value.areaCode = undefined
        ruleForm.value.areaName = undefined
        ruleForm.value.townCode = undefined
        ruleForm.value.townName = undefined
    }
    sysRegionListByPid({ parentId: value }).then(res => {
        ruleForm.value.cityCode = undefined
        ruleForm.value.cityName = undefined
        ruleForm.value.areaCode = undefined
        ruleForm.value.areaName = undefined
        ruleForm.value.townCode = undefined
        ruleForm.value.townName = undefined
        city.value = res.data
    })
    getbusinessAreaList()
}
// 获取区/县数据
const getCountyList = (value) => {
    var choseCity = city.value.filter(item => item.id == value)[0]
    if (choseCity) {
        ruleForm.value.mediaCity = ruleForm.value.provinceName + '/' + choseCity.name
        ruleForm.value.cityName = choseCity.name
    } else {
        ruleForm.value.cityCode = undefined
        ruleForm.value.cityName = undefined
        ruleForm.value.areaCode = undefined
        ruleForm.value.areaName = undefined
        ruleForm.value.townCode = undefined
        ruleForm.value.townName = undefined
    }
    sysRegionListByPid({ parentId: value }).then(res => {
        ruleForm.value.areaCode = undefined
        ruleForm.value.areaName = undefined
        ruleForm.value.townCode = undefined
        ruleForm.value.townName = undefined
        county.value = res.data
    })
    getbusinessAreaList()
}
// 获取镇数据
const getTownList = (value) => {
    var choseCounty = county.value.filter(item => item.id == value)[0]
    if (choseCounty) {
        ruleForm.value.mediaCity = ruleForm.value.provinceName + '/' + ruleForm.value.cityName + '/' + choseCounty.name
        ruleForm.value.areaName = choseCounty.name
    } else {
        ruleForm.value.areaCode = undefined
        ruleForm.value.areaName = undefined
        ruleForm.value.townCode = undefined
        ruleForm.value.townName = undefined
    }
    sysRegionListByPid({ parentId: value }).then(res => {
        ruleForm.value.townCode = undefined
        ruleForm.value.townName = undefined
        town.value = res.data
    })
    getbusinessAreaList()
}
// 设置末级城市
const setTown = (value) => {
    var choseTown = town.value.filter(item => item.id == value)[0]
    if (choseTown) {
        ruleForm.value.mediaCity = ruleForm.value.provinceName + '/' + ruleForm.value.cityName + '/' + ruleForm.value.areaName + '/' + choseTown.name
        ruleForm.value.townName = choseTown.name
    }
    getbusinessAreaList()
}

// 详情信息联动 设置区/县数据
const getCityList2 = (value) => {
    sysRegionListByPid({ parentId: value }).then(res => {
        city.value = res.data
    })
}
const getCountyList2 = (value) => {
    sysRegionListByPid({ parentId: value }).then(res => {
        county.value = res.data
    })
}
const getTownList2 = (value) => {
    sysRegionListByPid({ parentId: value }).then(res => {
        town.value = res.data
    })
}
// 依据省市县镇查询商圈
const getbusinessAreaList = (val) => {
    const _params = {
        pageIndex: 1,
        pageSize: 200,
        provinceId: ruleForm.value.provinceCode,
        cityId: ruleForm.value.cityCode,
        countyId: ruleForm.value.areaCode,
        townId: ruleForm.value.townCode,
    }
    busTradingAreaPage(_params).then(res => {
        if (res.code == 200) {
            businessAreaList.value = res.data.list
        }
    })
}

// 详情信息设置媒体类型 
const getMediaTypeTwo2 = (value) => {
    sysMediaTypeListByPid({ parentId: value }).then(res => {
        mediaTypeTwo.value = res.data
    })
}
const getMediaTypeThree2 = (value) => {
    sysMediaTypeListByPid({ parentId: value }).then(res => {
        mediaTypeThree.value = res.data
    })
}

// 设置文件结果
const handleSetMediaFile = (_fileType, _files) => { 
    // 先按类型去除旧的文件  
    var cachFileList = mediaFile.value.filter(item => item.fileType !== _fileType); 
    // 将新的文件追加进来
    if (_files.length > 0) mediaFile.value = cachFileList.concat(_files)
    else mediaFile.value = cachFileList 
}
// 设置媒体价格
const handleSetCompetOfferMediaPrice = (mediaType, _priceList) => {
    // 先按类型去除旧的报价数据
    const cachPriceList = mediaPrice.value.filter(item => item.mediaType !== mediaType)
    // 将新的数据追加进结果
    if (_priceList.length > 0) mediaPrice.value = cachPriceList.concat(_priceList)
    else mediaPrice.value = cachPriceList
}

const handleSubmit = () => {
    proxy.$refs["ruleFormRef"].validate(valid => {
        if (valid) {
            if (businessTypeName.value == '优势媒体部') {
                mediaFile.value = mediaFile.value.filter(item => [1, 2, 3, 5, 6, 7, 8, 9, 10, 11].includes(item.fileType))
                ruleForm.value.mediaPrice = mediaPrice.value.filter(item => item.mediaType == 0)
            } else if (businessTypeName.value == '网络媒体部') {
                mediaFile.value = mediaFile.value.filter(item => [4, 5, 6, 7, 12].includes(item.fileType))
                ruleForm.value.mediaPrice = mediaPrice.value.filter(item => [1, 2, 3, 4, 5, 6, 7].includes(item.mediaType))
            }
            ruleForm.value.mediaFile = mediaFile.value

            if (ruleForm.value.id != undefined) {
                updateMedia(ruleForm.value).then(response => {
                    proxy.$modal.msgSuccess("修改成功")
                    emit('handleShowList')
                })
            } else {
                addMedia(ruleForm.value).then(response => {
                    proxy.$modal.msgSuccess("新增成功")
                    emit('handleShowList')
                })
            }
        }
    })
}

const handleClose = () => {
    emit('handleShowList')
}
// 获取媒体详情
const getMediaInfo = () => {
    mediaDetail({ mediaId: ruleForm.value.id }).then(res => {
        ruleForm.value = res.data
        mediaFile.value = ruleForm.value.mediaFile
        ruleForm.value.mediaCity = ruleForm.value.provinceName + '/' + ruleForm.value.cityName + '/' + ruleForm.value.areaName + '/' + ruleForm.value.townName

        latVal.value = ruleForm.value.mapY + ',' + ruleForm.value.mapX
        handleChangeDept(res.data.businessType)
        if (ruleForm.value.mediaFile && ruleForm.value.mediaFile.length > 0) {
            if (approvalDocumentRef.value) {
                const fileList = ruleForm.value.mediaFile.filter(item => item.fileType == 1)
                approvalDocumentRef.value.setFileInfo(fileList)
            }
            if (exclusiveLicenseFileRef.value) {
                const fileList = ruleForm.value.mediaFile.filter(item => item.fileType == 2)
                exclusiveLicenseFileRef.value.setFileInfo(fileList)
            }
            if (mediaLicenseFileRef.value) {
                const fileList = ruleForm.value.mediaFile.filter(item => item.fileType == 3)
                mediaLicenseFileRef.value.setFileInfo(fileList)
            }
            if (mediaOwnershipRef.value) {
                const fileList = ruleForm.value.mediaFile.filter(item => item.fileType == 4)
                mediaOwnershipRef.value.setFileInfo(fileList)
            }
            if (onceMediaPhotoRef.value) {
                const fileList = ruleForm.value.mediaFile.filter(item => item.fileType == 5)
                onceMediaPhotoRef.value.setFileInfo(fileList)
            }
            if (mediaPicRef.value) {
                const fileList = ruleForm.value.mediaFile.filter(item => item.fileType == 6)
                mediaPicRef.value.setFileInfo(fileList)
            }
            if (mediaVideoRef.value) {
                const fileList = ruleForm.value.mediaFile.filter(item => item.fileType == 7)
                mediaVideoRef.value.setFileInfo(fileList)
            }
            if (stampedPublicationRef.value) {
                const fileList = ruleForm.value.mediaFile.filter(item => item.fileType == 8)
                stampedPublicationRef.value.setFileInfo(fileList)
            }
            if (qualificationFileRef.value) {
                const fileList = ruleForm.value.mediaFile.filter(item => item.fileType == 9)
                qualificationFileRef.value.setFileInfo(fileList)
            }
            if (mediaChainRef.value) {
                const fileList = ruleForm.value.mediaFile.filter(item => item.fileType == 10)
                mediaChainRef.value.setFileInfo(fileList)
            }
            if (journalCataloguePhotoRef.value) {
                const fileList = ruleForm.value.mediaFile.filter(item => item.fileType == 11)
                journalCataloguePhotoRef.value.setFileInfo(fileList)
            }
            if (mRProductionRequirementsRef.value) {
                const fileList = ruleForm.value.mediaFile.filter(item => item.fileType == 12)
                mRProductionRequirementsRef.value.setFileInfo(fileList)
            }
        }
        handleResponse(res)
    })
}

// 刷新联动数据
async function handleResponse(response) {
    const promises = [];

    if (response.data.provinceCode) {
        promises.push(getCityList2(response.data.provinceCode));
    }
    if (response.data.cityCode) {
        promises.push(getCountyList2(response.data.cityCode));
    }
    if (response.data.areaCode) {
        promises.push(getTownList2(response.data.areaCode));
    }

    if (response.data.mediaType) {
        promises.push(getMediaTypeTwo2(response.data.mediaType));
    }
    if (response.data.mediaCategory) {
        promises.push(getMediaTypeThree2(response.data.mediaCategory));
    }

    getbusinessAreaList()

    // 等待所有请求完成
    await Promise.all(promises);
}
// 初始化
const initForm = (_formTitle, _ruleForm) => {
    formTitle.value = _formTitle
    ruleForm.value = _ruleForm
    ruleForm.value.mediaCity = ruleForm.value.provinceName + '/' + ruleForm.value.cityName + '/' + ruleForm.value.areaName + '/' + ruleForm.value.townName

    latVal.value = ruleForm.value.mapY + ',' + ruleForm.value.mapX
    // getDepList()
    getMediaTypeOne()
    getProvinceList()
    if (ruleForm.value.id) getMediaInfo()
    nextTick(() => {
        // 批文文件-1,独家授权文件-2,媒体行业授权文件-3,媒体归属附件-4,曾经媒体照片-5,图片上传-6,视频上传-7,盖章刊例-8, 资质文件-9, 媒体链条-10, 刊例照片-11,MR和制作要求-12
        if (approvalDocumentRef.value) approvalDocumentRef.value._fileType = 1;
        if (exclusiveLicenseFileRef.value) exclusiveLicenseFileRef.value._fileType = 2;
        if (mediaLicenseFileRef.value) mediaLicenseFileRef.value._fileType = 3;
        if (mediaOwnershipRef.value) mediaOwnershipRef.value._fileType = 4;
        if (onceMediaPhotoRef.value) onceMediaPhotoRef.value._fileType = 5;
        if (mediaPicRef.value) mediaPicRef.value._fileType = 6;
        if (mediaVideoRef.value) mediaVideoRef.value._fileType = 7;
        if (stampedPublicationRef.value) stampedPublicationRef.value._fileType = 8;
        if (qualificationFileRef.value) qualificationFileRef.value._fileType = 9;
        if (mediaChainRef.value) mediaChainRef.value._fileType = 10;
        if (journalCataloguePhotoRef.value) journalCataloguePhotoRef.value._fileType = 11;
        if (mRProductionRequirementsRef.value) mRProductionRequirementsRef.value._fileType = 12;
    });
}
// 暴露方法\属性给父组件
defineExpose({
    initForm
});
</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);
    }
}

.pickMapContainer {
    width: 100%;
    height: calc(100vh - 316px);
    background: #3f8bff;
}
</style>