<template>
    <div class="event-detail-item">
        <aside class="item-kind" :class="isIconStatusCls">
            <!-- <div class="title">
                {{ isKindText }}
            </div> -->
            <div class="event-icon-status" :class="isEventCls">
                <i class="iconfont" :class="isEventIcon"></i>
            </div>
        </aside>
        <div class="item-main">
            <header class="item-main__header">
                <div class="emp-info">
                    {{ item.content }}
                    <span v-if="item.empname">
                        {{item.empname}}
                        <!-- <van-tag class="checkpoint-tag" v-if="isDiffHour && !item.status"> -->
                        <template v-if="isDiffHour && !item.status">
                            {{ ` · 任务:${isDiffHour}小时` }}
                        </template>
                        <!-- </van-tag> -->
                    </span>
                </div>
                <div class="time-info eventmx-tag">
                    {{ isKindText }}
                    <template v-if="isOvertime">
                        <van-tag class="duty-tag" v-if="item.checkpoint_dscrp">
                            超期
                        </van-tag>
                    </template>
                    <template>
                        {{`${isDateTime}` }}
                    </template>
                </div>
            </header>
            <main class="item-main__main">
                <div class="content_str" v-if="isDscrpText">
                    {{ dscrpText + isDscrpText }}
                </div>
                <div class="eventmx-tag">
                    <div class="eventmx-tag-left">
                        <template v-if="item.namemx">
                            <span>考核节点</span>
                            <van-tag class="checkpoint-tag" v-for="(itm, idx) in isCheckpoint" :key="idx">
                                {{itm}}
                            </van-tag>
                        </template>
                    </div>
                    <div class="eventmx-tag-right">
                        <van-tag class="checkpoint-tag" v-if="item.checkpoint_dscrp">
                            {{ item.checkpoint_dscrp }}
                        </van-tag>
                    </div>
                </div>
            </main>
        </div>
    </div>
</template>

<script>
import LjTagDouble from "components/lj-tag-double";
import LjImgPro from "components/lj-img-pro";
import LjVideoDownload from "components/lj-video-download";

export default {
    components: {
        LjTagDouble,
        LjImgPro,
        LjVideoDownload
    },
    data() {
        return {
            unfold: false, // 是否展开
            currentTime: '',
            dscrpText: ''
        };
    },

    props: {
        item: Object,
        empid: { // 当前用户id
            type: Number,
            default: 0
        },
        canSay: { // 是否可编辑
            type: Boolean,
            default: false
        },
        reverse: { // 是否倒序
            type: Boolean,
            default: false
        }
    },

    computed: {
        isCheckpoint() {
            let arr = [];
            if (!this.item.namemx) return arr;
            arr = this.item.namemx.split(">>");
            return arr
        },
        isIconStatusCls() {
            let cls = "";
            switch (this.item.kind) {
                case -5:
                    cls = !this.reverse ? "start" : "end"
                    break;
                case -2:
                    cls = !this.reverse ? "end" : "start"
                    break;
            }
            return cls
        },
        isKindText() {
            let rsl = ""
            switch (this.item.status) {
                // case 0:
                //     rsl = "考核"
                //     break;
                case 1:
                    rsl = '已完成'
                    break;
            }
            return rsl
        },
        isDscrpText() {
            let rsl = ""
            switch (this.item.status) {
                case 0:
                    this.dscrpText = '备注：';
                    rsl = this.item.dscrp;
                    break;
                case 1:
                    this.dscrpText = '完成情况：';
                    rsl = this.item.finishreport
                    break;
            }
            return rsl
        },
        isOvertime() {
            if (this.item.stime == this.item.etime) {
                return false
            }
            var endDate = new Date(this.item.etime);
            var finishDate = this.item.finishtime ? new Date(this.item.finishtime) : 0
            return endDate < finishDate
        },
        isEventIcon() {
            let rsl = ""
            switch (this.item.status) {
                case 0:
                    rsl = "icon-Chat"
                    break;
                case 1:
                    rsl = "icon-tongyi"
                    break;
            }
            return rsl
        },
        isEventCls() {
            let rsl = ""
            switch (this.item.status) {
                // case -5:
                //     rsl = "status-plus"
                //     break;
                // case -4:
                //     rsl = "status-send"
                //     break;
                // // case -3:
                // //     rsl = "status-check"
                // //     break;
                // case -2:
                //     rsl = "status-audit"
                //     break;
                // case -1:
                //     rsl = "status-stop"
                //     break;
                // case 0:
                //     rsl = "status-chat"
                //     break;
                // case 1:
                //     rsl = "status-danger"
                //     break;
                // case 2:
                //     rsl = "status-close"
                //     break;
                case 0:
                    rsl = "status-audit"
                    break;
                case 1:
                    rsl = "status-check"
                    break;
            }
            return rsl
        },
        isDateTime() {
            switch (this.item.status) {
                case 0:
                    return $lj.formatTime(this.item.stime, '{y}-{m}-{d} {h}:{i}', true)
                case 1:
                    return ' · ' + $lj.formatTime(this.item.finishtime, '{y}-{m}-{d} {h}:{i}', true)
            }
        },
        isDiffHour() {
            return $lj.getDiffHours(this.item.stime, this.item.etime)
        },
        isDuty() {
            let str = this.item.rel_empname_str;
            if (str.lastIndexOf(",") + 1 == str.length) {
                str = str.substring(0, str.length - 1)
            }
            return str.split(",");
        },
        isRelTitle() {
            if (!this.item.relmxList.length) return "相关资料"
            switch (this.item.relmxList[0].kind) {
                case 0:
                    return "相关物料"
                case 1:
                    return "相关工段"
                case 2:
                    return "相关设备"
            }
        },
        isRelKindIcon(itm) {
            return function(itm) {
                let cls = "";
                switch (itm.kind) {
                    case 0:
                        cls = "icon-materiel"
                        break;
                    case 1:
                        cls = "icon-3User_light"
                        break;
                    case 2:
                        cls = "icon-facility"
                        break;
                }
                return cls
            }
        },
        isRelControlText() {
            return this.unfold ? "收起" : "展开"
        },
        isRelTagArr() {
            let str = this.item.reason_rel_name_str;
            if (str.lastIndexOf(",") + 1 == str.length) {
                str = str.substring(0, str.length - 1)
            }
            return str.split(",");
        },
        isRelPropATitle(kind) {
            return function(kind) {
                switch (kind) {
                    case 0:
                        return "分类"
                    case 1:
                        return "所属"
                    case 2:
                        return "所属"
                }
            }
        }
    },

    created() {

    },

    methods: {
        // handleDelEvent() {
        //     this.$emit('delEvent', this.item, this.isKindText);
        // },
        // handleEditEvent() {
        //     this.$emit('editEvent', this.item, this.isKindText);
        // },
        // photoBrowser(index) {
        //     var images = [];
        //     for (const picture of this.item.fjmxList) {
        //         var url = $lj.constant.cacheDir + "/" + picture.filemd5;
        //         images.push(url);
        //     }
        //     $lj.photoBrowser(images, index);
        // },
        // checkImg(fileType){
        //     fileType = fileType.trim().toLowerCase();
        //     return fileType =="bmp" || fileType == "png" || fileType == "gif" || fileType == "jpg" || fileType == "jpeg";
        // },
        // checkTv(fileType){
        //     fileType = fileType.trim().toLowerCase();
        //     return fileType == "mp4" || fileType == "rmvb" || fileType == "avi" || fileType == "ts" || fileType == "mov";
        // }
    },
};
</script>

<style lang="less">
.event-detail-item {
    display: flex;
    padding: 0 20px;

    .item-kind {
        position: relative;
        flex-shrink: 0;
        display: flex;
        background: @light-barkground-elevated-primary;
        margin-right: 10px;

        &::before{
            content: "";
            position: absolute;
            right: 12px;
            top: 0;
            bottom: 0;
            width: 1px;
            // border-right: 1px dotted @light-label-tertiary;
            background-image: linear-gradient(to bottom, rgba(60, 60, 67, 0.18) 0%, rgba(60, 60, 67, 0.18) 50%, transparent 50%);
            background-size: 2px 6px;
            background-repeat: repeat-y;
            z-index: 0;
        }
        &.start::after, &.end::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            height: 24px;
            background: @light-barkground-elevated-primary;
            z-index: 1;
        }
        &.start::after {
            top: 0;
        }
        &.end::after {
            bottom: 0;
        }
        .title {
            flex: 1;
            font-size: 12px;
            font-weight: bold;
            padding-right: 10px;
            margin-top: 9px;
            width: 34px;
        }
        .event-icon-status {
            position: relative;
            margin-top: 5px;
            flex-shrink: 0;
            z-index: 2;
        }
    }
    .item-main {
        flex: 1;
        width: -moz-calc(~"100% - 74px");
        width: -webkit-calc(~"100% - 74px");
        width: calc(~"100% - 74px");
        padding-bottom: 16px;

        .item-main__header {
            margin-top: 5px;
            height: 24px;
            align-items: center;
        }

        .eventmx-tag {
            margin-bottom: 5px;
        }
        .reason-rel {
            position: relative;
            margin-bottom: 5px;
            width: 100%;
            display: flex;
            flex-direction: column;

            .reason-rel-tag {
                background-color: @light-fill-secondary;
            }
        }
        .reason-rel__header {
            display: flex;
        }
        .reason-rel__header-tagbox {
            flex: 1;
        }
        .reason-rel__header-control {
            flex-shrink: 0;
            font-size: 12px;
            color: @light-label-secondary;
            .iconfont {
                font-size: 12px;
            }
        }
        .reason-rel-cell {
            margin-bottom: 2px;
            &.van-cell {
                background-color: @light-fill-tertiary;
                padding-top: 4px;
                padding-bottom: 4px;
                padding-left: 8px;
                padding-right: 8px;
                border-radius: 4px;
            }
            .iconfont {
                font-size: 16px;
                margin-right: 4px;
            }
            .van-cell__label {
                margin-top: 0;
            }
            .rel-right {
                display: inline-flex;
                flex-direction: column;

                .rel-right-tag {
                    display: inline-block;
                    // margin-top: 2px;
                    justify-content: flex-end;
                    font-size: 12px;
                    color: @light-label-secondary;
                    line-height: 16px;
                    // background-color: @light-barkground-secondary;
                    + .rel-right-tag  {
                        margin-top: 3px;
                    }
                }
            }
        }
        // .file-rel {
        //     position: relative;
        //     margin: 0 -5px;
        //     // display: flex;
        //     // width: 100%;
        //     .file-rel-item {
        //         display: inline-block;
        //         margin: 0 5px;
        //         margin-bottom: 5px;
        //         border-radius: 4px;
        //         overflow: hidden;
        //         /**
        //             1.event-detail-item padding 0 20px = 40px
        //             2.item-kind 24px + 10px  = 34px
        //             3..file-rel-item 0 5px = 10px * 3 = 30px
        //             4..file-rel 0 -5px = -10px
        //             sum(1~4) = 94 / 3 = 31.3333333 ≈ 32
        //          */
        //         width: -moz-calc(~"33.33vw - 32px");
        //         width: -webkit-calc(~"33.33vw - 32px");
        //         width: calc(~"33.33vw - 32px");
        //         height: -moz-calc(~"33.33vw - 32px");
        //         height: -webkit-calc(~"33.33vw - 32px");
        //         height: calc(~"33.33vw - 32px");
        //     }
        // }
        // .edit-control {
        //     display: flex;
        //     justify-content: space-between;
        //     overflow: hidden;
        //     .btn {
        //         width: 90px;
        //         .iconfont {
        //             font-size: 14px;
        //         }

        //         &.status-0 {
        //             // background-color: @light-barkground-secondary;
        //             // border-color: rgba(0, 122, 255, 0.4);
        //             color: @musePrimary;
        //             // box-shadow: 0px 2px 4px rgba(0, 122, 255, 0.2);
        //         }
        //         &.del-btn {
        //             color: @light-system-red;
        //         }
        //     }
        // }
    }
}


        .item-main__header {
            display: flex;
            .emp-info {
                flex: 1;
                color: @light-label-primary;
                span {
                    padding-left: 2px;
                    font-size: 12px;
                    color: @light-label-tertiary;
                }
            }
            .time-info {
                flex-shrink: 0;
                font-size: 12px;
                color: @light-label-secondary;
                margin-bottom: 0!important;
            }
        }
        .item-main__main .content_str {
            padding: 6px 8px;
            border-radius: 10px;
            border-top-left-radius: 0;
            background-color: @light-fill-quarternary;
            color: @light-label-secondary;
            font-size: 14px;
        }
    .eventmx-rel-tag {
        margin-left: 2px;
        background-color: @light-fill-tertiary;
        color: @light-label-primary;
        .iconfont {
            font-size: 12px
        };
    }

</style>