<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2022-10-24 15:45:01
-->
<template>
  <div class="page">
    <topBar v-if="topList.length > 0" :topList="topList" :moren="moren"></topBar>
    <div class="main">
      <div  class="form_all">
      <el-form ref="select"
               :model="select"
               label-width="auto">
        <el-row :gutter="10">
          <el-col :span="4">
            <el-form-item :label="'会员编号'">
              <el-input clearable
                        v-model="select.memberCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'会员姓名'">
              <el-input clearable
                        v-model="select.memberName"></el-input>
            </el-form-item>
          </el-col>
        
          <el-col :span="6">
            <el-form-item :label="'结算时间'">
              <el-date-picker v-model="creationTime"
                              @change="changeTime"
                              value-format="yyyy-MM-dd"
                              type="daterange"
                              :range-separator="'至'"
                              :start-placeholder="'开始日期'"
                              :end-placeholder="'结束日期'">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button type="primary"
                       @click="getDataList"> {{ '搜索' }}</el-button>
            <el-button type="" @click="reset"> {{ '重置' }}</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
      <div class="maintop">
        <div class="mainbtn">
          <el-button size="small"
          @click="handleExport"
                     style="background-color: #ffad41"
                   class="thebtn1"> {{ '导出' }}</el-button>
        </div>
      </div>
      <div class="maintable">
        <div id="mounthData" 
         style="width: 100%; height: 700px">

    </div>
      </div>
    </div>
  </div>
</template>

<script>
import topBar from '@/components/topBar'
import * as api from '@/api/settle.js'
import { classifyUpdate, classifySave } from '@/api/product'
import html2canvas from "html2canvas";

export default {
  name: 'Bzpz',
  components: {
    topBar,
  },
  data() {
    return {
      creationTime: [],
      select: {
        memberCode:'CN30720208'
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 50,
      },
      addOrEdit: '',
      total: 0,
      dialogVisible: false,
      tableData: [],

      moren: '/settlementCenter/placementDatas',
      topList: [
        {
          name: '安置数据',
          path: '/settlementCenter/placementData',
          url: 'placementData',
          changed: false
        },
        {
          name: '安置图表',
          path: '/settlementCenter/placementDatas',
          url: 'placementChat',
          changed: false
        }
      ],
      webList: [],
      localList: [],
      popList: [],
      gradeList: [],
      stateList: [],
      areaData: [],
      languaList: [],
      regionParams: {
        label: 'name',
        value: 'id',
        children: 'children',
        expandTrigger: 'hover',
      },
    }
  },
  mounted() {
    // 获取列表
    // this.getDataList()
  },
  methods: {
    drawChart(arr1, arr2,arr3,arr4) {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let myChart = this.$echarts.init(document.getElementById('mounthData'))
      var emphasisStyle = {
  itemStyle: {
    shadowBlur: 10,
    shadowColor: 'rgba(0,0,0,0.3)'
  }
};
      // 指定图表的配置项和数据
      let option = {
        tooltip: {},
        legend: {
          top: 10,
          right: 10,
          data: ['左区','右区','左区结余','右区结余',],
        },
        xAxis: {
          data: ['真实', '首购', '复购'],
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
            },
          },
        },
        series: [
          {
            name:'左区',
            type: 'bar',
            data: arr1,
            stack: 'one',
      emphasis: emphasisStyle,
          },
          {
            name: '右区',
            type: 'bar',
            data: arr2,
            stack: 'one',
      emphasis: emphasisStyle,
          },
          {
            name: '左区结余',
            type: 'bar',
            data: arr3,
            stack: 'one',
      emphasis: emphasisStyle,
          },
          {
            name: '右区结余',
            type: 'bar',
            data: arr4,
            stack: 'one',
      emphasis: emphasisStyle,
          },
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    handleChange1() {},
    reset(){
      this.select = {}
      this.creationTime = []
      this.creationTime1 = []
    },
    changeTime(val) {
      this.select.startDate = val?val[0]:''
      this.select.endDate = val?val[1]:''
    },
    getDataList() {
      api
        .placeImg(this.select)
        .then((res) => {
          let a = res.data
          let arr1 = [a.leftRealSumAchieve,a.leftSumAchieve,a.leftRegSumAchieve]
          let arr2 = [a.rightRealSumAchieve,a.rightSumAchieve,a.rightRegSumAchieve]
          let arr3 = [a.leftRealBalance,a.leftBalance,a.leftRegBalance]
          let arr4 = [a.rightRealBalance,a.rightBalance,a.rightRegBalance]
         
          this.drawChart(arr1, arr2, arr3, arr4)
        })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.$confirm( '是否确认导出所有数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then((_) => {
        // this.download(
        //   '/system/manage/ho-enterprise-mission/export',
        //   Object.assign({}, this.queryParams, this.select),
        //   `${'企业使命'}${new Date().getTime()}.xlsx`
        // )
        const options = {
                backgroundColor: null,
                scale: window.devicePixelRatio,
                dpi: 300
            }
            html2canvas(document.querySelector('#mounthData'), options).then(
                (canvas) => {
                    let url = canvas.toDataURL('image/png')
                    let a = document.createElement('a')
                    a.href = url
                    a.setAttribute('download', '安置图表')
                    a.click()
                }
            )
      })
    },
  },
}
</script>
<style scoped lang="scss">
::v-deep .el-table .warning-row {
  background: #f9f9f9;
}

::v-deep .el-table .success-row {
  background: #ffffff;
}
::v-deep .el-table thead {
  color: #000000;
}
::v-deep .el-select {
  width: 100%;
}
.uploadIcon ::v-deep .el-upload--picture-card {
  display: none !important; /* 上传按钮隐藏 */
}
.page {
  padding: 20px;
  background: #f9f9f9;
  font-size: 14px;
  .main {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
    .form_all {
      padding: 0px 20px 0 20px;
      // margin-bottom: 20px;
      background: #fff;
      border-radius: 8px;
    }
    .maintop {
      display: flex;
      padding: 0px 0px;
      justify-content: space-between;
      align-items: center;

      background: #f8f8f8;
      .mainbtn {
        .thebtn1 {
          background: #3181e5;
          color: #ffffff;
        }
        .thebtn2 {
          background: #ffad41;
          color: #ffffff;
        }
      }
      .maintitle {
        font-size: 10px;
        font-family: MicrosoftYaHei;
        color: #999999;
      }
    }
  }
  .tem {
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 28px;
      height: 20px;
      margin-right: 3px;
    }
  }
  .isRed {
    color: #ed1d25;
  }
  .isGreen {
    color: #1ab62b;
  }
  .bgImg {
    width: 48px;
    height: 48px;
  }
}
.openClose {
  text-align: right;
  margin-right: 10px;
  color: #3181e5;
}
.dizhi {
  ::v-deep .el-cascader {
    width: 100%;
  }
}
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: auto;
}
</style>
