<template>
  <div>
    <div class="data" v-for="schedual in scheduals" :value="schedual.id" :key="schedual.id"
         @click="detailAction(schedual)">
      <!-- <router-link to="/details"> -->

      <div class="name">
        <span>{{schedual.patient.name}}</span>
        <span>{{schedual.treatment_mode.name}}</span>
      </div>
      <div class="state" :class="stateColor(schedual)">
        <span>{{stateText(schedual)}}</span>
        <span> | </span>
        <span>{{schedual.device_number.number}}</span>

        <span v-if="schedual.doc"></span>

      </div>
      <!-- </router-link>  -->
    </div>
  </div>
</template>

<script>
  export default {
    name: 'DataList',
    data () {
      return {}
    },

    props: {
      scheduals: {
        require: true,
        type: Array,
      }
    },

    methods: {
      stateColor: function (schedual) {
        var state = this.computeState(schedual)
        if (state == 1) {
          return 'blue'
        } else if (state == 2) {
          return 'gray'
        } else if (state == 3) {
          return 'green'
        } else {
          return 'blue'
        }
      },
      stateText: function (schedual) {
        var state = this.computeState(schedual)
        if (state == 1) {
          return '已上机'
        } else if (state == 2) {
          return '已下机'
        } else if (state == 3) {
          return '监测中'
        } else {
          return schedual.patient.gender == 1 ? '男' : '女'
          // return "未上机";
        }
      },
      computeState: function (schedual) {
        if (schedual.dialysis_order == null) { // 未上机
          return 4
        } else if (schedual.dialysis_order.stage == 2) { // 已下机
          return 2
        } else if (schedual.dialysis_order.stage == 1 && schedual.monitoring_records != null && schedual.monitoring_records.length > 1) { // 监测中
          return 3
        } else {
          return 1
        }
      },
      detailAction: function (schedual) {
        // console.log(schedual)
        var patient_id = schedual.patient.id
        var date = schedual.schedule_date
        this.$router.push({path: '/details', query: {patient_id: patient_id, date: date}})
      }
    }
  }
</script>

<style style="stylesheet/scss" lang="scss" scoped>
  .data {
  width: 3.32rem;
  margin: 0 0 0.3rem 0.42rem;
  float: left;
  border-radius: 5px;
  text-align: center;
  font-size: 0.34rem;
  background: $base-color;
  .name {
  font-size: 0.34rem;
  padding: 0.55rem 0 0.4rem 0;
  line-height: 0.5rem;
  color: $pgh-color;
  span {
  display: block;
  }
  }
  .state {
  font-size: 0.28rem;
  // background: $font-color;
  height: 0.8rem;
  line-height: 0.8rem;
  color: $text-color;
  border-radius: 0 0 5px 5px;
  }
  .blue {
  background: $main-color;
  }
  .green {
  background: #5bd18b;
  }
  .gray {
  background: #a8b3ba;
  }
  .lightGray {
  background: #c6cdd2;
  }
  }
</style>

