<template>
  <div class="app-container">
    <el-button v-if="url" type="primary" @click="dialogVisible = true" style="margin-bottom: 28px">
      订阅消息
    </el-button>
    <el-dialog title="提示" v-model="dialogVisible" width="30%">
      <div style="width: 100%; text-align: center">
        <el-image style="width: 200px; height: 200px" :src="url"></el-image>
      </div>
      <div style="text-align: center">使用微信扫描二维码绑定订阅消息</div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="downloadUrl">下载</el-button>
        </span>
      </template>
    </el-dialog>

    <div class="head-container" id="table_drag">
      <el-table ref="table" :data="tableData.data" v-loading="tableData.loading" row-key="id">
        <el-table-column label="头像">
          <template v-slot="scope">
            <div class="shop_info">
              <el-image :src="scope.row.avatar"
                style="width: 50px; height: 50px; border-radius: 4px; background-color: #efefef">
                <template #error>
                  <div class="img_error">
                    <i class="icon el-icon-document-delete"></i>
                  </div>
                </template>
              </el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="昵称" prop="nickname"></el-table-column>
        <el-table-column label="描述提示" prop="content"></el-table-column>
        <el-table-column label="订阅类型">
          <template v-slot="scope">
            <el-checkbox-group :model-value="scope.row.typeInfo" @change="typeInfoChange($event, scope.row)">
              <el-checkbox label="耗材推送" value="con"></el-checkbox>
              <el-checkbox label="商品推送" value="pro"></el-checkbox>
              <el-checkbox label="操作预警" value="ope"></el-checkbox>
            </el-checkbox-group>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template v-slot="scope">
            <el-popconfirm title="确定解绑吗？" @confirm="delTableHandle(scope.row.openId)">
              <template #reference>
                <el-button link type="primary">解绑</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="head-container">
      <el-pagination :total="tableData.total" @size-change="handleSizeChange" :current-page="tableData.page"
        :page-size="tableData.size" @current-change="paginationChange"
        layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </div>
  </div>
</template>

<script>
import shopMsgPushApi from "@/api/account/shopMsgPush";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      test: "1",
      tableData: {
        data: [],
        page: 1,
        size: 10,
        loading: false,
        total: 0,
      },
      url: "",
      dialogVisible: false,
    };
  },
  mounted() {
    this.getTableData();
    this.getsubQrCode();
  },
  methods: {
    downloadUrl() {
      let link = document.createElement("a");
      //创建一个a标签
      link.style.display = "none";
      //将a标签隐藏
      link.href = this.url;
      document.body.appendChild(link);
      //将上面创建的a标签加入到body的尾部
      link.click();
      //执行a标签
      this.dialogVisible = false;
    },
    // 二维码
    async getsubQrCode() {
      let res = await shopMsgPushApi.code({
        shopId: localStorage.getItem("shopId"),
      });
      this.url = res;
    },

    async changeEvent(state, type) {
      let res = await shopState({
        shopId: localStorage.getItem("shopId"),
        type,
        state,
      });
    },
    // 设置消息推送
    async typeInfoChange(typeInfo, row) {
      // index 0商品库存  1耗材 2操作商品
      let obj = {
        typeInfo,
        id: row.id,
      };
      let res = await shopMsgPushApi.config(obj);
      ElMessage.success("修改成功!");
      this.getTableData();
    },
    handleSizeChange(val) {
      this.tableData.size = val;
      this.tbProductStockDetailStock();
    },
    // 分页回调
    paginationChange(e) {
      this.tableData.page = e;
      this.getTableData();
    },
    async getTableData() {
      try {
        this.tableData.loading = true;
        const res = await shopMsgPushApi.getUserList({
          page: this.tableData.page,
          size: this.tableData.size,
        });
        this.tableData.loading = false;
        this.tableData.data = res.records.map((v) => {
          return {
            ...v,
            typeInfo: v.typeInfo ?? [],
          };
        });
        this.tableData.total = res.totalRow * 1;
      } catch (error) {
        console.log(error);
      }
    },

    // 删除商品
    async delTableHandle(ids) {
      try {
        await shopMsgPushApi.shopStateDel({
          openId: ids,
        });
        this.getTableData();
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.shop_info {
  display: flex;

  .info {
    flex: 1;
    padding-left: 8px;
    display: flex;
    flex-direction: column;

    .tag_wrap {
      display: flex;
    }
  }
}
</style>