<template>
    <el-card class="myDetailCard">
        <template #header>
            <div class="card-header">
                <span>媒体信息</span>
                <el-icon style="float: right;cursor: pointer;" @click="handleClose">
                    <Close />
                </el-icon>
            </div>
        </template>

        <el-form ref="ruleFormRef" :model="detailForm" label-width="200px" class="myDetailForm">
            <div class="supplierTitleContainer">
                <div class="supplierNameIcon" />
                <div class="supplierNameTitle">银川金凤区新华联广场门口上方LED</div>
            </div>
            <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="business_department">
                                优势媒体部门
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="状态" prop="business_department">
                                生效中
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="媒体编号" prop="business_department">
                                媒体公司
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="媒体名称" prop="business_department">
                                公交车身
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div class="splineBar" />
                    <el-row :gutter="30" class="my_form_row">
                        <el-col :span="6">
                            <el-form-item label="展示形式" prop="business_department">
                                待定
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="媒介形式" prop="business_department">
                                待定
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="是否照明" prop="business_department">
                                待定
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="是否实地考察" prop="business_department">
                                待定
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div class="splineBar" />
                    <el-row :gutter="30" class="my_form_row">
                        <el-col :span="6">
                            <el-form-item label="夏季照明时间" prop="business_department">
                                待定
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="冬季照明时间" prop="business_department">
                                待定
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="日均人流量" prop="business_department">
                                待定
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="日均车流量" prop="business_department">
                                待定
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div class="splineBar" />
                    <el-row :gutter="30" class="my_form_row">
                        <el-col :span="6">
                            <el-form-item label="播放时间" prop="business_department">
                                待定
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="播放频次" prop="business_department">
                                待定
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="批文情况" prop="business_department">
                                待定
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="归属" prop="business_department">
                                待定
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div class="splineBar" />
                    <el-row :gutter="30" class="my_form_row">
                        <el-col :span="6">
                            <el-form-item label="媒体尺寸" prop="business_department">
                                待定
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="面积" prop="business_department">
                                待定
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="高/宽（m）" prop="business_department">
                                待定
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="可上画日期" prop="business_department">
                                待定
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div class="splineBar" />
                    <el-row :gutter="30" class="my_form_row">
                        <el-col :span="6">
                            <el-form-item label="当前画面" prop="business_department">
                                待定
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="媒体档期" prop="business_department">
                                待定
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="城市-商圈" prop="business_department">
                                待定
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="地理位置（经纬度）" prop="business_department">
                                待定
                            </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">
                            <el-form-item label="销售方式" prop="business_department">
                                待定
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="价格情况说明" prop="business_department">
                                待定
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="付款要求" prop="business_department">
                                待定
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="供应商" prop="business_department">
                                待定
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div class="splineBar" />
                    <el-row :gutter="30" class="my_form_row">
                        <el-col :span="6">
                            <el-form-item label="供应商联系人" prop="business_department">
                                待定
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="供应商联系方式" prop="business_department">
                                待定
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="首次是否包含安装制作费用" class="my_detailform_label" prop="business_department">
                                待定
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="发票类型" prop="business_department">
                                待定
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div class="splineBar" />
                    <el-row :gutter="30" class="my_form_row">
                        <el-col :span="6">
                            <el-form-item label="税点（%）" prop="business_department">
                                待定
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-collapse-item>
                <el-collapse-item title="媒体报价信息" name="3">
                    <el-table :data="quotationList">
                        <el-table-column label="序号" align="center" width="80">
                            <template #default="scope">
                                {{ scope.$index + 1 }}
                            </template>
                        </el-table-column>
                        <el-table-column label="年度" align="left" prop="year" width="100" />
                        <el-table-column label="城市/市场" align="left" prop="postCode" width="150" />
                        <el-table-column label="媒体大类" align="left" prop="postCode" width="150" />
                        <el-table-column label="媒体形式/名称" align="left" prop="mediaName" width="200">
                            <template #default="scope">
                                <span class="mediaNameLabel">{{ scope.row.mediaName }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="供应商" align="center" prop="postCode" width="150" />
                        <el-table-column label="成本" align="center" prop="postCode" width="150" />
                        <el-table-column label="频次" align="left" prop="postCode" width="150" />
                        <el-table-column label="最小购买量(块)" align="left" prop="postCode" width="150" />
                        <el-table-column label="购买周期(天)" align="left" prop="postCode" width="150" />
                        <el-table-column label="对外统一刊例(元/块)" align="left" prop="postCode" width="180" />
                        <el-table-column label="折扣" align="left" prop="postCode" width="150" />
                        <el-table-column label="媒体总净价(元/购买周期)" align="center" prop="cataloguePhoto" width="230" />
                        <el-table-column label="总制作费(元/次)" align="center" prop="mediaChain" width="160" />
                        <el-table-column label="总净价(元)" align="center" prop="qualificationFile" width="130" />
                        <el-table-column label="单日覆盖人流量" align="center" prop="stampedPublication" width="150" />
                        <el-table-column label="总曝光" align="center" prop="postCode" width="150" />
                        <el-table-column label="SOV" align="center" prop="postCode" width="150" />
                        <el-table-column label="CPM(元)" align="center" prop="postCode" width="150" />
                        <el-table-column label="备注" align="center" prop="postCode" width="150" />
                        <el-table-column label="创建人" align="center" prop="postCode" width="150" />
                        <el-table-column label="创建时间" align="center" prop="postCode" width="150" />
                    </el-table> 
                </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="品牌" prop="business_department">
                                有限责任公司
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="标签" prop="business_department">
                                长期
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="关键词" prop="business_department">

                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="地标" prop="business_department">

                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div class="splineBar" />
                    <el-row :gutter="30" class="my_form_row">
                        <el-col :span="6">
                            <el-form-item label="适用人群" prop="business_department">
                                有限责任公司
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="最短发布期" prop="business_department">
                                长期
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="MR" prop="business_department">

                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="行车可视情况" prop="business_department">

                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div class="splineBar" />
                    <el-row :gutter="30" class="my_form_row">
                        <el-col :span="6">
                            <el-form-item label="可视距离" prop="business_department">
                                有限责任公司
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="可视角度（度）" prop="business_department">
                                长期
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="媒体朝向" prop="business_department">

                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="周边广告环境" prop="business_department">

                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div class="splineBar" />
                    <el-row :gutter="30" class="my_form_row">
                        <el-col :span="6">
                            <el-form-item label="遮挡情况" prop="business_department">
                                有限责任公司
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="媒体距地面高度" prop="business_department">
                                长期
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="地图显示比例" prop="business_department">

                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="小区" prop="business_department">

                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div class="splineBar" />
                    <el-row :gutter="30" class="my_form_row">
                        <el-col :span="24">
                            <el-form-item label="优势" prop="business_department">
                                有限责任公司
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div class="splineBar" />
                    <el-row :gutter="30" class="my_form_row">
                        <el-col :span="24">
                            <el-form-item label="劣势" prop="business_department">
                                有限责任公司
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div class="splineBar" />
                    <el-row :gutter="30" class="my_form_row">
                        <el-col :span="24">
                            <el-form-item label="备注" prop="business_department">
                                有限责任公司
                            </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="媒体文件" prop="business_department">

                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div class="splineBar" />
                    <el-row :gutter="30" class="my_form_row">
                        <el-col :span="24">
                            <el-form-item label="媒体图片" prop="business_department">

                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div class="splineBar" />
                    <el-row :gutter="30" class="my_form_row">
                        <el-col :span="24">
                            <el-form-item label="媒体视频" prop="business_department">

                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div class="splineBar" />
                    <el-row :gutter="30" class="my_form_row">
                        <el-col :span="24">
                            <el-form-item label="刊例照片" prop="business_department">

                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div class="splineBar" />
                    <el-row :gutter="30" class="my_form_row">
                        <el-col :span="24">
                            <el-form-item label="媒体链条" prop="business_department">

                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div class="splineBar" />
                    <el-row :gutter="30" class="my_form_row">
                        <el-col :span="24">
                            <el-form-item label="资质文件" prop="business_department">

                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div class="splineBar" />
                    <el-row :gutter="30" class="my_form_row">
                        <el-col :span="24">
                            <el-form-item label="盖章刊例" prop="business_department">

                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-collapse-item>
            </el-collapse>
        </el-form>
    </el-card>
</template>
<script setup>
import { onMounted, defineEmits, ref } from 'vue'
import { Close } from '@element-plus/icons-vue'

import { useBackgroundStore } from '@/store/modules/background'
import otherbg from '@/assets/images/otherbg.png'
const bgStore = useBackgroundStore()

const { proxy } = getCurrentInstance()
const emit = defineEmits(['handleShowList']);
const detailForm = ref({
    supplierList: [
        { medioName: '银川金凤区新华联广场门口上方LED', medioCode: 'MT2023101100009', medioType: 'LED', medioClass: '电子广告', medioStatus: 1 },
        { medioName: '银川金凤区新华联广场门口上方LED', medioCode: 'MT2023101100009', medioType: 'LED', medioClass: '电子广告', medioStatus: 1 }
    ]
})

const quotationList = ref([
    { year: 2025 }
])
const activeNames = ref(['1', '2', '3', '4'])
const handleClose = () => {
    emit('handleShowList')
}
const handleChange = (val) => {
    console.log(val)
    activeNames.value = val
}
const handleOpenMedio = () => {

}
// 初始化
onMounted(() => {
    bgStore.setBgImage(otherbg)
});
// 暴露方法\属性给父组件
defineExpose({

});
</script>
<style lang='scss'>
.supplierTitleContainer {
    width: 100%;
    height: 26px;
    margin-bottom: 20px;
}

.supplierNameIcon {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: #ffc63d;
    margin: 0px 10px 4px 0px;
}

.supplierNameTitle {
    display: inline-block;
    font-family: Microsoft YaHei;
    font-weight: 600;
    font-size: 22px;
    color: #1E1E1E;
}

// 分割线
.splineBar {
    width: 100%;
    height: 1px;
    background: #D9DFE5;
}

.supplierNameLabel {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #1A75E6;
    cursor: pointer;
}

.mybadge .el-badge__content.is-dot {
    width: 6px;
    height: 6px;
    background-color: #126601;
    margin-right: 10px;
}

.myMedioStatus {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #126601;
}
</style>