<template>
  <div class="ChannelRanking">
    <el-card class="box-card">
      <el-form
        ref="form"
        :model="form"
        size="small"
        :inline="true"
        label-width="120px"
        class="demo-form-inline"
      >
        <el-form-item label="日期">
          <el-date-picker
            v-model="dateRank"
            type="daterange"
            :default-value="new Date()"
            :disabled-date="time => disabledDate(time)"
            range-separator="-"
            value-format="YYYY-MM-DD"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="排序">
          <el-select v-model="type" placeholder="请选择">
            <el-option
              v-for="item in col"
              :key="item.type"
              :label="item.name"
              :value="item.type - 0"
            />
          </el-select>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" :loading="loading" @click="onSubmit">
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <br />
    <el-card class="box-card">
      <line-charts
        :list="tableData"
        v-if="tableData.length"
        xName="channelName"
        :toolTipUnit="col[type - 1].unit"
        :notzoom="true"
        :keys="select"
      ></line-charts>
      <el-table
        :data="tableData"
        :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#606266' }"
        style="width: 100%"
      >
        <el-table-column
          align="center"
          type="index"
          label="排名"
          class-name="nowrap"
        />
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="channelName"
          label="频道名称"
          class-name="nowrap"
        />
        <el-table-column
          v-for="(item, i) in col"
          :key="item.type"
          align="center"
          :prop="item.key"
          :label="item.name"
          class-name="nowrap"
        >
          <template #header>
            <div>
              <!-- <div @click="() => sortChange({ prop: item.key })"> -->
              <el-icon
                style="vertical-align: middle;"
                :color="i === type - 1 ? '#409eff' : ''"
                ><sort-down
              /></el-icon>
              <span
                :style="
                  'vertical-align: middle;' +
                    (i === type - 1 ? 'color: #409eff' : '')
                "
              >
                {{ `${item.name}(${item.unit === "元" ? "万元" : item.unit})` }}
              </span>
            </div>
          </template>
          <template v-slot="scope">
            <span v-if="item.key === 'fee'">
              {{ douhao((scope.row[item.key] / 10000 || 0).toFixed(2)) }}
            </span>
            <span v-if="item.key === 'timeSize'">
              {{ douhao((scope.row[item.key] / 60000 || 0).toFixed(2)) }}
            </span>
            <span v-if="item.key === 'pinci'">
              {{ douhao((scope.row[item.key] || 0).toFixed(0)) }}
            </span>
            <span v-if="item.key === 'customer'">
              {{ douhao((scope.row[item.key] || 0).toFixed(0)) }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
// @ is an alias to /src
import { channelRank } from "@/api/index";
import lineCharts from "@/views/ChannelRanking/components/lineCharts";

import { ElNotification } from "element-plus";
import "element-plus/lib/theme-chalk/el-notification.css";

// import config from "@/config/index";
export default {
  name: "Channel",
  from: {},
  data() {
    return {
      type: 1,
      dataType: 1,
      col: [
        {
          key: "fee",
          name: "费用",
          unit: "元",
          type: 1,
        },
        {
          key: "timeSize",
          name: "时长",
          unit: "分",
          type: 2,
        },
        {
          key: "pinci",
          name: "频次",
          unit: "次",
          type: 3,
        },
      ],
      dateRank: [],
      tableData: [],
      loading: false,
    };
  },
  computed: {
    select() {
      return [this.col[this.type - 1]];
    },
  },
  mounted() {
    let date = new Date();
    date = new Date(date.getTime() - 86400000);
    let month = date.getMonth() + 1,
      day = date.getDate();
    month > 9 ? "" : (month = "0" + month);
    day > 9 ? "" : (day = "0" + day);
    let dateRank = [
      [date.getFullYear(), month, day].join("-"),
      [date.getFullYear(), month, day].join("-"),
    ];
    this.from = {
      dataType: this.type,
      end: dateRank[1] || "",
      start: dateRank[0] || "",
    };
    this.loading = true;
    channelRank(this.from).then(res => {
      this.loading = false;
      this.tableData = res || [];
      this.dateRank = dateRank;
    });
  },
  methods: {
    sortChange(v) {
      const T = {
        fee: 1,
        timeSize: 2,
        pinci: 3,
        customer: 4,
      };
      this.from.dataType = T[v.prop] || 1;
      this.loading = true;
      channelRank(this.from).then(res => {
        this.loading = false;
        this.tableData = res || [];
        this.type = T[v.prop] || 1;
        this.dateRank = [this.from.start, this.from.end];
      });
    },
    douhao(text) {
      if (/\./.test(text)) {
        return text.replace(/(?=(\B)(\d{3})+\.)/g, ",");
      } else {
        return text.replace(/(?=(\B)(\d{3})+$)/g, ",");
      }
    },
    format(v, digit = 2) {
      if (isNaN(v)) return 0;
      let o = v.toFixed(digit);
      if (v > 10000) {
        o = (v / 10000).toFixed(digit) + "万";
      }

      return o;
    },
    disabledDate(time) {
      return time.getTime() > Date.now() - 86400000;
    },
    onSubmit() {
      if (!this.dateRank || this.dateRank.length !== 2) {
        ElNotification({
          title: "错误",
          message: "日期选择有误",
          type: "error",
          duration: 0,
        });
        return;
      }
      let s = new Date(this.dateRank[0]),
        e = new Date(this.dateRank[1]);
      if (e - s > 86400000 * 31) {
        ElNotification({
          title: "错误",
          message: "日期跨度超过一个月",
          type: "error",
          duration: 0,
        });
        return;
      }
      this.from = {
        dataType: this.type,
        end: this.dateRank[1] || "",
        start: this.dateRank[0] || "",
      };
      this.loading = true;
      channelRank(this.from).then(res => {
        this.loading = false;
        this.tableData = res || [];
      });
    },
  },
  components: { lineCharts },
};
</script>

<style>
.ChannelRanking {
  margin: 10px 15px;
}
.ChannelRanking .nowrap .cell {
  white-space: nowrap;
}
</style>
