<!--人流峰值管理-->
<template>
  <div class="app-container">
    <TagCard title="时间段人流峰值状态" />
    <div class="card-scroll">
      <div class="traffic-card">
        <div class="traffic-card-drag" :style="`left: calc(100% * ${free / 100} - 45px);z-index: 668;`">
          <el-input-number
            v-model="freeNum"
            :min="0"
            :max="ordinaryNum"
            size="small"
            label="序号"
            style="width: 90px"
            controls-position="right"
            @keyup.native="upNumber"
            @keydown.native="upNumber"
            @change="handleChange('free',$event)"
          />
          <div class="circle-icon" />
        </div>
        <div class="traffic-card-drag" :style="`left: calc(100% * ${ordinary / 100} - 45px);z-index: 667;`">
          <el-input-number
            v-model="ordinaryNum"
            :min="freeNum"
            :max="crowdingNum"
            size="small"
            label="序号"
            style="width: 90px"
            controls-position="right"
            @keyup.native="upNumber"
            @keydown.native="upNumber"
            @change="handleChange('ordinary',$event)"
          />
          <div class="circle-icon" />
        </div>
        <div class="traffic-card-drag" :style="`left: calc(100% * ${crowding / 100} - 45px);z-index: 666;`">
          <el-input-number
            v-model="crowdingNum"
            :min="ordinaryNum"
            :max="100"
            size="small"
            label="序号"
            style="width: 90px"
            controls-position="right"
            @keyup.native="upNumber"
            @keydown.native="upNumber"
            @change="handleChange('crowding',$event)"
          />
          <div class="circle-icon" />
        </div>
        <div class="item-content">
          <div class="item" :style="`width: calc(100% * ${free / 100})`" />
          <div class="item" :style="`width: calc(100% * ${(ordinary - free) / 100})`" />
          <div class="item" :style="`width: calc(100% * ${(crowding - ordinary) / 100})`" />
          <div class="item" :style="`width: calc(100% * ${(busy - crowding) / 100})`" />
        </div>
      </div>
    </div>
    <TagCard title="人流峰值预警" style="margin-top: 10px;">
      <div style="color: #B9BECB;font-weight: 14px;line-height: 30px;height: 30px">时间段内到达设定的最大峰值时，向管理员发送预警短信</div>
      <el-form
        ref="formRef"
        :model="updateForm"
        label-position="left"
        label-width="180px"
      >
        <el-form-item label="管理员手机号推送预警" prop="phoneStr">
          <el-input
            v-model="updateForm.phoneStr"
            style="width: 600px"
            placeholder="请输入手机号，多个手机号请用英文“,”隔开"
          />
        </el-form-item>
      </el-form>
    </TagCard>
  </div>
</template>
<script>
import TagCard from '@/components/TagCard';
import { debounce } from 'lodash';
export default {
  components: {
    TagCard
  },
  data() {
    return {
      // 时间段人流峰值状态
      freeNum: 25, // 空闲
      ordinaryNum: 50, // 普通
      crowdingNum: 75, // 拥挤
      free: 25, // 空闲
      ordinary: 50, // 普通
      crowding: 75, // 拥挤
      busy: 100, // 繁忙
      updateForm: {
        phoneStr: ''
      }
    };
  },
  watch: {
  },
  created() {
  },
  methods: {
    upNumber(e) {
      e.target.value = e.target.value.replace(/[^\d]/g, '');
    },
    /**
     * 添加防抖
     */
    handleChange: debounce(function(filed, value) {
      this[filed] = value;
    }, 800)
  }
};
</script>
<style lang="scss">
/*.traffic-card {
  &-drag {
    &:nth-child(1) {
      .el-input__inner {
        border: 1px solid #E3FFDC !important;
      }
    }
    &:nth-child(2) {
      .el-input__inner {
        border: 1px solid #D3EFFF !important;
      }
    }
    &:nth-child(3) {
      .el-input__inner {
        border: 1px solid #FFF8E0 !important;
      }
    }
  }
}*/
</style>
<style lang="scss" scoped>
.card-scroll {
  width: 100%;
  overflow-x: scroll;
  padding: 0 45px;
  .traffic-card {
    height: 140px;
    width: 1400px;
    position: relative;

    &-drag {
      position: absolute;
      height: 92px;
      width: 90px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      top: 0;
      .circle-icon {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #fff;
        border: 6px solid #1D3179;
      }
      transition: left 1s linear 0s;
    }

    .item-content {
      position: absolute;
      display: flex;
      height: 16px;
      width: 100%;
      min-width: 1400px;
      top: 68px;

      .item {
        height: 16px;
        position: relative;
        display: flex;
        justify-content: center;
        transition: width 1s linear 0s;
        &:nth-child(1){
          background: #E3FFDC;
          border-top-left-radius: 12px;
          border-bottom-left-radius: 12px;
          &:before {
            text-align: center;
            position: absolute;
            content: "空闲";
            bottom: -40px;
            width: 100px;
            height: 24px;
          }
          &:after {
            text-align: left;
            position: absolute;
            content: "0";
            left: 0;
            bottom: -40px;
            height: 24px;
          }
        }
        &:nth-child(2){
          background: #D3EFFF;
          &:before {
            text-align: center;
            position: absolute;
            content: "普通";
            bottom: -40px;
            width: 100px;
            height: 24px;
          }
        }
        &:nth-child(3){
          background: #FFF8E0;
          &:before {
            text-align: center;
            position: absolute;
            content: "拥挤";
            bottom: -40px;
            width: 100px;
            height: 24px;
          }
        }
        &:nth-child(4){
          background: #FFE0E9;
          border-top-right-radius: 12px;
          border-bottom-right-radius: 12px;
          &:before {
            text-align: center;
            position: absolute;
            content: "繁忙";
            bottom: -40px;
            width: 100px;
            height: 24px;
          }
          &:after {
            text-align: center;
            position: absolute;
            content: "100%";
            right: -25px;
            width: 50px;
            bottom: -40px;
            height: 24px;
          }
        }

      }
    }
  }
}
</style>
