<!-- 优势媒体报价 -->
<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" 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="left" prop="mediaYear" width="100" />
        <el-table-column label="城市/市场" align="left" prop="cityName" width="150" />
        <el-table-column label="媒体大类" align="left" prop="mediaCategory" width="150" />
        <el-table-column label="媒体形式/名称" align="left" prop="mediaName" width="200" />
        <el-table-column label="频次" align="left" prop="frequency" width="150" />
        <el-table-column label="统一对外刊例价" align="left" prop="listPrice" width="160" />
        <el-table-column label="单位" align="left" prop="listPriceUnit" width="150" />
        <el-table-column label="实际购买频次" align="left" prop="actualBuyFrequency" width="150" />
        <el-table-column label="实际购买刊例价" align="left" prop="actualBuyListPrice" width="150" />
        <el-table-column label="购买周期" align="left" prop="buyCycle" width="150" />
        <el-table-column label="折扣" align="left" prop="discount" width="150" />
        <el-table-column label="媒体总净价" align="center" prop="mediaRegularPrice" width="230" />
        <el-table-column label="总制作费" align="center" prop="totalMakeFee" width="160" />
        <el-table-column label="总净价" align="center" prop="totalRegularPrice" width="130" />
        <el-table-column label="单日覆盖人流量" align="center" prop="dailyAvgPeopleFlow" width="150" />
        <el-table-column label="SOV" align="center" prop="sov" width="150" />
        <el-table-column label="CPM" align="center" prop="cpm" width="150" />
        <el-table-column label="备注" align="center" prop="remark" width="150" />
        <el-table-column label="是否框内" align="center" prop="hasInBox" width="150">
            <template #default="scope">
                <span v-if="scope.row.hasInBox == 0">否</span>
                <span v-if="scope.row.hasInBox == 1">是</span>
            </template>
        </el-table-column>
        <el-table-column label="成本" align="center" prop="cost" width="150" />
        <el-table-column label="制作成本" align="center" prop="makeCost" width="150" />
        <el-table-column label="供应商" align="center" prop="supplier" width="150" />
        <el-table-column label="项目名称" align="left" prop="projectName" 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="操作" width="56" align="center" fixed="right" v-show="showOptionColumn">
            <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>
    </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="mediaYear">
                        <el-date-picker v-model="form.mediaYear" type="year" format="YYYY" value-format="YYYY"
                            placeholder="请选择年度" />
                    </el-form-item>
                </el-col>
                <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="mediaCategory">
                        <el-input v-model="form.mediaCategory" 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="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="actualBuyFrequency">
                        <el-input v-model="form.actualBuyFrequency" placeholder="请输入实际购买频次" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="实际购买刊例价" prop="actualBuyListPrice">
                        <el-input v-model="form.actualBuyListPrice" placeholder="请输入实际购买刊例价" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="购买周期(天)" prop="buyCycle">
                        <el-input-number v-model="form.buyCycle" placeholder="请输入购买周期(天)" style="width: 100%;" />
                    </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="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="dailyAvgPeopleFlow">
                        <el-input v-model="form.dailyAvgPeopleFlow" 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="hasInBox">
                        <el-select v-model="form.hasInBox" placeholder="请选择是否框内" clearable>
                            <el-option v-for="item in hasInBoxList" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </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="6">
                    <el-form-item label="制作成本" prop="makeCost">
                        <el-input v-model="form.makeCost" 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="12">
                    <el-form-item label="项目名称" prop="projectName">
                        <el-input v-model="form.projectName" 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 hasInBoxList = ref([
    { value: 0, label: '否' },
    { value: 1, label: '是' },
])
const data = reactive({
    form: {},
    rules: {
        mediaYear: [{ required: true, message: "请输入年度", trigger: "change" }],
        cityName: [{ required: true, message: "请输入城市/市场", trigger: "blur" }],
        mediaCategory: [{ required: true, message: "请输入媒体大类", trigger: "blur" }],
        mediaName: [{ required: true, message: "请输入媒体形式/名称", trigger: "blur" }],
        frequency: [{ required: true, message: "请输入频次", trigger: "blur" }],
        listPrice: [{ required: true, message: "请输入统一对外刊例价", trigger: "blur" }],
        listPriceUnit: [{ required: true, message: "请输入单位", trigger: "blur" }],
        actualBuyFrequency: [{ required: true, message: "请输入实际购买频次", trigger: "blur" }],
        actualBuyListPrice: [{ required: true, message: "请输入实际购买刊例价", trigger: "blur" }],
        buyCycle: [{ required: true, message: "请输入购买周期(天)", trigger: "change" }],
        discount: [{ required: true, message: "请输入折扣", trigger: "blur" }],
        mediaRegularPrice: [{ required: true, message: "请输入媒体总净价(元/购买周期)", trigger: "blur" }],
        totalMakeFee: [{ required: true, message: "请输入总制作费(元/次)", trigger: "blur" }],
        totalRegularPrice: [{ required: true, message: "请输入总净价", trigger: "blur" }],
        dailyAvgPeopleFlow: [{ required: true, message: "请输入单日覆盖人流量", trigger: "blur" }],
        sov: [{ required: true, message: "请输入SOV", trigger: "blur" }],
        cpm: [{ required: true, message: "请输入CPM", trigger: "blur" }],
        hasInBox: [{ required: true, message: "请输入是否框内", trigger: "change" }],
        cost: [{ required: true, message: "请输入成本", trigger: "blur" }],
        makeCost: [{ required: true, message: "请输入制作成本", trigger: "blur" }],
        supplier: [{ required: true, message: "请输入供应商", trigger: "blur" }],
        projectName: [{ 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 = 0
    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', 0, 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', 0, quotationList.value)
        }
    })
}
// 获取历史报价
const getMediaPrice = (_mediaId, _showOptionColumn) => {
    showOptionColumn.value = _showOptionColumn
    if (_mediaId) {
        mediaPrice({ mediaId: _mediaId }).then(res => {
            console.log('历史报价', res)
            quotationList.value = res.data.filter(item => item.fileType == 0)
        })
    }
}
// 暴露方法\属性给父组件
defineExpose({
    getMediaPrice
});
</script>