<template>
  	<el-dialog
			title="选择模板"
			:visible.sync="dialogVisibleTemplate"
			width="50%"
			:show-close="false">
			<div>
				<el-select v-model="tempalteValue" placeholder="请选择" size="small" class="w100">
					<el-option
						v-for="item in options"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					>
					</el-option>
				</el-select>
				<el-input
					placeholder="支持精确搜索和模糊搜索"
					size="small"
					class="pct50"
					v-model="searchMsg">
				</el-input>
				<button class="btn btn-primary" @click="getMessageTemplateList">搜索</button>
				<el-table
					ref="multipleTable"
					:data="tableDataTemplate"
					tooltip-effect="dark"
					border
					max-height="300"
					style="width: 100%"
					class="mt20"
					>
					<el-table-column
						label="序号"
						align="center"
						width="80"
					>
						<template slot-scope="scope">
							{{scope.$index+1}}
						</template>
					</el-table-column>
					<el-table-column
						label="名称"
						align="center"
						prop="templateName"
					>
					</el-table-column>
					<el-table-column
						label="模板内容"
						align="center"
						width="300"
					>
						<template slot-scope="scope">
							<el-tooltip effect="light" :content="scope.row.templateDescription" placement="top">
								<div class="break-two" style="width:290px">{{scope.row.templateDescription}}</div>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column
						label="操作"
						width="80">
						<template slot-scope="scope">
							<div class="el-dropdown-link" @click="chooseTemplate(scope.row)">{{choosedId==scope.row.id?'取消关联':'选择'}}</div>
						</template>
					</el-table-column>
				</el-table>
				<div class="pull-right">
					<el-pagination
						@size-change="sizeChangeTemplate"
						@current-change="currentChangeTemplate"
						:current-page="listParamsTemplate.currentPage"
						:page-sizes="[30, 50, 100, 300]"
						:page-size="listParamsTemplate.pageSize"
						layout="total, sizes, prev, pager, next, jumper"
						:total="listParamsTemplate.total"
						style="float:right;display:inline-block"
					></el-pagination>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="chooseTemplate({templateName:'',id:''})" type="primary">关 闭</el-button>
			</span>
	</el-dialog>
</template>

 <script>
 export default {
   props: {
     dialogVisibleTemplate:{
			 type:Boolean,
			 default: false,
		 },
		 choosedId:{
			type:String,
			default: '',
		 }
	 },
	 data() {
		return {
			tableDataTemplate:[],
			listParamsTemplate:{
				currentPage: 1,
				pageSize: 50,
				total: 0,
				templateName:'',
				templateDescription:''
			},
			searchMsg:'',
			options: [{
				value: '1',
				label: '模板名称'
			}, {
				value: '2',
				label: '模板内容'
			}],
			tempalteValue: '1'
		}
	 },
	 mounted(){
		 this.getMessageTemplateList()
	 },
	 methods:{
		 	chooseTemplate(val){
				this.$emit('chooseTemplate',val)
			},
			getMessageTemplateList(){
				let{listParamsTemplate,tempalteValue,choosedId}=this
				if(tempalteValue==1){
					this.listParamsTemplate.templateName=this.searchMsg
					this.listParamsTemplate.templateDescription=''
				}else{
					this.listParamsTemplate.templateDescription=this.searchMsg
					this.listParamsTemplate.templateName=''
				}
				this.axios({
						url:'assistant/activity/pageWishCampaignTemplateQuery',
						params:listParamsTemplate,
						method: "get"
					}).then(res => {
						if(res.success){
							let data=res.module
							this.tableDataTemplate=data.result
							this.listParamsTemplate.total=data.total
						}
				})
			},
			currentChangeTemplate(val) {
				this.listParamsTemplate.currentPage = val;
				this.getMessageTemplateList();
			},
			sizeChangeTemplate(val){
				this.listParamsTemplate.pageSize = val;
				this.getMessageTemplateList();
			},
	 },
 }
 </script>

 <style scoped>

 </style>