<template>
    <div class="tdjy">
      <p class="text_p">注：数据来源大司空建筑大数据平台，统计范围为全国公开的招标项目，未公开的不含在内</p>
      <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
      <div v-if="!isSkeleton" class="td_content">
        <div class="flex-box query-box">
          <div class="flex-box query-params">
            <span class="common-title">全国公招项目统计</span>
          </div>
        </div>
        <div class="content_box">
          <div class="box-left" style="width: 60%;">
            <div id="echarts1" style="height: 300px"></div>
          </div>
          <div class="box-right">
            <el-table
              :data="xmtjList"
              element-loading-text="Loading"
              border
              show-summary
              max-height="280"
              :summary-method="getSummaries"
              fit
              highlight-current-row
              :default-sort = "{prop: 'count', order: 'descending'}"
            >
              <el-table-column label="序号" width="60">
                <template slot-scope="scope">{{ scope.$index + 1 }}</template>
              </el-table-column>
              <el-table-column prop="type" label="年份"  :formatter="formatStatus"/>
              <el-table-column prop="count" label="招标数量（个）" align="right" :formatter="formatStatus" sortable/>
            </el-table>
          </div>
        </div>
      </div>
      <div v-if="!isSkeleton" class="td_content">
        <div class="flex-box query-box">
          <div class="flex-box query-params">
            <span class="common-title">全国各地区招标统计TOP10</span>
            <el-select @change="handleYears(1)" style="margin-right: 8px" v-model="address" multiple collapse-tags filterable class="form-content-width" placeholder="地区筛选" :popper-append-to-body='false' size="small">
              <el-option v-for="(item, index) in addressList" :key="index" :label="item.label" :value="item.id" />
            </el-select>
            <el-select v-model="years1" @change="handleYears(1)" multiple collapse-tags filterable class="form-content-width" placeholder="请选择" :popper-append-to-body='false' size="small">
              <el-option v-for="(item, index) in yearOptions" :key="index" :label="item" :value="item" />
            </el-select>
          </div>
        </div>
        <div class="content_box" v-if="topList.length > 0 && !isSkeleton">
          <div class="box-left" style="width: 60%;">
            <div id="echarts2" style="height: 300px"></div>
          </div>
          <div class="box-right">
            <el-table
              :data="topList"
              element-loading-text="Loading"
              border
              show-summary
              max-height="280"
              :summary-method="getSummaries"
              fit
              highlight-current-row
              :default-sort = "{prop: 'count', order: 'descending'}"
            >
              <el-table-column label="序号" width="60">
                <template slot-scope="scope">{{ scope.$index + 1 }}</template>
              </el-table-column>
              <el-table-column prop="province" label="地区" :formatter="formatStatus"/>
              <el-table-column prop="count" label="招标数量 (个)" align="right" :formatter="formatStatus" sortable/>
              <el-table-column prop="rate" label="占比（%）" align="right" :formatter="formatStatus" width="100" />
            </el-table>
          </div>
        </div>
        <div class="empty" v-if="topList.length === 0 && !isSkeleton">
          <img class="img" src="@/assets/images/project/empty.png">
          <div class="p1">抱歉，暂无数据展示</div>
        </div>
      </div>
      <div v-if="!isSkeleton" class="td_content">
        <div class="flex-box query-box">
          <div class="flex-box query-params">
            <span class="common-title">全国各年度招标月份统计</span>
            <el-select v-model="years2" @change="handleYears(2)" collapse-tags filterable class="form-content-width" placeholder="请选择" :popper-append-to-body='false' size="small">
              <el-option v-for="(item, index) in yearOptions" :key="index" :label="item" :value="item" />
            </el-select>
          </div>
        </div>
        <div class="content_box" v-if="zbyfList.length > 0 && !isSkeleton">
          <div class="box-left" style="width: 60%;">
            <div id="echarts3" style="height: 300px"></div>
          </div>
          <div class="box-right">
            <el-table
              :data="zbyfList"
              element-loading-text="Loading"
              border
              show-summary
              max-height="290"
              :summary-method="getSummaries"
              fit
              highlight-current-row
              :default-sort = "{prop: 'count', order: 'descending'}"
            >
              <el-table-column label="序号" width="60">
                <template slot-scope="scope">{{ scope.$index + 1 }}</template>
              </el-table-column>
              <el-table-column prop="label" label="时间"  :formatter="formatStatus"/>
              <el-table-column prop="count" label="招标数量（个）" align="right" :formatter="formatStatus" sortable/>
              <el-table-column prop="rate" label="占比（%）" align="right" :formatter="formatStatus" width="100" />
            </el-table>
          </div>

        </div>
        <div class="empty" v-if="zbyfList.length === 0 && !isSkeleton">
          <img class="img" src="@/assets/images/project/empty.png">
          <div class="p1">抱歉，暂无数据展示</div>
        </div>
      </div>
    </div>
</template>

<script>
  import * as echarts from 'echarts';
  import dataRegion from '@/assets/json/dataRegion'
  import { countNewsBidByYear,countNewsBidByProvince,countNewsBidByMonth } from '@/api/macro/macro'
  import skeleton from '../../component/skeleton'
  export default {
    name: 'NationalEconomies',
    components: {
      skeleton
    },
    data() {
      return {
        myChart1:'',
        myChart2:'',
        myChart3:'',
        myChart4:'',
        addressList:[],
        address:[],
        years1:[2023],
        years2:2023,
        yearOptions:[],
        xmtjList:[],
        topList:[],
        zbyfList:[],
        isSkeleton:true,
        gyflState:true,
        tdytState:true,
      }
    },
    created() {
      this.dataRegion()
      this.yearsData()
      this.getcountNewsBidByYear()
    },
    mounted() {
    },
    beforeDestroy(){

    },
    methods: {
      getcountNewsBidByYear(){
        this.isSkeleton=true;
        countNewsBidByYear().then(res => {
          this.isSkeleton=false;
          this.xmtjList=res.data.provinceDate;
          this.$nextTick(() => {
            this.initChart1(res.data.provinceDate)
          })
          this.getCountNewsBidByProvince()
          this.getCountNewsBidByMonth()
        })
      },
      getCountNewsBidByProvince(){
        let params={
          yearStr:this.years1.join(",")
        }
        if(this.address.length > 0){
          params.provinceId=this.address.join(",")
        }
        // this.isSkeleton = true
        countNewsBidByProvince(params).then(res => {
          // this.isSkeleton = false
          this.topList=res.data.provinceDate;
          if(res.data.provinceDate.length > 0){
            this.$nextTick(() => {
              this.initChart2(res.data.provinceDate)
            })
          }
        })
      },
      getCountNewsBidByMonth(){
        countNewsBidByMonth({yearStr:this.years2}).then(res => {
          this.zbyfList=res.data.monthDate;
          if(res.data.monthDate.length > 0){
            this.$nextTick(() => {
              this.initChart3(res.data.monthDate)
            })
          }
        })
      },
      initChart1(data) {
        this.$nextTick(() => {
          let myChart = echarts.init(document.getElementById("echarts1"))
          let seriesData=[]
          let color=['#FCD68A', '#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#BEECFF', '#81D5BC', '#67B3FD', '#E9C8FF', '#56BFA1', '#6799FD'];
          // let typeNameList=data[0].typeList.map(item => item.type);
          let typeNameList=[ '房建工程', '市政工程', '水利工程', '机电工程', '公路工程', '电力工程', '石油化工工程', '冶金工程', '矿山工程', '通信工程', '铁路工程', '港口与航道工程','其他','空白'];
          let item={}
          for(var i=0; i<data.length; i++){
            for(var j=0; j<data[i].typeList.length; j++){
              item[typeNameList[j]] = [];
            }
          }
          for(var i=0; i<data.length; i++) {
            for (var j = 0; j < data[i].typeList.length; j++) {
              if(data[i].typeList[j].type === typeNameList[0]){
                item[typeNameList[0]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[1]){
                item[typeNameList[1]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[2]){
                item[typeNameList[2]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[3]){
                item[typeNameList[3]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[4]){
                item[typeNameList[4]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[5]){
                item[typeNameList[5]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[6]){
                item[typeNameList[6]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[7]){
                item[typeNameList[7]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[8]){
                item[typeNameList[8]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[9]){
                item[typeNameList[9]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[10]){
                item[typeNameList[10]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[11]){
                item[typeNameList[11]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[12]){
                item[typeNameList[12]].push(data[i].typeList[j].count)
              }
            }
          }
          for(var i=0; i<typeNameList.length; i++) {
            seriesData.push({
              name:typeNameList[i],
              smooth: false, //平滑
              type:"line",
              symbolSize: 6, //折线拐点大小
              itemStyle: {
                normal: {
                  color: color[i], //图例颜色
                  borderWidth: 4,
                  borderColor: color[i],
                  lineStyle: { color: color[i], width: 2 }
                }
              },
              data:item[typeNameList[i]],
            });
          }
          let option ={
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'line',
                label: {
                  backgroundColor: '#FFFFFF'
                }
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              axisLabel: {
                show: true,
                interval: 0
              },
              data: data.map(item => item.type),
            },
            yAxis: {
              type: 'value',
            },
            grid: {
              top:30,
              left:80,
              right:40,
              bottom:30,
            },
            color:['#FCD68A', '#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#BEECFF', '#81D5BC', '#67B3FD', '#E9C8FF', '#56BFA1', '#6799FD'],
            series: seriesData
          }
          myChart.setOption(option);
          window.addEventListener("resize", function () {
            myChart.resize();//图表跟随页面大小变化宽度
          });
        })
      },
      initChart2(data) {
        this.$nextTick(() => {
          // console.log(typeList)
          let myChart = echarts.init(document.getElementById("echarts2"))
          let seriesData=[]
          let color=['#FCD68A', '#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#BEECFF', '#81D5BC', '#67B3FD', '#E9C8FF', '#56BFA1', '#6799FD'];
          // let typeNameList=data[0].typeList.map(item => item.type);
          let typeNameList=[ '房建工程', '市政工程', '水利工程', '机电工程', '公路工程', '电力工程', '石油化工工程', '冶金工程', '矿山工程', '通信工程', '铁路工程', '港口与航道工程','其他','空白'];
          let item={}
          for(var i=0; i<data.length; i++){
            for(var j=0; j<data[i].typeList.length; j++){
              item[typeNameList[j]] = [];
            }
          }
          for(var i=0; i<data.length; i++) {
            for (var j = 0; j < data[i].typeList.length; j++) {
              if(data[i].typeList[j].type === typeNameList[0]){
                item[typeNameList[0]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[1]){
                item[typeNameList[1]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[2]){
                item[typeNameList[2]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[3]){
                item[typeNameList[3]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[4]){
                item[typeNameList[4]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[5]){
                item[typeNameList[5]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[6]){
                item[typeNameList[6]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[7]){
                item[typeNameList[7]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[8]){
                item[typeNameList[8]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[9]){
                item[typeNameList[9]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[10]){
                item[typeNameList[10]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[11]){
                item[typeNameList[11]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[12]){
                item[typeNameList[12]].push(data[i].typeList[j].count)
              }
            }
          }
          for(var i=0; i<typeNameList.length; i++) {
            seriesData.push({
              name:typeNameList[i],
              smooth: false, //平滑
              type:"line",
              symbolSize: 6, //折线拐点大小
              itemStyle: {
                normal: {
                  color: color[i], //图例颜色
                  borderWidth: 4,
                  borderColor: color[i],
                  lineStyle: { color: color[i], width: 2 }
                }
              },
              data:item[typeNameList[i]],
            });
          }
          let option ={
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'line',
                label: {
                  backgroundColor: '#FFFFFF'
                }
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              axisLabel: {
                show: true,
                interval: 0
              },
              data: data.map(item => item.province),
            },
            yAxis: {
              type: 'value',
            },
            grid: {
              top:30,
              left:80,
              right:40,
              bottom:30,
            },
            color:['#FCD68A', '#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#BEECFF', '#81D5BC', '#67B3FD', '#E9C8FF', '#56BFA1', '#6799FD'],
            series: seriesData
          }
          myChart.setOption(option);
          window.addEventListener("resize", function () {
            myChart.resize();//图表跟随页面大小变化宽度
          });
        })
      },
      initChart3(data) {
        this.$nextTick(() => {
          let myChart = echarts.init(document.getElementById("echarts3"))
          let seriesData=[]
          let color=['#FCD68A', '#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#BEECFF', '#81D5BC', '#67B3FD', '#E9C8FF', '#56BFA1', '#6799FD'];
          let typeNameList=[ '房建工程', '市政工程', '水利工程', '机电工程', '公路工程', '电力工程', '石油化工工程', '冶金工程', '矿山工程', '通信工程', '铁路工程', '港口与航道工程','其他','空白'];
          // let typeNameList=data[0].typeList.map(item => item.type);
          let item={}
          for(var i=0; i<data.length; i++){
            for(var j=0; j<data[i].typeList.length; j++){
              item[typeNameList[j]] = [];
            }
          }
          for(var i=0; i<data.length; i++) {
            for (var j = 0; j < data[i].typeList.length; j++) {
              if(data[i].typeList[j].type === typeNameList[0]){
                item[typeNameList[0]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[1]){
                item[typeNameList[1]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[2]){
                item[typeNameList[2]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[3]){
                item[typeNameList[3]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[4]){
                item[typeNameList[4]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[5]){
                item[typeNameList[5]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[6]){
                item[typeNameList[6]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[7]){
                item[typeNameList[7]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[8]){
                item[typeNameList[8]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[9]){
                item[typeNameList[9]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[10]){
                item[typeNameList[10]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[11]){
                item[typeNameList[11]].push(data[i].typeList[j].count)
              }
              if(data[i].typeList[j].type === typeNameList[12]){
                item[typeNameList[12]].push(data[i].typeList[j].count)
              }
            }
          }
          for(var i=0; i<typeNameList.length; i++) {
            seriesData.push({
              name:typeNameList[i],
              smooth: false, //平滑
              type:"line",
              symbolSize: 6, //折线拐点大小
              itemStyle: {
                normal: {
                  color: color[i], //图例颜色
                  borderWidth: 4,
                  borderColor: color[i],
                  lineStyle: { color: color[i], width: 2 }
                }
              },
              data:item[typeNameList[i]],
            });
          }
          let option ={
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'line',
                label: {
                  backgroundColor: '#FFFFFF'
                }
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              axisLabel: {
                show: true,
                interval: 0
              },
              data: data.map(item => item.label),
            },
            yAxis: {
              type: 'value',
            },
            grid: {
              top:30,
              left:80,
              right:40,
              bottom:30,
            },
            color:['#FCD68A', '#FFE48A', '#FFB8AD', '#FFD7AD', '#A9F1E5', '#D0FAB7', '#ADC0FF', '#BEECFF', '#81D5BC', '#67B3FD', '#E9C8FF', '#56BFA1', '#6799FD'],
            series: seriesData
          }
          myChart.setOption(option);
          window.addEventListener("resize", function () {
            myChart.resize();//图表跟随页面大小变化宽度
          });
        })
      },
      //地区
      async dataRegion() {
        var str = [];
        for (let x = 0; x < 3; x++) {
          for (let i = 0; i < dataRegion.length; i++) {
            if (dataRegion[i].regionLevel == x + 1 && x + 1 == 1) {
              str.push({
                'id': dataRegion[i].id,
                "label": dataRegion[i].regionName,
                "short": dataRegion[i].short,
                "value": dataRegion[i].parentId,
                "children": []
              });
            }
          }
        }
        this.addressList = str;
      },
      handleYears(key){
        switch (key) {
          case 1:
            this.getCountNewsBidByProvince()
            break;
          case 2:
            this.getCountNewsBidByMonth()
            break;
        }
      },
      handleSearch(){
        // console.log(this.address)
      },
      yearsData(){
        let mydate=new Date();
        let Year = mydate.getFullYear();
        let startyear=mydate.getFullYear()-4;
        let Years=[];
        for(var i=startyear;i<=Year;i++){
          Years.push(i);
        }
        this.yearOptions=Years.reverse()
      },
      formatStatus: function(row, column, cellValue) {
        return cellValue? cellValue : '-'
      },
      getSummaries(param){
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          if (index === 1) {
            sums[index] = '-';
            return;
          }
          if (index === 3) {
            sums[index] = '100';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return Number(prev) + Number(curr)
            } else {
              return prev;
            }
          }, 0);

          if (index === 1) {
            sums[index] = Number(sums[index]).toFixed(0);
            return;
          }
        });
        return sums;
      },

    }
  }
</script>

<style lang="scss" scoped>
  .land_date_picker{
    position: absolute!important;
    visibility: hidden;
    left: -645px;
    top: 145px;
  }
  ::v-deep .el-popper .popper__arrow, .el-popper .popper__arrow::after{
    display: none;
  }
  .color_text{
    background: #F3F4F5;
    border-radius: 4px;
    color: #0081FF;
  }
  .tdjy{
    .text_p{
      color: #999999;
      font-size: 14px;
      margin: 0;
    }
    .empty{
      margin: 0 auto;
      height: 300px;
      text-align: center;
      .img{
        width: 108px;
        height: 108px;
        margin-bottom: 24px;
        margin-top: 70px;
      }
      .p1{
        color: #333333;
        font-size: 16px;
      }
    }
    .query-params{
      .common-title{
        margin-right: 24px;
      }
      ::v-deep .form-content-width{
        width: 150px;
        .el-select__input{
          width: 10px !important;
          max-width: 10px !important;
          margin-left:0;
        }
      }
      ::v-deep .el-cascader{
        width: 220px;
        .el-cascader__tags{
          flex-wrap: inherit;
          .el-tag{
            max-width: 130px;
          }
        }
      }
    }
    .td_content{
      background: #ffffff;
      border-radius: 4px;
      margin-top: 12px;
      padding: 16px 52px 16px 16px;
    }
    .content_box{
      display: flex;
      justify-content: space-between;
      .box-left{
        width: 60%;
      }
      .box-right{
        width: 33%;
        float: right;
        ::v-deep .el-table{
          .sort-caret.ascending{
            border-bottom-color: rgba(0,129,255,0.5);
          }
          .ascending .sort-caret.ascending{
            border-bottom-color: #0081FF;
          }
          .sort-caret.descending{
            border-top-color: rgba(0,129,255,0.5);
          }
          .descending .sort-caret.descending{
            border-top-color: #0081FF;
          }

          .el-table__header-wrapper{
            background: #F0F3FA;
            th{
              background: #F0F3FA;
              /*text-align: left;*/
            }
          }
          .el-table__footer-wrapper{
            background: #F0F3FA;
          }
          th {
            font-size: 13px !important;
            font-weight: 400 !important;
          }
          .cell {
            padding-right: 12px !important;
            padding-left: 12px !important;
            line-height: 18px;
          }
          .el-table__fixed-header-wrapper{
            th{
              background: #F0F3FA;
            }
          }
          td.el-table__cell{
            border-bottom: 0;
          }
          tr{
            &.current-row>td{
              background-color: initial;
            }
            &:nth-child(2n) {
              background: #F8FBFF;
            }
          }
          .el-table__cell{
            height: 40px;
            padding: 0;
            line-height: 40px;
          }
          .el-table__body tr:hover > td.el-table__cell{
            background: #DCEBFF;
          }
          ::-webkit-scrollbar-track-piece {
            //滚动条凹槽的颜色，还可以设置边框属性
            background-color: #F3F4F5;
            height: 16px;
            padding: 0 4px;
          }
          //滚动条的宽度
          ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
            background-color: #F3F4F5;
            border-radius: 6px;
          }
          //滚动条的滑块
          ::-webkit-scrollbar-thumb {
            border-radius: 8px;
            height: 8px;
            margin: 0 4px;
            background: rgba(98,110,126,0.2);
            border: 4px solid rgba(98,110,126,0.2);;
            &:hover{
              background: #566380;
            }
          }
          .has-gutter{
            tr{
              th:nth-child(4){
                border-right:0;
              }
              td:nth-child(4){
                border-right:0;
              }
            }
          }
          .el-table__cell.gutter{
            background: #F0F3FA;
          }
          .el-table__row{
            td:last-child{
              .cell{
                padding-right: 12px !important;
              }
            }
          }
        }
      }
    }

    ::v-deep .el-input--medium{
      .el-input__icon{
        line-height: 32px;
      }
    }
  }
</style>
