<script lang="ts" setup>
/**
 * @Name: DataTableSlot.vue
 * @Description: 商品列表-单元格插槽
 * @Author: Cheney
 */

import { useCountryInfoStore } from '/@/stores/countryInfo';
import { getTagType } from '/@/utils/useTagColor';
import { Operation, Key } from '@element-plus/icons-vue';
import PermissionButton from '/@/components/PermissionButton/index.vue';


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

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

type StatusTagType = '' | 'success' | 'info' | 'warning' | 'danger';
const statusMap: Record<string, { text: string; type: StatusTagType }> = {
	open: { text: '正常', type: '' },
	closed: { text: '关闭', type: 'danger' },
	Unauthorized: { text: '授权失效', type: 'warning' },
};
const statusInfo = statusMap[row.status] ?? { text: row.status ?? '-', type: '' as StatusTagType };

const emit = defineEmits(['edit-row', 'reauthorize']);

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

function handleReauthorize() {
	emit('reauthorize', row);
}
</script>

<template>
  <div class="font-medium">
    <div v-if="field === 'region'">
      <el-tag :disable-transitions="true" :type=getTagType(row.region)>
        {{ region ? region.name : '-' }}
      </el-tag>
    </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 === 'status'">
			<el-tag :disable-transitions="true" :type="statusInfo.type" effect="plain" round>
				{{ statusInfo.text }}
			</el-tag>
		</div>
		<div v-else-if="field === 'operate'" class="flex justify-center gap-2">
			<el-tooltip :enterable="false" :show-arrow="false" content="编辑" hide-after="0"
									placement="top" popper-class="custom-btn-tooltip">
				<PermissionButton circle plain type="warning" @click="handleEdit">
					<el-icon>
						<Operation />
					</el-icon>
				</PermissionButton>
			</el-tooltip>
			<el-tooltip v-if="row.status === 'Unauthorized'" :enterable="false" :show-arrow="false" content="重新授权" hide-after="0"
									placement="top" popper-class="custom-btn-tooltip">
				<PermissionButton circle plain type="primary" @click="handleReauthorize">
					<el-icon>
						<Key />
					</el-icon>
				</PermissionButton>
			</el-tooltip>
		</div>
    <!-- 动态获取 -->
    <div v-else>
      {{ row[field] || '-' }}
    </div>
  </div>
</template>

<style scoped>

</style>
