<template>
    <div>
        <api-tittle-1>AP配色规范：</api-tittle-1>
        <api-tittle-2>一、基础配色</api-tittle-2>
        <api-content style="height: 140px;">
            <div class="color-ctn" title="点击复制颜色">
                <div class="color-item" @click="copyText('#1890FF', $event)" style="background-color: #1890FF"></div>
                <div class="color-text">
                    <div @click="copyText('#1890FF', $event)" title="点击复制颜色">#1890FF</div>
                    <div @click="copyText('ap-color-blue', $event)" title="点击复制字体颜色类">ap-color-blue</div>
                    <div @click="copyText('ap-bg-blue', $event)" title="点击复制背景颜色类">ap-bg-blue</div>
                </div>
            </div>
            <div class="color-ctn" title="点击复制颜色">
                <div class="color-item" @click="copyText('#13CE66', $event)" style="background-color: #13CE66"></div>
                <div class="color-text">
                    <div @click="copyText('#13CE66', $event)" title="点击复制颜色">#13CE66</div>
                    <div @click="copyText('ap-color-green', $event)" title="点击复制字体颜色类">ap-color-green</div>
                    <div @click="copyText('ap-bg-green', $event)" title="点击复制背景颜色类">ap-bg-green</div>
                </div>
            </div>
            <div class="color-ctn" title="点击复制颜色">
                <div class="color-item" @click="copyText('#ffba00', $event)" style="background-color: #ffba00"></div>
                <div class="color-text">
                    <div @click="copyText('#ffba00', $event)" title="点击复制颜色">#ffba00</div>
                    <div @click="copyText('ap-color-yellow', $event)" title="点击复制字体颜色类">ap-color-yellow</div>
                    <div @click="copyText('ap-bg-yellow', $event)" title="点击复制背景颜色类">ap-bg-yellow</div>
                </div>
            </div>
            <div class="color-ctn" title="点击复制颜色">
                <div class="color-item" @click="copyText('#ff4949', $event)" style="background-color: #ff4949"></div>
                <div class="color-text">
                    <div @click="copyText('#ff4949', $event)" title="点击复制颜色">#ff4949</div>
                    <div @click="copyText('ap-color-red', $event)" title="点击复制字体颜色类">ap-color-red</div>
                    <div @click="copyText('ap-bg-red', $event)" title="点击复制背景颜色类">ap-bg-red</div>
                </div>
            </div>
            <div class="color-ctn" title="点击复制颜色">
                <div class="color-item" @click="copyText('#909399', $event)" style="background-color: #909399"></div>
                <div class="color-text">
                    <div @click="copyText('#909399', $event)" title="点击复制颜色">#909399</div>
                    <div @click="copyText('ap-color-gray', $event)" title="点击复制字体颜色类">ap-color-gray</div>
                    <div @click="copyText('ap-bg-gray', $event)" title="点击复制背景颜色类">ap-bg-gray</div>
                </div>
            </div>
        </api-content>
        <div class="memo">注：1、按钮、tag、字体都是以该配色为基础。<br>
            2、点击颜色或类名可直接复制。</div>
        <br>
        <api-tittle-2>二、按钮</api-tittle-2>
        <api-content style="height: 60px;">
            <div class="btn-ctn" @click="copyText(btn1, $event)" title="点击复制按钮">
                <div class="btn-item">
                    <el-button type="primary">主要</el-button>
                </div>
                <div class="btn-text ap-ellipse" :title="btn1">{{ btn1 }}</div>
            </div>
            <div class="btn-ctn" @click="copyText(btn2, $event)" title="点击复制按钮">
                <div class="btn-item">
                    <el-button type="success">成功</el-button>
                </div>
                <div class="btn-text ap-ellipse" :title="btn2">{{ btn2 }}</div>
            </div>
            <div class="btn-ctn" @click="copyText(btn3, $event)" title="点击复制按钮">
                <div class="btn-item">
                    <el-button type="warning">警告</el-button>
                </div>
                <div class="btn-text ap-ellipse" :title="btn3">{{ btn3 }}</div>
            </div>
            <div class="btn-ctn" @click="copyText(btn4, $event)" title="点击复制按钮">
                <div class="btn-item">
                    <el-button type="danger">危险</el-button>
                </div>
                <div class="btn-text ap-ellipse" :title="btn4">{{ btn4 }}</div>
            </div>
            <div class="btn-ctn" @click="copyText(btn5, $event)" title="点击复制按钮">
                <div class="btn-item">
                    <el-button type="info">信息</el-button>
                </div>
                <div class="btn-text ap-ellipse" :title="btn5">{{ btn5 }}</div>
            </div>
            <div class="btn-ctn" @click="copyText(btn6, $event)" title="点击复制按钮">
                <div class="btn-item">
                    <el-button>默认</el-button>
                </div>
                <div class="btn-text ap-ellipse" :title="btn6">{{ btn6 }}</div>
            </div>

        </api-content>
        <div class="memo">注：1、写法和element相同。<br>
            2、按钮配色和element默认颜色有细微差别，以该配色为准！
        </div>
        <br>
        <api-tittle-2>三、tag标签</api-tittle-2>
        <api-content style="height: 60px;">
            <div class="tag-ctn" @click="copyText(tag1, $event)" title="点击复制类名">
                <div class="tag-item">
                    <div class="ap-tag">主要</div>
                </div>
                <div class="tag-text ap-ellipse">{{ tag1 }}</div>
            </div>
            <div class="tag-ctn" @click="copyText(tag2, $event)" title="点击复制类名">
                <div class="tag-item">
                    <div class="ap-tag-success">成功</div>
                </div>
                <div class="tag-text ap-ellipse">{{ tag2 }}</div>
            </div>
            <div class="tag-ctn" @click="copyText(tag4, $event)" title="点击复制类名">
                <div class="tag-item">
                    <div class="ap-tag-warning">警告</div>
                </div>
                <div class="tag-text ap-ellipse">{{ tag4 }}</div>
            </div>
            <div class="tag-ctn" @click="copyText(tag5, $event)" title="点击复制类名">
                <div class="tag-item">
                    <div class="ap-tag-danger">危险</div>
                </div>
                <div class="tag-text ap-ellipse">{{ tag5 }}</div>
            </div>
            <div class="tag-ctn" @click="copyText(tag3, $event)" title="点击复制类名">
                <div class="tag-item">
                    <div class="ap-tag-info">信息</div>
                </div>
                <div class="tag-text ap-ellipse">{{ tag3 }}</div>
            </div>
        </api-content>
        <div class="memo">注：tag标签可应用与表格值渲染。
        </div>
        <br>
        <api-tittle-2>四、字体</api-tittle-2>
        <api-content>
            <span class="ap-color-blue">主要</span>&nbsp;
            <span class="ap-color-green">成功</span>&nbsp;
            <span class="ap-color-yellow">警告</span>&nbsp;
            <span class="ap-color-red">危险</span>&nbsp;
            <span class="ap-color-gray">信息</span>&nbsp;
            <br>
            参见【一、基础配色】。
        </api-content>

    </div>
</template>

<script>
import {ApiCode, ApiContent, ApiTable, ApiTittle1, ApiTittle2} from './../components'
import clipboard from 'ap-util/util/ClipboardUtil'

export default {
    name: 'ApiStyle',
    components: {ApiTable, ApiCode, ApiTittle1, ApiContent, ApiTittle2},
    data() {
        const js1 = `// 格式：
            {
                id: 'id名', //对应组件名称,
                label: 'label名' //对应左侧菜单名称
            }`

        return {
            js1: js1,
            btn1: '<el-button type="primary">主要</el-button>',
            btn2: '<el-button type="success">成功</el-button>',
            btn3: '<el-button type="warning">警告</el-button>',
            btn4: '<el-button type="danger">危险</el-button>',
            btn5: '<el-button type="info">信息</el-button>',
            btn6: '<el-button>默认</el-button>',
            tag1: '<div class="ap-tag">默认</div>',
            tag2: '<div class="ap-tag-success">成功</div>',
            tag3: '<div class="ap-tag-info">信息</div>',
            tag4: '<div class="ap-tag-warning">警告</div>',
            tag5: '<div class="ap-tag-danger">危险</div>',
        }
    },
    methods: {
        copyText(value, event) {
            clipboard(value, event)
        },
    }
}
</script>

<style scoped>
.memo {
    color: red;
    font-size: 14px;
}

.color-ctn {
    float: left;
    cursor: pointer;
}

.color-item {
    width: 100px;
    height: 70px;
}

.color-text {
    font-size: 12px;
    text-align: center;
    width: 100px;
    height: 20px;
    line-height: 20px;
    color: #9e9e9e;
}

.btn-ctn {
    float: left;
    cursor: pointer;
}

.btn-item {
    width: 200px;
    height: 30px;
}

.btn-item button {
    width: 195px;
}

.btn-text {
    font-size: 10px;
    text-align: left;
    width: 190px;
    height: 20px;
    line-height: 20px;
    color: #9e9e9e;
}


.tag-ctn {
    float: left;
    cursor: pointer;
}

.tag-item {
    width: 200px;
    height: 30px;
}

.tag-item div {
    width: 195px;
    text-align: center;
}

.tag-text {
    font-size: 10px;
    text-align: center;
    width: 190px;
    height: 20px;
    line-height: 20px;
    color: #9e9e9e;
}
</style>
