<template>
    <div class="share-code-div">
        <p class="company-name">{{myEnterprise}}的共享企业</p>
        <p class="word">双方共享的通讯录，选人时可以选到，同时邀请企业建立共享关系</p>
        <p class="time-tip">一个二维码只能和一个企业建立共享关系，24小时有效</p>
        <div id="qrcode" class="m-t-20"></div>
        <div class="btn-area">
            <el-button type="primary" @click="downloadCode">下载<i class="iconfont icon-icon_yunxiazai"></i></el-button>
            <el-button @click="reFresh()">重新生成</el-button>
        </div>
        <p class="company-name">已建立的共享企业</p>
        <div class="share-table" v-if="shares.length > 0">
            <div class="company">{{myEnterprise}}</div>
            <ul class="list">
                <li class="li" v-for="enterprise in shares" :key="enterprise.importEnterpriseId">
                    <div class="name">{{enterprise.importEnterpriseName}}</div>
                    <div class="cancel-btn"><a class="a-href" @click="cancelShare(enterprise)">取消共享</a></div>
                </li>
            </ul>
        </div>
        <div class="no-share-tip">暂无共享企业</div>
        <el-dialog title="验证管理员身份" width="356px" :visible.sync="dialogVisible">
            <div class="cancel-code">
                <p>请使用管理员的好办扫一扫确认</p>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
import QRCode from 'qrcodejs2'
export default {
    name: "shareCode",
    data() {
        return {
            regenerate: false,
            qrCodeContent: {},
            shares: [],
            qrcodeCase: "",
            myEnterprise: "",
            dialogVisible: false
        }
    },
    methods: {
        getCode(regenerate = false) {
            let _this = this;
            let params = {
                regenerate
            }
            getRequest("/haoban-manage-web/shared-contact/get-shared-qrcode", params)
            .then(res => {
                console.log(res, "code");
                if (res.data.errorCode == 1) {
                    console.log(regenerate);
                    _this.qrcode(res.data.result.qrCodeContent);
                } else {
                    _this.$message.error({
                        message: res.data.message
                    });
                }
            })
            .catch(e => {
                _this.$message.error({
                    message: e.message
                });
            });
        },
        reFresh() {
            document.getElementById("qrcode").innerHTML = '';
            this.qrcodeCase.clear(); // 先清除原有的
            this.getCode(true);
        },
        /**
         *  生成二维码
         */
        qrcode (text) {
            const that = this;
            that.qrcodeCase = new QRCode('qrcode',
                {
                width: 245,
                height: 245, // 高度
                text: text, // 二维码内容 //
                //render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas） //
                //background: '#f0f',
                //foreground: '#ff0'
                }
            );
        },
        /**
         * 下载二维码
         */
        downloadCode() {
            let img = document.getElementById("qrcode").getElementsByTagName("img")[0];
            let data = img.getAttribute("src");
            let a = document.createElement("a"); // 生成一个a元素
            let event = new MouseEvent("click"); // 创建一个单击事件
            a.download = "scan code"; // 设置图片名称
            a.href = data; // 将生成的URL设置为a.href属性
            a.dispatchEvent(event); // 触发a的单击事件
        },
        getShareRelation() {
            let _this = this;
            let params = {
                enterpriseIdCondition: 1
            };
            getRequest("/haoban-manage-web/shared-contact/find-shared-contact-relation", params)
            .then(res => {
                console.log(res, "getShareRelation");
                if (res.data.errorCode == 1) {
                    _this.shares = res.data.result || [];
                    if (_this.shares.length > 0)
                        _this.myEnterprise = res.data.result[0].exportEnterpriseName;
                } else {
                    _this.$message.error({
                        message: res.data.message
                    });
                }
            })
            .catch(e => {
                _this.$message.error({
                    message: e.message
                });
            });
        },
        cancelShare(enterprise) {
            let ths = this;
            // ths.dialogVisible = true;
            ths.$confirm("是否要取消与该企业的共享？", "提示", {
                type: "warning"
            }).then(() => {
                getRequest("/haoban-manage-web/shared-contact/del-shared-enterprise", {importEnterpriseId: enterprise.importEnterpriseId})
                .then(res => {
                    console.log(res, "cancel");
                    if (res.data.errorCode == 1) {
                        let idx = ths.shares.indexOf(enterprise);
                        ths.shares.splice(idx, 1);
                    } else {
                        ths.$message.error({
                            message: res.data.message
                        });
                    }
                })
                .catch(e => {
                    ths.$message.error({
                        message: e.message
                    });
                });
            })
            .catch({});
        }
    },
    beforeMount() {
        this.getShareRelation();
        // this.getShareBrands();
        this.getCode();
    }
}
</script>
<style lang="scss">
.share-code-div {
    width:100%;
    background:rgba(255,255,255,1);
    border-radius:2px;
    box-sizing: border-box;
    padding: 28px;
    font-weight: 500;
    overflow: auto;
    .company-name {
        font-size:16px;
        color:rgba(48,49,51,1);
    }
    .word {
        font-size:14px;
        font-weight:400;
        color:rgba(96,98,102,1);
        margin-top: 17px;
    }
    .time-tip {
        font-size:14px;
        font-weight:400;
        margin-top: 25px;
        color:rgba(245,108,108,1);
    }
    .btn-area {
        margin-top: 24px;
        margin-bottom: 46px;
        .iconfont {
            margin-left: 5px;
        }
    }
    .share-table {
        display: flex;
        height:auto;
        border:1px solid rgba(235,238,245,1);
        margin: 24px 0 48px 0;
        .company {
            width: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .list {
            flex: 1;
            .li {
                display: flex;
                height: 60px;
                line-height: 60px;
                border-left: 1px solid rgba(235,238,245,1);
                border-bottom: 1px solid rgba(235,238,245,1);
                font-size: 14px;
                &:last-child {
                    border-bottom: none;
                }
                .cancel-btn {
                    width: 220px;
                }
                .name {
                    flex: 1;
                    padding: 0 15px;
                }
            }
        }
    }
    .no-share-tip {
        padding: 30px;
        text-align: center;
    }
}
.el-dialog__body {
    .cancel-code {
        text-align: center;
        padding-bottom: 50px;
    }
}
</style>


