<template>
	<div style="padding: 0px 10px 0px 50px;font-size: 15px;">
	    <div class="arrow_box" :class="boxStyle">
	        <div class="task_date_inner">{{item.dateDuration}}</div>
	        <div class="task_conner">
	            <span v-if="item.statusStr" :style="statusStyle">{{item.statusStr}}</span>
                <span v-if="item.deadFlag === 1" style="color: #fa5a5a;background-color: #ffc3c3;">超期</span>
	            <span v-else-if="item.hasFile == 1">附件</span>
	        </div>

	        <div class="task_dscrp">
	            <div v-if="item.idType === 2">
                    <div style="font-weight: bold;">{{item.relMsg.s_msgtitle}}</div>
                    <div>{{item.content}}</div>
                </div>
                <div v-else>{{item.content}}</div>
	        </div>

	        <div class="task_flex">
	            <div class="task_tip">{{item.relempDscrp}}</div>
	            <div class="task_tip">{{item.typeDscrp}}</div>
	        </div>
	        <!-- 图标 -->
	        <div class="left_icon" style="background: #88b04b;box-shadow: 0 0 0 3px #d1f3a1;" v-if="item.typeDscrp == '任务验收'">
	            <svg class="icon" aria-hidden="true">
	                <use xlink:href="#icon-yan"></use>
	            </svg>
	        </div>
	        <div class="left_icon" style="background: #ff6f61;box-shadow: 0 0 0 3px #fdd1cd;" v-else-if="item.typeDscrp == '审批流程'">
	            <svg class="icon" aria-hidden="true">
	                <use xlink:href="#icon-shen3"></use>
	            </svg>
	        </div>
	        <div class="left_icon" style="background: #f2c866;box-shadow: 0 0 0 3px #f7e7c2;" v-else-if="item.typeDscrp == '消息'">
	            <svg class="icon" aria-hidden="true">
	                <use xlink:href="#icon-youjian1"></use>
	            </svg>
	        </div>
	        <div class="left_icon" v-else>
	            <svg class="icon" aria-hidden="true">
	                <use xlink:href="#icon-renwu"></use>
	            </svg>
	        </div>
	    </div>
	</div>
</template>

<script>
	export default {
		name: 'module-timescape',
		props: {
			item: {
				type: Object,
				default: function() {
					return {}
				}
			},
		},
		created() {

		},
		computed: {
			boxStyle: function() {
				switch(this.item.typeDscrp) {
					case '任务验收': return 'kindgreen';
					case '审批流程': return 'kindred';
					case '消息': return 'kindorange';
					default: break;
				}
			},
			statusStyle: function() {
				switch(this.item.statusStr) {
					case '已完成':
					case '已审批':
						return {color: '#46a4da',backgroundColor: '#afdcf8'}
					case '待验收':
					case '待办':
						return {color: '#fa5a5a',backgroundColor: '#ffc3c3'}
					default: break;
				}
			}
		}
	}
</script>

<style>
	
    .arrow_box {
        position: relative;
        padding: 5px 5px 5px 10px;
        /* border-radius: 5px; */
        border-left: 3px solid #46a4da;
        /*box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);*/
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
        background: #fff;
        margin-bottom: 10px;
    }

    .arrow_box:after {
        right: 100%;
        top: 22px;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-right-color: #46a4da;
        border-width: 8px;
        margin-top: -8px;
    }

    .task_date_inner {
        color: #888;
        font-size: 12px;
        margin-bottom: 5px;
    }

    .task_conner {
        position: absolute;
        right: 0px;
        top: 0px;
    }
    .task_conner span {
        float: right;
        color: #888;
        font-size: 12px;
        padding: 4px 10px;
        background-color: #ececec;
        line-height: 12px;
        text-align: center;
        margin-left: 3px;
    }

    .task_dscrp {
        line-height: 22px;
        margin: 0 0 5px 0;
        font-size: 15px;
    }

    .task_flex {
        display: flex;
        line-height: 20px;
    }

    .task_tip {
        color: #888;
        font-size: 12px;
        margin-right: 10px;
        border-radius: 5px;
        padding: 5px;
        background-color: #f7f7f7;
        line-height: 12px;
    }

    .left_icon {
        position: absolute;
        top: 10px;
        left: -40px;
        /* background-color: #41838e; */
        /* font-size: 12px; */
        font-weight: bold;
        color: #fff;
        border-radius: 50%;
        width: 25px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        background: #46a4da;
        border-radius: 50%;
        box-shadow: 0 0 0 3px #afdcf8;
    }

    .kindgreen {
    border-left: 3px solid #88b04b;

  }

  .kindgreen::after {
    border-right-color: #88b04b;
  }

  .kindred {
    border-left: 3px solid #ff6f61;
  }

  .kindred::after {
    border-right-color: #ff6f61;
  }

  .kindorange{
   border-left: 3px solid #f2c866
  }

   .kindorange::after {
    border-right-color: #f2c866;
  } 
</style>