<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">下载<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">
            <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.importEnterpriseId)">取消共享</a></div>
                </li>
            </ul>
        </div>
    </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: ""
        }
    },
    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'
                }
            );
        },
        getShareBrands() {
            let _this = this;
            let params = {};
            getRequest("/haoban-manage-web/shared-contact/get-all-shared-enterprise", params)
            .then(res => {
                console.log(res, "shares");
                if (res.data.errorCode == 1) {
                    _this.shares = res.data.result || [];
                } else {
                    _this.$message.error({
                        message: res.data.message
                    });
                }
            })
            .catch(e => {
                _this.$message.error({
                    message: e.message
                });
            });
        },
        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 || [];
                    _this.myEnterprise = res.data.result[0].exportEnterpriseName;
                } else {
                    _this.$message.error({
                        message: res.data.message
                    });
                }
            })
            .catch(e => {
                _this.$message.error({
                    message: e.message
                });
            });
        },
        cancelShare(id) {
            console.log(id);
        }
    },
    beforeMount() {
        this.getShareRelation();
        this.getShareBrands();
        this.getCode();
    }
}
</script>
<style lang="scss">
.share-code-div {
    width:100%;
    height:538px;
    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;
                }
            }
        }
    }
}
</style>


