<template>
  <div class="bf-button">
    <!-- 1 2是公用头部按钮 3是左边长按钮 4 10导入新增 8 9调用规则管理-->
    <el-row>
      <el-button
        :class="{
          but: type == 1,
          buter: type == 2,
          butewid: type == 3,
          butdao: type == 4,
          butdaoadd: type == 10,
          butedit: type == 5,
          butels: type == 6,
          buteles: type == 7,
          butcan: type == 8,
          butsub: type == 9,
          butout: type == 11,
          butmod: type == 12,
          butb: type == 13,
          butc: type == 14,
        }"
        >{{ butName }}</el-button
      >
    </el-row>
  </div>
</template>
<script>
export default {
  props: ["butName", "type"],
  data() {
    return {};
  },
  mounted() {
    console.log(this.type);
  },
};
</script>
<style lang="scss">
.bf-button {
  // height: 48px;
  height: 32px;
  border-radius: 4px;
  > .el-row {
    width: 100%;
    height: 100%;
    > .but {
      width: 100%;
      height: 100%;
      padding: 0 32px 0 32px;
      font-size: 16px;
      // font-family: Microsoft YaHei;
      // font-weight: bold;
      color: #ffffff;
      background: #2d67e3;
      // box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.18);
    }
    .but:hover {
      background: #2d67e3;
    }
    .but:focus {
      background: #2d67e3;
    }
    > .buter {
      width: 100%;
      height: 100%;
      padding: 1px 32px 1px 32px;
      background: #f5f7fa;
      font-size: 16px;
      // font-family: Microsoft YaHei;
      // font-weight: bold;
      color: #5077ae;
      border: 1px solid #90a8c9;
      box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
    }
    .buter:hover {
      background: #87a6d3;
      color: #ffffff;
    }
    .buter:focus {
      background: #2d4f80;
      color: #ffffff;
    }
    > .butewid {
      width: 100%;
      height: 100%;
      padding: 0 92px 0 92px;
      background: #2d67e3;
      font-size: 16px;
      // font-family: Microsoft YaHei;
      // font-weight: bold;
      color: #ffffff;
      box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
    }
    .butewid:hover {
      background: #2d67e3;
      color: #ffffff;
    }
    .butewid:focus {
      background: #2d67e3;
      color: #ffffff;
    }
    .butdao {
      width: 100%;
      height: 100%;
      padding: 0 47px 0 47px;
      background: #ffffff;
      font-size: 16px;
      // font-family: Microsoft YaHei;
      // font-weight: bold;
      color: #5077ae;
      border: 1px solid #e4e8f0;
      border-radius: 6px;
    }
    .butdao:hover {
      background: #2d67e3;
      color: #ffffff;
    }
    .butdao:focus {
      background: #2d67e3;
      color: #ffffff;
    }
    .butdaoadd {
      width: 100%;
      height: 100%;
      padding: 0 47px 0 47px;
      background: #2d67e3;
      font-size: 16px;
      // font-family: Microsoft YaHei;
      // font-weight: bold;
      color: #ffffff;
      border-radius: 6px;
    }
    .butdaoadd:hover {
      background: #2d67e3;
      color: #ffffff;
    }
    .butdaoadd:focus {
      background: #2d67e3;
      color: #ffffff;
    }
    .butedit {
      width: 100%;
      height: 100%;
      padding: 0 16px 0 16px;
      background: #2d67e3;
      font-size: 16px;
      // font-family: Microsoft YaHei;
      // font-weight: bold;
      color: #ffffff;
    }
    .butedit:hover {
      background: #2d67e3;
      color: #ffffff;
    }
    .butedit:focus {
      background: #2d67e3;
      color: #ffffff;
    }
    .butels {
      width: 100%;
      height: 100%;
      padding: 0 15px 0 15px;
      background: #f56c6c;
      font-size: 16px;
      // font-family: Microsoft YaHei;
      // font-weight: bold;
      color: #ffffff;
    }
    .butels:hover {
      background: #f88585;
      color: #ffffff;
    }
    .butels:focus {
      background: #dd4343;
      color: #ffffff;
    }
    .buteles {
      width: 80px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 24px 0 24px;
      background: #eb2f3b;
      font-size: 16px;
      // font-family: Microsoft YaHei;
      // font-weight: bold;
      color: #ffffff;
    }
    .buteles:hover {
      background: #f88585;
      color: #ffffff;
    }
    .buteles:focus {
      background: #dd4343;
      color: #ffffff;
    }
    .butcan {
      width: 100%;
      height: 100%;
      padding: 0 24px 0 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      border: 1px solid #e4e8f0;
      font-size: 16px;
      // font-family: Microsoft YaHei;
      // font-weight: bold;
      color: #5077ae;
    }
    .butcan:hover {
      background: #2d67e3;
      color: #ffffff;
    }
    .butcan:focus {
      background: #2d67e3;
      color: #ffffff;
    }
    .butsub {
      width: 100%;
      height: 100%;
      padding: 0 24px 0 24px;
      background: #2d67e3;
      font-size: 16px;
      // font-family: Microsoft YaHei;
      // font-weight: bold;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .butsub:hover {
      background: #2d67e3;
      color: #ffffff;
    }
    .butsub:focus {
      background: #2d67e3;
      color: #ffffff;
    }
    .butout {
      width: 100%;
      height: 100%;
      padding: 0 20px 0 20px;
      // background: #F56C6C;
      font-size: 16px;
      // font-family: Microsoft YaHei;
      // font-weight: bold;
      color: #f56c6c;
      border: 1px solid #f56c6c;
    }
    .butout:hover {
      background: #f88585;
      color: #ffffff;
    }
    .butout:focus {
      background: #dd4343;
      color: #ffffff;
    }
    .butmod {
      width: 80px;
      height: 100%;
      padding: 0 20px 0 20px;
      // background: #F56C6C;
      font-size: 16px;
      // font-family: Microsoft YaHei;
      // font-weight: bold;
      color: #303133;
      border: 1px solid #e3e5e8;
    }
    .butmod:hover {
      // background: #2d67e3;
      color: #2d67e3;
      // border: none;
    }
    .butmod:focus {
      background: #2d67e3;
      color: #ffffff;
      // border: none;
    }
    .butb {
      width: 100%;
      height: 100%;
      padding: 0 24px 0 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      border: 1px solid #9ebbf7;
      font-size: 14px;
      // font-family: Microsoft YaHei;
      // font-weight: bold;
      color: #2d67e3;
    }
    // .butb:hover {
    //   background: #2d67e3;
    //   color: #ffffff;
    //   // border: none;
    // }
    // .butb:focus {
    //   background: #2d67e3;
    //   color: #ffffff;
    //   // border: none;
    // }
    .butc {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 24px 0 24px;
      background: #eb2f3b;
      font-size: 14px;
      // font-family: Microsoft YaHei;
      // font-weight: bold;
      color: #ffffff;
    }
    .butc:hover {
      background: #eb2f3b;
      color: #ffffff;
    }
    // .butc:focus {
    //   background: #dd4343;
    //   color: #ffffff;
    // }
  }
}
</style>