<template>
    <div>
        <div class="search">
            <Search :SearchForm="SetMealSearchForm" @query="initData" @reset="reset"></Search>
        </div>

        <div class="addSetMeal">
            <a-button  @click="breakFlos">返回</a-button>
        </div>

        <div class="table">
            <a-table row-key="id" :data="tableData" :columns="columnsTarrit" :pagination="pagination"
                :scroll="{ x: 'auto' }" @page-change="evChangePage">
                <template #status="{ record }">
                    <a-tag :color="record.status == 1 ? '#7bc616' : '#86909c'">{{ record.status == 1 ? '上架' : '下架'
                        }}</a-tag>
                </template>
            </a-table>
        </div>

    </div>
</template>

<script setup>
import { defineEmits, defineProps, toRefs, ref, onMounted } from 'vue';
import { CheckTariffPackages } from '@/api/path/tariffManagement.api'
import { Getdictionary, tableFunction, filterDict } from '@/mixins/index.js'
import Search from '@/components/Search/index.vue'
import { columnsTarrit } from './config'
import { tariffList} from "@/api/path/tariffManagement.api"
const props = defineProps({
    id: [Array, String]
})

const emits = defineEmits(['break'])

const state = ref({
    pagination: {
        total: 0,
        pageSize: 10,
        current: 1,
        simTerminalId: null
    },
    visible: false,
    puyType: [],
    cyciy: [],
    Currency: [],
    tariffListData: [],
    billingMethodList: [],
    Type: true,
})
const { pagination, visible, puyType, Currency, cyciy, tariffListData, formRef, billingMethodList, Type } = toRefs(state.value)


const processData = (data) => {
    return (data.records || []).map((item, index) => {
        return {
            ...item,
            price: item.price + '/' + item.currency,
            typeName: item.type == 1 ? '服务时长' : "购买流量",
            profitPrice: item.profitPrice + '/' + item.currency,
            billingMethod: filterDict(billingMethodList.value, item.billingMethod),
            costPrice: item.costPrice + '/' + item.trafficCurrency,
            oldPrice: item.oldPrice + '/' + item.trafficCurrency
        }
    })
}

const { tableData, evChangePage, initData, reset } = tableFunction(pagination.value, CheckTariffPackages, processData)


const breakFlos = ()=>{
   emits('break',true)
}

onMounted(async () => {
    let dict = await Getdictionary(['RechargeType', 'PuyCycle', 'currencyType', 'billingMethod'])
    puyType.value = dict[0]
    Form.value.type = puyType.value[0]?.value
    cyciy.value = dict[1]
    Form.value.timeUnit = cyciy.value[0]?.value
    Currency.value = dict[2]
    Form.value.currency = Currency.value[0]?.value
    billingMethodList.value = dict[3]
    let res = await tariffList({ current: 1, size: 99999 })
    if (res.code === 200) {
        tariffListData.value = (res.data.records || []).map(item => {
            return {
                ...item,
                value: item.id,
                label: item.label + '---' + item.userName
            }
        })
    }
    pagination.value.simTerminalId = props.id
    initData()
})
</script>

<style scoped lang='less'>
.search,
.table {
    margin-top: 20px;
}

.addSetMeal{
    display: flex;
    justify-content: space-between;
}
</style>