<template>
  <div class="container">
    <!-- 顶部内容框 -->
    <div class="topButton">
      <!-- 左侧业务功能按钮 -->
      <ul>
        <li
          @click="operation(index, item)"
          v-for="(item, index) in leftButtonList"
          :key="index"
        >
          <svg-icon :icon-class="item.icon" />
          <span class="iconName">{{ item.name }}</span>
        </li>
      </ul>
      <!-- 右侧流程按钮 -->
      <ul>
        <li
          @click="operation(index, item)"
          v-for="(item, index) in rightButtonList"
          :key="index"
        >
          <svg-icon class="icon" :icon-class="item.icon" />
          <span class="iconName">{{ item.name }}</span>
        </li>
      </ul>
    </div>
    <!-- 内容框架 -->
    <div>
      <!-- 左侧菜单栏 -->
      <div></div>
      <!-- 表单内容区域 -->
      <div></div>
    </div>
  </div>
</template>

<style scoped lang='scss'>
@import "~@/styles/mixin.scss";

.svg-icon {
  width: 2.5em;
  height: 2.5em;
}
.iconName {
  line-height: 24px;
  font-size: 12px;
}
.container {
  width: 100%;
  height: 100%;
  padding: 0;
  box-sizing: border-box;
  background-color: #ffffff;
  overflow: hidden;
}
.topButton {
  @include flex;
  width: 100%;
  height: 80px;
  background-color: #3498db;
  color: #ffffff;
  justify-content: space-between;
  padding-left: 15px;
  position: sticky;
  top: 0;
  z-index: 100;

  ul {
    @include flex;

    li {
      @include flex-center;
      cursor: pointer;
      flex-direction: column;
      margin-right: 15px;
      box-sizing: border-box;
      width: 70px;
      margin: 0 5px;
    }

    li:hover {
      border: 1px solid #ffffff;
      border-radius: 5px;
      //color: $light-blue ;

      .svg-icon {
        //color: $light-blue ;
      }
    }
  }
}
</style>

<script>
import { leftMenu, stepExpandInfo, record } from "@/api/fqsq.js";
export default {
  data() {
    return {
      bsmSlsq: "",
      bestepid: "",
      leftButtonList: [],
      rightButtonList: [],
    };
  },
  mounted() {
    this.bsmSlsq = this.$route.query.bsmSlsq;
    this.bestepid = this.$route.query.bestepid;
    this.loadButton();
  },
  methods: {
    //读取顶部按钮事件
    loadButton() {
      var formdata = new FormData();
      formdata.append("bsmSlsq", this.bsmSlsq);
      formdata.append("bestepid", this.bestepid);
      stepExpandInfo(formdata).then((res) => {
        if (res.code === 200) {
          this.leftButtonList = res.result.button;
          this.rightButtonList = res.result.operation;
        }
      });
    },
  },
};
</script>