//table列表
<template>
  <div>
  <el-container style="height: 450px; border: 1px solid #eee">
    <el-container>
      <p style="line-height:40px; padding-left: 8px;box-sizing: border-box;">
        使用者名稱：
        <el-input
          v-model="search"
          size="mini"
          style
 
="width:200px;outline:none;"
          placeholder="輸入關鍵字搜尋"
        />&nbsp;
        <el-button size="small" type="primary">篩選</el-button>
        <el-button size="small" type="primary">新加</el-button>
      </p>
   <!--  :data="tableData.filter(data => !search ||
 

           data.name.toLowerCase().includes(search.toLowerCase()))" -->
      <el-main>
        <div></div>
        <el-table
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column label="ID" prop="id"></el-table-column>
          <el-table-column label="
 
使用者名稱" prop="name"></el-table-column>
          <el-table-column label="性別" prop="sex"></el-table-column>
          <el-table-column label="電話" prop="tel"></el-table-column>
          <el-table-column >
            <template slot="header" slot-scope="scope">
              <el-table-column label="操作" ></el-table-column>
            </template>
            <template slot-scope="scope" align="left" >
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
             

    <el-button  size="mini" type="danger" @click="handleDelete(scope.$index, tableData)">刪除</el-button>

            
            </template>
          </el-table-column>
        </el-table>
         <div class="block">
  <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-size="pagesize"
                        layout="total, prev, pager, next"
                        :total="total"
                        
                        >
                        </el-pagination>
                          
    
  </div>
      </el-main>
    </el-container>
  </el-container>
  <el-dialog
  title="修改聯絡人資訊"
  :visible.sync="dialogVisible"
  width="80%"
  :before-close="handleClose">
  <Form :form='form' @closeModel="close" @datas="insert" ></Form>
  <span slot="footer" class="dialog-footer">
  </span>
</el-dialog>
  </div>
</template>

<script>
import Form from './Form'
export default {
  data() {
    return {
        pagesize: 5,
        currentPage: 1,
       form: {
          id: '',
          name: '',
          tel: '',
          section: '',
          position: '',
          sex: '',
        },
     
      dialogVisible: false,
      tableData: [],
      search: "",
    };
  },
  created() {
    this.listdata();
  },
  methods: {
  // 獲取列表
    listdata() {
      this.$http.post(`https://`, {
          pageNum: this.currentPage,
          pageSize: this.pagesize,
        })
        .then((res) => {
          this.total = res.total;
          this.tableData = res.data;
          console.log(this.tableData);
        });
     },
      handleSizeChange(val) {
         this.pagesize = val
      console.log(`每頁 ${val} 條`);
      this.listdata();
      },
      handleCurrentChange(val) {
       this.currentPage = val
      console.log(`當前頁: ${val}`);
      this.listdata();
      },
//修改儲存
    insert(){
      this.dialogVisible = false
    },
//修改取消
    close(){
       this.dialogVisible = false
    },
    handleEdit(index, row) {
      this.dialogVisible = true
      console.log(index, row);
      this.form=row
    },
    handleDelete(index, row) {
      console.log(index, row);
 row.splice(index, 1);
    }
  },
  components: {
    Form
  }
};
</script>
<style>

.el-header {
  background-color: whitesmoke;
  color: #333;
  line-height: 30px;
}

::-webkit-scrollbar {
  display: none;
}
.el-aside {
  color: #333;
}
</style>
//修改form表單
<template>
    <div class="form">
      <el-form ref="form" :model="form" label-width="80px">
       <el-form-item label="id">
        <el-input v-model="form.id"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
       <el-form-item label="電話號碼" prop="tel">
        <el-input v-model="form.tel"></el-input>
      </el-form-item>
       <el-form-item label="職位" prop="position">
        <el-input v-model="form.position"></el-input>
      </el-form-item>
       <el-form-item label="部門" prop="section">
        <el-input v-model="form.section"></el-input>
      </el-form-item>
      <el-form-item label="性別">
        <el-select v-model="form.sex" placeholder="性別">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
    <el-button type="primary" @click="onSubmit(form)">立即建立</el-button>
    <el-button  @click="onClose(form)">取消</el-button>
  </el-form-item>
</el-form>
    </div>
</template>

<script>
    export default {
    props:['form'],
    data() {
      return {
         form: {
          id: '',
          name: '',
          tel: '',
          section: '',
          position: '',
          sex: '',
        }
      }
    },
    methods: {
       onSubmit(form) {
        this.$emit('datas',this.form)
      },
      onClose(form){
         this.$emit('closeModel')
 //  this.$refs.form.resetFields()
      }
    }
  }
</script>

<style>
</style>