<template>
  <list-layout>
    <div class="components-demo-wrap">
      <date-picker v-model="filters.dateTime" />
    </div>
    <div class="components-demo-wrap">
      <date-range-picker v-model="filters.dateRange" />
    </div>
    <template slot="filterItem">
      <el-button
        type="primary"
        @click="showcheck"
      >确认框点击</el-button>
    </template>
    <normal-dialog
      :visible.sync="dialogVisible"
      :before-close="closeHandle"
    >
      <template slot="title">
        <img src="@/assets/images/dialog/add_icon.png">
        新增
      </template>
      <form-area title="基本信息">
        <form-line>
          <form-item
            label="姓名"
            size="big"
          >
            <el-input></el-input>
          </form-item>
          <form-item label="性别">
            <el-select v-model="selected.sex">
              <el-option value="11">ssas</el-option>
              <el-option value="12">gasv</el-option>
              <el-option value="13">hsfd</el-option>
            </el-select>
          </form-item>

        </form-line>
      </form-area>
      <div slot="footer">
        <el-button
          type="primary"
          @click="showMessage"
        >确定</el-button>
        <el-button>取消</el-button>
      </div>
    </normal-dialog>
  </list-layout>
</template>

<script>
import Vue from 'vue';
import { Button, Input, Select, Option } from 'element-ui';

Vue.component(Button.name, Button);
Vue.component(Input.name, Input);

export default {
  name: 'DialogPage',
  data() {
    return {
      filters: {},
      dialogVisible: false,
      selected: {},
    };
  },
  methods: {
    showcheck() {
      this.dialogVisible = true;
    },
    closeHandle(done) {
      done();
    },
    showMessage() {
      this.$message.info('123123');
    },
  },
};
</script>
