<template>
  <div class="content">
    <h3 class="blueTitle">会议室预定信息</h3>
    <div class="item-title">
      <span class="text-color-description item-address">流水号:{{ item.lsh }}</span>
      <span class="text-color-description" :style="{ color: generateColor() }">{{ generateState() }}</span>
    </div>
    <div class="item-title">
      <span class="text-color-title item-address">会议室:{{ item.hys }}</span>
    </div>
    <div class="text-color-description">预订人：{{ item.ydr }}</div>
    <div class="text-color-description">预定时间：{{ item.ydsj }}</div>
    <div class="text-color-description">增值服务：{{ item.zzfw }}</div>
    <div class="item-title" style="margin-top: 20px">
      <span class="text-color-description item-address">待跟进事项</span>
      <span class="text-color-description item-address">服务状态</span>
    </div>
    <div>
      <div class="item-title">
        <span class="text-color-fw item-address">1.安保服务（跟进人：秩序主管）</span>
        <span class="text-color-fw item-address" style="display: flex; align-item: center">
          <van-switch v-model="checked[0]" />
          <span class="status">{{ checked[0] ? '完成' : '待服务' }}</span>
        </span>
      </div>
      <div class="item-title">
        <span class="text-color-fw item-address">1.安保服务（跟进人：秩序主管）</span>
        <span class="text-color-fw item-address" style="display: flex; align-item: center">
          <van-switch v-model="checked[1]" />
          <span class="status">{{ checked[1] ? '完成' : '待服务' }}</span>
        </span>
      </div>
      <div class="item-title">
        <span class="text-color-fw item-address">1.安保服务（跟进人：秩序主管）</span>
        <span class="text-color-fw item-address" style="display: flex; align-item: center">
          <van-switch v-model="checked[2]" />
          <span class="status">{{ checked[2] ? '完成' : '待服务' }}</span>
        </span>
      </div>
    </div>

    <div class="footer">
      <p v-show="checked.filter(a => a).length != checked.length">需要将所有的服务状态改为完成</p>
      <van-button type="info" v-show="checked.filter(a => a).length == checked.length">完成服务</van-button>
    </div>
  </div>
</template>

<script>
import {} from "../../service/getData";
export default {
  name: "meetingRoomDetail",
  data() {
    return {
      checked: [false, false, false],
      item: {
        hys: "xxx会议室",
        lsh: 2020202020,
        examineState: 0,
        ydr: "张三",
        ydsj: "2020-11-11 11:11",
        zzfw: "矿泉水 X3 (瓶)"
      }
    };
  },
  activated() {},
  created() {},

  methods: {
    generateState() {
      //"decorationState": "0",//0-未开始，1-装修中，2-待整改，3-已初验，4-已复验5-没审核
      switch (this.item.examineState + "") {
        case "0":
          return "待审核";
          break;
        case "1":
          switch (this.item.decorationState + "") {
            case "0":
              return "未开始";
              break;
            case "1":
              return "装修中";
              break;
            case "2":
              return "待整改";
              break;
            case "3":
              return "已初验";
              break;
            case "4":
              return "已复验";
              break;
          }
          break;
        case "2":
          return "驳回";
          break;
      }
    },
    generateColor() {
      //"decorationState": "0",//0-未开始，1-装修中，2-待整改，3-已初验，4-已复验5-没审核
      switch (this.item.examineState + "") {
        case "0":
          return "#999";
          break;
        case "1":
          switch (this.item.decorationState + "") {
            case "0":
              return "#999";
              break;
            case "1":
              return "#57a2fe";
              break;
            case "2":
              return "#fba908";
              break;
            case "3":
              return "#57a2fe";
              break;
            case "4":
              return "#57a2fe";
              break;
          }
          break;
        case "2":
          return "#fc4e50";
          break;
      }
    }
  }
};
</script>



<style scoped lang="less">
.content {
  padding: 10px;
}
.footer {
  font-size: 16px;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 50px;
  line-height: 50px;
  text-align: center;
  button {
    width: 100%;
    height: 50px;
    line-height: 50px;
  }
}
.blueTitle {
  margin-bottom: 10px;
  padding-left: 15px;
  line-height: 25px;
  font-weight: normal;
  font-size: 18px;
  position: relative;
  &:before {
    content: "";
    background: #55a2fc;
    position: absolute;
    top: 2.5px;
    left: 0;
    height: 20px;
    width: 3px;
  }
}
.text-color-fw {
  color: #7e7b7e;
  display: inline-block;
  line-height: 30px;
}

.text-color-title {
  color: #333;
}

.text-color-description {
  color: #999;
}
.item-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-bottom: 9px;
}
.item-address {
  font-size: 15px !important;
}
.status {
  display: inline;
  width: 50px;
  text-align: right;
}
.item-description {
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
