<template>
    <span class="title-prev-box">
      <template v-if="item.type == '外院'">
        <span class="start-type" :class="{'gray': !gray}">外院</span>
      </template>
        <!-- 随访临时计划 -->
        <template v-if="item.subCategory=='follow'">
          <span class='start-type' :class="item.followType ==1 ? 'main-diagnose' : 'minor-diagnose'">{{ item.followType == 1 ? '计划随访' : '临时随访'}}</span>
        </template>

        <!-- 文书状态 -->
        <template v-if="item.other && item.other.templateResource">
          <span class='start-type' :class="!item.other.completed ? 'main-diagnose' : 'minor-diagnose'">{{ item.other.completed ? '已完成' : '未完成'}}</span>
        </template>

        <template v-if="item.subCategory == 'outHospital' || 
          item.subCategory == 'inHospital' ||
          item.subCategory == 'outpatient' ||
          item.subCategory == 'appointment' ||
          (item.category==='outpatients_hospital_record' &&
            (item.subCategory!='diagnose' || (item.subCategory=='diagnose' && item.type == '外院')) &&
            item.subCategory!='progressNote')">
            <span class="sign-type" v-if="outpatientshospitalRecordType(item.subCategory)">{{outpatientshospitalRecordType(item.subCategory)}}</span>
            <span class="click-text click-text-no text-active nohover" v-if="outpatientshospitalRecord(item)">{{outpatientshospitalRecord(item) }}</span>
        </template>

        <!-- 诊断主要次要状态 -->
        <span
            v-if="item.category==='outpatients_hospital_record' && item.subCategory=='diagnose' && item.data.diagnosticType"
            class='start-type'
            :class="{
                'main-diagnose':item.data && item.data.diagnosticType && item.data.diagnosticType.slice(0,2)=='主要',
                'minor-diagnose':item.data && item.data.diagnosticType && item.data.diagnosticType.slice(0,2)=='次要',
                'minor-consult':item.data&& item.data.diagnosticType&&item.data.diagnosticType.slice(0,2)=='咨询'
            }"
            >
            {{item.data && item.data.diagnosticType && item.data.diagnosticType.slice(0,2)}}
        </span>
        <template v-if="(setSortPathology(item,'subCategory') || setSortPathology(item,'oldSubCategory')) && Array.isArray(item.data)">
            <template v-for="(ele, idx) in item.data">
              <span
                style="text-decoration:unset;"
                class="check"
                v-if="ele.type == '冰冻病理' && !ele.isSupplement"
                @click.stop="$emit('check','frozenUrl')"
                :key="idx"
              >
                <span class="start-type pathology-type" style="">冰冻
                  <span class="red-num pathology">{{item.data | calcRispCount('frozenUrl')}}</span>
                </span>
              </span>
              <span
                style="text-decoration:unset;"
                class="check"
                v-if="ele.type != '冰冻病理' && !ele.isSupplement"
                @click.stop="$emit('check','conventionalUrl')"
                :key="idx"
              >
                <span class="start-type pathology-type" style="">常规
                  <span class="red-num pathology">{{item.data | calcRispCount('conventionalUrl')}}</span>
                </span>
              </span>
            </template>
        </template>

        <!-- 独立报告 -->
        <span v-if="item.independentReport == 1 && item.type != '外院'" style="color:#9341FF">
            <i class="el-icon-tickets"></i>
        </span>

    </span>
    
</template>
<script>
import mixin from './timelineMixin'
export default {
    props: {
        item: {
            type: Object,
            default: () => {
                return {
                    independentReport: 0,
                    type: '',
                    category: '',
                    data: {},
                    subCategory: ''
                }
            }
        },
        gray: {
          type: Boolean | Number,
          default: true
        }
    },
    mixins: [mixin]
}
</script>
<style lang="less" scoped>
.title-prev-box {
    .sign-type {
        font-size: 14px;
        font-family: PingFangSC,PingFangSC-Semibold;
        color: #3e98ff;
        font-weight: 400;
        margin-right: 4px;
    }
    .start-type {
        display: inline-block;
        box-sizing: border-box;
        margin-right: 4px;
        line-height: 13px!important;
        height: 18px!important;
        margin-top: 3px;
        font-style: normal;
        padding: 2px 3px;
        background: rgba(62,152,255,.12);
        border-radius: 2px;
        font-size: 12px;
        border: 1px solid #3e98ff;
        color: #3e98ff;

        .red-num {
          position: absolute;
          border-radius: 10px;
          color: #fff;
          font-size: 11px;
          display: flex;
          justify-content: center;
          height: 13px;
          line-height: 12px;
          padding: 0 4px;
          background-color: #e92625;
        }
        &.main-diagnose{
          background: rgba(24,144,255,0.10);
          border: 1px solid rgba(24,144,255,0.20);
          color: #1890FF;
          font-weight: 400;
        }
        &.minor-diagnose {
          background: rgba(147,65,255,0.10);
          border: 1px solid rgba(147,65,255,0.20);
          color: #9341FF;
          font-weight: 400;
        }
        &.minor-consult {
          border: 1px solid #f9c4e1;
          background-color: #fdeaf4;
          color: #EB2F96;
          font-weight: 400;
        }
        &.pathology-type {
          border: 1px solid rgba(66,211,136,.77);
          color: #3eb77a;
          background: #e9f6ef;
          position: relative;
          .red-num {
            top: -6px;
            left: 23px;
            z-index: 2;
          }
        }

        &.gray {
          color: rgba(0,0,0,.4);
          background: rgba(0,0,0,.04);
          border-color: rgba(0,0,0,.15);
        }
        
    }
    .check {
        cursor: pointer;
    }
}
</style>
