<!--
  @description: 立项标段（包）初始页面按钮
  @Modifier: 肖文龙
  @routerPath:
  @date: 2019/12/24-17:50
-->
<template>
  <div>
    <div class="projectInfoAdd_main mb16">
      <div class="haveMaterialPackBtn_content clearfix element-center">
        <div class="haveMaterialPackBtn fl" @click="savePack('00')">
          <dl class="element-center">
            <dd class="iconfont icon-biaoduan" />
            <dt>不分标段（包）</dt>
          </dl>
        </div>
        <div class="haveMaterialPackBtn" @click="savePack('01')">
          <dl class="element-center">
            <dd class="iconfont icon-piliangchuangjian" />
            <dt>分标段（包）</dt>
          </dl>
        </div>
        <el-button
          size="mini"
          style="color: red;width: 100%;font-size:14px;margin-top: 10%;"
          type="text"
        >
          注：默认为不分标段(包)，不需要分标段(包)请点击不分标段(包)，需要分标段(包)请点击分标段（包）
        </el-button>
      </div>
    </div>
    <!--保存按钮-->
    <div class="but_footer">
      <div class="but_footer-h">
        <div class="but_footer-but">
          <el-button @click="prevStep">
            上一步
          </el-button>
          <el-button type="primary" @click="nextStep">
            暂存,进入下一步
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PackageBtn',
  props: {
    // 保存分包状态
    savePack: {
      type: Function,
      default: function(isPack) {
        // isPack 00 不分包 01 分包
      }
    },
    // 上一步
    prevStep: {
      type: Function,
      default: function() {
      }
    },
    // 下一步
    nextStep: {
      type: Function,
      default: function() {
      }
    }
  },
  data() {
    return {
    }
  }
}
</script>

<style lang="less" scoped>
  @import '~@assets/style/common/public.less';
  .haveMaterialPackBtn_content{
    width: 650px;
    margin: 0 auto;
  }
  .haveMaterialPackBtn{
    background: #F0F2F5;
    width: 160px;
    height: 160px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    color:@hyacinthine;
    animation:5s;
    position: relative;
    margin: 0 80px;
    &:last-of-type{
      margin-right: 0px;
    }
    dl{
      margin: 0 auto;
      width: 160px;
      dd{
        font-size: 40px;
      }
    }
    &:hover{
      background: @hyacinthine;
      color: @white;
    }
  }

</style>
