<template>
  <div class="regionalEconomy">
    <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
    <div v-if="state && !isSkeleton">
      <div class="content content1">
        <div class="common-title">经济数据</div>
        <div class="content-box">
          <div class="item">
            <div class="item-title"><i style="background: #4E8EFF;"></i>{{recentlyYear.year}}年GDP</div>
            <div class="item-count">
              <span>{{recentlyYear.gdp}}</span>{{recentlyYear.gdp ? '亿':'-'}}
              <img v-if="Number(recentlyYear.gdpCompare) > 0 && recentlyYear.gdp" src="@/assets/images/economies/icon_up.png">
              <img v-if="Number(recentlyYear.gdpCompare) <= 0 && recentlyYear.gdp" src="@/assets/images/economies/icon_down.png">
            </div>
            <div id="echartsGDP" style="height: 75px;"></div>
            <div class="item-text up" v-if="Number(recentlyYear.gdpCompare) > 0 && recentlyYear.gdp">较{{nextYearMap.year}}年上升<span>{{recentlyYear.gdpCompare}}亿</span></div>
            <div class="item-text down" v-if="Number(recentlyYear.gdpCompare) <= 0 && recentlyYear.gdp">较{{nextYearMap.year}}年下降<span>{{Number(recentlyYear.gdpCompare).toString().substring(1)}}亿</span></div>
          </div>
          <div class="item">
            <div class="item-title"><i style="background: #718AFF;"></i>{{recentlyYear.year}}年GDP增速</div>
            <div class="item-count">
              <span>{{recentlyYear.gdpGrowth}}</span>{{recentlyYear.gdpGrowth ? '%':'-'}}
              <img v-if="Number(recentlyYear.gdpGrowthCompare) > 0 && recentlyYear.gdpGrowth" src="@/assets/images/economies/icon_up.png">
              <img v-if="Number(recentlyYear.gdpGrowthCompare) <= 0 && recentlyYear.gdpGrowth" src="@/assets/images/economies/icon_down.png">
            </div>
            <div id="echartsZS" style="height: 75px;"></div>
            <div class="item-text up" v-if="Number(recentlyYear.gdpGrowthCompare) > 0 && recentlyYear.gdpGrowth">较{{nextYearMap.year}}年上升<span>{{recentlyYear.gdpGrowthCompare}}%</span></div>
            <div class="item-text down" v-if="Number(recentlyYear.gdpGrowthCompare) <= 0 && recentlyYear.gdpGrowth">较{{nextYearMap.year}}年下降<span>{{Number(recentlyYear.gdpGrowthCompare).toString().substring(1)}}%</span></div>
          </div>
          <div class="item">
            <div class="item-title"><i style="background: #3AD0D1;"></i>{{recentlyYear.year}}年人口</div>
            <div class="item-count">
              <span>{{recentlyYear.population}}</span>{{recentlyYear.population ? '万':'-'}}
              <img v-if="Number(recentlyYear.populationCompare) > 0 && recentlyYear.population" src="@/assets/images/economies/icon_up.png">
              <img v-if="Number(recentlyYear.populationCompare) <= 0 && recentlyYear.population" src="@/assets/images/economies/icon_down.png">
            </div>
            <div id="echartsRK" style="height: 75px;"></div>
            <div class="item-text up" v-if="Number(recentlyYear.populationCompare) > 0 && recentlyYear.population">较{{nextYearMap.year}}年上升<span>{{recentlyYear.populationCompare}}万</span></div>
            <div class="item-text down" v-if="Number(recentlyYear.populationCompare) <= 0 && recentlyYear.population">较{{nextYearMap.year}}年下降<span>{{Number(recentlyYear.populationCompare).toString().substring(1)}}万</span></div>
          </div>
          <div class="item">
            <div class="item-title"><i style="background: #FFBE5D;"></i>{{recentlyYear.year}}年一般公共预算收入</div>
            <div class="item-count">
              <span>{{recentlyYear.gbr}}</span>{{recentlyYear.gbr ? '亿':'-'}}
              <img v-if="Number(recentlyYear.gbrCompare) > 0 && recentlyYear.gbr" src="@/assets/images/economies/icon_up.png">
              <img v-if="Number(recentlyYear.gbrCompare) <= 0 && recentlyYear.gbr" src="@/assets/images/economies/icon_down.png">
            </div>
            <div id="echartsSR" style="height: 75px;"></div>
            <div class="item-text up"  v-if="Number(recentlyYear.gbrCompare) > 0 && recentlyYear.gbr">较{{nextYearMap.year}}年上升<span>{{recentlyYear.gbrCompare}}亿</span></div>
            <div class="item-text down"  v-if="Number(recentlyYear.gbrCompare) <= 0 && recentlyYear.gbr">较{{nextYearMap.year}}年下降<span>{{Number(recentlyYear.gbrCompare).toString().substring(1)}}亿</span></div>
          </div>
          <div class="item">
            <div class="item-title"><i style="background: #FF8935;"></i>{{recentlyYear.year}}年地方政府债务余额</div>
            <div class="item-count">
              <span>{{recentlyYear.govDebtBalance}}</span>{{recentlyYear.gbr ? '亿':'-'}}
              <img v-if="Number(recentlyYear.govDebtBalanceCompare) > 0 && recentlyYear.govDebtBalance" src="@/assets/images/economies/icon_up.png">
              <img v-if="Number(recentlyYear.govDebtBalanceCompare) <= 0 && recentlyYear.govDebtBalance" src="@/assets/images/economies/icon_down.png">
            </div>
            <div id="echartsYE" style="height: 75px;"></div>
            <div class="item-text up"  v-if="Number(recentlyYear.govDebtBalanceCompare) > 0 && recentlyYear.govDebtBalance">
              较{{nextYearMap.year}}年上升<span>{{recentlyYear.govDebtBalanceCompare}}亿</span></div>
            <div class="item-text down"  v-if="Number(recentlyYear.govDebtBalanceCompare) <= 0 && recentlyYear.govDebtBalance">较{{nextYearMap.year}}年下降<span>{{Number(recentlyYear.govDebtBalanceCompare).toString().substring(1)}}亿</span></div>
          </div>
        </div>
      </div>
      <div class="content content2">
        <div class="common-title">经济信息</div>
        <div class="content-box">
          <span class="text hover" @click="childMethod(1)" style="cursor: pointer;width: 13%;"><img src="@/assets/images/economies/icon_1.png"><span>下属辖区</span> <label>{{recentlyYear.subordinateJurisdiction}}<i>个</i></label></span>
          <span class="text hover" @click="childMethod(2)" style="cursor: pointer;width: 14%;"><img src="@/assets/images/economies/icon_2.png"><span>城投平台</span> <label>{{recentlyYear.urbanInvestmentPlatform}}<i>家</i></label></span>
          <span class="text"><img src="@/assets/images/economies/icon_3.png"><span>城投平台授信余额</span> <label>{{recentlyYear.creditBalance}}<i>亿</i></label></span>
          <span class="text"><img src="@/assets/images/economies/icon_4.png"><span>城投平台应收账款</span> <label>{{recentlyYear.accountsReceivable}}<i>亿</i></label></span>
          <span class="text"><img src="@/assets/images/economies/icon_5.png"><span>城投平台有息债务</span> <label>{{recentlyYear.uipInterestBearingDebt}}<i>亿</i></label></span>
        </div>
      </div>
      <div class="content content3">
        <div class="flex-box query-box">
          <div class="flex-box query-params">
            <span class="common-title">主要指标</span>
          </div>
          <div class="flex-box query-ability">
            <span class="flex-box" @click="childMethod(4)"><img src="@/assets/images/ability_vs.png">地区经济对比</span>
            <span class="flex-box" @click="handleMessage"><img src="@/assets/images/ability_excel.png">导出EXCEL</span>
          </div>
        </div>
        <div class="table-item">
          <el-table
            :data="getValues"
            :show-header="false"
            border
            :cell-style="rowStyle"
          >
            <el-table-column
              v-for="(item, index) in getHeaders"
              :key="index"
              :prop="item"
              :formatter="formatStatus"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="empty" v-if="!state && !isSkeleton">
      <img class="img" src="@/assets/images/project/empty.png">
      <div class="p1">抱歉，没找到相关数据</div>
      <div class="p2">建议调整关键词或筛选条件，重新搜索</div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import { regional,regionalList,location } from '@/api/macro/macro'
  import skeleton from '../../component/skeleton'
export default {
  name: 'regionalEconomy',
  props:['dataQuery','provinceId'],
  components: {
    skeleton
  },
  data() {
    return {
      tableData: [],
      headers: [
        {
          prop: 'year',
          label: '指标',
        },
        {
          prop: 'name',
          label: '经济',
        },
        {
          prop: 'gdp',
          label: 'GDP（亿元）',
        },
        {
          prop: 'gdpGrowth',
          label: 'GDP增速（%）',
        },
        {
          prop: 'gdpPerCapita',
          label: '人均GDP（元）',
        },
        {
          prop: 'piAddValue',
          label: '第一产业增加值（亿元）',
        },
        {
          prop: 'siAddValue',
          label: '第二产业增加值（亿元）',
        },
        {
          prop: 'tiAddValue',
          label: '第三产业增加值（亿元）',
        },
        {
          prop: 'population',
          label: '人口（万人）',
        },
        {
          prop: 'industryAddValue',
          label: '工业增加值（亿元）',
        },
        {
          prop: 'industryTotalValue',
          label: '工业总产值（亿元）',
        },
        {
          prop: 'fixedInvestment',
          label: '固定资产投资（亿元）',
        },
        {
          prop: 'realEstateInvestment',
          label: '房地产开发投资（亿元）',
        },
        {
          prop: 'eximTotalValue',
          label: '进出口总额（亿美元）',
        },
        {
          prop: 'trscg',
          label: '社会消费品零售总额（亿元）',
        },
        {
          prop: 'urbanPcdi',
          label: '城镇居民人均可支配收入（元）',
        },
        {
          prop: 'name',
          label: '财政',
        },
        {
          prop: 'gbr',
          label: '一般公共预算收入（亿元）',
        },
        {
          prop: 'gbrGrowth',
          label: '一般公共预算收入增速(%)',
        },
        {
          prop: 'taxIncome',
          label: '税收收入（亿元）',
        },
        {
          prop: 'transferIncome',
          label: '转移性收入（亿元）',
        },
        {
          prop: 'superiorSubsidyIncome',
          label: '上级补助收入（亿元）',
        },
        {
          prop: 'gbe',
          label: '一般公共预算支出（亿元）',
        },
        {
          prop: 'govFundIncome',
          label: '政府性基金收入（亿元）',
        },
        {
          prop: 'landTransferIncome',
          label: '土地出让收入（亿元）',
        },
        {
          prop: 'govFundExpenditure',
          label: '政府性基金支出（亿元）',
        },
        {
          prop: 'soecoi',
          label: '国有资本经营收入（亿元）',
        },
        {
          prop: 'soecoe',
          label: '国有资本经营支出（亿元）',
        },
        {
          prop: 'name',
          label: '债务',
        },
        {
          prop: 'govDebtBalance',
          label: '地方政府债务余额（亿元）',
        },
        {
          prop: 'generalDebtBalance',
          label: '一般债余额（亿元）',
        },
        {
          prop: 'specialDebtBalance',
          label: '专项债余额（亿元）',
        },
        {
          prop: 'govDebtLimit',
          label: '地方政府债务限额（亿元）',
        },
        {
          prop: 'uipInterestBearingDebt',
          label: '城投平台有息债务（亿元）',
        },
        {
          prop: 'fiscalSelfSufficiencyRate',
          label: '财政自给率(%)',
        },
        {
          prop: 'govDebtToGdpRate',
          label: '负债率(%)',
        },
        {
          prop: 'govDebtToGdpRateWild',
          label: '负债率(宽口径)(%)',
        },
        {
          prop: 'govDebtRate',
          label: '债务率(%)',
        },
        {
          prop: 'govDebtRateWild',
          label: '债务率(宽口径)(%)',
        },
      ],
      tableLoading: false,
      pageIndex: 1,
      pageSize: 10,
      tableDataTotal: 0,
      labelData:[],
      valData:[],
      valData1:[],
      valData2:[],
      valData3:[],
      valData4:[],
      recentlyYear:{},
      nextYearMap:{},
      isSkeleton:true,
      state:true,
    }
  },
  created() {
    let mydate=new Date();
    this.labelData=[mydate.getFullYear()-2,mydate.getFullYear()-1]
    this.$nextTick(()=>{
      this.getData()
      // console.log(this.dataQuery)
    })
  },
  // updated(){
  //   this.initChart()
  //   this.initChart1()
  //   this.initChart2()
  //   this.initChart3()
  //   this.initChart4()
  // },
  computed: {
    getHeaders() {
      return this.tableData.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])
    },
    getValues() {
      return this.headers.map(item => {
        return this.tableData.reduce((pre, cur, index) => Object.assign(pre, {['value' + index]: cur[item.prop]}), {'title': item.label,});
      });
    },
    // provinceId() {
    //   return this.dataQuery.provinceId
    // }
  },
  watch: {
    provinceId(newValue, oldValue){
      this.getData()
    }
  },
  methods: {
    getData(){
      this.isSkeleton = true
      let params={}
      // if(this.dataQuery.id){
      //   params.id=this.dataQuery.id
      // }
      if(this.provinceId.length >= 0){
        params.provinceId=this.provinceId[0]
      }
      if(this.provinceId.length >= 1){
        params.cityId=this.provinceId[1]
      }
      if(this.provinceId.length >= 2){
        params.areaId=this.provinceId[2]
      }
      regional(params).then(res => {
        this.isSkeleton = false
        if(res.data[0].recentlyYear){
          this.state=true;
          this.recentlyYear=res.data[0].recentlyYear;
          this.nextYearMap=res.data[0].nextYearMap;
          this.valData=[this.getMoneyNum(this.nextYearMap.gdp),this.getMoneyNum(this.recentlyYear.gdp)]
          this.valData1=[this.getMoneyNum(this.nextYearMap.gdpGrowth),this.getMoneyNum(this.recentlyYear.gdpGrowth)]
          this.valData2=[this.getMoneyNum(this.nextYearMap.population),this.getMoneyNum(this.recentlyYear.population)]
          this.valData3=[this.getMoneyNum(this.nextYearMap.gbr),this.getMoneyNum(this.recentlyYear.gbr)]
          this.valData4=[this.getMoneyNum(this.nextYearMap.govDebtBalance),this.getMoneyNum(this.recentlyYear.govDebtBalance)]
          this.$nextTick(() => {
            this.initChart()
            this.initChart1()
            this.initChart2()
            this.initChart3()
            this.initChart4()
          })
        }else {
          this.recentlyYear={};
          this.nextYearMap={};
          this.state=false;
        }
      })
      regionalList(params).then(res => {
        this.tableData=res.data;
      })
    },
    initChart() {
      this.$nextTick(() => {
        let myChart = echarts.init(document.getElementById("echartsGDP"))
        let option ={
          tooltip: {
            show:false
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.labelData,
            show:false,
          },
          yAxis: {
            type: 'value',
            show:false,
          },
          grid: {
            top:20,
            // right:15,
            bottom:5,
          },
          series: [
            {
              data: this.valData,
              type: 'line',
              smooth: true,
              emphasis: {
                disabled: true,
                focus: 'none'
              },
              label: {
                show: this.valData[1] ? true : false,
                position: 'top',
                textStyle: {
                  padding: [0, 0, 0, -12]
                }
              },
              //设置折线颜色和粗细
              lineStyle: {
                width: 1,
                color: "#4E8EFF",
              },
              itemStyle:{
                color: "#4E8EFF",
              },
              //设置面积区域为渐变效果
              areaStyle: {
                color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0.2,
                    color: "#DFEAFF",
                  },
                  {
                    offset: 1,
                    color: "#5895FF",
                  },
                ]),
              },
            }
          ]
        }
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();//图表跟随页面大小变化宽度
        });
      })
    },
    initChart1(){
      this.$nextTick(() => {
        let myChartZS = echarts.init(document.getElementById("echartsZS"))
        let option ={
          tooltip: {
            show:false
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.labelData,
            show:false,
          },
          yAxis: {
            type: 'value',
            show:false,
          },
          grid: {
            top:20,
            bottom:5,
          },
          series: [
            {
              data: this.valData1,
              type: 'line',
              smooth: true,
              emphasis: {
                disabled: true,
                focus: 'none'
              },
              label: {
                show: this.valData1[1] ? true : false,
                position: 'top',
                textStyle: {
                  padding: [0, 0, 0, -35]
                }
              },
              itemStyle:{
                color: "#718AFF",
              },
              //设置折线颜色和粗细
              lineStyle: {
                width: 1,
                color: "#718AFF",
              },
              //设置面积区域为渐变效果
              areaStyle: {
                color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0.2,
                    color: "#E3E8FF",
                  },
                  {
                    offset: 1,
                    color: "#5B76FD",
                  },
                ]),
              },
            }
          ]
        }
        myChartZS.setOption(option);
        window.addEventListener("resize", function () {
          myChartZS.resize();//图表跟随页面大小变化宽度
        });
      })
    },
    initChart2(){
      this.$nextTick(() => {
        let myChartRK = echarts.init(document.getElementById("echartsRK"))
        let option ={
          tooltip: {
            show:false
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.labelData,
            show:false,
          },
          yAxis: {
            type: 'value',
            show:false,
          },
          grid: {
            top:20,
            bottom:5,
          },
          series: [
            {
              data: this.valData2,
              type: 'line',
              smooth: true,
              emphasis: {
                disabled: true,
                focus: 'none'
              },
              label: {
                show: this.valData2[1] ? true : false,
                position: 'top',
                textStyle: {
                  padding: [0, 0, 0, -16]
                }
              },
              //设置折线颜色和粗细
              lineStyle: {
                width: 1,
                color: "#3AD0D1",
              },
              itemStyle:{
                color: "#3AD0D1",
              },
              //设置面积区域为渐变效果
              areaStyle: {
                color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0.2,
                    color: "#D3F3F3",
                  },
                  {
                    offset: 1,
                    color: "#60D1D1",
                  },
                ]),
              },
            }
          ]
        }
        myChartRK.setOption(option);
        window.addEventListener("resize", function () {
          myChartRK.resize();//图表跟随页面大小变化宽度
        });
      })
    },
    initChart3(){
      this.$nextTick(() => {
        let myChartSR = echarts.init(document.getElementById("echartsSR"))
        let option ={
          tooltip: {
            show:false
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.labelData,
            show:false,
          },
          yAxis: {
            type: 'value',
            show:false,
          },
          grid: {
            top:20,
            bottom:5,
          },
          series: [
            {
              data: this.valData3,
              type: 'line',
              smooth: true,
              emphasis: {
                disabled: true,
                focus: 'none'
              },
              label: {
                show: this.valData3[1] ? true : false,
                position: 'top',
                textStyle: {
                  padding: [0, 0, 0, -16]
                }
              },
              //设置折线颜色和粗细
              lineStyle: {
                width: 1,
                color: "#FFAE35",
              },
              itemStyle:{
                color: "#FFBE5D",
              },
              //设置面积区域为渐变效果
              areaStyle: {
                color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0.2,
                    color: "#FFE9C6",
                  },
                  {
                    offset: 1,
                    color: "#FFB535",
                  },
                ]),
              },
            }
          ]
        }
        myChartSR.setOption(option);
        window.addEventListener("resize", function () {
          myChartSR.resize();//图表跟随页面大小变化宽度
        });
      })
    },
    initChart4(){
      this.$nextTick(() => {
        let myChartYE = echarts.init(document.getElementById("echartsYE"))
        let option ={
          tooltip: {
            show:false
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.labelData,
            show:false,
          },
          yAxis: {
            type: 'value',
            show:false,
          },
          grid: {
            top:20,
            // left:5,
            bottom:5,
          },
          series: [
            {
              data: this.valData4,
              type: 'line',
              smooth: true,
              emphasis: {
                disabled: true,
                focus: 'none'
              },
              label: {
                show: this.valData4[1] ? true : false,
                position: 'top',
                textStyle: {
                  padding: [0, 0, 0, -14]
                }
              },
              //设置折线颜色和粗细
              lineStyle: {
                width: 1,
                color: "#FF8935",
              },
              itemStyle:{
                color: "#FF8935",
              },
              //设置面积区域为渐变效果
              areaStyle: {
                color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0.2,
                    color: "#FEE5D2",
                  },
                  {
                    offset: 1,
                    color: "#FF8935",
                  },
                ]),
              },
            }
          ]
        }
        myChartYE.setOption(option);
        window.addEventListener("resize", function () {
          myChartYE.resize();//图表跟随页面大小变化宽度
        });
      })
    },
    formatStatus: function(row, column, cellValue) {
      if(row.title === '经济'||row.title === '财政'||row.title === '债务'){
        return cellValue
      }else {
        return cellValue? cellValue : '-'
      }
    },
    rowStyle(row){
      if (row.row.title === '经济'||row.row.title === '财政'||row.row.title === '债务'){
        return {
          // background: '#FAF5EB',
          color:'#232323',
          fontWeight: 'bold'
        }
      }
      if(row.row.title === '指标'){
        return {
          background: '#F0F3FA',
          color:'#4C4D4E',
        }
      }
    },
    handleMessage(){
      this.$message({
        message: '功能正在开发中',
        type: 'warning'
      });
    },
    childMethod(key) {
      let data=this.dataQuery
      data.pId=this.provinceId;
      this.dataQuery.provinceId=this.provinceId;
      switch (key) {
        case 1:
          this.$parent.handleClick('second', data);
          break;
        case 2:
          this.$router.push({name: 'Urban',
            params: {
              provinceId: this.dataQuery.provinceId,
              province:this.dataQuery.province,
            }
          })
          break;
        case 4:
          this.$parent.handleClick('four', data);
          break;
      }

    },
    getMoneyNum(num){
      if (!num) return 0;
      num = num + ''
      if (num.indexOf(',') != -1) return num.replace(/\,/g, '');
      else return num;
    }
  }
}
</script>

<style lang="scss" scoped>
  .regionalEconomy{
    .content{
      width: 100%;
      background: #ffffff;
      padding: 16px;
      margin-top: 12px;
      border-radius: 4px;
    }
    .content1{
      .content-box{
        margin-top: 22px;
        display: flex;
        justify-content: space-between;
        .item{
          width: 19%;
          .item-title{
            font-size: 12px;
            color: rgba(35,35,35,0.8);
            i{
              width: 2px;
              height: 9px;
              background: #718AFF;
              display: inline-block;
              margin-right: 4px;
            }
          }
          .item-count{
            color: #232323;
            font-size: 14px;
            margin-top: 16px;
            margin-bottom: 6px;
            span{
              font-size: 24px;
            }
            img{
              width: 20px;
              height: 20px;
              margin-left: 22px;
              margin-bottom: 2px;
            }
          }
          .item-text{
            font-size: 14px;
            margin-top: 8px;
            color: rgba(35,35,35,0.8);
          }
          .up{
            span{
              color:#0CBC6D;
            }
          }
          .down{
            span{
              color:#FF3C3C;
            }
          }
        }
      }
    }
    .content2{
      .content-box{
        margin-top: 18px;
        .hover:hover{
          label{
            color:#0081ff;
            i{
              color:#0081ff;
            }
          }
        }
        .text{
          border-right: 1px solid #E4E4E4;
          display: inline-block;
          color: rgba(35,35,35,0.8);
          font-size: 12px;
          padding-left: 16px;
          width: 24%;
          line-height: 26px;
          position: relative;
          span{
            padding-left: 24px;
          }
          img{
            width: 16px;
            height: 16px;
            position: absolute;
            top: 4px;
          }
          label{
            font-weight: 700;
            color: #232323;
            font-size: 20px;
            margin-left: 12px;
            float: right;
          }
          i{
            color: #232323;
            margin-right: 16px;
            font-style: normal;
            margin-left: 4px;
            font-weight: 400;
            font-size: 12px;
          }
        }
        span:last-child{
          border-right: 0;
        }
        span:first-child{
          padding-left: 0;
        }
      }
    }
    .table-item{
      margin-top: 22px;
      ::v-deep .el-table{
        overflow:visible;
        th{
          font-size: 13px !important;
          font-weight: 400 !important;
        }
        .el-table__fixed-header-wrapper th{
          background: #F0F3FA;
        }
        td.el-table__cell{
          border-bottom: 0;
        }
        .caret-wrapper{
          width: 10px;
        }
        .el-table__body-wrapper{
          overflow:visible;
        }
        .el-table__body{
          tr:first-child{
            position: sticky;
            top:56px;
            z-index: 9;
          }
        }
      }
    }

    .empty{
      margin: 0 auto;
      height: 600px;
      text-align: center;
      border-top: 1px solid #EFEFEF;
      .img{
        width: 108px;
        height: 108px;
        margin-bottom: 24px;
        margin-top: 150px;
      }
      .p1{
        color: #333333;
        font-size: 16px;
      }
      .p2{
        color: #999999;
        font-size: 14px;
        margin-top: 8px;
      }
    }
  }
</style>
