<template>
  <div class="item-content"
       @click.stop="onClickData">
    <div class="item-title">
      <span class="text-color-title item-address">{{ item.address }}</span>
      <span class="text-color-description"
            :style="{ color: generateColor() }">{{ generateState() }}</span>
    </div>
    <div class="text-color-title item-description">
      {{ item.constructionContent }}
    </div>
    <div class="text-color-description">
      装修日期：{{ item.decorationDate }}
    </div>
    <div class="btn-group">
      <van-button type="primary"
                  plain
                  :color="data.color"
                  v-for="(data, index) in item.operate"
                  :key="index"
                  @click.stop="onClickItem(data)">{{ data.name }}
      </van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "decorateItem",
  props: {
    item: {
      type: Object
    }
  },
  data () {
    return {
      color: "#ff4433"
    };
  },
  created () {
    this.processData();
  },
  methods: {
    processData () {
      if (this.item.operate) {
        this.item.operate.findIndex((res, index) => {
          if (this.item.decorationState != 3 && res.name === "复验") {
            this.item.operate.splice(index);
          }
        });
      }
    },
    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;
      }
    },

    onClickData () {
      this.$router.push({
        path: "breakRulesInfoDetail",
        query: {
          decorationId: this.item.decorationId,
          operate: this.item.operate
        }
      });
    },

    onClickItem (data) {
      switch (data.name) {
        case "驳回":
          this.$router.push({
            path: "decorateOperate",
            query: {
              type: 0,
              decorationId: this.item.decorationId
            }
          });
          break;
        case "通过":
          this.$router.push({
            path: "decorateOperate",
            query: {
              type: 1,
              decorationId: this.item.decorationId
            }
          });
          break;
        // case "新增违规":
        //   this.$router.push({
        //     path: "decorateOperate",
        //     query: {
        //       type: 2,
        //       decorationId: this.item.decorationId
        //     }
        //   });
        //   break;
        case "违规列表":
          this.$router.push({
            path: "breakRulesList",
            query: {
              decorationId: this.item.decorationId
            }
          });
          break;
        case "整改复查":
          this.$router.push({
            path: "breakRulesListCheck",
            query: {
              decorationId: this.item.decorationId
            }
          });
          break;
        case "初验":
          this.$router.push({
            path: "decorateOperate",

            query: {
              type: 3,
              decorationId: this.item.decorationId
            }
          });
          break;
        case "复验":
          this.$router.push({
            path: "decorateOperate",
            query: {
              type: 4,
              decorationId: this.item.decorationId
            }
          });
          break;
      }
    }
  }
};
</script>

<style scoped lang="less">
.item-content {
  display: flex;
  flex-direction: column;
  background-color: white;
  font-size: 13px;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 15px 20px 10px 20px;
}

.item-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-bottom: 9px;
}

.item-address {
  font-size: 15px !important;
  font-weight: bold;
}

.item-description {
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.text-color-description {
  color: #999;
}

.btn-group {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.btn-group button {
  border-radius: 3px;
  min-width: 65px;
  height: 28px;
  line-height: 28px;
  font-size: 12px !important;
  margin-left: 5px;
}
</style>
