<template>
	<div class="business-coop-management">
		<!-- Search input -->
		<div class="search-container">
			<a-input-search v-model:value="searchKeyword" placeholder="请输入关键字" style="width: 320px" @search="getTable" @change="handleChangeSearch" allowClear />
		</div>

		<!-- Business coop table -->
		<a-table :columns="columns" :data-source="businessCoopList" :scroll="{ x: 1200, y: tableHeight }" :pagination="false" :loading="loading" @change="handleTableChange" rowKey="id">
			<!-- Serial number column -->
			<template #bodyCell="{ column, record, index }">
				<template v-if="column.dataIndex === 'serialNumber'">
					<div>
						{{ index + 1 }}
					</div>
				</template>

				<!-- 单位名称 -->
				<template v-else-if="column.dataIndex === 'companyName'">
					{{ record.companyName || "-" }}
				</template>

				<!-- 姓名 -->
				<template v-else-if="column.dataIndex === 'userName'">
					{{ record.userName || "-" }}
				</template>

				<!-- 手机号 -->
				<template v-else-if="column.dataIndex === 'tel'">
					{{ record.tel || "-" }}
				</template>

				<!-- 来源 -->
				<template v-else-if="column.dataIndex === 'recordType'">
					{{ coopTypeMap[record.recordType] || "-" }}
				</template>

				<!-- 地址 -->
				<template v-else-if="column.dataIndex === 'address'">
					{{ record.address || "-" }}
				</template>

				<!-- 营业执照 -->
				<template v-if="column.dataIndex === 'businessLicensePic'">
					<a-image :src="record.businessLicensePic || defaultImage" class="image-cell" alt="Business License" />
				</template>

				<!-- 门头照片 -->
				<template v-if="column.dataIndex === 'companyPic'">
					<a-image :src="record.companyPic || defaultImage" class="image-cell" alt="Storefront Photo" />
				</template>
				<!-- 备注 -->
				<template v-else-if="column.dataIndex === 'desp'">
					{{ record.desp || "-" }}
				</template>

				<!-- Operation column -->
				<template v-if="column.dataIndex === 'operate'">
					<a href="javascript:" @click="showExamineModal(record)">审核</a>
				</template>
			</template>
		</a-table>

		<!-- Pagination -->
		<div class="g_pb_16 g_pt_16 g_pageBottom" v-if="businessCoopList.length > 0">
			<a-pagination v-model:current="pagination.current" v-model:page-size="pagination.pageSize" :total="pagination.total" :pageSize="pagination.pageSize" :show-total="(total) => `共 ${total} 条`" @change="handlePageChange" :showSizeChanger="true" :show-quick-jumper="pagination.count < businessCoopList.length ? false : true" :hideOnSinglePage="false" />
		</div>

		<!-- Examine modal -->
		<a-modal :visible="entryShowExamine" wrapClassName="zindex1001" :bodyStyle="{ height: '70vh', overflow: 'auto' }" :title="modalTitle" ok-text="确认" width="800px" dialogClass="mmpp" cancel-text="取消" @ok="entryClickExamine" @cancel="entryShowExamine = false" destroyOnClose :confirmLoading="entryShowExamineLoading">
			<a-form :selfUpdate="true" :form="entryFormExamine" :label-col="formItemLayout1.labelCol" :wrapper-col="formItemLayout1.wrapperCol">
				<a-form-item :label-col="formItemLayout1.labelCol" :wrapper-col="formItemLayout1.wrapperCol" label="企业名称">
					<a-input v-model:value="formState.agencyName" autocomplete="off" placeholder="请输入企业名称" />
				</a-form-item>
				<a-form-item :label-col="formItemLayout1.labelCol" :wrapper-col="formItemLayout1.wrapperCol" label="联系人">
					<a-input v-model:value="formState.userName" autocomplete="off" placeholder="请输入联系人" />
				</a-form-item>
				<a-form-item :label-col="formItemLayout1.labelCol" :wrapper-col="formItemLayout1.wrapperCol" label="手机号：">
					<a-input v-model:value="formState.tel" autocomplete="off" placeholder="请输入手机号" />
				</a-form-item>
				<a-form-item label="菜单模板">
					<a-select :showArrow="true" disabled :allowClear="true" style="width: 100%" @change="handleChange" placeholder="请选择菜单模板" v-model:value="formState.menuGroupIds">
						<a-select-option :value="item.value" v-for="(item, index) in templateList" :key="index">{{ item.text }}</a-select-option>
					</a-select>
				</a-form-item>

				<a-form-item :label-col="formItemLayout1.labelCol" :wrapper-col="formItemLayout1.wrapperCol" label="门店数量">
					<a-input-number disabled :precision="0" :min="0" style="width: 100%" :max="100000" v-model:value="formState.shopNum" autocomplete="off" placeholder="请输入门店数量" />
				</a-form-item>

				<a-form-item :label-col="formItemLayout1.labelCol" :wrapper-col="formItemLayout1.wrapperCol" label="企业地址">
					<div class="display-flex">
						<span style="max-width: 475px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{ formState.address }}</span>

						<span class="iconfont icon-dizhi f14" style="color: #999; line-height: 32px; margin-left: 6px; cursor: pointer" v-if="!formState.address" @click="showMapModal()"></span>

						<span class="iconfont icon-dizhi f14" v-if="formState.address" style="color: #1890ff; line-height: 32px; margin-left: 6px; cursor: pointer" @click="showMapModal()"></span>
					</div>
				</a-form-item>

				<a-form-item :label-col="formItemLayout1.labelCol" :wrapper-col="formItemLayout1.wrapperCol" label="客户标签">
					<a-checkbox-group disabled :options="plainOptions" v-model:value="formState.channelItemType" style="width: 100%"> </a-checkbox-group>
				</a-form-item>
				<a-form-item :label-col="formItemLayout1.labelCol" :wrapper-col="formItemLayout1.wrapperCol" label="客户类型">
					<a-radio-group disabled v-model:value="formState.classify">
						<a-radio value="1"> 普通商家 </a-radio>
						<a-radio value="2"> 行业商家 </a-radio>
						<a-radio value="3"> 服务商 </a-radio>
						<a-radio value="4"> 一般用户 </a-radio>
					</a-radio-group>
				</a-form-item>
				<a-form-item :label-col="formItemLayout1.labelCol" :wrapper-col="formItemLayout1.wrapperCol" label="客户经理">
					<a-select :allowClear="true" style="width: 100%" placeholder="请选择客户经理" v-model:value="formState.pmdUserId">
						<a-select-option :value="item.value" v-for="(item, index) in pmdUserArray" :key="index">{{ item.text }}</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item :label-col="formItemLayout1.labelCol" :wrapper-col="formItemLayout1.wrapperCol" label="询单客服">
					<a-select mode="multiple" :showArrow="true" :allowClear="true" style="width: 100%" placeholder="请选择询单客服" v-model:value="formState.consultUserIds">
						<a-select-option :value="item.value" v-for="(item, index) in consultUsersArrModal" :key="index">{{ item.text }}</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item :label-col="formItemLayout1.labelCol" :wrapper-col="formItemLayout1.wrapperCol" label="客户拓展">
					<a-select :allowClear="true" style="width: 100%" placeholder="请选择客户拓展" v-model:value="formState.channelExpansiontId">
						<a-select-option :value="item.value" v-for="(item, index) in channelExpansiontArrayNew" :key="index">{{ item.text }}</a-select-option>
					</a-select>
				</a-form-item>

				<a-form-item :label-col="formItemLayout1.labelCol" :wrapper-col="formItemLayout1.wrapperCol" label="备注">
					<a-textarea v-model:value="formState.desp" placeholder="请输入备注" :auto-size="{ minRows: 3, maxRows: 5 }" />
				</a-form-item>
			</a-form>
		</a-modal>

		<!-- Image view modal -->
		<a-modal :visible="imageModalVisible" title="查看图片" @ok="imageModalVisible = false" @cancel="imageModalVisible = false">
			<img :src="currentImage" alt="Image" style="max-width: 100%; max-height: 80vh" />
		</a-modal>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import { message } from "ant-design-vue";
import { getBusinessCoopList, addAgency, getTemplateList, getChannelUserList } from "@/api/businessCoop";

// State
const searchKeyword = ref("");
const loading = ref(false);
const businessCoopList = ref([]);
const pagination = reactive({
	current: 1,
	pageSize: 10,
	total: 0,
	showSizeChanger: true,
	showTotal: (total) => `共 ${total} 条`,
});
const defaultImage = "http://matripe.oss-cn-beijing.aliyuncs.com/defaultMountain.png";
// Search form
const searchForm = reactive({
	pageNum: 1,
	pageSize: 10,
	keyword: "",
});

const coopTypesArray = [
	{ id: 1, name: "招人", value: "1", text: "招人" },
	{ id: 2, name: "送人", value: "2", text: "送人" },
	{ id: 3, name: "配套资源", value: "3", text: "配套资源" },
];

const coopTypeMap = Object.fromEntries(coopTypesArray.map((item) => [item.value, item.text]));

// Table columns
const columns = [
	{ title: "序号", dataIndex: "serialNumber", width: 60 },
	{ title: "单位名称", dataIndex: "companyName", ellipsis: true, width: 200 },
	{ title: "姓名", dataIndex: "userName", ellipsis: true, width: 120 },
	{ title: "手机号", dataIndex: "tel", width: 140 },
	{ title: "来源", dataIndex: "recordType", width: 80 },
	{ title: "地址", dataIndex: "address", ellipsis: true, width: 200 },
	{ title: "营业执照", dataIndex: "businessLicensePic", width: 90 },
	{ title: "门头照片", dataIndex: "companyPic", width: 90 },
	{ title: "备注", dataIndex: "desp", ellipsis: true },
	{ title: "创建时间", dataIndex: "createTime", width: 180 },
	{ title: "操作", dataIndex: "operate", width: 80 },
];

// Examine modal state
const entryShowExamine = ref(false);
const entryShowExamineLoading = ref(false);
const modalTitle = ref("审核信息");
const formState = reactive({
	agencyName: "",
	userName: "",
	tel: "",
	menuGroupIds: "",
	shopNum: 1,
	channelItemType: "2",
	classify: "1",
	pmdUserId: null,
	consultUserIds: ['315767'],
	channelExpansiontId: '315986',
	address: "",
	lngLatStr: "",
	updateContactTime: 0,
	desp: "",
});

// Form item layout
const formItemLayout1 = reactive({
	labelCol: { span: 6 },
	wrapperCol: { span: 16 },
});

// Template list
const templateList = ref([]);

// Customer tag options
const plainOptions = [
	{
		label: "达人",
		value: "1",
		flag: false,
		color: "pink",
	},
	{
		label: "网招",
		value: "3",
		flag: false,
		color: "blue",
	},
	{
		label: "门店",
		value: "2",
		flag: false,
		color: "purple",
	},
	{
		label: "个人",
		value: "0",
		flag: false,
		color: "orange",
	},
	{
		label: "校园",
		value: "4",
		flag: false,
		color: "green",
	},
];

// Customer manager list
const pmdUserArray = ref([]);

// Inquiry customer service list
const consultUsersArrModal = [
	{
		text: "熊猫/黄乐",
		value: "322221",
	},
	{
		text: "芍药/客服小田",
		value: "322023",
	},
	{
		text: "张南",
		value: "315128",
	},
	{
		text: "赵林",
		value: "315767",
	},
];

// Customer expansion list
const channelExpansiontArrayNew = [
	{
		text: "老王/王涵光",
		value: "315986",
	},
];

// Image view modal state
const imageModalVisible = ref(false);
const currentImage = ref("");

const tableHeight = ref(552);
window.addEventListener("resize", () => {
	tableHeight.value = window.innerHeight - 381;
});

// Methods
const getTable = async () => {
	searchForm.keyword = searchKeyword.value;
	searchForm.pageNum = 1;
	pagination.current = 1;
	await fetchBusinessCoopList();
};

const handleChangeSearch = () => {
	searchForm.keyword = searchKeyword.value;
};

const fetchBusinessCoopList = async () => {
	loading.value = true;
	try {
		const response = await getBusinessCoopList(searchForm);

		if (response.status == 200) {
			// const { recordList, recordCount } = response.data.pageBean;
			businessCoopList.value = response.data.recordList;
			pagination.total = response.data.recordCount;
		}
	} catch (error) {
		console.error("Failed to fetch business coop list:", error);
		message.error("获取合作列表失败");
	} finally {
		loading.value = false;
	}
};

const handleTableChange = (pag) => {
	pagination.current = pag.current;
	searchForm.pageNum = pag.current;
	fetchBusinessCoopList();
};

const handlePageChange = (page) => {
	pagination.current = page;
	searchForm.pageNum = page;
	fetchBusinessCoopList();
};

const showExamineModal = (record) => {
	// Pre-fill form data if needed
	formState.agencyName = record.companyName || "";
	formState.userName = record.userName || "";
	formState.tel = record.tel || "";
	formState.address = record.address || "";
	entryShowExamine.value = true;
};

const entryClickExamine = async () => {
   // 将 consultUserIds 数组转为逗号分隔的字符串
   const consultUserIdsStr = formState.consultUserIds.join(",");

    // 构造最终提交的数据
    const submitData = {
      ...formState,
      consultUserIds: consultUserIdsStr,
    };
	entryShowExamineLoading.value = true;
	try {
		await addAgency(formState);
    // await addAgency(submitData);
		message.success("审核提交成功");
		entryShowExamine.value = false;
		fetchBusinessCoopList();
	} catch (error) {
		console.error("审核提交失败:", error);
		message.error("审核提交失败");
	} finally {
		entryShowExamineLoading.value = false;
	}
};

const showImageModal = (imageUrl) => {
	currentImage.value = imageUrl;
	imageModalVisible.value = true;
};

const showMapModal = () => {
	// Implement map modal logic here
};

const handleChange = () => {
	// Implement change logic here
};

// Fetch template list and customer manager list on mount
onMounted(async () => {
	try {
		const templateResponse = await getTemplateList();
    templateList.value = templateResponse.data.map((item) => ({
      text: item.groupName,
      value: item.id + "",
    }));

    // 默认选择 id=2 的菜单模板
    formState.menuGroupIds = "2";

		const channelUserResponse = await getChannelUserList();
		pmdUserArray.value = channelUserResponse.data.map((item) => ({
			text: item.userName,
			value: item.userId + "",
		}));
    formState.pmdUserId = "315767";
		await fetchBusinessCoopList();
	} catch (error) {
		console.error("Failed to fetch template list or channel user list:", error);
		message.error("获取模板列表或客户经理列表失败");
	}
});
</script>

<style scoped>
.business-coop-management {
	padding-top: 16px;
}

.search-container {
	margin-bottom: 16px;
}
:deep(.ant-form-item){
  margin-bottom: 12px;
}
:deep(.image-cell) {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 4px;
	cursor: pointer;
}
</style>
