<template>
  <el-tabs v-model="tabActive" type="card" class="market-tabs" @tab-click="handleClick">
    <el-tab-pane label="图文素材消息" name="first">
      <materia-list :imgList="imgList" @sendid="handleId"></materia-list>
      <push-detail v-loading="loading" v-if="pushlist" :mediaId="mediaId" :pushlist="pushlist"></push-detail>
      <material-details v-if="materialChartList&&materialChartList.length" :MediaList="MediaList" :materialChartList="materialChartList"></material-details>
      <article-details v-if="GetarticleList&&GetarticleList.length" :GetarticleList="GetarticleList"></article-details>
    </el-tab-pane>
    <el-tab-pane label="营销模版消息" name="second">
      <temp-list :templist="templist" @search="handleSearch" @reset="handleReset" @pageChange="pageChange"></temp-list>
    </el-tab-pane>
    <el-tab-pane label="短信营销消息" name="third">
      <message-list :msgList="msgList" @search="handleMsgSearch" @reset="handleMsgReset" @pageChange="msgPageChange"></message-list>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import api from '@/tool/api'
import MateriaList from './MateriaList'
import PushDetail from './PushList'
import MaterialDetails from './MaterialDetails'
import ArticleDetails from './ArticleDetails'
import TempList from './TempList'
import MessageList from './MessageList'

export default {
	data() {
		return {
			tabActive: 'first',
			imgList: [],
			mediaId: '',
			datalist: [],
			pushlist: [],
			MediaSummary: {},
			materialChartList: [],
			loading: true,
			GetarticleList: [],
			MediaList: [],
			templist: [],
			msgList: [],
		}
	},
	components: {
		PushDetail,
		MateriaList,
		MaterialDetails,
		ArticleDetails,
		TempList,
		MessageList,
	},
	created() {
		// 初始化
		this.getData()
		// 点击展示
		// this.getDataList()
	},
	methods: {
		// 短信
		handleMsgSearch(e) {
			this.handleGetSearchData(e)
		},
		handleMsgReset(e) {
			this.handleGetSearchData(e)
		},
		msgPageChange(pageNo) {
			this.getMessageList((this.pageNo = pageNo))
		},
		pageChange(pageNo) {
			this.getTempList((this.pageNo = pageNo))
		},
		// 模板
		handleSearch(e) {
			this.handleGetSearchData(e)
		},
		handleReset(e) {
			this.handleGetSearchData(e)
		},
		async handleGetSearchData(params) {
			await this.axios.post(api.getTempList, params).then(res => {
				this.templist = res.data.result
				this.msgList = res.data.result
			})
		},
		handleClick(tab, event) {
			if (this.tabActive === 'second') {
				this.getTempList((this.pageNo = 1))
			}
			if (this.tabActive === 'third') {
				this.getMessageList((this.pageNo = 1))
			}
		},
		async getData(type = 1) {
			let params = {
				pageNo: 1,
				pageSize: 10,
			}
			this.loading = true
			let getMaterialsRes = await this.axios.post(api.getMaterialsList, params)
			if (getMaterialsRes.data.code === 0) {
				this.imgList = getMaterialsRes.data.result.result
				localStorage.materList = JSON.stringify(this.imgList)
				let imgId = this.imgList[0].media_id
				let params = {
					pageNo: 1,
					pageSize: 10,
					type,
					mediaId: imgId,
				}
				let getPushRes = await this.axios.post(api.getPushList, params)

				if (getPushRes.data.code === 0) {
					this.loading = false
					this.pushlist = getPushRes.data.result

					let params = {
						mediaId: imgId,
					}
					let getArticleRes = await this.axios.post(api.getarticlesummary, params)

					if (getArticleRes.data.code === 0) {
						// 素材总流量分析
						this.MediaList = getArticleRes.data.result.wechatMediaSummary
						// 素材单日流量分析
						this.materialChartList = getArticleRes.data.result.wechatMediaSummary.mediaGetarticles.reverse()
						// 文章流量分析
						this.GetarticleList = getArticleRes.data.result.mediaGetarticle
					}
				}
			}
		},
		handleId(params) {
			this.mediaId = params
			this.getPushDetail(this.mediaId)
			this.getMaterianDatail(this.mediaId)
		},
		// 获取图文素材列表
		async getDataList() {
			await this.axios
				.post(api.getMaterialsList, {
					pageNo: 1,
					pageSize: 10,
				})
				.then(res => {
					if (res && res.data && res.data.code === 0) {
						this.imgList = res.data.result.result
						localStorage.materList = JSON.stringify(this.imgList)
					}
				})
		},
		// 推送列表
		async getPushDetail(id = this.mediaId) {
			await this.axios
				.post(api.getPushList, {
					pageNo: 1,
					pageSize: 10,
					type: 1,
					mediaId: id,
				})
				.then(res => {
					if (res && res.data && res.data.code === 0) {
						this.loading = false
						this.pushlist = res.data.result
					}
				})
		},
		// 模板列表
		async getTempList(pageNo = this.pageNo) {
			let params = {
				pageNo: 1,
				pageSize: 10,
			}
			let getMaterialsRes = await this.axios.post(api.getMaterialsList, params)
			if (getMaterialsRes.data.code === 0) {
				this.imgList = getMaterialsRes.data.result.result
				localStorage.materList = JSON.stringify(this.imgList)
				let imgId = this.imgList[0].media_id
				await this.axios
					.post(api.getPushList, {
						pageNo: this.pageNo,
						pageSize: 10,
						type: 2,
						mediaId: imgId,
					})
					.then(res => {
						if (res && res.data && res.data.code === 0) {
							this.templist = res.data.result
						}
					})
			}
		},
		// 消息列表
		async getMessageList(pageNo = this.pageNo) {
			let params = {
				pageNo: 1,
				pageSize: 10,
			}
			let getMaterialsRes = await this.axios.post(api.getMaterialsList, params)
			if (getMaterialsRes.data.code === 0) {
				this.imgList = getMaterialsRes.data.result.result
				localStorage.materList = JSON.stringify(this.imgList)
				let imgId = this.imgList[0].media_id
				await this.axios
					.post(api.getPushList, {
						pageNo: pageNo,
						pageSize: 10,
						type: 3,
						mediaId: imgId,
					})
					.then(res => {
						if (res && res.data && res.data.code === 0) {
							this.msgList = res.data.result
						}
					})
			}
		},
		// 素材详情
		async getMaterianDatail(id = this.mediaId) {
			await this.axios
				.post(api.getarticlesummary, {
					mediaId: id,
				})
				.then(res => {
					// 文章流量分析
					this.GetarticleList = res.data.result.mediaGetarticle
					// 素材总流量分析
					this.MediaList = res.data.result.wechatMediaSummary
					// 素材单日流量分析
					this.materialChartList = res.data.result.wechatMediaSummary.mediaGetarticles.reverse()
				})
		},
	},
}
</script>
<style lang="stylus" scoped>
.market-tabs
  >>>.el-tabs__nav
    margin-left 36px
    border none
    background-color transparent
  >>>.el-tabs__item
    color rgb(115, 135, 156)
    border 1px solid #e4e7ed
    margin-right 10px
    background-color #e4e7ed
    border-radius 4px
  >>>.el-tabs__item:hover
    color #000
  >>>.el-tabs__item.is-active
    background #fff
    color #000
    border-right 5px solid #e4e7ed
    border-bottom 1px solid #e4e7ed
  >>>.el-tabs__item:first-child
    border-left 2px solid #e4e7ed
  >>>.el-tabs__header
    border none
  >>>.el-tabs__nav .el-tabs__item
    margin-right 12px
</style>
