<template>
    <div class="main">
        <div class="org">

            <div class="org-titles">
                <div class="org-title">
                    集团任务
                </div>
            </div>

            <div class="org-infos">
                <div class="org-info-title">{{list.orgMsgs[0].title}}</div>

                <div class="org-info-content">{{list.orgMsgs[0].content}}</div>

                <div class="org-info-other">
                    <div class="org-author">{{list.orgMsgs[0].author}}</div>
                    <div class="org-date">{{list.orgMsgs[0].date}}</div>
                </div>
            </div>

        </div>

        <div class="my">
            <div class="my-titles">
                <div class="my-title">
                    我的任务
                </div>
                <div class="my-title">
                    查看更多
                    <img class="my-title-icon" :src="cache.icon.arrowRightDark">
                </div>
            </div>
            <div class="my-infos">
                <div v-for="(item, index) of list.myMsgs" :key="index">
                    <div class="my-info" :style="index === 0?cache.style.noBorderTop:''">
                        <img class="my-logo" :src="item.logoUrl">
                        <div class="my-contents">
                            <div class="content-title">{{item.title}}</div>
                            <div class="content-tasks">
                                <div class="task-title">{{item.type}}：</div>
                                <div v-if="item.type === '月销售'" class="task-money">¥{{item.content}}</div>
                                <div v-if="item.type === '月拉新'" class="task-money">{{item.nowNum}}/{{item.taskNum}}
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>

        <div class="my"></div>
    </div>
</template>

<script>
    export default {
        name: "task",
        data() {
            return {
                cache: {
                    icon: {
                        arrowRightDark: "/mainSale/icon-arrow-right-dark.png",
                    },
                    style: {
                        noBorderTop: "border-top: none;",
                    },
                },
                list: {
                    orgMsgs: [
                        {
                            title: "备战春节",
                            content: "备战春节，完成业务指标完成业务指标......",
                            author: "亿百分",
                            date: "2019/12/24",
                        },
                        {
                            title: "备战元宵节",
                            content: "备战元宵节，完成业务指标XXXXXXXXXX......",
                            author: "亿百分",
                            date: "2019/12/24",
                        },
                    ],
                    myMsgs: [
                        {
                            logoUrl: "/mainSale/test-city.png",
                            title: "营业员1",
                            type: "月销售",
                            content: "123.00",
                        },
                        {
                            logoUrl: "/mainSale/test-city.png",
                            title: "冬季男装",
                            type: "月销售",
                            content: "123456.00",
                        },
                        {
                            logoUrl: "/mainSale/test-city.png",
                            title: "会员拉新",
                            type: "月拉新",
                            taskNum: "500",
                            nowNum: "300",
                        },
                    ],
                }
            };
        },
        created() {

        },
        methods: {}
    };
</script>

<style scoped>
    .main {
        /*border: 1px solid red;*/
        background-color: #F8F8F8;
        width: 100%;
        height: auto;
        min-height: 100%;
        padding-bottom: 94px;
        display: flex;
        flex-direction: column;
        justify-content: start;

        overflow: auto;
    }

    .org {
        /*border: 1px solid orange;*/
        width: 100%;
        height: auto;
    }

    .org-titles {
        /*border: 1px solid deeppink;*/
        width: 100%;
        height: 48px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0px 16px;
    }

    .org-title {
        /*border: 1px solid dodgerblue;*/
        width: auto;
        height: 14px;
        font-size: 12px;
        font-weight: normal;
        line-height: 14px;
        color: rgba(45, 71, 106, 1);
    }

    .org-infos {
        /*border: 1px solid green;*/
        width: 100%;
        height: auto;
        padding: 16px;
        background-color: rgba(255, 255, 255, 1);
        border-top: 1px solid #EEEEEE;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;

        box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
    }

    .org-info-title {
        /*border: 1px solid deeppink;*/
        width: auto;
        max-width: 100%;
        font-size: 14px;
        font-weight: bold;
        line-height: 14px;
        color: rgba(45, 71, 106, 1);
    }

    .org-info-content {
        width: 100%;
        height: auto;
        /*border: 1px solid crimson;*/
        margin: 12px 16px 12px 0px;
        padding: 12px;
        background-color: rgba(248, 248, 248, 1);
        font-size: 12px;
        font-weight: normal;
        word-wrap: break-word;
        color: rgba(45, 71, 106, 0.8);
    }

    .org-info-other {
        /*border: 1px solid red;*/
        width: 100%;
        height: 25px;
        padding-top: 12px;
        border-top: 1px solid rgba(238, 238, 238, 1);

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .org-author {
        width: auto;
        height: 12px;
        font-size: 12px;
        font-weight: normal;
        line-height: 12px;
        color: rgba(45, 71, 106, 1);
    }

    .org-date {
        width: auto;
        height: 12px;
        font-size: 12px;
        font-weight: normal;
        line-height: 12px;
        color: rgba(45, 71, 106, 1);
    }

    .my {
        /*border: 1px solid orange;*/
        width: 100%;
        height: auto;
    }

    .my-titles {
        /*border: 1px solid deeppink;*/
        width: 100%;
        height: 48px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0px 16px;
    }

    .my-title {
        /*border: 1px solid dodgerblue;*/
        width: auto;
        height: 14px;
        font-size: 12px;
        font-weight: normal;
        line-height: 14px;
        color: rgba(45, 71, 106, 1);
    }

    .my-title-icon {
        width: 5px;
        height: 8px;
        object-fit: cover;
    }

    .my-infos {
        /*border: 1px solid red;*/
        width: 100%;
        height: auto;
        padding: 0px 16px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        background-color: #FFFFFF;

        box-shadow: 0px 2px 4px 0px #DDDDDD;
    }

    .my-info {
        border-top: 1px solid #EEEEEE;
        width: 100%;
        height: auto;
        padding: 12px 0px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    .my-logo {
        width: 80px;
        height: 80px;
        border-radius: 4px;
    }

    .my-contents {
        border: 0px solid red;
        width: 100%;
        height: 80px;
        padding: 0px 12px;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    .content-title {
        width: auto;
        max-width: 100%;
        word-wrap: unset;
        font-size: 14px;
        font-weight: bold;
        line-height: 16px;
        color: #2D476A;
        padding-bottom: 16px;
    }

    .content-tasks {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    .task-title {
        width: auto;
        font-size: 12px;
        font-weight: normal;
        line-height: 12px;
        color: #2D476A;

    }

    .task-money {
        width: auto;
        font-size: 12px;
        font-weight: normal;
        line-height: 12px;
        color: #D0021B;
    }


</style>