<template>
  <div>
    <div style="text-align:left">
      <!-- <el-input v-model="tableDataName" size="small" placeholder="請輸入姓名" style="width:240px"></el-input>
      <el-button type="primary" size="small" @click="searchUser">搜索</el-button> -->
      <!-- <el-button type="primary" size="small" @click="openData">展示數(shù)據(jù)</el-button> -->
      <el-button type="success" size="small" @click="addRow(users)">新增</el-button>
      <!-- <el-button type="success" size="small" @click="handleAdd()">新增</el-button> -->
      <el-button type="primary" size="small" @click="removeUsers()">批量刪除</el-button>
    </div>
    <div>
      <el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
          <el-table-column type="selection" width="60">
          </el-table-column>
          <el-table-column type="index" width="60">
          </el-table-column>
          <el-table-column prop="name"  label="商品名稱" width="120" sortable>
          </el-table-column>
          <el-table-column prop="price" label="價格" width="100" sortable>
          </el-table-column>
          <el-table-column prop="reserve" label="商品庫存" min-width="120" sortable>
          </el-table-column>
          <el-table-column prop="data" label="日期" min-width="120" sortable>
          </el-table-column>
          <el-table-column prop="desc" label="商品描述" min-width="180" sortable>
          </el-table-column>
          <el-table-column label="操作" width="300">
            <template slot-scope="scope">
              <!-- <el-button type="success" size="small" @click="handleEdit(scope.$index, scope.row)">新增</el-button> -->
              <el-button type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
              <el-button size="small" type="danger" @click="handleDelete(scope.$index, users)">刪除</el-button>
            </template>
          </el-table-column>
      </el-table> 
    </div>
        <!--新增/編輯界面-->
    <el-dialog :title="titleMap[dialogStatus]" :visible.sync="FormVisible" :close-on-click-modal="false" class="edit-form"
    :before-close="handleClose">
      <el-form :model="Form" label-width="80px" :rules="editFormRules" ref="Form">
          <el-form-item label="商品名稱" prop="name">
            <el-input v-model="Form.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品價格">
            <el-input-number v-model="Form.price"></el-input-number>
          </el-form-item>
          <el-form-item label="商品庫存">
            <el-input v-model="Form.reserve"></el-input>
          </el-form-item>
          <el-form-item label="選擇日期" :picker-options="pickerOptions">
            <div>
                <el-date-picker v-model="Form.data" type="date" placeholder="選擇日期" format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"></el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="商品描述">
            <el-input type="textarea" v-model="Form.desc"></el-input>
          </el-form-item>         
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="handleCancel('Form')">取消</el-button>
          <el-button v-if="addBtnshow" type="primary" @click.native="confirmAdd('Form')">確定</el-button>
          <el-button v-if="editBtnshow" type="primary" @click.native="confirmEdit('Form')">確定</el-button>
        </div>
      </el-dialog>      
  </div>
</template>
<script>
  var _index;
  export default {
    data() {
      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },
        titleMap: {
            addEquipment:'新增',
            editEquipment: "編輯"
        },
                 //新增和編輯彈框標題
        dialogStatus: "",
        Form: {
		  id: 0,
		  name: '',
		  price: 0,
          reserve:'',
          data: '',
          desc: '',      
        },
        users:[
        {name:'牙刷',price:'13',reserve:'13',data:'',desc:'11'},
        {name:'牙膏',price:'13',reserve:'12',data:'',desc:'22'},
        {name:'旁氏洗面奶',price:'33',reserve:'45',data:'',desc:'33'},
        {name:'無印良品水乳',price:'22',reserve:'34',data:'',desc:'55'},
        {name:'悅風詩吟',price:'113',reserve:'56',data:'',desc:'99'}
        ],  
        editFormRules:{
          name: [
            { required: true, message: '請輸入商品名稱', trigger: 'blur' }
          ],
          reserve: [
            { required: true, message: '請輸入商品庫存', trigger: 'blur' }
          ],
          desc: [
            { required: true, message: '請輸入商品描述', trigger: 'blur' }
          ],
        },
        FormVisible: false,
        currentRow:[],
        ids:[],
        listLoading:'',
        addBtnshow:false,
        editBtnshow:false,
        editLoading:'', 
        dialogStatus: '',
        selected:[],
        editid:'',
        searchForm:[]
      }
    },
    methods: {
      // searchUser(){
      //   console.log(this.searchForm.name)
      //   var username = this.searchForm.name;
      //   let resultdata = this.userlist.filter(users =>{
      //     if(users.name == username|| users.name.indexOf(username) != -1)
      //     {
      //       console.log("已找到！")
      //       return true;
      //     }
      //   });
      //   this.userlist = resultdata;
      // },
      selsChange:function(val){  //點擊選中
        console.log(val);
        this.selected = val;
      },
      // 直接新增一行空行
      // handleAdd(val) {
      //   this.dialogStatus = 'create';
      //   this.ViewVisible = true;
//       },
//       addRow(users,event){//新增一行
//  //之前一直想不到怎么新增一行空數(shù)據(jù)，最后幸虧一位朋友提示：表格新增一行，其實就是源數(shù)據(jù)的新增，從源數(shù)據(jù)入手就可以實現(xiàn)了，于是 恍然大悟?。?
//     this.FormVisible = true;
//     users.push({ name: '', price: '',reserve:'',desc:''})
//  },
      // 點擊新增
      addRow(users,event) {
        this.FormVisible = true;
        this.Form = {
          id: 0,
          name: '',
          price: 0,
          reserve:'',
          data:'',
          desc: '',
        };
        this.dialogStatus = "addEquipment"
        this.addBtnshow = true
        this.editBtnshow = false
      },
      // 點擊確定（新增）
      confirmAdd() { 
        // this.users = this.users || []
        this.users.push({
        name: this.Form.name,
        price: this.Form.price,
        reserve: this.Form.reserve,
        data: this.Form.data,
        desc: this.Form.desc
      })
      // storage.set('users', this.users);
      this.FormVisible = false;      
      },
      //點擊編輯
      handleEdit:function(index, row) {
        this.FormVisible = true;
        this.Form = Object.assign({}, row); //這句是關鍵?。。?
        _index = index;
        console.log(index);
        console.log(_index);
        
        this.dialogStatus = "editEquipment"
        this.addBtnshow = false
        this.editBtnshow = true
      },   
      // 點擊確定（編輯）  
      confirmEdit(){
        var editdata = _index;
        console.log(editdata);
        this.users[editdata].name=this.Form.name;
        this.users[editdata].price=this.Form.price;
        this.users[editdata].reserve=this.Form.reserve;
        this.users[editdata].data=this.Form.data;
        this.users[editdata].desc=this.Form.desc;
        this.FormVisible = false;
        // 我的 更新的時候就把彈出來的表單中的數(shù)據(jù)寫到要修改的表格中
        // var postdata = {
        //   name: this.Form.name,
        //    price: this.Form.price,
        //    reserve: this.Form.reserve,
        //    data: this.Form.data,
        //    desc: this.Form.desc,
        // }
        //這里再向后臺發(fā)個post請求重新渲染表格數(shù)據(jù)
        // this.$set(this.users,'name')
        // let studenteList=this.Form;
        // console.log(studenteList);
        // let {name,price,reserve,data,desc} = studenteList;
              
            },
      //點擊關閉dialog
      handleClose(done) {
        //  done();
        //  location.reload();
        this.FormVisible = false;
      },     
      //點擊取消
      handleCancel(formName) {
        this.FormVisible = false;
      },
      // 刪除   
      handleDelete(index, row) {
        console.log(index, row);
        this.$confirm('此操作將永久刪除該文件, 是否繼續(xù)?', '提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            // delete:row.splice(index, 1),
            type: 'success',
            message: '刪除成功!',
            delete: row.splice(index, 1)   //splice 刪除對象是數(shù)unfuntion組   如果是對象會出現(xiàn)錯誤  row.solice not is

            // url: this.$router.push('/')
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消刪除'
          });
        });
      },
      removeUsers() {
          this.$confirm('此操作將永久刪除 ' + this.selected.length + ' 個用戶, 是否繼續(xù)?', '提示', { type: 'warning' })
          .then(() => {
          console.log(this.selected);
          var ids = [];
          //提取選中項的id
          $.each(this.selected,(i, users)=> {
          ids.push(users.id);
          });
          // 向請求服務端刪除
          //  var resource = this.$resource(this.url);
          resource.remove({ids: ids.join(",") })
          .then((response) => {
          this.$message.success('刪除了' + this.selected.length + '個用戶!');
          this.getUsers();
          })
          .catch((response) => {
          this.$message.error('刪除失敗!');
          });
          })
          .catch(() => {
          this.$Message('已取消操作!');
          });
      }     
    }, 
  }
</script>
<style>
</style>