<!--
@ 作者: 秦东
@ 时间: 2024-07-17 15:35:39
@ 备注: 卡片视图
-->
<script lang='ts' setup>
import type { ComponentSize } from 'element-plus'
import { gainFormPageListCont } from '@/api/DesignForm/requestapi'
import FormPageCont from '@/components/DesignForm/tableListPage/formPageCont.vue'

const props = defineProps({
	searchSend:{
		type:Object,
		default(){
			return {}
		}
	},
	viewSetup:{
		type:Object,
		default(){
			return {}
		}
	},
	columnsFilter:{
		type:Object,
		default(){
			return {}
		}
	},
	drawerWith:{
		type:Number,
		default:0
	}
});
const size = ref<ComponentSize>('default')
const lineRanks = ref(1)
const imgBox = computed(() => {
	let cssStyle:any = {}
	if(props.viewSetup.form.imgWidth != 0){
		cssStyle['width'] = props.viewSetup.form.imgWidth + "px";
	}else{
		cssStyle['width'] = "50px";
	}
	if(props.viewSetup.form.imgHeight != 0){
		cssStyle['height'] = props.viewSetup.form.imgHeight + "px";
	}else{
		cssStyle['height'] = "50px";
	}
	
	return  cssStyle
})
/**
@ 作者: 秦东
@ 时间: 2024-07-18 14:26:46
@ 功能: 图像设定Css
*/
const imgStyle = computed(() => {
	let cssStyle:any = {}
	cssStyle['border'] = "1px solid #ccc";
	cssStyle['border-radius'] = props.viewSetup.form.imgBorderRadius + "px";
	cssStyle['padding'] = props.viewSetup.form.imgPadding + "px";
	if(props.viewSetup.form.imgWidth != 0){
		cssStyle['width'] = props.viewSetup.form.imgWidth + "px";
	}else{
		cssStyle['width'] = "50px";
	}
	if(props.viewSetup.form.imgHeight != 0){
		cssStyle['height'] = props.viewSetup.form.imgHeight + "px";
	}else{
		cssStyle['height'] = "50px";
	}
	// console.log("自定义样式",cssStyle)
	return  cssStyle
})

/**
@ 作者: 秦东
@ 时间: 2024-07-18 14:26:57
@ 功能: 内容设定css
*/
const cardInfoBox = computed(() => {
	let cssStyle:any = {}
	
	cssStyle['width'] = (Math.round(24/props.viewSetup.form.ranks) - props.viewSetup.form.imgWidth) + "px";
	return  cssStyle
})
onMounted(()=>{
	lineRanks.value = Math.round(24/props.viewSetup.form.ranks)
	nextTick(()=>{
		getCardList(props.searchSend)
	})
})
// const url = ref()
// const srcList = ref([])
const handleSizeChange = (val: number) => {
//   console.log(`${val} items per page`)\
	props.searchSend.page = 1
  	props.searchSend.pagesize = val
//   console.log(props.searchSend.pagesize)
	getCardList(props.searchSend)
}
const handleCurrentChange = (val: number) => {
//   console.log(`current page: ${val}`)
  props.searchSend.page = val
  getCardList(props.searchSend)
}

const url =
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
const srcList = (url:string) =>{
	return [url]
	return [
		'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
		'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
		'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
		'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
		'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
		'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
		'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
	]
} 
const cardDataList = ref([]) // 表格行数据
const totalNum = ref(0)
/**
@ 作者: 秦东
@ 时间: 2024-07-19 09:32:11
@ 功能: 获取数据
*/
const getCardList = (val:any) => {
	val.viewClass = {
		class:"card"
	}
	gainFormPageListCont(val)
		.then(({data})=>{
			totalNum.value = data.total
			// console.log("卡片获取数据--》",data)
			cardDataList.value = data.list
		})
}
defineExpose({
	getCardList
})

/**
@ 作者: 秦东
@ 时间: 2024-07-19 10:03:53
@ 功能: 获取图片显示
*/
const imgSrcPath = (val:any) => {
	// console.log("获取图片显示", val[props.viewSetup.form.imgWork])
	if(val[props.viewSetup.form.imgWork]){
		return val[props.viewSetup.form.imgWork]
	}
	return ""
}
/**
@ 作者: 秦东
@ 时间: 2024-07-19 10:03:53
@ 功能: 获取图片数组显示
*/
const imgSrcAry = (val:any) => {
	if(val[props.viewSetup.form.imgWork]){
		if (val[props.viewSetup.form.imgWork] != ""){
			return [val[props.viewSetup.form.imgWork]]
		}else{
			return []
		}
		
	}
	return []
}
/**
@ 作者: 秦东
@ 时间: 2024-07-19 10:24:33
@ 功能: 获取内容
*/
const cardInfo = (val:any,cla:string) => {
	if(cla=="title"){
		if(props.viewSetup.form.title){
			var titleAry = [];
			if(props.viewSetup.form.title.length > 0){
				props.viewSetup.form.title.forEach((item,index)=>{
					// console.log("判断是否有标题--"+index+"-->",val[item])
					if(val[item]){
						titleAry.push(val[item])
					}
				})
			}
			if(titleAry.length>0){
				return titleAry.join()
			}else{
				let firstWord = ""
				let powerAry = ["id","creater_time","edit_time","masters_key","states","flow_id"];
				for (let key in val) {
					if (val.hasOwnProperty(key)) {
						if(!powerAry.includes(key)){
							if(val[key] != '' && val[key] != null){
								firstWord = val[key]
							}
						}
					}
				}
				return firstWord
			}
			
		}
		if(val[props.viewSetup.form.titleWork]){
			return val[props.viewSetup.form.titleWork]
		}
	}else if(cla=="content"){
		if(val[props.viewSetup.form.describe]){
			return val[props.viewSetup.form.describe]
		}
	}
	return ""
}
/**
@ 作者: 秦东
@ 时间: 2024-04-03 13:24:06
@ 功能: 查看详细内容
*/
const tablePageClass = ref(1)
const lookPageInfoIsShow = ref(false)
const pageInfoCont = ref<any>()
const lookPageInfo = (val:any) => {
	tablePageClass.value = 4;
	pageInfoCont.value = val
	lookPageInfoIsShow.value = true;	
}
</script>
<template>
	<div>
		<el-row :gutter="20">
			
			<el-col  v-for="item in cardDataList" :key="item.id" :span="lineRanks"  class="cardBox">
				
				<el-card @click="lookPageInfo(item)">
					<div class="cardContBox">
						<el-image
							:style="imgStyle"
							:src="imgSrcPath(item)"
							:zoom-rate="1.2"
							:max-scale="7"
							:min-scale="0.2"
							:preview-src-list="imgSrcAry(item)"
							:initial-index="4"
							fit="cover"
						/>
						<div class="cardInfo" :style="'width: calc(100% - '+props.viewSetup.form.imgWidth+'px); height:'+props.viewSetup.form.imgHeight+'px; overflow: hidden;' ">
							<div class="title">{{ cardInfo(item,"title") }}</div>
							<div class="content">{{ cardInfo(item,"content") }}</div>
						</div>
					</div>
				</el-card>
			
			</el-col>
			
			
			
		</el-row>
		<div class="pageBox">
			<el-pagination
				v-model:current-page="props.searchSend.page"
				v-model:page-size="props.searchSend.pagesize"
				:page-sizes="[3, 9, 12, 30, 50, 100]"
				:size="size"
				:background="true"
				layout="total, sizes, prev, pager, next, jumper"
				:total="totalNum"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				class="page"
			/>
		</div>
		<FormPageCont v-model:is-show="lookPageInfoIsShow" :drawer-with="props.drawerWith" :page-info="pageInfoCont" :table-page-class="tablePageClass" :oper-state="operState" @getPageData="getPageData" />
	</div>
	
</template>
<style  lang='scss' scoped>
.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
.cardBox{
	padding: 10px 0 5px 0;
	:deep .el-card__body{
		padding:10px;
	}
	.title{
		font-size:14px;
		font-weight:bold;
		display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
	}
	.content{
		color: #909399;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.cardContBox{
		display: flex;
		width: 100%;
		justify-content: flex-start;
	}
	.cardInfo{
		padding-left: 5px;
	}
	
}
.pageBox{
	display:flex;
	justify-content: center;
	width: 100%;
	text-align: center;
	margin-top: 10px;
}
</style>
