<template>
  <el-dialog title="核销授权" :visible.sync="show" v-if="show" width="800px">
    <el-row :gutter="20">
      <el-col :span="5">当前演出</el-col>
      <el-col :span="15">{{ form.showName }}</el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="5">添加用户</el-col>
      <el-col :span="12"
        ><user-select @chooseItem="chooseUserHandler" v-if="show"
      /></el-col>
    </el-row>

    <el-table :data="memberList" :loading="loading">
      <el-table-column prop="phone" label="手机号" />
      <el-table-column prop="nickname" label="用户名" />
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button
            @click="removeItemHandler(scope.row)"
            type="danger"
            icon="el-icon-delete"
            circle
          />
        </template>
      </el-table-column>
    </el-table>

    <div slot="footer" class="dialog-footer">
      <el-button v-loading="loading" type="primary" @click="saveHandler"
        >关闭</el-button
      >
      <el-button @click="close">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
/**
 * Created on 2022-10-11
 * @description nft
 * @author BboySpider
 */
import { fetPage, addObj, delTierObj } from "@/api/zshow/zwriteOff";
import userSelect from "@/components/UserSelect";

export default {
  name: "nftWhiteList",
  components: { userSelect },
  data() {
    return {
      datas: [],
      form: {},
      show: false,
      loading: false,
      memberList: [],
    };
  },

  methods: {
    setPicker(e) {
      console.log(e);
    },
    open(origin) {
      // 编辑初始化
      let form = Object.assign({}, origin);
      this.form = form;
      console.log("form", form);
      this.getList();
    },
    getList() {
        this.loading = true
      fetPage({
        showId: this.form.showId,
        page: 1,
        currrnt: 200,
      }).then((res) => {
        this.memberList = res.data.records;
        console.log(res);
      }).finally(()=>{
        this.loading = false;
      });
      this.show = true;
    },
    close() {
      this.memberList = [];
      this.show = false;
    },
    saveHandler() {
      this.close();
    },
    finish() {
      this.close();
      this.$emit("reloadTable");
    },
    chooseUserHandler(user) {
      console.log("user", user);
      addObj({
        memberId: user.id,
        showId: this.form.showId,
      }).then((res) => {
        if (res.code === "success") {
          this.$message.success("添加用户成功");
          this.getList();
        }
      });
    },
    removeItemHandler(e) {
      this.loading = truel;
      delTierObj(e.authId)
        .then((res) => {
          if (res.code === "success") {
            this.$message.success("删除成功");
            this.getList();
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },

    tset() {
      const obj = {};
    },
  },
};
</script>

<style lang="scss" scoped>
.el-table {
  margin: 20px 0;
}

.el-row {
  display: flex;
  align-items: center;

  margin-bottom: 20px;
  font-size: 16px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
