<template>
  <!-- 新增业绩 -->
  <view class="content-box">
    <view class="labelList">
      <view
        class="label"
        @click="changePlace(item.pkId)"
        :class="{ active: pkMember == item.pkId }"
        v-for="(item, index) in labelList"
        :key="index"
      >
        <view v-if="item.placeDept >= 4">
          {{ item.placeDept }}<span v-if="languages === 'en-US'">th</span>
          {{ $t("fn_011") }}
        </view>
        <view v-else> {{ item.placeDept }}{{ $t("fn_011") }} </view>
      </view>
    </view>
    <view class="content d-e-c">
      <picker :range="monthList" range-key="label" @change="changeMonth">
        <view class="picker-small">
          <text>{{
            monthList[monthIndex] ? monthList[monthIndex].label : ""
          }}</text>
          <u-icon name="arrow-down-fill" size="28rpx" color="#333"></u-icon>
        </view>
      </picker>
    </view>
    <view class="d-c-c charts-box"
      ><canvas
        canvas-id="RxLfvHATljsyuMzkObqjWYVZPqXlLibz"
        id="RxLfvHATljsyuMzkObqjWYVZPqXlLibz"
        class="charts"
        @touchend="tap"
    /></view>
  </view>
</template>

<script>
import uCharts from "@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js";
var uChartsInstance = {};
export default {
  data() {
    return {
      cWidth: 661,
      cHeight: 638,
      monthIndex: 0,
      dayType: "",
      pkMember: "",
      chartsDataColumn: {},
      listData: [],
      monthList: [],
      labelList: [],
      placeDept: "",
      languages: "",
    };
  },
  onReady() {
    //这里的 661 对应 css .charts 的 width
    this.cWidth = uni.upx2px(661);
    //这里的 638 对应 css .charts 的 height
    this.cHeight = uni.upx2px(638);
    this.getMenber();
    this.languages = uni.getLocale();
    // this.getServerData();
    // this.monthList = [this.$t('ENU_DAY_T_1'), this.$t('ENU_DAY_T_2'), this.$t('ENU_DAY_T_3')];
    // console.log(this.getServerData());
  },
  methods: {
    selected() {
      let self = this;
      self._get("/system/pub/enums/get-day-type", {}, (res) => {
        this.monthList = res.data;
        this.dayType = res.data[0].value;
        this.getServerData();
      });
    },
    getMenber() {
      let self = this;
      self._get(
        "/member/api/member/place-dept",
        {
          placeDept: "",
        },
        (res) => {
          self.labelList = res.data;
          if (res.data.length > 0) {
            self.pkMember = res.data[0].pkId;
          }

          self.selected();
        }
      );
    },
    changePlace(e) {
      this.pkMember = e;
      const m = this.labelList.filter((l) => l.pkId == e);
      this.placeDept = m[0].placeDept;
      this.getServerData(1);
    },
    changeMonth(e) {
      this.monthIndex = e.detail.value;
      if (this.monthList) {
        this.dayType = this.monthList[this.monthIndex].value;
      }
      this.getServerData();
      console.log(this.getServerData());
    },
    getServerData() {
      let self = this;
      self._get(
        "member/api/member/new-add-achieve",
        {
          dayType: self.dayType,
          pkMember: self.pkMember,
          placeDept: self.placeDept,
        },
        (res) => {
          let list = res.data;
          let obj = {
            categories: [],
            series: [
              {
                data: [],
                name: self.$t("MN_F_T_857"),
              },
              // {
              // 	data: [],
              // 	name: self.$t('S_C_74')
              // },
              // {
              // 	data: [],
              // 	name: self.$t('S_C_75')
              // },
              // {
              // 	data: [],
              // 	name: self.$t('S_C_76')
              // }
            ],
          };
          if (list && list.length > 0) {
            list.forEach((item, index) => {
              obj.categories.push(item.settleDate);
              obj.series[0].data.push(item.anewPv * 1 || 0);
              // obj.series[1].data.push(item.repANewPv * 1 || 0);
              // obj.series[2].data.push(item.bnewPv * 1 || 0);
              // obj.series[3].data.push(item.repBNewPv * 1 || 0);
              self.listData.push({
                time: item.settleDate,
                data1: item.bnewPv * 1 || 0,
                data2: item.repBNewPv * 1 || 0,
              });
            });
          }
          self.chartsDataColumn = JSON.parse(JSON.stringify(obj));
          self.listData.reverse();
          self.drawCharts(
            "RxLfvHATljsyuMzkObqjWYVZPqXlLibz",
            self.chartsDataColumn
          );
        }
      );
    },
    drawCharts(id, data) {
      const ctx = uni.createCanvasContext(id, this);
      uChartsInstance[id] = new uCharts({
        type: "line",
        context: ctx,
        width: this.cWidth,
        height: this.cHeight,
        categories: data.categories,
        series: data.series,
        animation: true,
        timing: "easeOut",
        duration: 1000,
        rotate: false,
        rotateLock: false,
        background: "#FFFFFF",
        color: ["#FF5151", "#BB0909", "#FFAE36", "#935801"],
        padding: [15, 10, 0, 15],
        fontSize: 13,
        fontColor: "#666666",
        dataLabel: false,
        dataPointShape: false,
        dataPointShapeType: "solid",
        touchMoveLimit: 60,
        enableScroll: false,
        enableMarkLine: false,
        legend: {
          show: false,
          position: "bottom",
          float: "center",
          padding: 5,
          margin: 5,
          backgroundColor: "rgba(0,0,0,0)",
          borderColor: "rgba(0,0,0,0)",
          borderWidth: 0,
          fontSize: 13,
          fontColor: "#666666",
          lineHeight: 11,
          hiddenColor: "#CECECE",
          itemGap: 10,
        },
        xAxis: {
          disableGrid: true,
          disabled: false,
          axisLine: true,
          axisLineColor: "#CCCCCC",
          calibration: false,
          fontColor: "#666666",
          fontSize: 8,
          lineHeight: 20,
          marginTop: 20,
          rotateLabel: true,
          rotateAngle: 45,
          itemCount: 5,
          boundaryGap: "center",
          splitNumber: 5,
          gridColor: "#CCCCCC",
          gridType: "solid",
          dashLength: 4,
          gridEval: 1,
          scrollShow: false,
          scrollAlign: "left",
          scrollColor: "#A6A6A6",
          scrollBackgroundColor: "#EFEBEF",
          title: "",
          titleFontSize: 8,
          titleOffsetY: 0,
          titleOffsetX: 0,
          titleFontColor: "#666666",
          formatter: "",
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
          disabled: false,
          disableGrid: false,
          splitNumber: 5,
          gridColor: "#CCCCCC",
          padding: 10,
          showTitle: true,
          data: [
            {
              type: "value",
              position: "left",
              disabled: false,
              axisLine: false,
              axisLineColor: "#CCCCCC",
              calibration: false,
              fontColor: "#666666",
              fontSize: 11,
              textAlign: "right",
              title: this.$t("MN_F_T_453"),
              titleFontSize: 11,
              titleOffsetY: 0,
              titleOffsetX: 0,
              titleFontColor: "#666666",
              min: null,
              max: null,
              tofix: null,
              unit: "",
              formatter: "",
            },
          ],
        },
        extra: {
          line: {
            type: "straight",
            width: 2,
            activeType: "hollow",
            linearType: "none",
            onShadow: false,
            animation: "vertical",
          },
          tooltip: {
            showBox: true,
            showArrow: true,
            showCategory: false,
            borderWidth: 0,
            borderRadius: 0,
            borderColor: "#000000",
            borderOpacity: 0.7,
            bgColor: "#000000",
            bgOpacity: 0.7,
            gridType: "solid",
            dashLength: 4,
            gridColor: "#CCCCCC",
            boxPadding: 3,
            fontSize: 13,
            lineHeight: 20,
            fontColor: "#FFFFFF",
            legendShow: true,
            legendShape: "auto",
            splitLine: true,
            horizentalLine: false,
            xAxisLabel: false,
            yAxisLabel: false,
            labelBgColor: "#FFFFFF",
            labelBgOpacity: 0.7,
            labelFontColor: "#666666",
          },
          markLine: {
            type: "solid",
            dashLength: 4,
            data: [],
          },
        },
      });
    },
    tap(e) {
      uChartsInstance[e.target.id].touchLegend(e);
      uChartsInstance[e.target.id].showToolTip(e);
    },
  },
};
</script>

<style scoped>
page {
}
.content {
  padding: 26rpx 22rpx 26rpx 23rpx;
}

.content-box {
  padding: 30rpx 0;
  min-height: 100vh;
}

.picker-small {
  width: 232rpx;
  height: 72rpx;
  border: 1rpx solid #eeeeee;
  border-radius: 15rpx;
  font-size: 28rpx;
  padding: 0 28rpx 0 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  background-color: #fff;
}
.charts-box {
  padding: 22rpx 26rpx 23rpx 28rpx;
  width: 706rpx;
  height: 692rpx;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 20rpx;
  margin: 0 auto;
  margin-bottom: 30rpx;
}
.charts {
  width: 661rpx;
  height: 638rpx;
}
.tabulation-box {
  width: 704rpx;
  padding: 0 26rpx 20rpx 26rpx;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 20rpx;
  margin: 0 auto;
}
.tabulation-top {
  padding: 20rpx 0;
  border-bottom: 1prx solid #eee;
}
.tabulation-item {
  height: 40rpx;
}
.tabulation-item:nth-child(2n) {
  background: #f8f8f8;
}
.labelList {
  display: flex;
  align-items: center;
  gap: 32rpx;
  padding: 20rpx 20rpx;
  overflow-x: auto;
  .label {
    /*width: 88rpx;*/
    white-space: nowrap;
    padding: 8rpx 15rpx;
    border-radius: 39rpx 39rpx 39rpx 39rpx;
    text-align: center;
    cursor: pointer;
    background: #ffffff;
    &.active {
      background: #d61820;
      border-color: #d61820;
      color: #fff;
    }
  }
}
</style>
