<template>
  <div>
    <div class="bigTitle">
      <div class="bigTitle_left">{{bigT}}</div>
      <div class="bigTitle_middle">{{bigY}}年</div>
      <div class="bigTitle_right">
        <!-- <el-button type="primary" size="small" >
          <span class="d-in-block v-mid font-size-16">编辑</span>
        </el-button> -->
        <el-button type="danger" size="small" @click="exportSingle" v-show="listShow">
          <span class="d-in-block v-mid font-size-16">导出</span>
        </el-button>
      </div>
    </div>
    <div class="table" v-show="listShow" style="width:100%;">
      <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" align="center" width="55" ></el-table-column>
        <el-table-column label="序号" align="center" type="index"></el-table-column>
        <el-table-column prop="department_name" label="申请部门"></el-table-column>
        <el-table-column prop="xm_sbsj" label="申请时间"></el-table-column>
        <el-table-column prop="xm_name" label="项目名称"></el-table-column>
        <el-table-column prop="xm_status" label="审批通过">
          <template slot-scope="scope">
            <div>
              {{scope.row.xm_status=='1' ? '否' : '是'}}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="area" id="echartsArea" v-show="echartShow"></div>
  </div>
</template>

<script>
import { bbtj_detail } from "./itemApi";
import * as echarts from "echarts";
import { useUserStore } from "@/stores/user";
const { real_name, dept_ids } = useUserStore();
export default {
  name: "xq",
  data() {
    return {
      tranId:'',
      tableData: [],
      bigT: '',
      bigY: '',
      multipleSelection: [],
      listShow: true,
      echartShow:true,
    }
  },
  methods: {
    initData() {
      this.tranId = this.$route.params.id;
      let transID = this.$route.params.id;
      let transObj = {
        bb_id:transID
      }
      bbtj_detail(transObj)
        .then(res => {
          if (res.code == "1") {
            let allData = res.data.one_info;
            this.bigT = allData.bb_name;
            this.bigY = allData.bb_year;
            this.tableData = allData.xm_list;
            let tempArr = allData.bb_type.split(',');
            if (tempArr.length>1) {//列表和图标都有
              this.listShow = true;
              this.echartShow = true;
            } else if(tempArr[0]==1) {//列表
              this.listShow = true;
              this.echartShow = false;
            } else {
              this.listShow = false;
              this.echartShow = true;
            }
            
            this.initEchart(res.data.one_info.echart);
            
          }
        })
        .catch(err => { console.log(err)});
    },
    //初始化echart
    initEchart(transData) {
      console.log(transData,"00")
      var chartDom = document.getElementById("echartsArea");
      var myChart = echarts.init(chartDom);
      var option;

      //改变echarts 格式
      let changeData = transData.series_data;
      let formatArr;
      if (changeData.length == 1) {
        formatArr = [
          { data: [changeData[0][0]]},
          { data: [changeData[0][1]]},
          { data: [changeData[0][2]]}
        ]
      } else {
        formatArr = [
          { data: [changeData[0][0], changeData[1][0]]},
          { data: [changeData[0][1], changeData[1][1]]},
          { data: [changeData[0][2], changeData[1][2]]}
        ]
      }
      
      // changeData.forEach((item,index) => {
      //   item.forEach(secItem => {
      //     formatArr.push({

      //     })
      //     console.log(secItem,"00")
      //   })
      // })
      let transEchartdata = {
        legend_data: transData.legend_data,
        xAxis_data: transData.xAxis_data,
        series_data:formatArr
      }
      option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
            show:true,
            left: "2%",
            top: "10%",
            right: "2%",
            bottom: "5%",
        },
        legend: {
          data: transEchartdata.legend_data
        },
        toolbox:{
          feature: {
            saveAsImage:{}
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: transEchartdata.xAxis_data
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '发起项目数量',
            type: 'bar',
            data: transEchartdata.series_data[0].data
          },
          {
            name: '审批通过量',
            type: 'bar',
            data: transEchartdata.series_data[1].data
          },
          {
            name: '待审未通过量',
            type: 'bar',
            data: transEchartdata.series_data[2].data
          }

        ]
      };

      option && myChart.setOption(option);
    },
    //导出
    exportSingle() {
      let Token = JSON.parse(window.localStorage.getItem('userInfo')).token;
      let expId = [];
      this.multipleSelection.forEach(item => {
        expId.push(item.xm_id);
      })
      if (expId.length>0) {
        let stringExpId = expId.join();
        let link =
        window.globalVariables.api +
          "/jdbg/xmlxsb_xmsq/index?api=xls&page=1&limit=10000&token=" +
          Token+"&ids="+stringExpId;
        window.open(link, "_blank");
      } else {//没有选择任何一个
        this.$message({
          message: "请至少选择一项，进行导出~",
          type: 'error'
        });
        return 
      }
      
    },
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
  mounted() {
    this.initData();
  },
};
</script>

<style lang="scss" scoped>
.bigTitle {
  display: flex;
  font-size: 18px;
  font-weight: 400;
  text-align: left;
  color: #000000;
  height: 35px;
  .bigTitle_left {
    width: 30%;
    line-height: 35px;
  }
  .bigTitle_middle {
    width: 20%;
    line-height: 35px;
  }
  .bigTitle_right {
    width: 50%;
    text-align: right;
  }
}
.table{
  margin-top:35px;
}
.area{
  margin-top:60px;
  text-align: center;
  min-height:400px;

}
</style>
