<template>
  <div class="discomfort-table">
    <div class="discomfort-item header">
      <p class="name">名称</p>
      <p>详情</p>
    </div>
    <div class="discomfort-item" v-if="item.tired">
      <p class="name">疲倦</p>
      <div class="pdding">-</div>
    </div>
    <div class="discomfort-item" v-if="item.mouthUlcer">
      <p class="name">口腔溃疡</p>
      <div class="pdding" style="border-right:1px solid #e4e5e9;width:214px">等级0-4</div>
      <div class="pdding">{{getSelectLabel(item.mouthUlcerLevel,mouthUlcerArr)}}</div>
    </div>
    <div class="discomfort-item" v-if="item.weak">
      <p class="name">乏力</p>
      <div class="pdding">-</div>
    </div>
    <div class="discomfort-item" v-if="item.decreasedAppetite">
      <p class="name">食欲降低</p>
      <div class="child">
        <div><p>进食量是否减少？</p><p>{{item.foodIntakeChange ? '是' : '否'}}<span class="line" v-if="item.foodIntakeChange">{{getSelectLabel(item.foodIntakeChangeNum,intakeLevel)}}</span></p></div>
        <div><p style="border-right:1px solid #e4e5e9;width:215px">近期1-3个月体重是否持续下降？</p><p style="border-left:none">{{item.decreasedAppetite ? '是' : '否'}}<span class="line" v-if="item.decreasedAppetite">{{item.bodyWeightChangeNum}}kg</span></p></div>
      </div>
    </div>
    <div class="discomfort-item" v-if="item.nausea">
      <p class="name">恶心</p>
      <div class="pdding">-</div>
    </div>
    <div class="discomfort-item" v-if="item.vomit">
      <p class="name">呕吐</p>
      <div class="pdding">-</div>
    </div>
    <div class="discomfort-item" v-if="item.constipation">
      <p class="name">便秘</p>
      <div class="child">
        <div><p>次数</p><p>{{item.constipationNum}}次/{{item.constipationDay}}天</p></div>
        <div><p>处置</p><p>{{getSelectLabel(item.method,constipationHandleArr)}}<span v-if="item.method==2" class="line"><pre>{{item.constipationTakeMedicine}}</pre></span></p></div>
      </div>
    </div>
    <div class="discomfort-item" v-if="item.diarrhea">
      <p class="name">腹泻</p>
      <div class="child">
        <div><p>次数</p><p>{{item.diarrheaNum}}次/{{item.diarrheaDay}}天</p></div>
        <div><p>形状</p><p>{{getSelectLabel(item.shape,shapeArr)}}</p></div>
        <div><p>处置</p><p>{{getSelectLabel(item.processing,diarrheaDict)}}<span v-if="item.processing==2" class="line"><pre>{{item.diarrheaTakeMedicine}}</pre></span></p></div>
      </div>
    </div>
    <div class="discomfort-item" v-if="item.hemorrhage">
      <p class="name">出血</p>
      <div class="pdding">-</div>
    </div>
    <div class="discomfort-item" v-if="item.numbness">
      <p class="name">手足麻木</p>
      <div class="pdding">-</div>
    </div>
    <div class="discomfort-item" v-if="item.rash">
      <p class="name">皮疹</p>
      <div class="pdding"><pre>{{item.rashContent}}</pre></div>
    </div>
    <div class="discomfort-item" v-if="item.pain">
      <p class="name">疼痛</p>
      <div class="pain">
        <div v-for="(i,index) in item.painDTO" :key="index">
          <p class="name">部位{{index+1}}</p>
          <div class="pdding">
            <div><p>疼痛部位</p><p>{{i.painLocation}}</p></div>
            <div><p>性质</p><p class="nature-box"><template v-if="i.painNature"><span v-for="s in i.painNature.split(',')" :key="s">{{s}}</span></template></p></div>
            <div><p>评分</p><p>{{i.score}}</p></div>
            <div><p>是否影响睡眠？</p><p>{{i.sleep ? '是' : (i.sleep == null ? '' : '否')}}</p></div>
            <div><p>是否吃止痛药？</p><p>{{i.anodyne ? '是' : (i.anodyne == null ? '' : '否')}}<span v-if="i.anodyne" class="line"><pre>{{i.drugDose}}</pre></span></p></div>
          </div>
        </div>
      </div>
    </div>
    <div class="discomfort-item" v-if="item.discomfortOther">
      <p class="name">其他</p>
      <div class="pdding"><pre>{{item.discomfortOtherContent}}</pre></div>
    </div>
  </div>
</template>
<script>
import { getSelectLabel } from 'aegle-sp-components/src/utils/index.js'
import { shapeArr,constipationHandleArr,diarrheaDict,intakeLevel,mouthUlcerArr } from 'aegle-sp-components/src/data/validate.js'

export default {
  props: {
    item: {
      type: Object,
      default:() => {
        return {
          tired: '',
          weak: '',
          mouthUlcer: '',
          decreasedAppetite: '',
          nausea: '',
          vomit: '',
          constipation: '',
          diarrhea: '',
          rash: '',
          hemorrhage: '',
          numbness: '',
          pain: '',
          discomfortOther: '',
          discomfortOtherContent: '',
          diarrheaDay: '',//tian
          diarrheaNum: '',//次数
          shape: '',//形状
          processing: '',//处置
          diarrheaTakeMedicine: '',//服用药物
          rashContent: '',
          discomfortOtherContent: '',
          mouthUlcerLevel: '',
          foodIntakeChange: '',//进食量减少
            foodIntakeChangeNum: '',//减少量
            bodyWeightChange: '',//体重是否下降
            bodyWeightChangeNum: '',//体重下降量,
          constipationDay: '',//tian
            constipationNum: '',//次数
            method: '',//处置
            constipationTakeMedicine: '',//用药
          painDTO:[{
            painLocation: '', //疼痛位置
            painNature: '', //疼痛性质
            score: 0,       //评分
            sleep: '',      //是否影响睡眠 0：否  1：是
            anodyne: '',        //止痛药 0：否  1：是
            drugDose:''    //药物剂量
          }]
        }
      }
    }
  },
  name: 'SpDiscomfort',
  data() {
    return {
      shapeArr,
      constipationHandleArr,
      diarrheaDict,
      intakeLevel,
      mouthUlcerArr,
    }
  },
  methods: {
    getSelectLabel(v,arr) {
      return getSelectLabel(v,arr)
    },
  }
}
</script>

<style lang="less" scoped>
.flex {
  display: flex;
  align-items: center;
}
.discomfort-table {
  height: 100%;
  border-top: 1px solid #e4e5e9;
  border-left: 1px solid #e4e5e9;
  border-right: 1px solid #e4e5e9;
  .bBottom {
    border-bottom: 1px solid #e4e5e9;
  }
  pre {
    margin: 0;
    font-family: PingFangSC, PingFangSC-Regular;
    white-space: pre-wrap;
    // line-height: 20px;
  }
  p {
    box-sizing: border-box;
  }
  .discomfort-item {
    font-size: 13px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: rgba(0,0,0,0.70);
    box-sizing: border-box;
    display: flex;
    border-bottom: 1px solid #e4e5e9;
    // min-height: 32px;    
    p.name {
      width: 80px;
      margin: 0;
      padding: 7px 12px;
      box-sizing: border-box;
      border-right: 1px solid #e4e5e9;
      display: flex;
      align-items: center;
    }
    .pdding {
      padding: 7px 12px;
    }
    >.pdding {
      flex: 1;
    }
    .line {
      display: flex;
      align-items: center;
      flex: 1;
      white-space: wrap;
      &::before {
        content: '';
        display: block;
        width: 0;
        height: 13px;
        border-right: 1px solid rgba(0,0,0,0.7);
        margin: 0 12px;
      }
    }
    .child {
      flex: 1;
      height: 100%;
      >div {
        display: flex;
        align-items: center;
        height: 100%;
        flex: 1;
        border-bottom: 1px solid #e4e5e9;
        &:last-child {
          border-bottom: none;
        }
      }
      p {
        margin:0;
        height: 100%;
        padding: 7px 12px;
        color: rgba(0,0,0,0.70);
        display: flex;
        align-items: center;
        letter-spacing: 0.21px;
        &:first-child {
          
          width: 214px;
        }
        &:last-child {
          border-left: 1px solid #e4e5e9;
          flex: 1;
          display: flex;
        }
      }
    }
    .pain {
      flex: 1;
      .pdding {
        padding: 0;
        flex: 1;
        >div {
          display: flex;
          border-bottom: 1px solid #e4e5e9;
          &:last-child {
            // border-bottom: none;
          }
        }
        p {
          margin:0;
          min-height: 32px;
          padding: 7px 12px;
          color: rgba(0,0,0,0.70);
          display: flex;
          align-items: center;
          &:first-child {
            width: 134px;
          }
          &:last-child {
            flex: 1;
            
            border-left: 1px solid #e4e5e9;
          }
        }
      }
      >div {
        width: 100%;
        display: flex;
        .name {
          border-bottom: 1px solid #e4e5e9;
        }
        &:last-child {
          .name,
          .pdding > div:last-child {
            border-bottom: none;
          }
        }
      }
      
      .nature-box {
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        span {
          font-size: 12px;
          text-align: center;
          height: 18px;
          line-height: 16px;
          background: rgba(24,144,255,0.10);
          border: 1px solid rgba(24,144,255,0.20);
          border-radius: 2px;
          padding: 0 8px;
          color: #1890ff;
          margin-bottom: 2px;
        }
        span + span {
          margin-left: 3px;
        }
      }
    }
    &.header {
      background: #f3f4f8;
      p {
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: rgba(0,0,0,0.80);
        margin: 0;
        padding: 7px 12px;
      }
      p:first-child {
        width: 80px;
        border-right: 1px solid #e4e5e9;
      }
    }
  }
}

</style>