<template>
	<pi-table ref="tableRef" :api="api.system.translation.list" @selection-change="selectionChange">
		<template #do>
			<el-button v-auth="'translation:add'" type="primary" icon="el-icon-plus" @click="add"></el-button>
			<el-button v-auth="'translation:edit'" type="success" icon="el-icon-edit" @click="edit"
					   :disabled="selection.length!==1"></el-button>
			<el-button v-auth="'translation:del'" type="danger" plain icon="el-icon-delete"
					   :disabled="selection.length===0" @click="batch_del"></el-button>
		</template>
		<template #search>
			<pi-select v-model="search.group" :api="api.system.dict_data.option" :params="{key: 'sys_langs_group'}"
					   :props="{label: 'dict_label', value: 'dict_value'}" style="width: 200px;"></pi-select>
			<el-input v-model="search.translation_key" placeholder="key" clearable style="width: 200px;"></el-input>
			<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
		</template>
		<el-table-column type="selection" width="50"></el-table-column>
		<el-table-column label="ID" prop="translation_id" width="60"></el-table-column>
		<el-table-column label="分组" prop="group" width="120"></el-table-column>
		<el-table-column label="key" prop="translation_key" width="120"></el-table-column>
		<el-table-column label="描述" prop="remark" width="150"></el-table-column>
		<el-table-column v-for="item in langs" :key="item.dict_value" :label="item.dict_label + item.dict_value"
						 :prop="item.dict_value" width="180">
			<template #default="scope">
				{{getValue(scope.row, item)}}
			</template>
		</el-table-column>
		<el-table-column label="创建时间" prop="create_time"></el-table-column>
		<el-table-column label="更新时间" prop="update_time"></el-table-column>
		<el-table-column label="操作" fixed="right" align="right" width="170">
			<template #default="scope">
				<el-button-group>
					<el-button text type="primary" size="small" @click="show(scope.row, scope.$index)">查看
					</el-button>
					<el-button v-auth="'translation:edit'" text type="success" size="small"
							   @click="edit(scope.row, scope.$index)">编辑
					</el-button>
					<el-popconfirm title="确定删除吗？" @confirm="del(scope.row, scope.$index)">
						<template #reference>
							<el-button v-auth="'translation:del'" text type="danger" size="small">删除</el-button>
						</template>
					</el-popconfirm>
				</el-button-group>
			</template>
		</el-table-column>
	</pi-table>
	<el-drawer v-model="drawerShow" :size="450" title="翻译管理" destroy-on-close :close-on-click-modal="false">
		<save ref="saveRef" @success="tableRef.refresh()" @closed="drawerShow=false"></save>
	</el-drawer>
</template>

<script setup>
import save from './save'
import api from "@/api/index";
import {getCurrentInstance, nextTick, ref, onMounted} from "vue";

defineOptions({
	name: "translation"
})

const {proxy} = getCurrentInstance()
const tableRef = ref(null)
const saveRef = ref(null)

let langs = ref([])
let drawerShow = ref(false)
let selection = ref([])
let search = ref({
	group: null,
	translation_key: null,
})

onMounted(() => {
	loadLangs()
})

function getValue(row, item) {
	let arr = {}
	row.values.forEach(i => {
		if (langs.value.map(j => j.dict_value).includes(i.lang_code)) {
			arr[i.lang_code] = i.lang_value
		}
	})
	return arr[item.dict_value];
}

async function loadLangs() {
	const res = await api.system.dict_data.option({key: 'sys_langs'})
	langs.value = res.data
}

//添加
function add() {
	drawerShow.value = true
	nextTick(() => {
		saveRef.value.setLangs(langs.value).open()
	})
}

//编辑
function edit(row) {
	drawerShow.value = true
	nextTick(() => {
		if (row instanceof PointerEvent) {
			row = selection.value[0]
		}
		saveRef.value.setLangs(langs.value).open('edit', row)
	})
}

//查看
function show(row) {
	drawerShow.value = true
	nextTick(() => {
		saveRef.value.setLangs(langs.value).open('show', row)
	})
}

//删除
async function del(row) {
	const loading = proxy.$loading();
	const res = await api.system.translation.del({ids: [row.translation_id]});
	tableRef.value.refresh()
	loading.close();
	proxy.$message.success(res.msg)
}

//批量删除
async function batch_del() {
	proxy.$confirm(`确定删除选中的 ${selection.value.length} 项吗？如果删除项中含有子集将会被一并删除`, '提示', {
		type: 'warning'
	}).then(async () => {
		const loading = proxy.$loading();
		const res = await api.system.translation.del({ids: selection.value.map(item => item.translation_id)});
		tableRef.value.refresh()
		loading.close();
		proxy.$message.success(res.msg)
	})
}

//表格选择后回调事件
function selectionChange(e) {
	selection.value = e;
}

//搜索
function upsearch() {
	tableRef.value.upData(search.value)
}
</script>
