<template>
  <div class="content">
    <div class="echarts">
      <div class='echarts1'>
        <div style='position:absolute;z-index:999;right:0;width:100%;'>
          <div class='title'>毛利润（万元）</div>
          <div class="right" style='position:absolute;right:4%;'>
            <el-button :class='{"active":search==1}' @click='statuschange(1)' type="text">按天</el-button>
            <el-button :class='{"active":search==2}' @click='statuschange(2)' type="text">按月</el-button>
            <el-button :class='{"active":search==3}' @click='statuschange(3)' type="text">按年</el-button>
          </div>
          
          <!-- <el-button type="primary">按天</el-button>
          <el-button type="primary">按月</el-button>
          <el-button type="primary">按年</el-button> -->
        </div>
        <div style="width: 100%;height: 500px;" id="container"></div>
      </div>
      <div class='table'>
        <div calss='table-top' style='width:95%;margin:10px auto 30px;display:flex;justify-content: space-between;align-items: center;'>
          <el-date-picker @change='datechange' value-format='yyyy' v-model="value1" type="year" placeholder="选择年"></el-date-picker>
          <div>
            合计{{show?tabledata.total:'******'}}万元
            <span class="svg-container">
              <svg-icon @click='showchange' :icon-class="show?'eye-open':'eye'" />
            </span>
          </div>
          
        </div>
        <el-form :inline="true" class="demo-form-inline">
          <div class='up' style='width:95%;margin:0 auto;'>
            <el-form-item label="上半年">
              利润（万元）
            </el-form-item>
            <el-form-item label="1月">
              {{show?tabledata.jan:'******'}}
            </el-form-item>
            <el-form-item label="2月">
              {{show?tabledata.feb:'******'}}
            </el-form-item>
            <el-form-item label="3月">
              {{show?tabledata.mar:'******'}}
            </el-form-item>
            <el-form-item label="4月">
              {{show?tabledata.apr:'******'}}
            </el-form-item>
            <el-form-item label="5月">
              {{show?tabledata.may:'******'}}
            </el-form-item>
            <el-form-item label="6月">
              {{show?tabledata.june:'******'}}
            </el-form-item>
          </div>
          
          <div class='down' style='width:95%;margin:0 auto;'>
            <el-form-item label="下半年">
              利润（万元）
            </el-form-item>
            <el-form-item label="7月">
              {{show?tabledata.july:'******'}}
            </el-form-item>
            <el-form-item label="8月">
              {{show?tabledata.aug:'******'}}
            </el-form-item>
            <el-form-item label="9月">
              {{show?tabledata.sept:'******'}}
            </el-form-item>
            <el-form-item label="10月">
              {{show?tabledata.oct:'******'}}
            </el-form-item>
            <el-form-item label="11月">
              {{show?tabledata.nov:'******'}}
            </el-form-item>
            <el-form-item label="12月">
              {{show?tabledata.dece:'******'}}
            </el-form-item>
          </div>
      </el-form>
      </div>
      <div class='echarts2'>
        <div class='title'>待结算</div>
        <div style="width: 100%;height: 500px;" id="container2"></div>
        <div class='bottom-title'>金额（万元）</div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getListselectProfit,
  getListexpenses
} from '@/api/settlementManagement'
export default {
  name: 'hello',
  data () {
    return {
      formInline:{},
      tabledata:{},
      linexaxis:[],
      linedata:[],
      barList:[],
      status:1,
      value1:'2022',
      show:true,
      search:'1'
    }
  },
  mounted(){//⭐在mounted中定义
    this.drawLine();
    this.drawBar()
  },
  methods: {
    datechange(e){
      // console.log(e)
      this.drawLine()
    },
    statuschange(status){
      this.search=status
      this.drawLine();
    },
    showchange(){
      this.show=!this.show
    },
    drawLine(){
      var that=this
      this.linexaxis=[]
      this.linedata=[]
      const _obj = {}
        _obj.year= this.value1
        _obj.searchType = this.search
        getListselectProfit(_obj).then(response => {
          if(response.data.formList[0]){
            this.tabledata=response.data.formList[0]
          }else{
            this.tabledata={
              jan:0,
              feb:0,
              mar:0,
              apr:0,
              may:0,
              june:0,
              july:0,
              aug:0,
              sept:0,
              oct:0,
              nov:0,
              dece:0
            }
          }
          
          if(response.data.dataList.length>0){
            for (let i = 0; i < response.data.dataList.length; i++) {
              this.linexaxis.unshift(response.data.dataList[i].date)
              this.linedata.unshift(response.data.dataList[i].profit)
            }
          }
           var echart = that.$echarts.init(document.getElementById("container"))//⭐注意是id选择器
            var option = {
              tooltip: {
                trigger: 'axis'
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: that.linexaxis,
                axisLine:{
                  show:false
                },
                axisTick:{
                  show:false
                },
                axisLabel:{
                  color:'#9E9E9E'
                }
              },
              yAxis: {
                type: 'value',
                // name:'毛利润（万元）',
                nameTextStyle:{
                  fontWeight:'700',
                  fontSize:'16'
                },
                axisLine:{
                  show:false
                },
                axisTick:{
                  show:false
                },
                axisLabel:{
                  color:'#9E9E9E'
                }
              },
              series: [
                {
                  
                  lineStyle: {
                    color:'#2F53EB'
                  },
                  data: that.linedata,
                  type: 'line',
                  areaStyle: {
                    color:'rgba(207, 219, 254, 1)'
                  }
                }
              ],
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
            };
            echart.setOption(option);
          })
          .catch(() => {
            this.loading = false
          })
      // 基于准备好的dom，初始化echarts实例
      console.log(this.$echarts)
     
    },
    drawBar(){
      const _obj = {},that=this
      getListexpenses(_obj).then(response => {
        if(response.data){
          this.barList[0]=response.data[0].freight.toFixed(4)
          this.barList[1]=response.data[0].withdrawal.toFixed(4)
          this.barList[2]=response.data[0].collection.toFixed(4)
          this.barList[3]=response.data[0].invoice.toFixed(4)
        }
      var echart1 = this.$echarts.init(document.getElementById("container2"))//⭐注意是id选择器
		  var option1 = {
        // title: {
        //   text: '待结算'
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {           
          // name: '金额（万元）',
          // nameLocation:'center',
          // nameGap:-45,
          // nameTextStyle:{
          //   padding: [20, 4, 4, 4]
          // },
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLine:{
            show:true,
            lineStyle:{
              color:'#D9D9D9'
            }
          },
          axisTick:{
            show:true,
            lineStyle:{
              color:'#D9D9D9'
            }
          }
        },
        yAxis: {
          type: 'category',
          data: ['待付运费', '提现', '待收款', '待开发票'],
          axisLine:{
            show:false,
            
          },
          axisTick:{
            show:false
          }
        },
        series: [
          {

            type: 'bar',
            data: that.barList,
            barWidth : 43, //柱图宽度
            itemStyle: {
              normal: {
                // 每根柱子颜色设置
                color: function(params) {
                  const colorList = [
                    '#2A50ED',
                    '#666DFF',
                    '#4EBCBC',
                    '#4D9BEE',
                    '#91c7ae',
                    '#749f83',
                    '#ca8622',
                    '#bda29a',
                    '#6e7074',
                    '#546570',
                    '#c4ccd3',
                    '#4BABDE',
                    '#FFDE76',
                    '#E43C59',
                    '#37A2DA'
                  ]
                  return colorList[params.dataIndex]
                }
              }
            }
          },
        ]
      };
      echart1.setOption(option1);
      }).catch(() => {
            this.loading = false
          })
    }
  }
}

</script>
<style lang="scss" scoped>
.el-form.demo-form-inline::v-deep .el-form-item{
  width:14.28%;
  margin:0;
}
.el-form.demo-form-inline::v-deep .el-form-item .el-form-item__label{
    display:block;
    text-align:center;
    background:#F7F8F9;
    border:1px solid #F0F1F2;
  }
  .el-form.demo-form-inline::v-deep .el-form-item .el-form-item__content{
    display:block;
    text-align:center;
  }
  .el-form.demo-form-inline::v-deep .up .el-form-item .el-form-item__content{
    border-left:1px solid #F0F1F2;
  }
  .el-form.demo-form-inline::v-deep .up .el-form-item .el-form-item__content:last-child,
  .el-form.demo-form-inline::v-deep .down .el-form-item .el-form-item__content:last-child{
    border-right:1px solid #F0F1F2;
  }
  .el-form.demo-form-inline::v-deep .down .el-form-item .el-form-item__content{
    border-left:1px solid #F0F1F2;
    border-bottom:1px solid #F0F1F2;
  }
  .echarts1,.echarts2{
    position:relative;width:90%;margin:0 auto; background:#fff;
  }
  .echarts2{
    padding:20px 0;
  }
  .content{
    background:#F5F6F7;
    padding:20px 0;
  }
  .table{
    margin:20px auto;
    width:90%;
    background:#fff;
    padding:20px;
  }
  .el-button--text{
    color:#000;
  }
  .el-button--text.active{
    color:#2F53EB;
  }
  .title{
    font-size:16px;
    font-weight:600;
    padding:20px 0 20px 3%;
    position:absolute;
  }
  .bottom-title{
    font-size:16px;
    font-weight:600;
    position:absolute;
    right:3%;
    bottom:20px;
  }
</style>