<template>
  <div class="bodyBoxs">
    <div class="boxs">
      <div style="margin-bottom: 15px;width: 440px">
        <el-input placeholder="请输入姓名或者电话" v-model="search" class="input-with-select">
          <el-select style="width: 100px;" v-model="type" slot="prepend" placeholder="请选择">
            <el-option label="全部" value="2"></el-option>
            <el-option label="已使用" value="1"></el-option>
            <el-option label="未使用" value="0"></el-option>
          </el-select>
          <el-tooltip slot="append" class="item" effect="dark" content="点击搜索" placement="top-start">
            <el-button icon="el-icon-search" @click="getData"></el-button>
          </el-tooltip>
          <el-tooltip slot="append" class="item" effect="dark" content="导入白名单" placement="top-start">
            <el-button  icon="el-icon-folder-add" style="margin-left: 20px;border-left: 1px rgb(220,223,230) solid "  @click="stateWhite"></el-button>
          </el-tooltip>
        </el-input>
      </div>
      <el-table
        :data="tableData"
        border
        v-loading="loading"
        :row-class-name="tableRowClassName">
        stripe
        style="width: 100%">
        <el-table-column
          prop="id"
          label="编号"
          width="80">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          >
        </el-table-column>
        <el-table-column
          prop="phone"
          label="手机号"
        >
        </el-table-column>
        <el-table-column
          prop="desk"
          label="晚宴桌位"
          >
        </el-table-column>
        <el-table-column
          prop="hotel"
          label="酒店信息"
        >
        </el-table-column>
        <el-table-column
          prop="seat"
          label="会议座位"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-button @click="editDialog(scope.row)" type="warning" size="small">编辑</el-button>
            <el-button @click="deletes(scope.row)" type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="编辑" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-input type="hidden" v-model="form.id" autocomplete="off"></el-input>
          <el-form-item label="手机号">
            <el-input v-model="form.phone" placeholder="手机号"></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="form.name" placeholder="姓名"></el-input>
          </el-form-item>
          <el-form-item label="座位">
            <el-input v-model="form.seat" placeholder="座位"></el-input>
          </el-form-item>
          <el-form-item label="桌子信息">
            <el-input v-model="form.desk" placeholder="桌子信息"></el-input>
          </el-form-item>
          <el-form-item label="酒店地址">
            <el-input v-model="form.hotel" placeholder="酒店地址"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="edit">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog width="80%"title="导入白名单" :visible.sync="whites">
        <el-upload
          class="upload-demo"
          drag
          action="https://jingji-h5.ecps.com.cn///index.php?s=admin/uploadExcel"
          :on-success = "successUpload"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传xlsx格式文件，且不超过50Mb</div>
        </el-upload>
        <h2 v-if="isTable">预览表格信息</h2>
        <el-table
          v-if="isTable"
          :data="tableDatas"
          style="width: 100%">
          <el-table-column
            prop="phone"
            label="手机号">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="seat"
            label="座位">
          </el-table-column>
          <el-table-column
            prop="desk"
            label="桌子信息">
          </el-table-column>
          <el-table-column
            prop="hotel"
            label="酒店地址">
          </el-table-column>
        </el-table>
        <el-button type="danger" style="position: fixed;bottom: 20px;left: 50%;transform: translate(-50%, -50%);" v-if="isTable" @click="submitTable">确认表格信息并导入</el-button>
      </el-dialog>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 20, 30, 50]"
        :page-size=pageSize
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import { getToken } from "@/utils/auth";
  import de from "element-ui/src/locale/lang/de";
  export default {
    computed: {
      de() {
        return de
      }
    },
    data(){
      return{
        isTable:false,
        tableDatas: [],
        search:'',
        tableData: [],
        total:0,
        pages:1,
        pageSize:10,
        loading:false,
        currentPage4:0,
        type:'2',
        dialogFormVisible:false,
        form:{
          "id": 1,
          "phone": "15528278516",
          "name": "王大毛",
          "seat": "B厅 10排 1号",
          "desk": "C厅 10桌",
          "hotel": "万豪酒店 1901",
        },
        whites:false
      }
    },
    created(){
      this.getData();
    },
    methods: {
      submitTable(){
        this.$confirm('确定导入该表格数据，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true;
          this.$api.importWhite({
            data: this.tableDatas,
          }).then((res) => {
            console.log(res)
            this.loading = false;
            if (res.code == 0) {
              this.whites = false;
              this.tableDatas = [];
              this.isTable = false;
              this.getData()
              this.$message({
                message: res.message,
                duration: 1500,
                type: 'success'
              });
            } else {
              this.$message({
                message: res.message,
                duration: 1500,
                type: 'error'
              });
            }
          }).catch((res) => {
            this.loading = false;
          });
        }).catch(() => {
          this.$message({
            type: 'warning',
            message: '已取消'+text
          });
        });
      },
      successUpload(response){
        if (response.code != 0){
          this.$message({
            message: response.message,
            duration: 1500,
            type: 'error'
          });
          return;
        }
        let arr = Object.values(response.data); //对象转化为数组
        console.log(arr)
        this.tableDatas = arr;
        this.isTable = true
      },
      stateWhite(){
        this.whites = true;
      },
      editDialog(row){
        this.form = row;
        this.dialogFormVisible = true;
      },
      edit(){
        this.loading = true;
        this.$api.editWhiteData(this.form).then((res) => {
          console.log(res)
          this.loading = false;
          if (res.code == 0) {
            this.getData()
            this.$message({
              message: res.message,
              duration: 1500,
              type: 'success'
            });
            this.dialogFormVisible = false;
          } else {
            this.$message({
              message: res.message,
              duration: 1500,
              type: 'error'
            });
            this.dialogFormVisible = false;
          }
        }).catch((res) => {
          this.loading = false;
        });
      },
      deletes(row){
        this.$confirm('确定删除'+row.name+', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true;
          this.$api.deleteWhiteData({
            id: row.id,
          }).then((res) => {
            console.log(res)
            this.loading = false;
            if (res.code == 0) {
              this.getData()
              this.$message({
                message: res.message,
                duration: 1500,
                type: 'success'
              });
            } else {
              this.$message({
                message: res.message,
                duration: 1500,
                type: 'error'
              });
            }
          }).catch((res) => {
            this.loading = false;
          });
        }).catch(() => {
          this.$message({
            type: 'warning',
            message: '已取消'
          });
        });
      },
      getData() {
        this.loading = true;
        this.$api.getWhiteData({
          page: this.pages,
          size: this.pageSize,
          search: this.search,
          type:this.type
        }).then((res) => {
          console.log(res)
          if (res.code == 0) {
            this.loading = false;
            this.tableData = res.data.data
            this.total = res.data.total
            this.currentPage4 = res.data.current_page
          } else {
            this.$message(res.message);
          }
        }).catch((res) => {
          this.loading = false;
        });
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.getData()
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      handleCurrentChange(val) {
        console.log('点击了');
        this.pages = val;
        this.getData();
      },
    }
  }
</script>
<style scoped>
  .bodyBoxs{
    padding: 40px;
  }
  .boxs{
    width: 100%;
    background: #fff;
    border-radius: 15px;
  }
</style>
