<template>
  <div>
    <el-row>
      <div style="float: right">
        <el-button size="mini" type="primary" icon="document" @click="refresh()"
          >刷新</el-button
        >
      </div>
      <el-col :span="24" class="cards">
        <div class="box">
          <div class="box_num">
            <div class="box_color">H5分享</div>
            <div class="text_color">
              <div>
                分享链接：<span>{{ h5shareUrl }}</span>
                <!-- <i class="el-icon-edit" @click="copyBtn(h5shareUrl)"
                  style="color: red;"></i> -->
              </div>
              <div style="margin-top: 20px">
                分享二维码：<img
                  :src="h5erweimaImg"
                  style="width: 100px; height: 100px"
                />
              </div>
            </div>
            <!--
            <el-button size="mini" type="primary" @click="compile()">编辑
            </el-button> -->
          </div>
        </div>
      </el-col>
      <el-col :span="24" class="cards">
        <div class="box">
          <div class="box_num">
            <div class="box_color">微信小程序分享</div>
            <div class="text_color">
              <div>
                分享链接：<span>{{ xhxshareUrl }}</span>
              </div>
              <div style="margin-top: 20px">
                分享二维码：<img
                  :src="xcxerweimaImg"
                  style="width: 100px; height: 100px"
                />
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="24" class="cards">
        <div class="box">
          <div class="box_num">
            <div class="box_color">抖音小程序分享</div>
            <div class="text_color">
              <div>
                分享链接：<span>{{ xhxshareUrl }}</span>
              </div>
              <div style="margin-top: 20px">
                分享二维码：<img
                  :src="dyxerweimaImg"
                  style="width: 100px; height: 100px"
                />
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="24" class="cards">
        <div class="box">
          <div class="box_num">
            <div class="box_color">APP分享</div>
            <div class="text_color">
              <div>
                分享链接：<span>{{ appshareUrl }}</span>
              </div>
              <div style="margin-top: 20px">
                分享海报：<img
                  :src="posterImg"
                  style="width: 120px; height: auto"
                />

                <el-button size="mini" type="primary" @click="imgDown(posterImg)"
                  >海报下载
                </el-button>
              </div>
            </div>
            
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 添加社区 -->
    <el-dialog title="添加社区" :visible.sync="dialogFormVisible" center>
      <div style="margin-bottom: 10px">
        <span style="width: 200px; display: inline-block; text-align: right"
          >社区名称：</span
        >
        <el-input
          style="width: 50%"
          v-model="campusName"
          type="text"
          placeholder="请输入社区名称"
        ></el-input>
      </div>
      <div style="margin-bottom: 10px">
        <span style="width: 200px; display: inline-block; text-align: right"
          >社区地址：</span
        >
        <el-input
          style="width: 50%"
          v-model="campusDetails"
          type="text"
          placeholder="请输入社区地址"
        ></el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="StairNoticeTo()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog title="修改" :visible.sync="dialogFormVisible1" center>
      <el-form :model="form">
        <el-form-item label="分享链接：" :label-width="formLabelWidth">
          <el-input v-model="form.campusName" style="width: 65%"></el-input>
        </el-form-item>
        <el-form-item label="分享图片：" :label-width="formLabelWidth">
          <el-input v-model="form.campusDetails" style="width: 65%"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="CompileNoticeTo()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 海报 -->
    <div>
      <!-- 海报html元素 -->
      <div
        id="posterHtml"
        :style="{ backgroundImage: 'url(' + posterHtmlBg + ')' }"
        style="
          background-repeat: no-repeat;
          background-size: 1242px 2688px;
          width: 1242px;
          height: 2688px;
        "
        v-show="false"
      >
        <div>{{ posterContent }}</div>
        <!-- 二维码 -->
        <div><div id="qrcodeImg"></div></div>
      </div>
    </div>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import Clipboard from "clipboard";
import QRCode from 'qrcodejs2';
import { create } from "lodash";
export default {
  data() {
    return {
      posterContent: "", // 文案内容
      posterImg: "", // 最终生成的海报图片
      posterImgName: "宣传海报", // 最终生成的海报图片名称
      posterHtmlBg: require("../../assets/img/poster.jpg"), // 背景图
      showPoster: false,
      limit: 10,
      page: 1,
      checkBoxData: [], //多选框选择的值
      formLabelWidth: "200px",
      tableDataLoading: false,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      tableData: [],
      campusName: "",
      campusDetails: "",
      form: {
        campusId: "",
        campusName: "",
        campusDetails: "",
      },
      h5erweimaImg: "", //h5分享码
      xcxerweimaImg: "", //微信小程序分享码
      dyxerweimaImg: "", //抖音小程序分享码
      h5Url: "", //h5域名
      guanfangCode: "", //官方邀请码
      invitationCode: "",
      h5shareUrl: "", //h5分享链接
      appshareUrl: "", //app分享链接
      xhxshareUrl: "", //小程序分享链接
    };
  },
  methods: {
    createQrcode(text) {
      // 生成二维码
      const qrcodeImgEl = document.getElementById("qrcodeImg");
      let qrcode = new QRCode(qrcodeImgEl, {
        width: 190,
        height: 190,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
      qrcode.makeCode(text);
    },
    createPoster() {
      //click 点击按钮生成海报
      // 生成海报
      const vm = this;
      const domObj = document.getElementById("posterHtml");
      html2canvas(domObj, {
        useCORS: true,
        allowTaint: false,
        logging: false,
        letterRendering: true,
        onclone(doc) {
          let e = doc.querySelector("#posterHtml");
          e.style.display = "block";
        },
      }).then((canvas) => {
        // 在微信里,可长按保存或转发
        vm.posterImg = canvas.toDataURL("image/png");
        console.log(vm.posterImg)
        // vm.imgDown(vm.posterImg);
      });
    },
    // 保存图片到本地
    imgDown(img) {
      if(!this.posterImg){
        return this.$message({
          titile:'提示',
          message:'请先生成海报',
          type:'warning'
        })
      }
      var alink = document.createElement("a");
      alink.href = img;
      alink.download = this.posterImgName; // 图片名
      alink.click();
    },
    // 多选
    changeFun(val) {
      this.checkBoxData = val;
    },
    handleSizeChange(val) {
      this.limit = val;
      this.dataSelect();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.dataSelect();
    },
    // 刷新
    refresh() {
      console.log("------");
      this.xianshi();
    },
    // 添加社区弹框
    classifyStair() {
      this.dialogFormVisible = true;
    },
    // 添加社区
    StairNoticeTo() {
      if (this.campusName == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请输入社区名称",
          type: "warning",
        });
        return;
      }
      if (this.campusDetails == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请输入社区地址",
          type: "warning",
        });
        return;
      }
      this.$http({
        url: this.$http.adornUrl("helpCampus/insertCampus"),
        method: "post",
        data: this.$http.adornData({
          campusName: this.campusName,
          campusDetails: this.campusDetails,
        }),
      }).then(({ data }) => {
        this.dialogFormVisible = false;
        this.$message({
          message: "添加成功",
          type: "success",
          duration: 1500,
          onClose: () => {
            this.campusName = "";
            this.campusDetails = "";
            this.dataSelect();
          },
        });
      });
    },
    // 修改社区
    compile(index, rows) {
      this.dialogFormVisible1 = true;
      this.form.campusId = rows.campusId;
      this.form.campusName = rows.campusName;
      this.form.campusDetails = rows.campusDetails;
    },
    // 修改社区
    CompileNoticeTo() {
      this.$http({
        url: this.$http.adornUrl("helpCampus/updateCampus "),
        method: "post",
        data: this.$http.adornData({
          campusId: this.form.campusId,
          campusName: this.form.campusName,
          campusDetails: this.form.campusDetails,
        }),
      }).then(({ data }) => {
        if (data.code == 0) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.dialogFormVisible1 = false;
              this.dataSelect();
            },
          });
        } else {
          this.$message({
            message: data.msg,
            type: "error",
            duration: 1500,
            onClose: () => {
              this.dialogFormVisible1 = false;
              this.dataSelect();
            },
          });
        }
      });
    },
    // 批量删除
    deleteStairs(id) {
      this.$confirm(`确定批量删除信息?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var ids = id
            ? [id]
            : this.checkBoxData.map((item) => {
                return item.campusId;
              });
          this.$http({
            url: this.$http.adornUrl(`helpCampus/deleteCampus?ids=${ids}`),
            method: "get",
            params: this.$http.adornParams({}),
          }).then(({ data }) => {
            if (data.code == 0) {
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.content = "";
                  this.status = 0;
                  this.dataSelect();
                },
              });
            } else {
              this.$message({
                message: data.msg,
                type: "error",
                duration: 1500,
                onClose: () => {
                  this.content = "";
                  this.status = 0;
                  this.dataSelect();
                },
              });
            }
          });
        })
        .catch(() => {});
    },
    //删除
    deleteStair(row) {
      this.$confirm(`确定删除此条信息?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl(
              `helpCampus/deleteCampus?ids=${row.campusId}`
            ),
            method: "get",
            params: this.$http.adornParams({}),
          }).then(({ data }) => {
            if (data.code == 0) {
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.dataSelect();
                },
              });
            } else {
              this.$message({
                message: data.msg,
                type: "error",
                duration: 1500,
                onClose: () => {
                  this.dataSelect();
                },
              });
            }
          });
        })
        .catch(() => {});
    },
    // 重置
    cleans() {
      this.phone = "";
      this.status = 0;
      this.dataSelect();
    },
    // 获取派单数据列表
    dataSelect() {
      this.tableDataLoading = true;
      this.$http({
        url: this.$http.adornUrl("urlAddress/selectUrlAddress"),
        method: "get",
        params: this.$http.adornParams({}),
      }).then(({ data }) => {
        this.tableDataLoading = false;
        let returnData = data.data;
        this.tableData = returnData;
      });
    },
    // 配置信息
    xianshi() {
      var qdCode = this.$cookie.get("qdCode");
      // 获取h5域名
      // this.$http({
      //   url: this.$http.adornUrl('common/type/19'),
      //   method: 'get',
      //   data: this.$http.adornData({})
      this.$http({
        url: this.$http.adornUrl("urlAddress/selectUrlAddress"),
        method: "get",
        params: this.$http.adornParams({}),
      }).then(({ data }) => {
        if (data.code == 0) {
          this.h5Url = data.data.urlAddress;
          this.xianshi2();
        }
      });
    },
    xianshi2() {
      var qdCode = this.$cookie.get("qdCode");
      // 获取官方邀请码
      this.$http({
        url: this.$http.adornUrl("common/type/88"),
        method: "get",
        data: this.$http.adornData({}),
      }).then(({ data }) => {
        if (data.code == 0) {
          this.guanfangCode = data.data.value;
          (this.invitationCode = this.guanfangCode + "," + qdCode),
            (this.h5erweimaImg = this.$http.adornUrl(
              "app/invite/insertQrCode?content=" + qdCode
            ));
          this.xcxerweimaImg = this.$http.adornUrl(
            "app/invite/mpCreateQr?invitationCode=" + this.invitationCode
          );
          this.dyxerweimaImg = this.$http.adornUrl(
            "app/invite/dyCreateQr?invitationCode=" + this.invitationCode
          );
          this.h5shareUrl =
            this.h5Url +
            "/pages/index/index?invitation=" +
            this.guanfangCode +
            "&qdCode=" +
            qdCode;
          this.xhxshareUrl =
            "/pages/index/index?invitation=" +
            this.guanfangCode +
            "&qdCode=" +
            qdCode;
          this.appshareUrl =
            this.h5Url +
            "/pages/login/registerApp?invitation=" +
            this.guanfangCode +
            "&qdCode=" +
            qdCode;
            this.createQrcode( this.appshareUrl);
            this.createPoster();
        }
      });
    },
    // 复制
    copyBtn(text) {
      let clipboard = new Clipboard(".copy");
      clipboard.on("success", (e) => {
        console.log("复制成功");
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        console.log("该浏览器不支持自动复制");
        // 释放内存
        clipboard.destroy();
      });
    },
  },
  mounted() {
    this.xianshi();
    // this.dataSelect()
  },
};
</script>

<style scoped>
#posterHtml{
  position: relative;
}
#qrcodeImg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 125px;
}
.box {
  padding: 44px;
  border: 1px solid #eee;
  margin: 15px 10px;
}

.box_num {
  font-size: 14px;
  color: #66b1ff;
}

.box_num .box_color {
  color: #333;
  font-size: 14px;
  margin-bottom: 15px;
}

.box_num div span {
  font-size: 20px;
  margin-left: 5px;
}

.text_color {
  color: #4f9dec;
}

.text_color span {
  margin-right: 5px;
}
</style>
