<template>
	<el-dialog
      v-dialogDrag
      :title="title"
      :visible.sync="isShow"
      :modal-append-to-body="false"
      @close="cancel"
			width="850px"
			class="statistic-dialog-cont"
    >
		<el-table
			:data="tableData"
			class="table-cont"
			max-height="300"
			border
			ref="tableRef"
		>
			<el-table-column
				v-for="item in tableColumns"
				:key="item.label"
				:label="item.label"
				:width="item.widthsty"
				:min-width="item.minwidthsty"
				:prop="item.key"
				align="center"
				:sortable="region=='oversea' && (item.key=='time')"
			>
				<template slot-scope="{row}">

					<span v-if="item.key === 'time'">
						{{
							$moment(row.StartDate + " " + row.StartTime).format(
								"MM.DD(ddd) HH:mm - "
							) + $moment(row.EndDate + " " + row.EndTime).format("HH:mm")
						}}
					</span>

					<span v-else-if="item.key === 'RoadshowType'">
						{{row.RoadshowType}} {{ row.RoadshowType === '线上' ? `(${row.RoadshowPlatform}  )` : `(${row.Province}${row.City})`}}
					</span>

					<span v-else-if="item.key === 'company'">
						{{ row.CooperationName || row.CompanyName }} <span v-if="(fromType == 'seller' || fromType == 'special') && row.CompanyStatus">{{`(${row.CompanyStatus})`}} </span>

						<el-tooltip effect="dark" placement="top-start" v-if="row.CompanyId"  @mouseenter.native="getCompanyInfo(row.CompanyId)" popper-class="company-tip-poper">
							<i class="el-icon-info"/>
							<div slot="content" v-if="companyInfo">
								<p style="margin: 6px 0;">客户状态：{{companyInfo.Status}}</p>
								<p style="margin: 6px 0;">所属行业：{{companyInfo.IndustryName}}</p>
								<p style="margin: 6px 0;text-indent: -70px;margin-left: 70px;">开通{{form.departmentType == '权益'  ? '行业：':'品种：'}}{{companyInfo.PermissionName}}</p>
								<p style="margin: 6px 0;">累计报告阅读次数：{{companyInfo.ReportReadTotal}}</p>
							</div>
						</el-tooltip>
					</span>

					<span v-else>{{ row[item.key] || '——' }}</span>

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

<script>
import { roadshowInterence } from '@/api/api.js';
export default {
	props: {
		title: {
			type: String
		},
		isShow: {
			type: Boolean
		},
		form: {
			type: Object
		},
		fromType: {
			type: String,
			default: 'researcher'
		},
		// oversea 海外
		region: {
			type: String,
			default: 'home'
		}
	},
	watch: {
		isShow(newval) {
			if(newval) {
				this.initState();
				this.getStatisticDetail();				
			}
		}
	},
	data() {
		return {
			companyInfo: null,
			tableColumns:[], //
			tableData: []
		}
	},
	methods: {

		/* 获取列表 */
		getStatisticDetail() {
			const { startDate,endDate,userid,key } = this.form;
			if(this.region=='oversea'){
				// 海外
				const typeMapObj = {
					试用: 'try_out',
					正式: 'formal',
					关闭: 'close',
				}
				roadshowInterence.overseaStatisticDetailList({
					DataType: typeMapObj[key] && typeMapObj[key],
					StartDate: startDate,
					EndDate: endDate,
					AdminIds: userid?userid.join(','):'',
					AdminType: this.fromType
				}).then(res => {
					const { Ret,Data } = res;

					if(Ret !== 200) return

					this.tableData = Data || [];

				})
			}else {
				const typeMapObj = {
					试用路演: 'try_out',
					正式路演: 'formal',
					公开会议: 'meeting',
					路演: 'road_show',
					沙龙: 'salon',
				}
				
				roadshowInterence.statisticDetailList({
					DataType: typeMapObj[key] && typeMapObj[key],
					StartDate: startDate,
					EndDate: endDate,
					AdminId: userid,
					AdminType: this.fromType
				}).then(res => {
					const { Ret,Data } = res;

					if(Ret !== 200) return

					this.tableData = Data || [];

				})
			}

		},

		/* 取消 */
		cancel() {
			this.$emit('update:isShow', false);
		},

		/* 获取客户信息 */
    async getCompanyInfo(CompanyId) {
      const { Data }  = await roadshowInterence.componyDetail({ CompanyId,CompanyType:this.form.departmentType });
      this.companyInfo = Data;
    },

	initState() {
			const dynamic_column = this.fromType === 'researcher' ? {
				label: '发起人',
				key: 'SellerName',
				minwidthsty: '100px'
			} : {
				label: '研究员',
				key: 'ResearcherName',
				minwidthsty: '100px',
			}

			this.tableColumns = this.title === '路演详情'
				? [
						{
							label: '时间',
							key: 'time',
							minwidthsty: '180px',
						},
						{
							label: '客户名称',
							key: 'company',
							minwidthsty: '100px',
						},
						{
							label: '路演形式',
							key: 'RoadshowType',
							minwidthsty: '120px',
						},
						{ ...dynamic_column }
					]
				: [
						{
							label: '时间',
							key: 'time',
							minwidthsty: '180px',
						},
						{
							label: '会议主题',
							key: 'Theme',
							minwidthsty: '100px',
						},
						{
							label: '合作方',
							key: 'CooperationName',
							minwidthsty: '120px',
						},
						{
							label: '会议形式',
							key: 'RoadshowType',
							minwidthsty: '120px',
						},
						{ ...dynamic_column }
				]	
			this.tableColumns = this.tableColumnsHandler()
			this.$refs.tableRef && this.$refs.tableRef.clearSort()
			this.$nextTick(()=>{
				// 滚动条高度归零
				this.$refs.tableRef && (this.$refs.tableRef.$el.querySelector('.el-table__body-wrapper').scrollTop=0)
			})
	},
	// 处理下 权益下面 没有合作方的表格
	tableColumnsHandler(){
	let arr = this.tableColumns.filter(item=> !(this.form.departmentType && this.form.departmentType=='权益' && item.label =='合作方'))
	 return arr
	}
	},
	created() {},
	mounted() {},
}
</script>
<style lang="scss" scoped>
.table-cont {
	margin: 10px 0 40px;
}
</style>
<style lang="scss">
.company-tip-poper {
	max-width: 400px;
}
</style>
