<template>
  <div
    class="q-pa-md q-px-lg"
    style="background:rgb(244,245,252) !important;margin:-14px -14px 0 0; height:calc(100% + 14px)"
  >
    <div
      style="background:#FFF;border-radius:12px;margin-bottom:5px;"
      class="q-px-md row items-center"
    >
      <q-tabs
        v-model="showType"
        indicator-color="transparent"
        active-color="dark"
        align="left"
        class="text-grey-6 col"
      >
        <q-tab name="0" label="全部" />
        <q-tab name="1" label="客户" />
        <q-tab name="2" label="交易" />
        <q-tab name="3" label="学员" />
        <q-tab name="4" label="教学" />
        <q-tab name="5" label="财务" />
        <q-tab name="6" label="行政" />
      </q-tabs>
      <div
        class="q-mr-xl cursor-pointer"
        style="line-height:48px;position: relative;"
        id="timebox"
      >
        <el-date-picker
          v-model="formatDay.dateFull"
          type="date"
          :clearable="false"
          value-format="yyyy/MM/dd"
          :picker-options="pickerOptions"
          :editable="false"
          placeholder="选择日期"
          @change="changeTimeData"
        >
        </el-date-picker>
      </div>
      <div v-if="!loading" class="text-right" style="line-height:32px;">
        <span class="f12 text-right text-grey-5">
          <span
            >每10分钟更新一次 最后更新时间:
            {{
              today.dateFull == formatDay.dateFull
                ? d.FirendTime
                : formatDay.time
            }}</span
          >
          <span></span>
        </span>
        <q-btn
          color="negative"
          style="font-size:12px;"
          class="q-mx-md"
          size="mini"
          dense
          flat
          v-if="today.dateFull == formatDay.dateFull"
          @click="updateData"
          >手动刷新</q-btn
        >
      </div>
      <div v-else class="f12 text-right q-mr-md">
        <q-spinner-ios color="primary" size="1.5em" /> 正在更新数据中...
      </div>
    </div>
    <customer
      :d="d"
      :formatDate="formatDay"
      :shouType="showType"
      v-if="!loading && (showType == '0' || showType == '1')"
    ></customer>
    <sell
      :d="d"
      :formatDate="formatDay"
      :shouType="showType"
      v-if="!loading && (showType == '0' || showType == '2')"
    ></sell>
    <student
      :d="d"
      :formatDate="formatDay"
      :shouType="showType"
      v-if="!loading && (showType == '0' || showType == '3')"
    ></student>
    <course
      :d="d"
      :formatDate="formatDay"
      :shouType="showType"
      v-if="!loading && (showType == '0' || showType == '4')"
    ></course>
    <admin
      :d="d"
      :formatDate="formatDay"
      :shouType="showType"
      v-if="!loading && (showType == '0' || showType == '6')"
    ></admin>
    <finance
      :d="d"
      :formatDate="formatDay"
      :shouType="showType"
      v-if="!loading && (showType == '0' || showType == '5')"
    ></finance>
  </div>
</template>

<script>
import { GetGMView, UpdateGMView } from "../../api/dataservice/index";
import student from "./dataservice/student";
import customer from "./dataservice/customer";
import sell from "./dataservice/sell";
import admin from "./dataservice/admin";
import course from "./dataservice/course";
import finance from "./dataservice/finance";
export default {
  components: { student, customer, sell, admin, course, finance },
  data() {
    return {
      d: {},
      queryDay: "",
      formatDay: "",
      loading: true,
      showType: "0",
      today: {},
      pickerOptions: {
        disabledDate(time) {
          return (
            time.getTime() > Date.now() ||
            time.getTime() < Date.parse("2022-03-02")
          );
        }
      }
    };
  },
  created() {
    this.today = this.formatWeekFn(new Date());
    this.init();
  },
  methods: {
    changeTimeData(val) {
      this.queryDay = val.replaceAll("/", "-");
      this.init();
    },
    init() {
      this.loading = true;
      GetGMView({ day: this.queryDay }).then(r => {
        this.d = r.Data;
        this.formatDay = this.formatWeekFn(this.d.Day);
        this.loading = false;
      });
    },
    updateData() {
      this.loading = true;
      UpdateGMView().then(r => {
        this.d = r.Data;
        this.formatDay = this.formatWeekFn(this.d.Day);
        this.loading = false;
      });
    },
    formatWeekFn(dateStr) {
      var date = new Date(dateStr);
      var year = date.getFullYear();
      var month =
        date.getMonth() > 9 ? date.getMonth() + 1 : `0${date.getMonth() + 1}`;
      var day = date.getDate() > 10 ? date.getDate() : `0${date.getDate()}`;
      var d = date.getDay();
      var hour = date.getHours() > 10 ? date.getHours() : `0${date.getHours()}`;
      var mint =
        date.getMinutes() > 10 ? date.getMinutes() : `0${date.getMinutes()}`;
      var sec =
        date.getSeconds() > 10 ? date.getSeconds() : `0${date.getSeconds()}`;
      var arr = ["一", "二", "三", "四", "五", "六", "日"];
      var d = arr[d - 1];

      return {
        dateFull: `${year}/${month}/${day}`,
        date: `${month}/${day}`,
        week: `周${d}`,
        time: `${hour}时${mint}分${sec}秒`
      };
    }
  }
};
</script>

<style>
.workbench-item-value {
  font-family: din;
  font-size: 20px;
}
.todo-list-item {
  background: rgb(244, 245, 252) !important;
}
.big-dataservice-box {
  border: 4px dashed rgb(200, 230, 201);
  border-radius: 10px;
  position: relative;
  padding: 30px 16px;
  margin-bottom: 20px;
}
.big-dataservice-box.hide-border {
  border: none !important;
}
.big-dataservice-box.hide-border .tag-title {
  display: none;
}
.big-dataservice-box .tag-title {
  position: absolute;
  top: -4px;
  left: -4px;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  font-size: 14px;
  background: rgb(200, 230, 201);
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.big-dataservice-box .q-card {
  padding: 32px !important;
  width: calc(25% - 16px);
}
.big-dataservice-box .q-card .data-title {
  font-size: 17px;
}
.big-dataservice-box .q-card .data-time {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.5);
  margin-top: 3px;
}
.big-dataservice-box .q-card .wrapper {
  display: flex;
  height: 84px;
  justify-content: space-between;
  align-items: flex-end;
}
.big-dataservice-box .q-card .wrapper .label {
  color: rgba(0, 0, 0, 0.3);
  font-size: 12px;
  margin-bottom: 4px;
}
.big-dataservice-box .q-card .wrapper .label.big {
  margin-bottom: 18px;
}
.big-dataservice-box .q-card .wrapper .value {
  font-family: "din";
  font-size: 24px;
}
.big-dataservice-box .q-card .wrapper .value .unit {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.3);
  margin-left: 4px;
}
.big-dataservice-box .q-card .wrapper .value.samll {
  font-size: 14px;
  font-family: "pingfang";
}
.big-dataservice-box .q-card .wrapper .value.red {
  color: #c10015;
}
.big-dataservice-box .q-card .wrapper .value.green {
  color: #21ba45;
}
</style>
