<template>
  <div>
    <div class="bigTitle flex-row">
      <div class="bigTitle_left">{{ bigT }} <span class="ml10">{{ bigY }}年</span></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
          v-if="detailData.bb_type != '2'"
           :disabled="multipleSelection.length == 0"
          type="primary"
          size="small"
          @click="exportSingle"
        >
          <span class="d-in-block v-mid font-size-16">导出</span>
        </el-button>
      </div>
    </div>
    <div
      class="mt10 font-size-12 text-lightgrey"
      v-if="detailData.bb_type == '1'"
    >
      仅显示列表
    </div>
    <div
      class="mt10 font-size-12 text-lightgrey"
      v-if="detailData.bb_type == '2'"
    >
      仅显示图表
    </div>
    <div
      class="mt10 font-size-12 text-lightgrey"
      v-if="detailData.bb_type == '3'"
    >
      列表、图表均显示
    </div>
    <div v-show="detailData.bb_type != 2" class="table">
      <el-table
        @selection-change="handleSelectionChange"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column type="selection" align="center" width="55">
        </el-table-column>
        <el-table-column
          label="序号"
          type="index"
          width="110"
        ></el-table-column>
        <el-table-column
          prop="department_name"
          show-overflow-tooltip
          label="科室"
        ></el-table-column>
        <el-table-column
          prop="lb_name"
          show-overflow-tooltip=""
          label="类型"
        ></el-table-column>
        <el-table-column
          prop="xm_price"
          show-overflow-tooltip
          label="总金额"
        ></el-table-column>
      </el-table>
    </div>
    <div class="area" v-show="detailData.bb_type != 1" id="echartsArea">
      *此区域为图表展示区域
    </div>
  </div>
</template>

<script>
import { bb_detail, cgxmk_list } from "../api";
import * as echarts from "echarts";
import { useUserStore } from "@/stores/user";
const { real_name, dept_ids, token } = useUserStore();
export default {
  name: "xq",
  data() {
    return {
      tranId: "",
      tableData: [],
      detailData: {},
      multipleSelection: [],
      bigT: "",
      bigY: "",
    };
  },
  methods: {
    initData() {
      this.tranId = this.$route.params.id;
      let transID = this.$route.params.id;
      let transObj = {
        site: "jnmf",
        bb_id: transID,
      };
      bb_detail(transObj)
        .then((res) => {
          if (res.code == "1") {
            this.detailData = res.data.one_info;
            let allData = res.data.one_info;
            this.bigT = allData.bb_name;
            this.bigY = allData.bb_year;
            this.tableData = allData.xm_list;
            this.$nextTick(() => {
              this.initEchart(res.data.one_info.echart);
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //初始化echart
    initEchart(transData) {
      var chartDom = document.getElementById("echartsArea");
      var myChart = echarts.init(chartDom);
      var option;
      //改变echarts 格式
      let changeData = transData.series_data;
      // let formatArr = [{ data: [0, 1] }, { data: [0, 0] }, { data: [0, 0] }];
      let list1 = [];
      let list2 = [];
      let list3 = [];

      changeData.forEach((item, index) => {
        list1.push(item[0]);
        list2.push(item[1]);
        list3.push(item[2]);
      });
      let transEchartdata = {
        legend_data: transData.legend_data,
        xAxis_data: transData.xAxis_data,
        series_data: transData.series_data,
      };
      option = {
        tooltip: {
          trigger: "axis",
        },
        toolbox: {
          show: true,
          feature: {
            mark: {
              show: true,
            },
            saveAsImage: {
              show: true,
              excludeComponents: ["toolbox"],
              pixelRatio: 2,
            },
          },
          itemSize: 30,
          iconStyle: {
            borderWidth: 3,
            borderMiterLimit: 8,
          },
          top: -12,
          right: 20,
        },
        grid: {
          show: true,
          left: "2%",
          top: "10%",
          right: "2%",
          bottom: "5%",
        },
        legend: {
          data: transEchartdata.legend_data,
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: transEchartdata.xAxis_data,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "发起项目数量",
            type: "bar",
            data: list1,
          },
          {
            name: "审批通过量",
            type: "bar",
            data: list2,
          },
          {
            name: "待审未通过量",
            type: "bar",
            data: list3,
          },
        ],
      };

      option && myChart.setOption(option);
    },
    handleSelectionChange(val) {
      this.multipleSelection = [];
      for (let i in val) {
        this.multipleSelection.push(val[i].xm_id);
      }
    },
    //导出
    exportSingle() {
      let link =
        window.globalVariables.api +
        "/jdbg/sbcg_cgxm/index?api=xls&page=1&limit=10000&token=" +
        token +
        "&bb_id=" +
        this.tranId+'&ids='+this.multipleSelection;
      window.open(link, "_blank");
    },
  },
  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 {
    line-height: 35px;
  }
}
.table {
  width: 100%;
  margin-top: 35px;
}
.area {
  margin-top: 60px;
  text-align: center;
  min-height: 400px;
}
</style>
