<template>
  <div class="select-box sex-box">
    <div class="mark" @click="chooseShip({type: -1})"></div>
    <div class="select-con t-center">
      <div class="s-tit">与患者关系</div>

      <div class="s-val" :class="curShip === item.id ? 'curSex': '' " v-for="(item,index) in defaShip" :key="index"
           @click="chooseShip({type:item.id,name:item.name})">{{item.name}}
      </div>
      <!-- <div class="s-val" :class="curSex === 2 ? 'curSex': '' " @click="chooseSex('sex', {type: 2})">女</div> -->
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        defaShip: [
          {
            name: '医生与患者',
            id: 1
          },
          {
            name: '直系亲属',
            id: 2
          },
          {
            name: '朋友',
            id: 3
          },
          {
            name: '其他',
            id: 4
          }
        ]
      };
    },
    props: {
      chooseShip: {
        type: Function,
        default: () => {
        },
      },
      curShip: {
        type: Number,
        default: 3,
      },
    },
  };
</script>

<style lang="less">
  // @import '@/static/css/common.scss';
  .sex-box {
    .select-con {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      z-index: 100;
      font-size: 30px;
      background: #fff;
      color: rgba(51, 51, 51, 1);

      .s-tit {
        color: rgba(148, 151, 153, 1);
        height: 100px;
        line-height: 100px;
      }

      .s-val {
        height: 90px;
        line-height: 90px;
        border-bottom: 1px solid rgba(240, 240, 240, 1);
      }

      .curSex {
        color: rgba(65, 183, 167, 1);
      }

      .s-val-cur {
        color: rgba(65, 183, 167, 1);
      }

      .s-footer-box {
        height: 87px;
        line-height: 87px;

        .s-left {
          color: rgba(153, 153, 153, 1);
        }

        .s-right {
          color: rgba(65, 183, 167, 1);
          border-left: 1px solid rgba(240, 240, 240, 1);
        }
      }

    }
  }
</style>
