<template>
	<div class="feedback-container">
		<div class="cont-top">
			<div>
				<el-checkbox v-model="isShowSend" @change="switchTypeHandle">显示已发送反馈请求的路演</el-checkbox>
				<el-cascader
					v-model="select_researchers"
					class="cascader"
					:options="researcherList"
					:show-all-levels="false"
					:props="{
						multiple: true,
						children: 'ResearcherList',
						value: 'AdminId',
						emitPath: false,
					}"
					:key="cascaderIdx"
					clearable
					collapse-tags
					placeholder="请选择研究员"
					@change="researcherChange"
					@remove-tag="removeResearcher"
				/>
			</div>
			<el-button type="primary" @click="sendFeedbackHandle">发送反馈请求</el-button>
		</div>

		<el-table
			:data="tableData"
			v-loading="tableLoading"
			@selection-change="selectChangeHandle"
			element-loading-text="数据加载中..."
			class="table"
			border
		>
			<el-table-column
				type="selection"
				:selectable="row=> row.FeedbackStatus === 1"
				width="55">
			</el-table-column>
			<el-table-column
				v-for="item in tableColums"
				:key="item.label"
				:label="item.label"
				:width="item.widthsty"
				:min-width="item.minwidthsty"
				align="center"
			>
				<template slot-scope="{row}">
					<span v-if="item.key === 'time'">
						{{
							row.StartDate === row.EndDate
							? ($moment(row.StartDate + " " + row.StartTime).format(
								"MM.DD(ddd) HH:mm") + '~' +  $moment(row.EndDate + " " + row.EndTime).format("HH:mm"))
							: (
								$moment(row.StartDate + " " + row.StartTime).format(
								"MM.DD(ddd) HH:mm") + '~' + $moment(row.EndDate + " " + row.EndTime).format("MM.DD(ddd) 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.CompanyName + (row.CompanyStatus ? `(${row.CompanyStatus})` : '') }}
					</span>

					<span 
						v-else-if="item.key === 'status'" 
						:class="[{deletesty: row.FeedbackStatus === 2},
						{successty: row.FeedbackStatus === 3}
						]"
					>
						{{ statusMap.get(row.FeedbackStatus) }}
					</span>

					<span 
						v-else-if="item.key === 'feedbackDetail'" 
					>
						<span class="editsty" v-if="row.FeedbackStatus !== 1" @click="lookDetail(row)">查看详情</span>
					</span>

					<span v-else>{{ row[item.key] }}</span>
				</template>
			</el-table-column>
			<div slot="empty" style="lineHeight:44px;margin:60px 0;color:#999;">
				<img src="~@/assets/img/cus_m/nodata.png" alt="" style="display:block;width:160px;height:128px;margin: auto;">
				<span>暂无数据</span>
			</div>
		</el-table>
		<div class="bottom">
			<m-page
				:total="total"
				:page_no="page_no"
				@handleCurrentChange="handleCurrentChange"
			/>
		</div>

		<m-dialog 
			:show.sync="feedbackDetailDia"
      width="500px"
      title="反馈详情"
			top="25vh"
      @close="feedbackDetailDia = false"
		>
			<div class="content">
				<p style="margin: 10px 0;">请求时间：{{this.feedDetailObj.FeedbackRequestTime}}</p>
				<p style="margin: 10px 0;">反馈时间：{{this.feedDetailObj.FeedbackTime}}</p>
				<p style="margin: 10px 0;text-indent: -70px;margin-left: 70px;">反馈内容：{{this.feedDetailObj.FeedbackContent}}</p>
			</div>
		</m-dialog>
	</div>
</template>

<script>
import { roadshowInterence } from '@/api/api.js';
import mPage from '@/components/mPage.vue';
import mDialog from '@/components/mDialog.vue';
export default {
	name:'',
	components: { mPage,mDialog },
	data () {
		return {
			isShowSend: false,
			cascaderIdx: 0,
			select_researchers:[],//选中的研究员
			select_checks:[],
			researcherList:[],//研究员列表
			tableData:[],
			tableColums:[
				{
					label: '活动时间',
					key: 'time',
					widthsty: '200px',
				},
				{
					label: '活动类型',
					key: 'ActivityType'
				},
				{
					label: '活动形式',
					key: 'RoadshowType'
				},
				{
					label: '客户名称',
					key: 'company'
				},
				{
					label: '研究员',
					key: 'ResearcherName',
					widthsty: '100px',
				},
				{
					label: '销售',
					key: 'SysUserRealName',
					widthsty: '100px',
				},
				{
					label: '反馈状态',
					key: 'status',
				},
				{
					label: '反馈详情',
					key: 'feedbackDetail',
				},
			],
			page_no: 1,
			pageSize:10,
			total: 0,
			statusMap: new Map([
				[1,'未请求'],
				[2,'待反馈'],
				[3,'已反馈'],
			]),

			feedbackDetailDia: false,
			feedDetailObj: {},
		};
	},
	methods: {

		// 获取研究员列表
    getResearcherList() {
        roadshowInterence.getResearcherList().then(res=> {
            if (res.Ret !== 200) return
            //this.researcherList = this.formatResearcherList(res.Data);
            const ficcList = this.formatResearcherList(res.Data.find(i=>i.GroupName==='ficc').ResearcherList||[]);
            const raiList = this.formatResearcherList(res.Data.find(i=>i.GroupName==='权益').ResearcherList||[]);
            this.researcherList = [{
                label:'ficc',
                ResearcherList:ficcList
            },{
                label:'权益',
                ResearcherList:raiList
            }]
            });
    },

		// 对获取到的研究员列表做处理
    formatResearcherList(list) {
      list.forEach((group) => {
        // 对组做处理
        group.label = group.GroupName;
        // 如果有列表
        group.ResearcherList && group.ResearcherList.forEach((item) => {
          // 对研究员做处理
          item.label = item.RealName;
          item.value = item.AdminId;
        });
      });
      // 去掉ficc全体选项
      return list.filter((group) => group.GroupName !== "ficc全体");
    },

		/* 获取表格数据 */
		getTableData() {
			roadshowInterence.feedbackList({
				PageSize: this.pageSize,
				CurrentIndex: this.page_no,
				FeedbackType: this.isShowSend ? 1 : 0,
				ResearcherId: this.select_researchers.join(',')
			}).then(res => {
				if(res.Ret !== 200) return

				const { Data } = res;

				this.tableData = Data.List || [];
				this.total = Data.Paging.Totals;
			})
		},

		/* 查看反馈详情 */
		lookDetail({ FeedbackRequestTime,FeedbackTime,FeedbackContent }) {

			this.feedbackDetailDia = true;
			this.feedDetailObj = {
				FeedbackRequestTime,
				FeedbackTime,
				FeedbackContent
			}
		},

		switchTypeHandle(val) {
			this.page_no=1; 
			this.getTableData();
			if(val) {
				$('.has-gutter .el-table-column--selection').find('.el-checkbox__input').addClass('is-disabled');
				$('.has-gutter .el-table-column--selection').find('.el-checkbox').css({
					pointerEvents: 'none',
				});
				
			} else {
				$('.has-gutter .el-table-column--selection').find('.el-checkbox__input').removeClass('is-disabled');
				$('.has-gutter .el-table-column--selection').find('.el-checkbox').css({
					pointerEvents: 'auto',
				});
			}
		},

		/* 页码改变 */
    handleCurrentChange(page, index) {
      this.page_no = page;
      this.getTableData();
    },

		/* 研究员变化 */
		researcherChange() {
			this.getTableData();
		},

		/* 移除研究员 */
		removeResearcher(val) {
			this.select_researchers = this.select_researchers.filter(item => item !== val);
      this.cascaderIdx++;
		},

		/* 选中行 */
		selectChangeHandle(val) {
			this.select_checks = val.length ? val.map(item => ({
				RsCalendarResearcherId: item.RsCalendarResearcherId
			})) : [];

			console.log(this.select_checks)

		},

		/* 发送反馈请求 */
		sendFeedbackHandle:_.debounce(function() {
			if(!this.select_checks.length) return this.$message.warning('请选择需要反馈的路演')

			roadshowInterence.sendFeedback({
				List: this.select_checks
			}).then(res => {
				if(res.Ret !== 200) return;

				this.$message.success('发送成功')
				
				this.getTableData();

			})
		},500)

	},
	mounted() {
		this.getTableData();
		this.getResearcherList();
	},
}
</script>
<style lang='scss' scoped>
*{ box-sizing: border-box;}
.feedback-container {
	min-height: calc(100vh - 120px);
	background-color: #fff;
	box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
	border-radius: 4px;
	padding: 20px 30px;
	.cont-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.cascader {
			margin-left: 30px;
		}
	}
	.table {
		box-shadow: 0px 3px 6px rgba(155, 170, 219, 0.2);
		margin:20px 0;
	}
	.bottom {
		height: 40px;
	}
}
</style>
<style lang="scss">
.tip-poper {
	max-width: 300px;
}
.feedback-dia {
	.el-message-box__header {
		background: #409EFF;
		.el-message-box__title {
			color: #fff;
		}
	}
}
</style>