<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-08-25 08:59:04
-->
<template>
  <div class="djlx">
    <div class="inquire">
      <el-form :model="queryForm" ref="queryForm" label-width="100px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="统计时间" class="width100">
              <el-date-picker
                v-model="queryForm.monthValue"
                class="width100"
                type="month"
                placeholder="选择月"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="区域" class="width100">
              <el-select
                v-model="queryForm.qy"
                class="width100"
                clearable
                placeholder="请选择权利类型"
              >
                <el-option
                  v-for="item in dictData['A20']"
                  :key="item.dcode"
                  :label="item.dname"
                  :value="item.dcode"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11" class="btnColRight">
            <el-form-item>
              <el-button
                type="primary"
                native-type="submit"
                @click="handleSearch"
                >查询</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="concent">
      <div ref="chart" style="width: 100%; height: 200px"></div>
    </div>
  </div>
</template>
<script>
function getFirstAndLastDayOfMonth(dateString) {
  const date = new Date(dateString);
  const firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
  const lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);

  // 将日期格式化为 "yyyy-MM-dd"
  const formatDate = (d) => {
    const year = d.getFullYear();
    const month = String(d.getMonth() + 1).padStart(2, '0');
    const day = String(d.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
  };

  return {
    firstDay: formatDate(firstDay),
    lastDay: formatDate(lastDay)
  };
}
import * as echarts from "echarts";
import { mapGetters } from "vuex";
import { getAcceptDayStatistic } from "@/api/tjfx.js";
export default {
  components: {},
  computed: {
    ...mapGetters(["dictData", "transfer"]),
  },
  data() {
    return {
      queryForm: {
        monthValue:"",
        qy: ''
      },
      datas: [],
      datatime: [],

    };
  },
   created() {
    // 默认当月
    var nowDate = new Date();
    var date = {
      year: nowDate.getFullYear(),
      month: nowDate.getMonth() + 1,
      day: nowDate.getDate()
    };
    const dayDate =
      date.year + "-" + (date.month >= 10 ? date.month : "0" + date.month);
    var date = new Date();
    this.$set(this.queryForm, "monthValue", dayDate.toString());
    console.log("this.queryForm",this.queryForm);
  },
  mounted() {
    this.handleSearch()
  },
  methods: {
    getOption() {
      return {
        title: {
          text: "收件情况统计(月) ", // 主标题名称

          textStyle: {
            //主标题文本设置
            fontSize: 18, //大小
          },

          itemGap: 3, //主副标题间距
          x: "center", //主副标题的水平位置
          y: "top", //主副标题的垂直位置
        },
        legend: {
          data: ["转诊量"],
          top: "6%",
          right: "4%",
          textStyle: {
            color: "#747474",
          },
        },
        tooltip: {
          //   trigger: "item", //默认效果
          //柱状图加阴影
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
            },
          },
        },
        grid: {
          top: "20%",
          left: "2%",
          right: "3%",
          bottom: "20%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.datatime,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.datas,
            type: "bar",
            barWidth: 15,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.8)",
            },
          },
        ],
      };
    },

    handleSearch() {
      const { firstDay, lastDay } = getFirstAndLastDayOfMonth(this.queryForm.monthValue);
      getAcceptDayStatistic({startDate: firstDay, endDate: lastDay, qxdm: this.queryForm.qy}).then(res => {
        if (res.code === 200) {
          let dataSource = res.result
          this.datas = dataSource.map(item => item.SJCOUNT)
          this.datatime = dataSource.map(item => item.SJDAY)
          // 创建一个 ECharts 实例
          this.chart = echarts.init(this.$refs.chart);
          // 在 ECharts 实例中配置图表
          this.chart.setOption(this.getOption());
        }
      })
    },
  },
};
</script>
<style scoped lang="scss">
/deep/.el-card__header {
  padding: 8px 10px;
}

/deep/.el-card__body {
  padding: 3px 10px 5px 10px;
  overflow: hidden;
}
.yhjgba {
  .el-col {
    padding: 4px;
    margin-right: 4px;
  }
  .inquire {
    width: 100%;
    height: 40px;
    background-color: #f4f7fd;
    /deep/ .el-form {
      .el-form-item--small.el-form-item {
        margin-bottom: 5px;
      }
    }
  }
  .concent {
    width: 100%;
    height: 300px;
    display: flex;
  }
}
</style>