<!-- 高铁 -->
<template>
    <el-button type="primary" class="submitBtn" v-show="showOptionColumn" style="margin-bottom: 10px;" @click="handleAddPrice">添加报价信息</el-button>
    <el-table v-loading="loading" :data="quotationList" border height="362px">
        <el-table-column label="序号" align="center" width="60">
            <template #default="scope">
                {{ scope.$index + 1 }}
            </template>
        </el-table-column>
        <el-table-column label="城市" align="center" prop="cityName" width="90" />
        <el-table-column label="场站" align="center" prop="station" width="130" />
        <el-table-column label="媒体位置" align="left" prop="mediaName" width="150" />
        <el-table-column label="频次" align="center" prop="frequency" width="100" />
        <el-table-column label="发布总量" align="right" prop="releaseTotal" width="120" />
        <el-table-column label="刊例价" align="right" prop="listPrice" width="120" />
        <el-table-column label="刊例价单位" align="center" prop="listPriceUnit" width="120" />
        <el-table-column label="购买周期" align="right" prop="buyCycle" width="120" />
        <el-table-column label="折扣" align="center" prop="discount" width="100" />
        <el-table-column label="媒体总净价" align="right" prop="mediaRegularPrice" width="120" />
        <el-table-column label="首次制作安装费" align="right" prop="firstInstallFee" width="150" />
        <el-table-column label="总制作费" align="right" prop="totalMakeFee" width="130" />
        <el-table-column label="总净价" align="right" prop="totalRegularPrice" width="120" />
        <el-table-column label="总净价单位" align="center" prop="totalRegularPriceUnit" width="130" /> 
        <el-table-column label="客流量/人次" align="center" prop="dailyAvgPeopleFlow" width="130" />
        <el-table-column label="总曝光/人次" align="center" prop="totalExposure" width="130" />
        <el-table-column label="SOV" align="center" prop="sov" width="100" />
        <el-table-column label="CPM" align="center" prop="cpm" width="100" />
        <el-table-column label="成本折扣" align="center" prop="costDiscount" width="100" />
        <el-table-column label="成本" align="right" prop="cost" width="120" />
        <el-table-column label="备注" align="left" prop="remark" width="230" :show-overflow-tooltip="true" />
        <el-table-column label="录入人员" align="center" prop="createBy" width="100" />
        <el-table-column label="录入时间" align="center" prop="createTime" width="210" />
       <template v-if="showOptionColumn">
            <el-table-column label="操作" width="56" align="center" fixed="right">
                <template #default="scope">
                    <el-popover popper-class="my_popover" placement="left-start">
                        <div class="popBtns" @click="handleUpdate(scope.$index, scope.row)">修改</div>
                        <div class="popBtns" @click="handleDelete(scope.$index)">删除</div>
                        <template #reference>
                            <img style="cursor: pointer;" :src="scope.row.currentImageSrc"
                                @mouseenter="scope.row.currentImageSrc = hoverImageSrc"
                                @mouseleave="scope.row.currentImageSrc = defaultImageSrc" />
                        </template>
                    </el-popover>
                </template>
            </el-table-column>
        </template>
    </el-table>

    <!-- 报价表单 -->
    <el-dialog :title="_title" v-model="open" width="1350px" class="my_dialog" align-center :destroy-on-close="true"
        :close-on-click-modal="false">
        <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="150px" label-position="top"
            class="myInsertForm">
            <el-row :gutter="30" class="my_form_row">
                <el-col :span="6">
                    <el-form-item label="城市" prop="cityName">
                        <el-input v-model="form.cityName" placeholder="请输入城市" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="场站" prop="station">
                        <el-input v-model="form.station" placeholder="请输入场站" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="媒体位置" prop="mediaName">
                        <el-input v-model="form.mediaName" placeholder="请输入媒体位置" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="频次" prop="frequency">
                        <el-input v-model="form.frequency" placeholder="请输入频次" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="发布总量" prop="releaseTotal">
                        <el-input v-model="form.releaseTotal" placeholder="请输入发布总量" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="刊例价" prop="listPrice">
                        <el-input v-model="form.listPrice" placeholder="请输入刊例价" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="刊例价单位" prop="listPriceUnit">
                        <el-input v-model="form.listPriceUnit" placeholder="请输入刊例价单位" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="购买周期" prop="buyCycle">
                        <el-input v-model="form.buyCycle" placeholder="请输入购买周期" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="折扣" prop="discount">
                        <el-input v-model="form.discount" placeholder="请输入折扣" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="媒体总净价" prop="mediaRegularPrice">
                        <el-input v-model="form.mediaRegularPrice" placeholder="请输入媒体总净价" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="首次制作安装费" prop="firstInstallFee">
                        <el-input v-model="form.firstInstallFee" placeholder="请输入首次制作安装费" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="总制作费" prop="totalMakeFee">
                        <el-input v-model="form.totalMakeFee" placeholder="请输入总制作费" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="总净价" prop="totalRegularPrice">
                        <el-input v-model="form.totalRegularPrice" placeholder="请输入总净价" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="总净价单位" prop="totalRegularPriceUnit">
                        <el-input v-model="form.totalRegularPriceUnit" placeholder="请输入总净价单位" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="客流量/人次" prop="dailyAvgPeopleFlow">
                        <el-input v-model="form.dailyAvgPeopleFlow" placeholder="请输入客流量/人次" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="总曝光/人次" prop="totalExposure">
                        <el-input v-model="form.totalExposure" placeholder="请输入总曝光/人次" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="SOV" prop="sov">
                        <el-input v-model="form.sov" placeholder="请输入SOV" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="CPM" prop="cpm">
                        <el-input v-model="form.cpm" placeholder="请输入CPM" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="成本折扣" prop="costDiscount">
                        <el-input v-model="form.costDiscount" placeholder="请输入成本折扣" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="成本" prop="cost">
                        <el-input v-model="form.cost" placeholder="请输入成本" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="供应商" prop="supplier">
                        <el-input v-model="form.supplier" placeholder="请输入供应商" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="form.remark" :rows="5" type="textarea" placeholder="请输入备注"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button class="my-cancel-btn" @click="open = false">取 消</el-button>
                <el-button class="my-confirm-btn" type="primary" @click="handleSubmit">确 定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { onMounted, nextTick, defineEmits, ref } from 'vue'
import optionIcon from '@/assets/images/optionIcon.png'
import optionIconHover from '@/assets/images/optionIconHover.png'
import { mediaPrice } from "@/api/mediaLibrary"

const emit = defineEmits(['setCompetOfferMediaPrice']);
const { proxy } = getCurrentInstance()
const editRowIndex = ref(null)
const showOptionColumn = ref(true)
// 报价表格操作图标
const defaultImageSrc = ref(optionIcon);
const hoverImageSrc = ref(optionIconHover);
const _title = ref(null)
const open = ref(false)
const data = reactive({
    form: {},
    rules: {
        cityName: [{ required: true, message: "请输入城市", trigger: "blur" }],
        station: [{ required: true, message: "请输入场站", trigger: "blur" }],
        mediaName: [{ required: true, message: "请输入媒体位置", trigger: "blur" }],
        frequency: [{ required: true, message: "请输入频次", trigger: "blur" }],
        releaseTotal: [{ required: true, message: "请输入发布总量", trigger: "blur" }],
        listPrice: [{ required: true, message: "请输入刊例价", trigger: "blur" }],
        listPriceUnit: [{ required: true, message: "请输入刊例价单位", trigger: "blur" }],
        buyCycle: [{ required: true, message: "请输入购买周期", trigger: "blur" }],
        discount: [{ required: true, message: "请输入折扣", trigger: "blur" }],
        mediaRegularPrice: [{ required: true, message: "请输入媒体总净价", trigger: "blur" }],
        firstInstallFee: [{ required: true, message: "请输入首次制作安装费", trigger: "blur" }],
        totalMakeFee: [{ required: true, message: "请输入总制作费", trigger: "blur" }],
        totalRegularPrice: [{ required: true, message: "请输入总净价", trigger: "blur" }],
        totalRegularPriceUnit: [{ required: true, message: "请输入总净价单位", trigger: "blur" }],
        dailyAvgPeopleFlow: [{ required: true, message: "请输入客流量/人次", trigger: "blur" }],
        totalExposure: [{ required: true, message: "请输入总曝光/人次", trigger: "blur" }],
        sameSiteMediaNum: [{ required: true, message: "请输入同站内同类媒体数量或列车总量", trigger: "blur" }],
        sov: [{ required: true, message: "请输入SOV", trigger: "blur" }],
        cpm: [{ required: true, message: "请输入CPM", trigger: "blur" }],
        costDiscount: [{ required: true, message: "请输入成本折扣", trigger: "blur" }],
        cost: [{ required: true, message: "请输入成本", trigger: "blur" }],
        supplier: [{ required: true, message: "请输入供应商", trigger: "blur" }],
        remark: [{ required: true, message: "请输入备注", trigger: "blur" }]
    }
})
const { form, rules } = toRefs(data)
// 报价信息列表
const loading = ref(false)
const quotationList = ref([])
const handleAddPrice = () => {
    _title.value = '添加报价信息'
    form.value.mediaType = 5
    open.value = true
}
const handleUpdate = (index, row) => {
    _title.value = '编辑报价信息'
    editRowIndex.value = index
    form.value = row
    open.value = true
}
const handleDelete = (index) => {
    proxy.$modal.confirm('是否确认删除这条报价信息吗？').then(() => {
        quotationList.value.splice(index, 1)
        emit('setCompetOfferMediaPrice', 5, quotationList.value)
        proxy.$modal.msgSuccess("删除成功")
    }).catch(() => { })

}
const handleSubmit = () => {
    proxy.$refs["ruleFormRef"].validate(valid => {
        if (valid) {
            form.value.currentImageSrc = defaultImageSrc.value
            if (editRowIndex.value !== null && editRowIndex.value !== undefined) {
                quotationList.value[editRowIndex.value] = form.value
            } else {
                quotationList.value.push(form.value)
            }
            form.value = {}
            open.value = false
            emit('setCompetOfferMediaPrice', 5, quotationList.value)
        }
    })
}
// 获取历史报价
const getMediaPrice = (_mediaId, _showOptionColumn) => {
    showOptionColumn.value = _showOptionColumn
    if (_mediaId) {
        mediaPrice({ mediaId: _mediaId }).then(res => { 
            quotationList.value = res.data.filter(item => item.mediaType == 5)
            quotationList.value.forEach(element => {
                element.currentImageSrc = defaultImageSrc.value
            });
        })
    }
}
// 暴露方法\属性给父组件
defineExpose({
    getMediaPrice
});
</script>