<template>
	<div>
		<el-dialog v-model="dialogVisible" :close-on-click-modal="false" draggable width="1200px" height="500px">
			<el-card :body-style="cardBodyStyle">
				<el-form inline :model="query">
					<el-form-item label="合作方名称" style="margin-bottom: 5px;">
						<el-input v-model="query.tradePartnerName" style="width: 200px; margin-right: 10px;"
							placeholder="请输入" clearable></el-input>
					</el-form-item>
					<el-form-item label="客商类别" style="margin-bottom: 5px;">
						<el-select v-if="tpTypeShow" v-model="query.tpType" style="width: 200px; margin-right: 10px;"
							placeholder="请输入" clearable>
							<el-option v-for="item in dictList.TP_TYPE" :key="item.dicCode" :label="item.dicName"
								:value="item.dicCode" />
						</el-select>
					</el-form-item>
				</el-form>
			</el-card>

			<el-card :body-style="cardBodyStyle">
				<el-button plain type="primary" @click="search">查询</el-button>
			</el-card>

			<el-card :body-style="cardBodyStyle">
				<el-table :data="tableData" border highlight-current-row>
					<!--          <el-table-column v-for="(item, index) in column" :key="index" :prop="item.prop" :label="item.label"-->
					<!--                           header-align="center" align="center" show-overflow-tooltip>-->
					<!--          </el-table-column>-->
					<el-table-column v-if="true" prop="tradePartnerName" label="合作方名称" width="150" header-align="center"
						align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column v-if="true" prop="tradePartnerCode" label="合作方名编码" width="150"
						header-align="center" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column v-if="true" prop="shortname" label="合作方简称" width="150" header-align="center"
						align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column v-if="true" prop="status" label="状态" width="100" header-align="center"
						align="center" show-overflow-tooltip>
						<template #default="scope">
							<Selector :value="scope.row.status" :optionList="dictList.START_STATUS">
							</Selector>
						</template>
					</el-table-column>
					<el-table-column v-if="true" prop="tpStyle" label="客商性质" width="150" header-align="center"
						align="center" show-overflow-tooltip>
						<template #default="scope">
							<Selector :value="scope.row.tpStyle" :optionList="dictList.TP_STYLE">
							</Selector>
						</template>
					</el-table-column>
					<el-table-column v-if="true" prop="tpTypeListStrDic" label="客商类别" width="150" header-align="center"
						align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column v-if="true" prop="contry" label="国别" width="120" header-align="center"
						align="center" show-overflow-tooltip>
						<template #default="scope">
							<Selector :value="scope.row.contry" :optionList="dictList.COUNTRY_CODE">
							</Selector>
						</template>
					</el-table-column>
					<el-table-column v-if="true" prop="provice" label="省份" width="120" header-align="center"
						align="center" show-overflow-tooltip>
						<template #default="scope">
							<Selector :value="scope.row.provice" :optionList="dictList.PROVINCE_CODE">
							</Selector>
						</template>
					</el-table-column>
					<el-table-column v-if="true" prop="addr" label="地址" width="150" header-align="center" align="center"
						show-overflow-tooltip>
					</el-table-column>

					<el-table-column label="操作" header-align="center" align="center" show-overflow-tooltip fixed="right"
						width="200px">
						<template #default="scope">
							<el-button plain @click="handleSelect(scope.row)">选择</el-button>
						</template>
					</el-table-column>
				</el-table>

				<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="pageSizes"
					:total="totalRows" background="background" layout="total, sizes, prev, pager, next, jumper"
					@size-change="handleSizeChange" @current-change="handleCurrentChange">
				</el-pagination>
			</el-card>
		</el-dialog>
	</div>
</template>

<script setup>

import {
	ref,
	onMounted,
	watch,
	getCurrentInstance
} from 'vue'

const {
	proxy
} = getCurrentInstance()

import tools from '@/tools'
import Selector from "@/views/sal/components/Selector_text.vue";

const cardBodyStyle = ref(tools.style.card)

const dialogVisible = ref(false)
const open = () => {
	query.value.tradePartnerName = props.tradePartnerName
	query.value.tpType = props.tpType
	dialogVisible.value = true
}
const close = () => {
	dialogVisible.value = false
}

const props = defineProps({
	column: { // form查询项
		type: Array,
		default: () => [
			{
				prop: 'tradePartnerName',
				label: '合作方名称',
			},
			{
				prop: 'tradePartnerCode',
				label: '合作方名编码',
			},
			{
				prop: 'shortname',
				label: '合作方简称',
			},
			{
				prop: 'status',
				label: '状态',
			},
			{
				prop: 'contry',
				label: '国别',
			},
			{
				prop: 'provice',
				label: '省份',
			},
			{
				prop: 'addr',
				label: '地址',
			},
			{
				prop: 'tpStyle',
				label: '客商性质',
			},
		]
	},
	// tableData: { // form查询数据
	//   type: Array,
	//   default: () => []
	// },
	url: { // form查询数据
		type: String,
		default: 'bas/Partner/query'
	},
	tradePartnerName: { // form查询数据
		type: String,
		default: ''
	},
	tpType: { // form查询数据
		type: String,
		default: ''
	},
	tpTypeShow: { // form查询数据
		type: Boolean,
		default: false
	},
})
const query = ref({
	tradePartnerName: props.tradePartnerName,
	tpType: props.tpType
})



const emit = defineEmits(['receiveFromChild'])
const handleSelect = (row) => {

	emit('receiveFromChild', row)
	close()
}
const currentPage = ref(1)
const pageSize = ref(10)
const pageSizes = ref([10, 20, 30, 40])
const tableData = ref([])
const totalRows = ref()
const initTableData = () => {
	var url = props.url
	var param = {
		page: currentPage.value,
		rows: pageSize.value,
		status: '0',
		tradePartnerName: query.value.tradePartnerName,
		tpType: query.value.tpType,
	}

	proxy.$axios.get(url, param).then(response => {
		if (response.data.code == '0') {
			tableData.value = response.data.data.records
			totalRows.value = response.data.data.total
		} else {
			ElMessage.error('操作失败！' + response.data.msg)
		}
	})
}

const search = () => {
	initTableData()
}
const handleSizeChange = (val) => {
	pageSize.value = val
	initTableData()
}
const handleCurrentChange = (val) => {
	currentPage.value = val
	initTableData()
}

const dictList = ref({})
const dictData = () => {
	var url = 'framework/Common/querySelectorList'
	var param = {
		type: JSON.stringify(['TP_STYLE', 'TP_TYPE', 'COUNTRY_CODE', 'PROVINCE_CODE', 'START_STATUS'])
	}
	proxy.$axios.get(url, param).then(response => {
		if (response.data.code == '0') {
			dictList.value = response.data.data
		} else {
			ElMessage.error('操作失败！' + response.data.msg)
		}
	})

}

onMounted(() => {
	initTableData()
	dictData()
})
watch(dialogVisible, (newValue, oldValue) => {
	if (newValue) {
		initTableData()
	} else {

	}
})
defineExpose({
	open,
	close
})
</script>

<style></style>
