<template>
  <el-dialog
    :title="'兑换链接列表'"
    :center="true"
    align="left"
    top="8vh"
    width="1040px"
    @close="showModelThis = false"
    :close-on-click-modal="false"
    :visible.sync="showModelThis"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    append-to-body
  >
    <el-card style="margin-top: -20px">
      <ex-table :columns="webUrlcolumns" :table="table" :data="tableData">
        <template #table-header="{ selection }">
          <div style="width: 100%">
            <el-row style="padding: 0" v-if="sitem && sitem.id">
              <el-col :span="7" style="padding: 3px 0"
                ><span style="display: inline-block; width: 100px" class="tr"
                  >商品上线编号：</span
                >{{ sitem.yz_good_code }}</el-col
              >
              <el-col :span="5" style="padding: 3px 0"
                ><span style="display: inline-block; width: 100px" class="tr"
                  >平台商品编号：</span
                >{{ sitem.plat_code }}</el-col
              >
              <el-col :span="12" style="padding: 3px 0"
                ><span style="display: inline-block; width: 100px" class="tr"
                  >商品名称：</span
                >{{ sitem.good_name }}</el-col
              >
              <el-col :span="7" style="padding: 3px 0"
                ><span style="display: inline-block; width: 100px" class="tr"
                  >负责人：</span
                >{{ sitem.contactor }}</el-col
              >
              <el-col :span="5" style="padding: 3px 0"
                ><span style="display: inline-block; width: 100px" class="tr"
                  >负责人电话：</span
                >{{ sitem.mobile }}</el-col
              >
              <el-col :span="12" style="padding: 3px 0"
                ><span style="display: inline-block; width: 100px" class="tr"
                  >公司名称：</span
                >{{ sitem.company_name }}</el-col
              >
              <el-col :span="7" style="padding: 3px 0"
                ><span style="width: 100px; display: inline-block" class="tr"
                  >活动编码：</span
                >{{ sitem.actCode }}</el-col
              >
              <el-col :span="16" style="padding: 3px 0"
                ><span style="display: inline-block; width: 100px" class="tr"
                  >活动名称：</span
                >{{ sitem.act_name }}</el-col
              >
              <el-col :span="1" style="padding: 3px 0">
                <el-tooltip effect="dark" class="fr" content="删除" placement="top">
                  <i
                    class="el-icon-delete tb-icon"
                    @click="deleteItem(selection)"
                  ></i> </el-tooltip
              ></el-col>
            </el-row>
          </div>
        </template>
      </ex-table>
    </el-card>
  </el-dialog>
</template>

<script>
import asyncRequest from "@/apis/service/youzan/luckDrawGood";
import resToken from "@/mixins/resToken";
import { tHeader, filterVal, webUrlcolumns } from "./columns";
export default {
  mixins: [resToken],
  name: "weburlList",
  props: ["showModel", "sitem"],
  data() {
    return {
      showModelThis: this.showModel,
      code_msg: "物流单号必传，且支持纯数字或字母数字组合(9~20位)!",
      tHeader,
      filterVal,
      // 表格 - 参数
      table: {
        stripe: true,
        border: true,
        "max-height": "800px",
        // _defaultHeader_: ["setcol"],
      },
      tableData: [],
      // 表格 - 分页
      pageInfo: {
        size: 15,
        curr: 1,
        total: 0,
      },
      loading: false,
      // 表格 - 列参数
      webUrlcolumns,
    };
  },
  watch: {
    showModel: function (val) {
      this.showModelThis = val;
      if (val) {
        this.searchList();
      }
    },
    showModelThis(val) {
      if (!val) {
        this.$emit("cancel");
      }
    },
  },
  methods: {
    // 刷新表格
    async searchList() {
      if (this.loading) return;
      this.loading = true;
      const { id } = this.sitem;
      console.log(this.sitem);
      const { code, data, message } = await asyncRequest.goodUrlList({
        act_good_id: id,
      });
      if (code === 0) {
        const { list, count } = data;
        this.tableData = list;
        this.pageInfo.total = Number(count);
      } else if (code >= 100 && code <= 104) {
        await this.logout();
      } else {
        this.tableData = [];
        this.pageInfo.total = 0;
      }
      this.loading = false;
    },
    async deleteItem(list) {
      console.log(list);
      await this.$confirm("确定要删除？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let web_url_ids = [];
          list.forEach((a) => {
            web_url_ids.push(a.id);
          });
          console.log(web_url_ids);
          const { code, data, message } = await asyncRequest.delete({ web_url_ids });
          if (code === 0) {
            this.$notify.success({
              title: "删除成功",
              message: "",
            });
            // await this.searchList();
          } else {
            this.$message.warning(message);
          }
        })
        .catch(() => {
          console.log("取消");
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  // padding-top: 50px;
  box-sizing: border-box;
  // height: 100vh;
  // overflow: hidden;
  background: #fff;
}
.con {
  width: 100%;
  margin: 0px auto;
  background: #fff;

  // padding: 50px;
  box-sizing: border-box;

  h1 {
    margin-bottom: 20px;
    margin-top: 20px;
    font-size: 16px;
    color: #333;
  }
}
// .tab{
//   width: 100%;
//   overflow: hidden;
//   margin: auto;
//   box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
//   padding: 30px;

// }
.btn {
  width: 50%;
  margin: 50px auto 0;
  display: flex;
  justify-content: space-around;
}
</style>
