<template>
	<div class="like-container">
		<div class="main">
			<ul class="tabs-cont">
				<li 
					:class="['tab-item',{ act: default_datatype === tab.key }]" 
					v-for="tab in tabsOptions" 
					:key="tab.key"
					@click="changeTabHandle(tab)"
				>{{ tab.label }}</li>
			</ul>
			<div v-if="[4,5].includes(default_datatype)" class="sub-tabs">
				<span 
					:class="['sub-tab-item',default_subtype==item.key&&'active']" 
					v-for="item in subTabsOptions" 
					:key="item.key"
					@click="changeSubTabHandle(item)"
				>{{item.label}}</span>
			</div>
			<el-table
				ref='table'
				border
				:data="tableData"
				v-loading="showDataLoading"
				element-loading-text="加载中..."
				style="margin-top: 20px"
				@sort-change="sortChangeHandle"
			>
				<el-table-column
					v-for="item in tableColums"
					:key="item.label"
					:label="item.label"
					:width="item.widthsty"
					:min-width="item.minwidthsty"
					:sortable="item.sortable"
					align="center"
					:prop="item.key"
				>
					<template slot-scope="{row}">

							<span v-if="['LikeNum','Num'].includes(item.key)" class="editsty" @click="toDetail(row)">{{ row[item.key] || '——' }}</span>

							<span v-else-if="item.key === 'Title'">
								{{ row.ClassifyNameFirst ? `${row.ClassifyNameFirst}/` : '' }}
								{{ row[item.key] }}
							</span>

							<span v-else>{{ row[item.key] || '——' }}</span>
						</template>
				</el-table-column>
				<div slot="empty" style="padding: 100px 0">
					<img src="~@/assets/img/cus_m/nodata.png" alt="" style="display:block;width:128px;height:128px;margin: 0 auto;">
					<span>暂无数据</span>
				</div>
			</el-table>
			<div style="height: 40px;margin-top: 10px; padding: 0 20px;" >
				<m-page
					:page_no="page_no"
					:pageSize="10"
					:total="totals"
					@handleCurrentChange="likePageChange"
				/>
				
			</div>

		</div>

		<!-- 详情弹窗 -->
		<m-dialog
			:show.sync="openDetailDia"
			width="700px"
			:title="likeprops.title"
			@close="closeDialog"
		>
			<div class="dialog-cont">
				<h4 style="margin-bottom: 10px;">{{ likeprops.sub_title }}</h4>
				<span>点赞数量：{{ likeprops.like_num }} </span>
				<el-table
					border
					:data="likeList"
					style="margin-top: 20px"
					max-height="350"
				>
					<el-table-column
						v-for="item in likeTableColums"
						:key="item.label"
						:label="item.label"
						:width="item.widthsty"
						:min-width="item.minwidthsty"
						align="center"
						:prop="item.key"
					>
						<template slot-scope="{row}">
							<span v-if="item.key === 'SourceAgent'">{{ row[item.key] === 1 ? '小程序' : 'PC' }}</span>
							<span v-else>{{ row[item.key] || '——' }}</span>
						</template>
					</el-table-column>
					<div slot="empty" style="padding: 20px 0">
						<img src="~@/assets/img/cus_m/nodata.png" alt="" style="display:block;width:128px;height:128px;margin: 0 auto;">
						<span>暂无数据</span>
					</div>
				</el-table>
				<div style="height: 40px;margin-top: 10px; padding: 0 20px;" >
					<m-page
						:page_no="like_page_no"
						:pageSize="10"
						:total="like_totals"
						@handleCurrentChange="likeDetailPageChange"
					/>
					
				</div>
			</div>
		</m-dialog>
	</div>
</template>

<script>
import { interactiveInterface } from '@/api/api.js';
import mPage from '@/components/mPage.vue'
import mDialog from '@/components/mDialog.vue'

export default {
	name:'',
	components: { mPage,mDialog },
	data () {
		return {
			page_no: 1,
			totals: 0,
			tableData:[],
			tableColums:[
				{
					label: '报告标题',
					key: 'Title',
					minwidthsty: 150
				},
				{
					label: '发布时间',
					key: 'PublishTime',
				},
				{
					label: '点赞数量',
					key: 'LikeNum',
					sortable: 'custom'
				},
				{
					label: '最近一次点赞时间',
					key: 'ModifyTime'
				},
			],
			sort_obj: {},

			openDetailDia: false,
			likeprops: {
				title: '点赞详情',
				like_num: 0
			},
			likeList: [],
			like_page_no: 1,
			like_totals: 0,
			likeTableColums: [
				{
					label: '用户姓名',
					key: 'RealName',
				},
				{
					label: '公司名称',
					key: 'CompanyName',
				},
				{
					label: '客户状态',
					key: 'CompanyStatus',
				},
				{
					label: '点赞来源',
					key: 'SourceAgent',
				},
				{
					label: '点赞时间',
					key: 'ModifyTime',
					minwidthsty: 200
				},
			],

			/*  */
			showDataLoading: false,
			default_datatype: 1,
			tabsOptions: [
				{ label: '报告点赞', key: 1 },
				{ label: '问答点赞', key: 2 },
				{ label: '视频点赞', key: 4 },
				{ label: '问答吐槽', key: 3 },
				{ label: '视频吐槽', key: 5 },
			],
			subTabsOptions:[
				{ label:'线上路演',key:3},
				{ label:'视频社区',key:2}
			],
			default_subtype:3,//3 路演视频 2视频社区
		};
	},
	methods: {
		/* 列表 */
		async getTableList() {
			this.showDataLoading = true;
			const { type, param } = this.sort_obj;
			
			let params = {
				SortParam: param || '',
				SortType: type || '',
				PageSize: 10,
				CurrentIndex: this.page_no
			}

			if([2,4].includes(this.default_datatype)){
				params.DataType='like'
			}
			if([3,5].includes(this.default_datatype)){
				params.DataType='tease'
			}
			if([2,3].includes(this.default_datatype)){
				params.Source=1
			}
			if([4,5].includes(this.default_datatype)){
				params.Source=this.default_subtype
			}


			const { Ret,Data } =  this.default_datatype === 1 
				? await interactiveInterface.likelist(params) 
				: await interactiveInterface.questionLikeList(params)
				
				if(Ret !== 200) return

				const { List,Paging } = Data;
				this.tableData = List || [];
				this.totals = Paging.Totals;

				this.showDataLoading = false;
		},

		likePageChange(page) {
			this.page_no = page;
			this.getTableList();
		},

		likeDetailPageChange(page) {
			this.like_page_no = page;
			this.getDetailList()
		},

		/* 获取点赞/吐槽详情列表 */
		async getDetailList() {

			const { ReportId,ReportChapterId,CommunityQuestionId } = this.detailParams;

			const { Ret,Data } = this.default_datatype === 1 
				? await interactiveInterface.likeDetail({
						PageSize: 10,
						CurrentIndex: this.like_page_no,
						ReportId: ReportId || '',
						ReportChapterId: ReportChapterId || ''
					})
				: await interactiveInterface.questionLikeDetail({
						PageSize: 10,
						CurrentIndex: this.like_page_no,
						CommunityQuestionId: CommunityQuestionId || '',
						DataType: [2,4].includes(this.default_datatype) ? 'like' : 'tease',
						Source:[2,3].includes(this.default_datatype)?1:this.default_subtype
				})

				if(Ret !== 200) return 
				
				const { List,Paging } = Data;

				this.likeList = List || [];
				this.like_totals = Paging.Totals;
		},

		/* 查看详情 */
		toDetail({ ReportId,ReportChapterId,LikeNum,Title,CommunityQuestionId,Num,QuestionContent }) {
			this.detailParams = { ReportId,ReportChapterId,CommunityQuestionId };
			this.getDetailList()

			this.likeprops = {
				title: [1,2,4].includes(this.default_datatype) ? '点赞详情' : '吐槽详情',
				like_num: LikeNum || Num,
				sub_title: Title || QuestionContent
			}
			this.openDetailDia = true;
		},

		closeDialog() {
			this.openDetailDia = false;
			this.like_page_no = 1;
		},

		/* 排序变化时 */
		sortChangeHandle({ prop,order }) {
			this.page_no = 1;

			this.sort_obj = {
				type: order === 'ascending' ? 'asc' : order === 'descending' ? 'desc' : '',
				param: prop
			}
			this.getTableList();
		},

		/* 改变表格类型  */
		changeTabHandle({ key }) {
			this.default_datatype = key;
			this.default_subtype=this.subTabsOptions[0].key
			this.page_no = 1;
			this.sort_obj = {};
			this.$refs.table.clearSort();
			this.setColumns();
			this.getTableList();
		},

		// 二级类型切换
		changeSubTabHandle(item){
			this.default_subtype=item.key
			this.page_no = 1;
			this.sort_obj = {};
			this.$refs.table.clearSort();
			this.setColumns();
			this.getTableList();
		},

		setColumns() {
			let tag = [1,2,4].includes(this.default_datatype) ? '点赞' : '吐槽';
			if(this.default_datatype === 1) {
				this.tableColums = [
					{
						label: '报告标题',
						key: 'Title',
						minwidthsty: 150
					},
					{
						label: '发布时间',
						key: 'PublishTime',
					},
					{
						label: `${tag}数量`,
						key: 'LikeNum',
						sortable: 'custom'
					},
					{
						label: `最近一次${tag}时间`,
						key: 'ModifyTime'
					},
				]

				this.likeTableColums = [
					{
						label: '用户姓名',
						key: 'RealName',
					},
					{
						label: '公司名称',
						key: 'CompanyName',
					},
					{
						label: '客户状态',
						key: 'CompanyStatus',
					},
					{
						label: '点赞来源',
						key: 'SourceAgent',
					},
					{
						label: '点赞时间',
						key: 'ModifyTime',
						minwidthsty: 200
					}
				]
			}else if([2,3].includes(this.default_datatype)){//问答
				this.tableColums = [
					{
						label: '提问内容',
						key: 'QuestionContent',
						minwidthsty: 150
					},
					{
						label: '提问时间',
						key: 'CreateTime',
					},
					{
						label: `${tag}数量`,
						key: 'Num',
						sortable: 'custom'
					},
					{
						label: `${tag}时间`,
						key: 'ModifyTime'
					},
				]

				this.likeTableColums = [
					{
						label: '用户姓名',
						key: 'RealName',
					},
					{
						label: '公司名称',
						key: 'CompanyName',
					},
					{
						label: '客户状态',
						key: 'CompanyFiccStatus',
					},
					{
						label: `${tag}来源`,
						key: 'SourceAgent',
					},
					{
						label: `${tag}时间`,
						key: 'ModifyTime',
						minwidthsty: 200
					},
				]
			}else if([4,5].includes(this.default_datatype)){//视频
				this.tableColums = [
					{
						label: '视频标题',
						key: 'QuestionContent',
						minwidthsty: 150
					},
					{
						label: `所属${this.default_subtype==2?'标签':'品种'}`,
						key: 'VarietyClassifyTag',
					},
					{
						label: '发布时间',
						key: 'CreateTime',
					},
					{
						label: `${tag}数量`,
						key: 'Num',
						sortable: 'custom'
					},
					{
						label: `${tag}时间`,
						key: 'ModifyTime'
					},
				]

				this.likeTableColums = [
					{
						label: '用户姓名',
						key: 'RealName',
					},
					{
						label: '公司名称',
						key: 'CompanyName',
					},
					{
						label: '客户状态',
						key: 'CompanyFiccStatus',
					},
					{
						label: `${tag}来源`,
						key: 'SourceAgent',
					},
					{
						label: `${tag}时间`,
						key: 'ModifyTime',
						minwidthsty: 200
					},
				]
			}
		},
	},	
	mounted() {
		this.getTableList()
	},
	}
	</script>
	<style lang='scss' scoped>
	*{ box-sizing: border-box;}
.like-container {
	.main {
		min-height: calc(100vh - 120px);
		padding: 20px 30px;
		background: #fff;
		border: 1px solid #ececec;
		border-radius: 4px;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
	
		.tabs-cont {
			display: flex;
			align-items: center;
			font-size: 15px;
			.tab-item {
				margin-right: 30px;
				// border-bottom: 3px solid transparent;
				min-width: 100px;
				text-align: center;
				padding: 10px 0;
				cursor: pointer;
				color: #606266;
				border: 1px solid #DCDFE6;
				border-radius: 4px;
				&.act {
					background: #409EFF;
					color: #fff;
				}
			}
		}
		.sub-tabs{
			margin-top: 30px;
			.sub-tab-item{
				font-size: 16px;
				color: #999;
				display: inline-block;
				margin-right: 30px;
				padding-bottom: 5px;
				cursor: pointer;
				&.active{
					border-bottom: 4px solid #58AAFF;
					color: #333;
				}
			}
		}
	}
}
</style>