<template>
  <div class="app-container">
    <el-row :gutter="10">
  <el-col :span="12">
    <div class="public">
      <div class="bgc headTitle">虚拟充值用户充电收入</div>
      <div class="headBox">
        <div class="conten">
          <div> <i class="el-icon-user" style="font-size:30px"></i></div>
          <div class="content-title">
            <span>运营商:</span>
            <span style="margin-left: 80px;font-size: 15px;">贵州省怀仁市新能源科技有限公司</span>
          </div>
        </div>
      </div>
    </div>
  </el-col>
  <el-col :span="12">
    <div class="public">
      <div class="bgc1 headTitle">充电收入汇总</div>
       <div class="headBox">
         <div class="conten">
            <div> <i class="el-icon-coin" style="font-size:30px"></i></div>
            <div class="content-title">
              <span style="font-size:37px">132156元</span>
            </div>
         </div>
      </div>
    </div>
  </el-col>
    </el-row>
    <div></div>
   <div class="search">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-row :gutter="20">
          <el-col :span="6">
             <el-form-item label="流水单号">
    <el-input v-model="formInline.user" placeholder="请输入流水单号"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="充电单号">
    <el-input v-model="formInline.user" placeholder="请输入充电单号"></el-input>
              </el-form-item>
          </el-col>
           <el-col :span="6">
            <el-form-item label="充电用户">
    <el-input v-model="formInline.user" placeholder="请输入充电用户"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
  </el-form-item>
          </el-col>
        </el-row>
        <div v-if="buttonBoolean">
           <el-form-item label="流水时间">
    <el-input v-model="formInline.user" placeholder="请输入流水单号"></el-input>
              </el-form-item>
        </div>
    </el-form>
     <div class="search-arrow"
                @click="showOrHide()"
                
        
                >
                <span>{{ showOrHideText }}</span>
                <i :class="icon"></i></div>
            </div>
   </div>
  </div>
</template>

<script>
export default {
   data() {
      return {
          showOrHideText: "显示更多查询条件",
            buttonBoolean: false,
            //图标，可根据自己的需求匹配
            icon: "el-icon-caret-bottom",
        formInline: {
          user: '',
          region: ''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
       showOrHide() {
            if (this.buttonBoolean) {
                this.icon = "el-icon-caret-bottom";
                this.showOrHideText = "显示更多查询条件";
                this.buttonBoolean = !this.buttonBoolean;
            } else {
                this.icon = "el-icon-caret-top";
                this.showOrHideText = "收起";
                this.buttonBoolean = !this.buttonBoolean;
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.public{
  background: #f6f7f8;
    border: 1px solid #ebebf0;
}
.bgc{
  background: linear-gradient(90deg,#38cebf,#1fabcd)
}
.bgc1{
  background: linear-gradient(90deg,#ff8564,#fe6ca0)
}
.headTitle{
  height: 40px;
  padding-left: 24px;
  line-height: 40px;
  color: #fff;
}
.content-l{
  height: 60px;
}
.headBox{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 145px;
  padding: 15px 0;
  line-height: 113px;
}
.conten{
  display: flex;
  align-items: center;
}
.headBox-r{
  width: 100%;
  min-height: 145px;
  padding: 15px 50px;
}
.content-title{
  margin-left: 50px;
}
.search{
  position: relative;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    padding: 20px 30px 0;
    margin-bottom: 12px;
    margin-top: 10px;
    background-color: #f6f7f8;
    border: 1px solid #ebebf0;
}
.search-arrow{
  position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 28px;
    overflow: hidden;
    text-align: center;
    line-height: 28px;
    background-color:#edf4ff;
    color: #4d8cfd;
}
.demo-form-inline{
  margin-bottom: 28px;
}

  // border-color: white;
  //                   background-color: white;
  //                   font-size: x-small;
  //                   color: #50bfff;
  //                   padding: 1px 2px;
  //                   margin-left: 40%;
  //                   margin-top: 0px;
  //                   margin-bottom: 15px;
</style>