<template>
  <div>
    <div class="panel-box">
      <div class="d-flex panel-box-1">
        <div class="flex-1">
          <span class="panel-tips">患者体重（kg）</span>
          <span class="panel-con">{{ weightMessage }}</span>
        </div>
        <div class="flex-1">
          <span class="panel-tips">药物剂量（mg）</span>
          <span class="panel-con">{{ thrombolyticDose }}</span>
        </div>
      </div>
      <div class="d-flex panel-box-1">
        <div class="flex-1">
          <span class="panel-tips">团注剂量（mg）</span>
          <span class="panel-con">{{ bolusDose }}</span>
        </div>
        <div class="flex-1">
          <span class="panel-tips">维持剂量（mg）</span>
          <span class="panel-con">{{ maintenanceDose }}</span>
        </div>
      </div>
      <div style="width: 95%; padding-left: 5%">
        <div style="width: 120%">
          <span :style="{ marginLeft: percentA }" class="tips">
            {{ info }}
            <a-icon class="down-icon" type="caret-down" />
          </span>
        </div>
        <a-progress :percent="percent" :show-info="false" :stroke-color="strokeColor" :stroke-width="strokeWidth" status="active" />
        <div class="flex-1" style="width: 106%; margin-left: -3%">
          <div class="flex-1" style="justify-content: center" v-for="(item, index) in lists" :key="index">{{ item }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
  name: 'Panel',
  data() {
    return {
      str: '智慧平车面板数据',
      dataList: [],
      percent: 0,
      percentA: 0,
      strokeWidth: 6,
      strokeColor: {
        from: '#1362B8',
        to: '#06D0CA',
      },
      lists: [
        '呼叫',
        '到场',
        '评估',
        '采血',
        'CT',
        '谈话',
        '签字',
        '注射',
        '介入',
        '手术',
        '穿刺',
        'DSA',
        '溶栓',
        '再通',
        '支架',
        '解脱',
        '结束',
      ],
      info: '呼叫',
    };
  },
  computed: mapState('messages', ['weightMessage', 'bolusDose', 'maintenanceDose', 'thrombolyticDose', 'startMessages', 'rfidMessage']),
  watch: {
    rfidMessage(val) {
      console.log(val);
      if (this.startMessages) {
        this.percent = 0;
        this.percentA = 0;
        this.info = '呼叫';
        this.setStartMessages(false);
      } else {
        if (val.step && val.step - 0 > (this.percent * 16) / 100 && val.step - 0 <= 16) {
          console.log(val.step - 0, this.percent);
          this.percent = ((val.step - 0) * 100) / 16;
          this.percentA = (this.percent * 100) / 120 + '%';
          this.info = this.lists[val.step - 0];
        }
      }
    },
    startMessages(val) {
      if (val) {
        this.percent = 0;
        this.percentA = 0;
        this.info = '呼叫';
        this.setStartMessages(false);
      }
    },
  },
  methods: { ...mapMutations('messages', ['setStartMessages']) },
  // mounted() {
  //   const that = this;
  //   var add = setInterval(function() {
  //     if (that.percent === 100) {
  //       that.percent = 0;
  //       that.percentA = 0;
  //     } else {
  //       that.percent += 100 / 16;
  //       that.percentA = (that.percent * 100) / 120 + '%';
  //     }
  //   }, 1000);
  // },
};
</script>

<style lang="stylus" scoped>
.panel-box {
  height: 100%;
  width: 100%;
  padding: 10px;

  .panel-box-1 {
    padding: 0 3rem;
  }

  div {
    height: 33%;
    align-items: center;
    position: relative;
  }

  span {
    flex: 1;
    text-align: center;
    position: absolute;
    left: 0;
  }
}

.panel-tips {
  font-size: 1.2rem;
  color: #ccc;
}

.panel-con {
  font-size: 3rem;
  font-weight: 600;
  text-shadow: #0075ff 0px 0px 8px;
  letter-spacing: 8px;
  transform: rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(0.8) translate(0px, 0px);
  left: auto !important;
  right: 3rem;
}

.tips {
  position: relative;
  padding: 0 4px;
  border-radius: 5px 5px 5px 0;
  margin-left: 0;
  transition: all 1s;
  border: 1px solid #ccc;
}

.down-icon {
  position: absolute;
  font-size: 10px;
  bottom: -8px;
  left: -10%;
}

@media (max-width: 1500px) {
  .panel-box .panel-box-1 {
    padding: 0 2rem;
  }

  .panel-tips {
    font-size: 1rem;
  }

  .panel-con {
    font-size: 2rem;
    right: 1rem;
  }
}
</style>
