<template>
    <div class="right-box">
        <div class="link-item" v-for="(item,index) in list" :key="index">
            <div class="title">{{item.name}}</div>
            <div class="txt">
                <span>地址：</span>{{item.url}}
            </div>
            <div class="txt" v-if="item.parameter">
                <p><span>参数：</span></p>
                <span v-for="(val, key, index) in item.parameter">{{key+"="+val}}<i style="font-style: normal">&</i></span>
            </div>
            <div class="tips">例如：{{item.example}}
                <!--<Button size="small" style="margin-left: 10px" v-clipboard:copy="item.example"-->
                <!--v-clipboard:success="onCopy"-->
                <!--v-clipboard:error="onError">复制</Button>-->
                <span class="copy copy-data" :data-clipboard-text="item.example">复制</span
                >
            </div>
        </div>
    </div>
</template>

<script>
    import ClipboardJS from "clipboard";
    import { getUrl } from '@/api/diy'
    export default {
        name: 'links',
        data () {
            return {
                list: [
                    {
                        name: '商城首页',
                        url: '/pages/goods/order_list/index',
                        parameter: [
                            {

                            }
                        ],
                        example: '/pages/activity/bargain/index'

                    },
                    {
                        name: '商城首页',
                        url: '/pages/goods/order_list/index',
                        parameter: [
                            {

                            }
                        ],
                        example: '/pages/activity/bargain/index'

                    }
                ]
            }
        },
        created () {
            getUrl().then(res => {
                this.list = res.data.url
            })
        },
        mounted: function() {
            this.$nextTick(function() {
                const clipboard = new ClipboardJS('.copy-data');
                clipboard.on("success", () => {
                    this.$Message.success('复制成功');
                });
            });
        },
        methods: {
            // onCopy () {
            //     this.$Message.success('复制成功');
            // },
            // onError () {
            //     this.$Message.error('复制成功');
            // }
        }
    }
</script>

<style scoped lang="stylus">
    .right-box
        width 400px
        margin-left 50px
        border:1px solid #ddd;
        border-radius 4px
        height: 700px;
        overflow-y: scroll;
        padding 0 10px
        &::-webkit-scrollbar {
            /*滚动条整体样式*/
            width : 4px;  /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
        }
        &::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 4px;
            box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
            background   : #535353;
        }
        &::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            box-shadow   : inset 0 0 5px #fff;
            border-radius: 4px;
            background   : #fff;
        }
        .link-item
            padding 10px 0
            border-bottom 1px solid #f5f5f5
            .title
                font-size: 14px;
                color: #2d8cf0;
            .txt
                margin 5px 0
                font-size 12px
                span
                    color #333
                p
                    display inline-block
                    color #19be6b
                    margin-right 10px
                    span
                        color #333
                    &.red
                        color #f00
            .tips
                font-size 12px
                color #999
                .copy
                    padding 3px 5px
                    border 1px solid #cccccc
                    border-radius 5px
                    color #333
                    cursor pointer
                    margin-left 5px
                    &:hover
                        border-color #2d8cf0
                        color #2d8cf0

</style>
