<template>
  <div class="app-container home">
    <div class="index-content">
      <div class="index-content-card">
        <div
          :class="
            valueNew === item.value
              ? 'index-content-card-item index-content-card-itema'
              : 'index-content-card-item'
          "
          v-for="(item, index) in [
            { label: '今天', value: 1 },
            { label: '最近7天', value: 2 },
            { label: '最近30天', value: 3 },
            { label: '总计', value: 0 },
          ]"
          :key="index"
          @click="clickValueChange(item)"
        >
          {{ item.label }}
        </div>
      </div>
      <div class="index-content-nav">
        <el-row :gutter="10">
          <el-col :span="4" v-if="user.roleId == 3">
            <div class="index-content-nav-item">
              <div class="index-content-nav-item-top">
                <h3>所属城市</h3>
              </div>
              <h2>
                <img src="@/assets/icons/p6.png" alt="" /><span>{{
                  cityName ? cityName : ""
                }}</span>
              </h2>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="index-content-nav-item">
              <div class="index-content-nav-item-top">
                <h3>新增用户</h3>
                <!-- <el-select
                  v-model="valueA"
                  placeholder="请选择"
                  style="width: 8em"
                  @change="dataUserAxios"
                >
                  <el-option
                    v-for="item in [
                      { label: '今天', value: 1 },
                      { label: '最近7天', value: 2 },
                      { label: '最近30天', value: 3 },
                      { label: '总计', value: 0 },
                    ]"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select> -->
              </div>
              <h2>
                <img src="@/assets/icons/p1.png" alt="" />
                <animate-number
                  from="1"
                  :to="sumA"
                  :key="sumA"
                  duration="1000"
                  :formatter="thoudsandW"
                ></animate-number>
              </h2>
            </div>
          </el-col>
          <el-col :span="4" v-if="user.roleId != 3">
            <div class="index-content-nav-item">
              <div class="index-content-nav-item-top">
                <h3>总销售额</h3>
                <!-- <el-select
                  v-model="valueB"
                  placeholder="请选择"
                  style="width: 8em"
                  @change="saleroomAxios"
                >
                  <el-option
                    v-for="item in [
                      { label: '今天', value: 1 },
                      { label: '最近7天', value: 2 },
                      { label: '最近30天', value: 3 },
                      { label: '总计', value: 0 },
                    ]"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select> -->
              </div>
              <h2>
                <img src="@/assets/icons/p2.png" alt="" />
                <animate-number
                  from="1"
                  :to="sumB"
                  :key="sumB"
                  duration="1000"
                  :formatter="thoudsand"
                ></animate-number>
              </h2>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="index-content-nav-item">
              <div class="index-content-nav-item-top">
                <h3>新增陪诊员</h3>
                <!-- <el-select
                  v-model="valueC"
                  placeholder="请选择"
                  style="width: 8em"
                  @change="dataEmployeesAxios"
                >
                  <el-option
                    v-for="item in [
                      { label: '今天', value: 1 },
                      { label: '最近7天', value: 2 },
                      { label: '最近30天', value: 3 },
                      { label: '总计', value: 0 },
                    ]"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select> -->
              </div>
              <h2>
                <img src="@/assets/icons/p3.png" alt="" />
                <animate-number
                  from="1"
                  :to="sumC"
                  :key="sumC"
                  duration="1000"
                ></animate-number>
              </h2>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="index-content-nav-item">
              <div class="index-content-nav-item-top">
                <h3 v-if="user.roleId == 3">机构收益</h3>
                <h3 v-else>平台收益</h3>
                <!-- <el-select
                  v-model="valueD"
                  placeholder="请选择"
                  style="width: 8em"
                  @change="platformRevenueAxios"
                >
                  <el-option
                    v-for="item in [
                      { label: '今天', value: 1 },
                      { label: '最近7天', value: 2 },
                      { label: '最近30天', value: 3 },
                      { label: '总计', value: 0 },
                    ]"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select> -->
              </div>
              <h2>
                <img src="@/assets/icons/p4.png" alt="" />
                <animate-number
                  from="1"
                  :to="sumD"
                  :key="sumD"
                  :formatter="thoudsand"
                ></animate-number>
              </h2>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="index-content-nav-item">
              <div class="index-content-nav-item-top">
                <h3>总订单量</h3>
                <!-- <el-select
                  v-model="valueE"
                  placeholder="请选择"
                  style="width: 8em"
                  @change="orderQuantityAxios"
                >
                  <el-option
                    v-for="item in [
                      { label: '今天', value: 1 },
                      { label: '最近7天', value: 2 },
                      { label: '最近30天', value: 3 },
                      { label: '总计', value: 0 },
                    ]"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select> -->
              </div>
              <h2>
                <img src="@/assets/icons/p5.png" alt="" />
                <animate-number
                  from="1"
                  :to="sumE"
                  :key="sumE"
                  duration="1000"
                  :formatter="thoudsandW"
                ></animate-number>
              </h2>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="index-content-order">
        <el-row :gutter="24">
          <el-col :span="24">
            <div class="index-content-order-top">
              <h3>已完成订单</h3>
              <div>
                <el-date-picker
                  ref="dataPicker"
                  v-model.trim="daterangeTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                  v-if="valueF == 2"
                  style="margin-right: 15px"
                  :picker-options="pickerOptions"
                  unlink-panels
                  @change="changeDataer"
                >
                </el-date-picker>
                <el-select
                  v-model="valueF"
                  placeholder="请选择"
                  style="width: 10em"
                  @change="changeValueF"
                >
                  <el-option
                    v-for="item in [
                      { label: '最近7天', value: 0 },
                      { label: '最近30天', value: 1 },
                      { label: '自定义', value: 2 },
                    ]"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
                <template v-if="user.roleId != 3">
                  <el-select
                    v-model="cityId"
                    placeholder="请选择城市"
                    style="margin-left: 15px; width: 10em"
                    filterable
                    clearable=""
                    @change="changeCtypChange"
                  >
                    <el-option
                      v-for="item in cityVoList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                  <el-select
                    v-model="companyId"
                    placeholder="请选择机构"
                    style="margin-left: 15px; width: 10em"
                    filterable
                    clearable=""
                    @change="orderQuantityEchartsAxios"
                  >
                    <el-option
                      v-for="item in companyList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </template>
              </div>
            </div>
            <!-- <h2>总量：{{ sumF }}</h2> -->
            <div
              class="chart"
              id="mychart"
              :style="{ height: '450px', width: '100%' }"
            />
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- <el-divider />
    <el-row :gutter="20">

    </el-row>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>技术支持</span>
          </div>
          <div class="body">
            <p>
              <i class="el-icon-s-promotion"></i> 官网：<el-link
                href="http://www.yyinhong.cn/"
                target="_blank"
                >http://www.yyinhong.cn/</el-link
              >
            </p>
            <p>
              <i class="el-icon-user-solid"></i> 公司名称：上海印宏
            </p>
          </div>
        </el-card>
      </el-col>
    </el-row> -->
  </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./dashboard/mixins/resize";
import { cityVoListGET } from "@/api/hispotalManage/hospital";
const animationDuration = 3000;
import {
  dataUserGet,
  dataEmployeesGet,
  saleroomGet,
  platformRevenueGet,
  orderQuantityGet,
  orderQuantityEchartsGet,
  companyListGet,
} from "@/api/index.js";
import { mapGetters } from "vuex";
export default {
  name: "Index",
  mixins: [resize],
  computed: {
    ...mapGetters(["user", "cityName"]),
  },
  filters: {},
  data() {
    return {
      // 版本号
      companyId: "",
      companyList: [],
      cityVoList: [],
      cityId: "",
      version: "4.8.0",
      valueNew: 1,
      valueA: 1,
      sumA: 0,
      valueB: 1,
      sumB: 0,
      valueC: 1,
      sumC: 0,
      valueD: 1,
      sumD: 0,
      valueE: 1,
      sumE: 0,
      valueF: 0,
      sumF: 0,
      chart: null,
      daterangeTime: "",
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.daterangeTime = minDate.getTime();
          if (maxDate) {
            this.daterangeTime = "";
          }
        },
        disabledDate: (time) => {
          if (this.daterangeTime !== "" && this.daterangeTime != null) {
            const one = 30 * 24 * 3600 * 1000;
            const minTime = this.daterangeTime - one;
            const maxTime = this.daterangeTime + one;
            return time.getTime() < minTime || time.getTime() > maxTime;
          }
        },
      },
    };
  },
  mounted() {
    console.log("user", this.user);
    this.dataUserAxios();
    this.dataEmployeesAxios();
    if (this.user.roleId != 3) {
      this.saleroomAxios();
      this.cityVoListAxios();
    }
    this.platformRevenueAxios();
    this.orderQuantityAxios();
    this.orderQuantityEchartsAxios();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    clickValueChange(item) {
      this.valueNew = item.value;
      this.dataUserAxios();
      this.dataEmployeesAxios();
      this.platformRevenueAxios();
      this.orderQuantityAxios();
      if (this.user.roleId != 3) {
        this.saleroomAxios();
      }
    },
    thoudsand(value) {
      if (!value) return "";
      value = value.toFixed(2);
      const intPart = Math.trunc(value);
      // 整数部分处理，增加,
      const intPartFormat = intPart
        .toString()
        .replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
      // 预定义小数部分
      let floatPart = "";
      // 将数值截取为小数部分和整数部分
      const valueArray = value.toString().split(".");
      if (valueArray.length === 2) {
        // 有小数部分
        floatPart = valueArray[1].toString(); // 取得小数部分
        return intPartFormat + "." + floatPart;
      }
      return intPartFormat + floatPart;
    },
    thoudsandW(value) {
      if (!value) return "";
      value = value.toFixed();
      const intPart = Math.trunc(value);
      // 整数部分处理，增加,
      const intPartFormat = intPart
        .toString()
        .replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
      // 预定义小数部分
      let floatPart = "";
      // 将数值截取为小数部分和整数部分
      const valueArray = value.toString().split(".");
      if (valueArray.length === 2) {
        // 有小数部分
        floatPart = valueArray[1].toString(); // 取得小数部分
        return intPartFormat + "." + floatPart;
      }
      return intPartFormat + floatPart;
    },
    changeCtypChange() {
      this.companyId = "";
      this.companyList = [];
      this.companyListAxios();
    },
    async companyListAxios() {
      const data_back = await companyListGet({
        cityId: this.cityId,
      });
      const { code, data } = data_back;
      if (code === 200) {
        this.companyList = data;
        this.orderQuantityEchartsAxios();
      }
    },
    async cityVoListAxios() {
      const data_back = await cityVoListGET();
      const { code, data } = data_back;
      if (code === 200) {
        this.cityVoList = data;
      }
    },
    changeDataer(e) {
      console.log("changeDataer", e);
      if (!e) {
        this.daterangeTime = "";
        this.valueF = 0;
      }
      this.orderQuantityEchartsAxios();
    },
    changeValueF(e) {
      if (e != 2) {
        this.orderQuantityEchartsAxios();
      }
    },
    async orderQuantityEchartsAxios() {
      let params = {
        type: this.valueF,
        cityId: this.cityId,
        companyId: this.companyId,
      };
      if ([0, 1].includes(this.valueF)) {
      } else if (this.valueF == 2) {
        params.startTime =
          this.daterangeTime && this.daterangeTime.length
            ? this.daterangeTime[0]
            : "";
        params.endTime =
          this.daterangeTime && this.daterangeTime.length
            ? this.daterangeTime[1]
            : "";
      }
      const { code, data } = await orderQuantityEchartsGet(params);
      if (code === 200 && data && data.length) {
        // let sum = 0;
        // data.forEach((item) => {
        //   sum += item.num;
        // });
        // this.sumF = sum;
        let xData = [],
          yData = [];
        xData = data.map((item) => {
          return item.key;
        });
        yData = data.map((item) => {
          return item.list;
        });
        let maxList = [],
          ykList = [];
        data.forEach((item) => {
          if (item.list && item.list.length) {
            let ak = item.list.map((fk) => {
              return fk.num;
            });
            let max = Math.max.apply(null, ak);
            maxList.push(max);
          }
        });
        // console.log(xData, yData, maxList, data);
        this.$nextTick(() => {
          this.initChart(xData, yData, maxList, data);
        });
      } else {
        this.sumF = 0;
        this.$nextTick(() => {
          this.initChart([], []);
        });
      }
    },
    async orderQuantityAxios() {
      const { code, data } = await orderQuantityGet({
        // condition: this.valueE,
        condition: this.valueNew,
      });
      if (code === 200) {
        this.sumE = data.dataSum || 0;
      }
    },
    async platformRevenueAxios() {
      const { code, data } = await platformRevenueGet({
        condition: this.valueD,
        condition: this.valueNew,
      });
      if (code === 200) {
        this.sumD = data.dataSum || 0;
      }
    },
    async saleroomAxios() {
      const { code, data } = await saleroomGet({
        // condition: this.valueB,
        condition: this.valueNew,
      });
      if (code === 200) {
        this.sumB = data.dataSum || 0;
      }
    },
    async dataEmployeesAxios() {
      const { code, data } = await dataEmployeesGet({
        // condition: this.valueC,
        condition: this.valueNew,
      });
      if (code === 200) {
        this.sumC = data.dataSum || 0;
      }
    },
    async dataUserAxios() {
      const { code, data } = await dataUserGet({
        // condition: this.valueA,
        condition: this.valueNew,
      });
      if (code === 200) {
        this.sumA = data.dataSum || 0;
      }
    },
    initChart(xData, yData, maxList, ykList) {
      // 基本柱状图
      const option = {
        // legend: {
        //   type: "plain", // 图列类型，默认为 'plain'
        //   bottom: "0px", // 图列相对容器的位置 top\bottom\left\right
        //   data: xData,
        // },
        grid: {
          top: "10px",
          bottom: "40px",
          right: "2%",
          left: "2%",
        },
        tooltip: {
          //提示框组件，用于配置鼠标滑过或点击图表时的显示框。
          show: true, // 是否显示
          trigger: "axis", // 触发类型  'item'图形触发：散点图，饼图等无类目轴的图表中使用； 'axis'坐标轴触发；'none'：什么都不触发。
          axisPointer: {
            // 坐标轴指示器配置项。
            type: "cross", // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
          },
          // showContent: true, //是否显示提示框浮层，默认显示。
          // triggerOn: 'mouseover', // 触发时机'click'鼠标点击时触发。
          backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。
          borderColor: "#333", // 提示框浮层的边框颜色。
          borderWidth: 0, // 提示框浮层的边框宽。
          padding: 5, // 提示框浮层内边距，
          textStyle: {
            // 提示框浮层的文本样式。
            color: "#fff",
            fontStyle: "normal",
            fontWeight: "normal",
            fontFamily: "sans-serif",
            fontSize: 14,
          },
          // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
          // 模板变量有 {a}, {b}，{c}，分别表示系列名，数据名，数据值等
          // formatter: '{a}--{b} 的成绩是 {c}'
          formatter: function (arg) {
            let hk = "";
            ykList.forEach((item) => {
              if (item.key == arg[0].name && item.list && item.list.length) {
                item.list.forEach((fk) => {
                  hk += `<p>${fk.name}：${fk.num}</p>`;
                });
              }
            });
            // return arg[0].name + "的总量是:" + arg[0].data;
            return hk;
          },
        },
        xAxis: [
          {
            type: "category",
            data: xData,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            smooth: true,
            name: xData,
            // type: "bar",
            type: "line",
            barWidth: "40%",
            data: maxList,
            animationDuration,
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: "#6d8bec",
              },
              {
                offset: 1,
                color: "#1506e4",
              },
            ]),
            areaStyle: {
              normal: {
                //LinearGradient线性渐变，可以设置挡位颜色达到渐变的效果
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#1506e4" },
                  { offset: 0.5, color: "#6d8bec" },
                  { offset: 1, color: "#E7F2FD" },
                ]),
              },
            },
          },
        ],
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

.app-container {
  background: #f5f6fa;
  height: 100vh;
}

.index-content {
  width: 100%;
  &-nav {
    width: 100%;
    display: flex;
    &-item {
      min-height: 50px;
      border-radius: 5px;
      // box-shadow: 0 0 10px 2px #e2dfdf;
      // padding: 10px;
      padding: 1em;
      background: #ffffff;
      &-top {
        display: flex;
        justify-content: space-between;
        // border-bottom: 1px solid rgb(239, 239, 245);
        padding-bottom: 5px;

        h3 {
          font-size: 1em;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #74798c;
        }
      }
      h2 {
        width: 100%;
        // height: 120px;
        font-weight: 500;
        font-size: 28px;
        color: #000000;
        margin: 0px;
        padding-bottom: 10px;
        display: flex;
        align-items: center;
        img {
          width: 28px;
          height: 28px;
          margin: 0px 10px 5px 0px;
        }
      }
    }
    .el-row {
      width: 100%;
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
      .el-col {
        width: 20%;
      }
    }
  }
  &-order {
    width: 100%;
    margin-top: 25px;
    // box-shadow: 0 0 10px 2px #e2dfdf;
    padding: 10px;
    min-height: 100px;
    border-radius: 4px;
    background: #ffffff;
    &-top {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
  &-card {
    background: #ffffff;
    border-radius: 5px;
    padding: 21px 26px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    &-item {
      background: #f2f2f2;
      border-radius: 3px;
      padding: 10px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #74798c;
      margin-right: 8px;
      text-align: center;
      cursor: pointer;
    }
    &-item:hover,
    &-itema {
      background: #0054fe;
      color: #ffffff;
    }
  }
}
</style>
