<template>
  <el-dialog title="选择商品" width="450px" v-model="show">
    <div class="app-container">
      <div class="head-container">
        <el-table
          :data="tableData"
          ref="table"
          @selection-change="handleSelectionChange"
          @cell-click="cellClick"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="套餐名称" prop="title"></el-table-column>
          <el-table-column label="原价" prop="amount"></el-table-column>
        </el-table>
        <div class="u-flex u-row-center u-m-t-50 gap-20">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="confirm">确认核销</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { ElMessage } from "element-plus";
import { $douyin_certificateprepare, $meituan_certificateprepare } from "@/api/coup/index";
export default {
  data() {
    return {
      show: false,
      data: {},
      tableData: [],
      selArr: [],
      types: "douyin", //douyin meituan
    };
  },
  filters: {},
  mounted() {
    // this.getTableData();
  },
  methods: {
    handleSelectionChange(e) {
      this.selArr = e;
      console.log(e);
    },
    cellClick(user) {
      this.$refs.table.toggleRowSelection(user);
    },
    async choose(user) {
      console.log(user);
    },
    close() {
      this.show = false;
    },
    async confirm() {
      console.log(this.selArr.length);
      if (this.selArr.length <= 0) {
        return ElMessage.error("请选择套餐商品");
      }
      console.log(this.types);
      if (this.types == "meituan") {
        //美团
        const mRes = await $meituan_certificateprepare({
          couponCode: this.data.couponCode,
          num: this.selArr.length,
        });
      }
      //抖音
      if (this.types == "douyin") {
        const res = await $douyin_certificateprepare({
          verify_token: this.data.verify_token,
          encrypted_codes: this.selArr.map((item) => item.encrypted_code).join(","),
          id: this.data.id,
        });
      }

      ElMessage.success("核销成功");
      this.close();
      this.$emit("hexiaoSuccess");
    },
    open(res, types) {
      this.data = res;
      this.types = types ? types : this.types;
      this.tableData = res.goods;
      this.show = true;
      this.$nextTick(() => {
        this.$refs.table.toggleAllSelection();
      });
    },
  },
};
</script>

<style scoped lang="scss">
.user_info {
  display: flex;
  align-items: center;

  .name {
    margin-left: 10px;
  }
}

:deep(.el-input--small .el-input__inner) {
  height: 36px;
  line-height: 36px;
}

:deep(.image-slot) {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #efefef;
  font-size: 20px;
  color: #999;
}

.card {
  background-color: #f5f5f5;
  padding: 0 14px;

  .title {
    font-size: 22px;
    padding-top: 14px;
  }

  .row {
    display: flex;
    padding: 20px 0;

    .item {
      flex: 1;

      .t {
        text-align: center;
        color: #555;
      }

      .n {
        color: #000;
        font-size: 20px;
        font-weight: bold;
        padding-top: 6px;
        text-align: center;
      }
    }
  }
}

.flex {
  display: flex;
  align-items: center;
}

.gap-20 {
  gap: 20px;
}
</style>