<template>
	<div class="main-container">
		<el-card class="box-card !border-none" shadow="never">

			<div class="flex justify-between items-center">
				<span class="text-lg">{{pageName}}</span>
				<el-button type="primary" @click="addEvent" v-if="customerResourcesTable.searchParam.type == 'khzy'">
					{{ t('addCustomerResources') }}
				</el-button>
			</div>

			<el-card class="box-card !border-none my-[10px] table-search-wrap" shadow="never">
				<el-form :inline="true" :model="customerResourcesTable.searchParam" ref="searchFormRef">
					<el-form-item :label="t('name')" prop="name">
						<el-input v-model="customerResourcesTable.searchParam.name"
							:placeholder="t('namePlaceholder')" />
					</el-form-item>

					<el-form-item label="年龄" prop="age">
						<el-input v-model="customerResourcesTable.searchParam.age" placeholder="请输入年龄" />
					</el-form-item>


					<el-form-item label="性别" prop="gender">
						<el-select v-model="customerResourcesTable.searchParam.gender" placeholder="请选择性别">
							<el-option label="男性" value="male" />
							<el-option label="女性" value="female" />
							<el-option label="其他" value="other" />
						</el-select>
					</el-form-item>



					<el-form-item :label="t('phoneNumber')" prop="phone_number">
						<el-input v-model="customerResourcesTable.searchParam.phone_number"
							:placeholder="t('phoneNumberPlaceholder')" />
					</el-form-item>
					
					<el-form-item label="会员标签" prop="member_label">
					  <el-select
					    v-model="customerResourcesTable.searchParam.member_label"
					    collapse-tags
					    clearable
					    placeholder="请选择会员标签"
					    class="input-width"
					  >
					    <el-option label="会员标签" value="" />
					    <el-option
					      :label="item['label_name']"
					      :value="item['label_id']"
					      v-for="(item, index) in labelSelectData"
					      :key="index"
					    />
					  </el-select>
					</el-form-item>


					<el-form-item label="创建时间">
						<el-date-picker v-model="customerResourcesTable.searchParam.created_at" type="daterange" range-separator="至"
							start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD"
							value-format="YYYY-MM-DD" />
					</el-form-item>

					<!-- 更新时间 -->
					<el-form-item label="更新时间">
						<el-date-picker v-model="customerResourcesTable.searchParam.updated_at" type="daterange" range-separator="至"
							start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD"
							value-format="YYYY-MM-DD" />
					</el-form-item>


					<el-form-item>
						<el-button type="primary" @click="loadCustomerResourcesList()">{{ t('search') }}</el-button>
						<el-button @click="resetForm(searchFormRef)">{{ t('reset') }}</el-button>
					</el-form-item>
				</el-form>
			</el-card>

			<div class="mt-[10px]">
				<el-table :data="customerResourcesTable.data" size="large" v-loading="customerResourcesTable.loading">
					<template #empty>
						<span>{{ !customerResourcesTable.loading ? t('emptyData') : '' }}</span>
					</template>
					<el-table-column :label="t('source')" min-width="180" align="center" :show-overflow-tooltip="true">
						<template #default="{ row }">
							<div v-for="(item, index) in sourceList">
								<div v-if="item.value == row.source">{{ item.name }}</div>
							</div>
						</template>
					</el-table-column>

					<el-table-column prop="consultant_name" :label="t('consultant')" min-width="120"
						:show-overflow-tooltip="true" />

					<el-table-column prop="name" :label="t('name')" min-width="120" :show-overflow-tooltip="true" />

					<el-table-column prop="age" :label="t('age')" min-width="50" :show-overflow-tooltip="true" />

					<el-table-column :label="t('gender')" min-width="60" align="center" :show-overflow-tooltip="true">
						<template #default="{ row }">
							<div v-for="(item, index) in genderList">
								<div v-if="item.value == row.gender">{{ item.name }}</div>
							</div>
						</template>
					</el-table-column>

					<el-table-column prop="phone_number" :label="t('phoneNumber')" min-width="120"
						:show-overflow-tooltip="true" />

					<el-table-column prop="decision_maker" :label="t('decisionMaker')" min-width="120"
						:show-overflow-tooltip="true" />
						
						
						<el-table-column
						  prop="member_label"
						  label="会员标签"
						  min-width="120"
						  align="center"
						>
						  <template #default="{ row }">
						    <div class="flex flex-col items-center">
						      <div
						        v-for="(item, key) in row.member_label_array"
						        class="my-[3px]"
						        :key="key"
						      >
						        <el-tag type="info">{{ item.label_name }}</el-tag>
						      </div>
						    </div>
						  </template>
						</el-table-column>
						
						
					<el-table-column prop="created_at" label="添加时间" min-width="120" :show-overflow-tooltip="true" />
						
					<el-table-column prop="updated_at" label="修改时间" min-width="120" :show-overflow-tooltip="true" />


					<el-table-column :label="t('operation')" fixed="right" min-width="200" v-if="customerResourcesTable.searchParam.type == 'khzy'">
						<template #default="{ row }">
							<el-button type="primary" link @click="modificationLog(row.id)">六要素修改记录</el-button>
							<el-button type="primary" link @click="resourceChanges(row.id)">客户信息修改记录</el-button>
							<el-button type="primary" link @click="editEvent(row)">{{ t('edit') }}</el-button>
							<el-button type="primary" link @click="deleteEvent(row.id)">{{ t('delete') }}</el-button>

						</template>
					</el-table-column>



					<el-table-column :label="t('operation')" fixed="right" min-width="200"
						v-if="customerResourcesTable.searchParam.type == 'yjfp'">
						<template #default="{ row }">
							<el-button type="primary" link @click="fpEvent(row)">分配</el-button>
						</template>
					</el-table-column>


					<el-table-column :label="t('operation')" fixed="right" min-width="200"
						v-if="customerResourcesTable.searchParam.type == 'zylb'">
						<template #default="{ row }">
							<el-button type="primary" link @click="editEvent(row)">{{ t('edit') }}</el-button>

							<el-button type="primary" link @click="addOrder({'resource_id':row.id})">添加订单</el-button>
							
							<el-button type="primary" link @click="tcEvent({'resource_id':row.id})">体测</el-button>
						</template>
					</el-table-column>

				</el-table>
				<div class="mt-[16px] flex justify-end">
					<el-pagination v-model:current-page="customerResourcesTable.page"
						v-model:page-size="customerResourcesTable.limit"
						layout="total, sizes, prev, pager, next, jumper" :total="customerResourcesTable.total"
						@size-change="loadCustomerResourcesList()" @current-change="loadCustomerResourcesList" />
				</div>
			</div>

			<edit ref="editCustomerResourcesDialog" @complete="loadCustomerResourcesList" />

			<fp ref="fpCustomerResourcesDialog" @complete="loadCustomerResourcesList" />

			<Order ref="editOrderTableDialog" @complete="loadCustomerResourcesList" />
			
			<tc ref="TcCustomerResourcesDialog" @complete="loadCustomerResourcesList" />

		</el-card>
	</div>
</template>

<script lang="ts" setup>
	import { reactive, ref, watch } from 'vue'
	import { t } from '@/lang'
	import { useDictionary } from '@/app/api/dict'
	import { getCustomerResourcesList, deleteCustomerResources, getWithPersonnelList, getWithCampusList } from '@/app/api/customer_resources'
	import { img } from '@/utils/common'
	import { ElMessageBox, FormInstance } from 'element-plus'
	import Edit from '@/app/views/customer_resources/components/customer-resources-edit.vue'
	import Fp from '@/app/views/customer_resources/components/fp.vue'
	import Order from '@/app/views/order_table/components/order-table-edit.vue'
	import Tc from '@/app/views/tc_dialog/tc_dialog.vue'
	
	import { getMemberLabelAll } from '@/app/api/member'

	import { useRouter, useRoute } from 'vue-router'
	const route = useRoute()
	const pageName = route.meta.title;
	const router = useRouter()

	let customerResourcesTable = reactive({
		page: 1,
		limit: 10,
		total: 0,
		loading: true,
		data: [],
		searchParam: {
			"name": "",
			"age": "",
			"gender": "",
			"phone_number": "",
			"member_label" : "",
			'type': '',
			"created_at" : "",
			"updated_at" : ""
		}
	})

	if (pageName == '业绩分配') {
		customerResourcesTable.searchParam.type = 'yjfp';
	} else if (pageName == '客户资源列表') {
		customerResourcesTable.searchParam.type = 'khzy';
	} else if (pageName == '资源列表') {
		customerResourcesTable.searchParam.type = 'zylb';
	}

	// const type = pageName == '业绩分配' ? 'yjfp' : 'khzy';

	// 获取全部标签
	const labelSelectData = ref([])
	const getMemberLabelAllFn = async () => {
	  labelSelectData.value = await (await getMemberLabelAll()).data
	}
	getMemberLabelAllFn()


	const modificationLog = (id : number) => {
		router.push({ path: '/six_speed_modification_log/six_speed_modification_log', query: { id: id } })
	}

	const resourceChanges = (id : number) => {
		router.push({ path: '/customer_resource_changes/customer_resource_changes', query: { id: id } })
	}


	/**
	 * 添加订单
	 */
	const editOrderTableDialog : Record<string, any> | null = ref(null)
	const addOrder = (row : any) => {

		console.log(row);
		editOrderTableDialog.value.setFormData(row)
		editOrderTableDialog.value.showDialog = true
	}


	const TcCustomerResourcesDialog : Record<string, any> | null = ref(null)
	const tcEvent = (row : any) => {
		TcCustomerResourcesDialog.value.setFormData(row)
		TcCustomerResourcesDialog.value.showDialog = true
	}




	const searchFormRef = ref<FormInstance>()

	// 选中数据
	const selectData = ref<any[]>([])

	// 字典数据
	const sourceList = ref([] as any[])
	const sourceDictList = async () => {
		sourceList.value = await (await useDictionary('source')).data.dictionary
	}
	sourceDictList();
	const source_channelList = ref([] as any[])
	const source_channelDictList = async () => {
		source_channelList.value = await (await useDictionary('SourceChannel')).data.dictionary
	}
	source_channelDictList();
	const genderList = ref([] as any[])
	const genderDictList = async () => {
		genderList.value = await (await useDictionary('zy_sex')).data.dictionary
	}
	genderDictList();
	const purchasing_powerList = ref([] as any[])
	const purchasing_powerDictList = async () => {
		purchasing_powerList.value = await (await useDictionary('customer_purchasing_power')).data.dictionary
	}
	purchasing_powerDictList();
	const cognitive_ideaList = ref([] as any[])
	const cognitive_ideaDictList = async () => {
		cognitive_ideaList.value = await (await useDictionary('cognitive_concept')).data.dictionary
	}
	cognitive_ideaDictList();
	const initial_intentList = ref([] as any[])
	const initial_intentDictList = async () => {
		initial_intentList.value = await (await useDictionary('preliminarycustomerintention')).data.dictionary
	}
	initial_intentDictList();
	const statusList = ref([] as any[])
	const statusDictList = async () => {
		statusList.value = await (await useDictionary('kh_status')).data.dictionary
	}
	statusDictList();


	/**
	 * 获取客户资源列表
	 */
	const loadCustomerResourcesList = (page : number = 1) => {
		customerResourcesTable.loading = true
		customerResourcesTable.page = page

		getCustomerResourcesList({
			page: customerResourcesTable.page,
			limit: customerResourcesTable.limit,
			...customerResourcesTable.searchParam
		}).then(res => {
			customerResourcesTable.loading = false
			customerResourcesTable.data = res.data.data
			customerResourcesTable.total = res.data.total
		}).catch(() => {
			customerResourcesTable.loading = false
		})
	}
	loadCustomerResourcesList()

	const editCustomerResourcesDialog : Record<string, any> | null = ref(null)

	const fpCustomerResourcesDialog : Record<string, any> | null = ref(null)

	/**
	 * 添加客户资源
	 */
	const addEvent = () => {
		editCustomerResourcesDialog.value.setFormData()
		editCustomerResourcesDialog.value.showDialog = true
	}

	/**
	 * 编辑客户资源
	 * @param data
	 */
	const editEvent = (data : any) => {
		editCustomerResourcesDialog.value.setFormData(data)
		editCustomerResourcesDialog.value.showDialog = true
	}

	const fpEvent = (data : any) => {
		fpCustomerResourcesDialog.value.setFormData(data)
		fpCustomerResourcesDialog.value.showDialog = true
	}


	/**
	 * 删除客户资源
	 */
	const deleteEvent = (id : number) => {
		ElMessageBox.confirm(t('customerResourcesDeleteTips'), t('warning'),
			{
				confirmButtonText: t('confirm'),
				cancelButtonText: t('cancel'),
				type: 'warning',
			}
		).then(() => {
			deleteCustomerResources(id).then(() => {
				loadCustomerResourcesList()
			}).catch(() => {
			})
		})
	}


	const consultantList = ref([])
	const setConsultantList = async () => {
		consultantList.value = await (await getWithPersonnelList({})).data
	}
	setConsultantList()
	const campusList = ref([])
	const setCampusList = async () => {
		campusList.value = await (await getWithCampusList({})).data
	}
	setCampusList()

	const resetForm = (formEl : FormInstance | undefined) => {
		if (!formEl) return
		formEl.resetFields()
		loadCustomerResourcesList()
	}
</script>

<style lang="scss" scoped>
	/* 多行超出隐藏 */
	.multi-hidden {
		word-break: break-all;
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>