<template>
    <div class="share-code-div">
        <p class="company-name">中国达摩</p>
        <p class="word">双方共享的通讯录，选人时可以选到，同时邀请企业建立共享关系</p>
        <p class="time-tip">一个二维码只能和一个企业建立共享关系，24小时有效</p>
        <img :src="qrCodeContent.data" class="code-img">
        <div class="btn-area">
            <el-button type="primary">下载<i class="iconfont icon-icon_yunxiazai"></i></el-button>
            <el-button>重新生成</el-button>
        </div>
        <p class="company-name">已建立的共享企业</p>
        <div class="share-table">
            <div class="company">达摩克里斯之剑</div>
            <ul class="list">
                <li class="li">
                    <div class="name">达摩克里斯之剑</div>
                    <div class="cancel-btn"><a href="" class="a-href">取消共享</a></div>
                </li>
                <li class="li">
                    <div class="name">达摩克里斯之剑</div>
                    <div class="cancel-btn"><a href="" class="a-href">取消共享</a></div>
                </li>
                <li class="li">
                    <div class="name">达摩克里斯之剑</div>
                    <div class="cancel-btn"><a href="" class="a-href">取消共享</a></div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
export default {
    name: "shareCode",
    data() {
        return {
            regenerate: false,
            qrCodeContent: {}
        }
    },
    methods: {
        getCode() {
            let _this = this;
            let params = {
                regenerate: _this.regenerate
            }
            getRequest("/haoban-manage-web/shared-contact/get-shared-qrcode", params)
            .then(res => {
                console.log(res, "code");
                if (res.data.errorCode == 1) {
                    _this.qrCodeContent = JSON.parse(res.data.result.qrCodeContent);
                } else {
                    _this.$message.error({
                        message: res.data.message
                    });
                }
            })
            .catch(e => {
                _this.$message.error({
                    message: e.message
                });
            });
        },
        getShareBrands() {
            let _this = this;
            let params = {};
            getRequest("/haoban-manage-web/shared-contact/find-shared-contact-relation", params)
            .then(res => {
                console.log(res, "shares");
            })
            .catch(e => {
                _this.$message.error({
                    message: e.message
                });
            });
        }
    },
    beforeMount() {
        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);
    }
    .code-img {
        width:245px;
        height:245px;
        margin-top: 20px;
    }
    .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>


