<template>
  <div class="blockHeader">
    <div class="header--title">
      <div class="title--left">
        <div class="line"></div>
        <div class="title">{{ title }}</div>
      </div>
      <div class="title--right" v-if="edit">
        <div class="anniu--btn--left">
          <el-button type="primary" plain size="mini" class="informant-btn" @click="sendEdit(0)">
            <img :src=" clickEdit ? require('@/assets/images/home/chongzhi@2x.png') :require('@/assets/images/home/edit@2x.png')" alt="" />
            {{ clickEdit ? '重置':'编辑' }}
          </el-button>
        </div>
        <div class="anniu--btn--right" v-if="clickEdit">
          <el-button type="primary" plain size="mini" class="informant-btnTwo" @click="sendEdit(1)">
            <img src="@/assets/images/home/baocun@2x.png" alt="" />
            保存
          </el-button>
        </div>
      </div>
    </div>
    <div class="is--Slot">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  name:'blockHeader',
  props:{
    title:{
      type:String,
      required:true
    },
    edit:{
      type:Boolean,
      default:false,
    }
  },
  data() {
    return {
      clickEdit:false,
    }
  },
  methods:{
    sendEdit(id){
      if(id) {
        // 保存按钮事件
        this.$emit('btnClick',2);
        this.clickEdit = false;
      } else {
        // 重置编辑按钮
        if(this.clickEdit) {
          // 重置按钮事件
          // this.clickEdit = false;
          this.$emit('btnClick',3);
        } else {
          // 编辑按钮事件
          this.clickEdit = true;
          this.$emit('btnClick',1);
        }
      }
    }
  },
}
</script>
<style lang="scss" scoped>
@import "@/assets/styles/utils.scss";
.blockHeader {
  .header--title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title--left {
      display: flex;
      align-items: center;
      .line {
        width: vw(4);
        height: vh(22);
        background: #1E80EB;
        margin-right: vw(9);
      }
      .title {
        font-size: vw(16);
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #1E80EB;
      }
    }
    .title--right {
      display: flex;
      align-items: center;

      .anniu--btn--left {
        ::v-deep .informant-btn {
            width: vw(84);
            height: vh(40);
            background: #e4effd;
            border: vw(1) solid #1E80EB;
            border-radius: vw(4);
            line-height: vh(33);
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fff;
            img {
              width: vw(13);
              margin-right: vw(5);
            }
            span {
              display: inline-block;
              font-size: vw(14);
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #1E80EB;
            }
          }
      }
      .anniu--btn--right {
        margin-left: vw(10);
        ::v-deep .informant-btnTwo {
          width: vw(84);
          height: vh(40);
          background: #e4effd;
          border: vw(1) solid #1E80EB;
          border-radius: vw(4);
          line-height: vh(33);
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #1E80EB;
          img {
            width: vw(13);
            margin-right: vw(5);
          }
          span {
            display: inline-block;
            font-size: vw(14);
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #fff;
          }
        }
      }
    }
  }
  .is--Slot {
    margin-top: vh(24);
  }
}
</style>
