<template>
  <div style="overflow: scroll;">
    <h1>This is an about page</h1>
    <button @click="axiosTest()">test axios 请求数据</button><br><br>
	<button @click="ajaxTest()">ajax 请求数据</button>
	<p>这是请求到的数据{{msg}}</p>
	<br>
	<!-- layui测试 -->
	<lay-button type="primary">原始按钮</lay-button>
	<lay-button>默认按钮</lay-button>
	<lay-button type="normal">百搭按钮</lay-button>
	<lay-button type="warm">暖色按钮</lay-button>
	<lay-button type="danger">警告按钮</lay-button>
	
	<br><br>
	<div class="hello">
		<button type="button" class="btn btn-primary" @click="clickMsg" style="margin-left: 20px;">消息框</button>
    <button type="button" class="btn btn-primary" @click="clickConfirm" style="margin-left: 20px;">确认框</button>
    <button type="button" class="btn btn-primary" @click="clickOpen" style="margin-left: 20px;">指定尺寸框</button>
    <button type="button" class="btn btn-primary" @dblclick="dblclickTest" style="margin-left: 20px;">双击测试</button>
	</div>
	
	<br><br>
	<div class="Select">
		<el-select v-model="msg" filterable placeholder="请选择">
			<el-option
			v-for="item in options"
			:key="item.value"
			:label="item.label"
			:value="item.value"
			/>
		</el-select>
	</div>
	
	<br><br>
	<div class="hello">
		<button type="button" class="btn btn-info" @click="clickCancl">返回</button>
	</div>
  </div>
</template>
<script>
import { layer } from "@layui/layer-vue";
export default{
	setup() {
		const options = [
			{
			value: "上海市",
			label: "上海市",
			},
			{
			value: "杭州市",
			label: "杭州市",
			},
			{
			value: "北京市",
			label: "北京市",
			},
			{
			value: "天津市",
			label: "天津市",
			},
			{
			value: "重庆市",
			label: "重庆市",
			},
			];
		return {
			options
		};
	},
	data() {
	  return {
	    msg: ''
	  }
	},
	methods:{
		axiosTest() {
			// console.log(this.$axios);
			this.$axios.post('http://localhost:8098/lilo/test1', {
				params: {
					aaa: '123',
					bbb: '啊啊啊',
					ccc: 'YanJie'
				}
			}).then(item => {
				if (item.data.success) {
				console.log(item);
				this.msg = item.data.msg + ' axios';
				}

			}).catch(err => {
				this.msg = '错误';
			})
		},
		ajaxTest() {
			// console.log(jQuery);
			$.post('http://localhost:8098/lilo/test', {
				aaa: '123',
				bbb: '啊啊啊',
				ccc: 'YanJie'
			}).then(item => {
				console.log(item);
				if (item.status == '200') {
					this.msg = item.msg + ' ajax';
				}
			})
		},
		clickMsg() {
			layer.msg('成功消息', { time: 1000, icon: 1 });
		},
		clickConfirm() {
			layer.confirm('欢迎来到小易力龙智能预审机器人的世界',{icon:1});
		},
		clickOpen() {
			layer.open({
				type: 4,// 4弹出content内容，2弹出url页面
				area: ['640px', '480px'],
				fix: false,
				//不固定
				maxmin: true,
				shade: 0.3,
				title: '提示',
				content: '欢迎来到小易力龙智能预审机器人的世界'
			});
		},
		dblclickTest() {
			layer.msg('警告消息', { time: 1000, icon: 3 })
		},
		clickTest() {
			// layer.open({title:"标题", content: "内容"});
			// layer.msg('普通消息', { time: 1000 })
			// layer.msg('成功消息', { time: 1000, icon: 1 })
			// layer.msg('失败消息', { time: 1000, icon: 2 })
			// layer.msg('警告消息', { time: 1000, icon: 3 })
			// layer.msg('疑问消息', { time: 1000, icon: 4 })
			layer.confirm('确认框')
			// layer.confirm('询问框', {
			//     btn: [
			//       {
			//         text: '站着看',
			//         callback: function (id) {
			//           layer.close(id)
			//         },
			//       },
			//       {
			//         text: '坐着看',
			//         callback: function (id) {
			//           layer.close(id)
			//         },
			//       },
			//     ],
			//   })
			
			
			// 	layer.close(index);
		},
		clickCancl() {
			this.$router.go(-1);
		}
	}
}
</script>
