<script lang="ts" setup>
/**
 * @Name: DataTableSlot.vue
 * @Description: 审批查看(供货) 插槽
 * @Author: xinyan
 */

import { hasPermission } from '/@/utils/hasPermission';
import { Delete, InfoFilled, Operation } from '@element-plus/icons-vue';
import PermissionButton from '/@/components/PermissionButton/index.vue';
import { useCountryInfoStore } from '/@/stores/countryInfo';

const props = defineProps<{
	row: any;
	field: any;
}>();
const { row, field } = props;

const emit = defineEmits(['edit-row', 'handle-delete', 'handle-manage', 'show-detail']);

const countryInfoStore = useCountryInfoStore();
const country = countryInfoStore.Countries.find((c) => c.code == row.country_code);
const color = country ? country.color : '#3875F6';

const currency = countryInfoStore.CurrencyCodes.find((c) => c.code == row.currency_code);
const currencyColor = currency ? currency.color : '#626AEF';

const profit_margin = computed(() => {
	return (row.price_supply - row.price_min_cost)/row.price_min_cost*100;
})

function handleEdit() {
	emit('edit-row', row);
}

function onConfirm() {
	emit('handle-delete', row);
}
</script>

<template>
	<div class="font-semibold">
		<div v-if="field === 'operate'">
			<div class="flex justify-center gap-2">
				<div v-if="hasPermission('PRICE_SUPPLY_UPDATE')">
					<PermissionButton circle plain type="warning" @click="handleEdit">
						<el-icon>
							<Operation />
						</el-icon>
					</PermissionButton>
				</div>
				<div v-if="hasPermission('PRICE_SUPPLY_DEL')">
					<el-popconfirm :icon="InfoFilled" icon-color="#626AEF" title="你确定要删除此项吗?" width="220" @confirm="onConfirm">
						<template #reference>
							<PermissionButton circle plain type="danger">
								<el-icon>
									<Delete />
								</el-icon>
							</PermissionButton>
						</template>
						<template #actions="{ confirm, cancel }">
							<el-button size="small" @click="cancel">No!</el-button>
							<el-button size="small" type="danger" @click="confirm"> Yes?</el-button>
						</template>
					</el-popconfirm>
				</div>
			</div>
		</div>
		<div v-else-if="field === 'country_code'">
			<el-tag :disable-transitions="true" :style="{ color: color, borderColor: color }" effect="plain" round>
				{{ country ? country.name : '-' }}
			</el-tag>
		</div>
		<div v-else-if="field === 'currency_code'">
			<el-tag :disable-transitions="true" :style="{ color: currencyColor, borderColor: currencyColor }" effect="plain" round>
				{{ currency ? currency.code : '-' }}
			</el-tag>
		</div>
		<div v-else-if="field === 'profit_margin'">
			{{ profit_margin? profit_margin.toFixed(2)+'%' : '-' }}
		</div>
		<div v-else>
			{{ row[field] || '-' }}
		</div>
	</div>
</template>

<style scoped></style>
