<template>
  <div class="deployment_info">
    <div class="state_steps">
      <p
        class="deploy_state icon_and_text"
        :class="{
          warn: deployState.state === 2,
        }"
      >
        <img :src="getIcon(deployState.state)" />
        <span v-text="getText(deployState.state)"></span>
      </p>
      <ul class="state_list">
        <li
          v-for="item in data"
          :key="item.value"
          class="icon_and_text"
          :class="{ current: item.value === currentState.value }"
          @click="selecState(item)"
        >
          <img :src="getIcon(item.state)" />
          <span v-text="item.name"></span>
        </li>
      </ul>
    </div>
    <div class="state_detail">
      <div class="state_message">
        <p v-for="(text, index) in currentState.content" :key="index">
          <span v-text="index + 1"></span>
          <span v-text="text"></span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      required: true,
    },
  },
  data: () => ({
    selectedState: null, // 用户选中的状态
  }),
  computed: {
    deployState() {
      let state = {
        name: "-",
        value: "values",
        content: "",
        state: 0,
      };
      let status = this.data;
      let statusLength = status.length;

      if (statusLength > 0) {
        state = status[statusLength - 1];
      }

      return state;
    }, // 正在进行的状态
    currentState() {
      return this.selectedState || this.deployState;
    }, // 需要展示的状态
  },
  methods: {
    getIcon(stateValue = 0) {
      const icons = [
        require("../assets/imgs/ic_operation.gif"),
        require("../assets/imgs/ic_true.png"),
        require("../assets/imgs/ic_failed.png"),
      ];

      return icons[stateValue];
    },
    getText(stateValue = 0) {
      const texts = ["部署中", "成功", "失败"];

      return texts[stateValue];
    },
    selecState(state) {
      if (this.selectedState && this.selectedState.value === state.value) {
        return;
      }

      this.selectedState = state;
    },
  },
  mounted() {
    // console.log(this.data);
  },
};
</script>

<style scoped>
.deployment_info {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
.state_steps {
  width: 270px;
  flex-shrink: 0;
}
.state_steps > .deploy_state {
  margin: 10px 20px 20px 0;
  padding: 10px;
  border-radius: 5px;
  overflow: hidden;
  background-color: #edf0ff;
  font-size: 16px;
  line-height: 24px;
  color: #264dd9;
  text-align: center;
}
.state_steps > .deploy_state.warn {
  background-color: #ffebeb;
  color: #da4251;
}
.state_steps > .state_list > li {
  padding: 15px 20px;
  font-size: 14px;
  line-height: 22px;
  color: #242c43;
  cursor: pointer;
}
.state_steps > .state_list > li.current {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  background-color: #f8f9fd;
}
.state_detail {
  height: 500px;
  flex-grow: 1;
  padding: 25px 40px;
  border-radius: 7px;
  background-color: #f8f9fd;
  overflow: hidden;
}
.state_message {
  height: 100%;
  overflow: auto;
}
.state_message > p {
  white-space: nowrap;
  padding: 10px 0;
}
.state_message > p > span {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  line-height: 22px;
  color: #242c43;
}
.state_message > p > span:first-child {
  width: 65px;
  color: #8890a7;
}
.icon_and_text > * {
  display: inline-block;
  vertical-align: middle;
}
.icon_and_text > img + span {
  margin-left: 12px;
}
</style>
