<template>
	<view class="safe-area-inset-bottom notice  p-2 ff_pfsc">
		<view class="p-col-16">
			<d-input prefixIcon="search" borderRadius="64rpx" v-model="keyword" type="text" placeholder="输入关键字搜索相关快速回复"
				@handleInput="toSearch" height="66"></d-input>
		</view>
		<view class="flex">
			<view class="tabs">
				<u-tabs name="txt" :list="tabs" :is-scroll="true" :current="active" @change="setTabActive"></u-tabs>
			</view>
			<view class="flex flex-ali-center">
				<u-icon label="管理" size="40" name="setting-fill"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				tabs: [{
					id: 1,
					txt: '测试1'
				}, {
					id: 2,
					txt: '测试2'
				}, {
					id: 3,
					txt: '测试3'
				}, {
					id: 4,
					txt: '测试4'
				}, {
					id: 5,
					txt: '测试5'
				}, {
					id: 6,
					txt: '测试6'
				}, {
					id: 7,
					txt: '测试7'
				}, {
					id: 8,
					txt: '测试8'
				}, ],
				active: 0,
				list: [],
				page: 1,
			}
		},
		mounted() {

		},
		methods: {
			getList() {
				this.list.push('获取列表')
			},
			setTabActive(index) {
				this.active = index
				this.page = 1
				this.getList()
			}
		},
		watch: {
			keyword(oldValue, newValue) {
				this.$u.debounce(this.getList, 500)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs{
		width: 590rpx;
	}
</style>
