<template>
  <div
    class="new-special-time"
    style="align-items: center; display: flex; padding-right: 10px"
    :style="countChartStyle"
  >
    <el-form class="condition" size="mini" inline>
      <el-form-item>
        <el-button-group>
          <el-button
            size="mini"
            :type="ext.filter.dateType == 'QUARTER' ? 'primary' : ''"
            @click="ext.filter.dateType = 'QUARTER'"
          >
            季度
          </el-button>
          <el-button
            size="mini"
            :type="ext.filter.dateType == 'MONTH' ? 'primary' : ''"
            @click="ext.filter.dateType = 'MONTH'"
          >
            月份
          </el-button>
          <el-button
            size="mini"
            :type="ext.filter.dateType == 'DAY' ? 'primary' : ''"
            @click="ext.filter.dateType = 'DAY'"
          >
            日
          </el-button>
        </el-button-group>
      </el-form-item>
      <el-form-item>
        <div class="abs">
          <template v-if="ext.filter.dateType == 'QUARTER'">
            <vxe-input
              v-model="ext.filter.time[0]"
              placeholder="季度选择"
              type="quarter"
              clearable
              value-format="yyyyMM"
              size="mini"
            ></vxe-input>
            <vxe-input
              v-model="ext.filter.time[1]"
              placeholder="季度选择"
              type="quarter"
              clearable
              value-format="yyyyMM"
              size="mini"
            ></vxe-input>
          </template>
          <template v-if="ext.filter.dateType == 'MONTH'">
            <el-date-picker
              style="width: 290px"
              v-model="ext.filter.time"
              type="monthrange"
              placeholder="选择月份"
              clearable
              value-format="yyyyMM"
            >
            </el-date-picker>
          </template>
          <template v-if="ext.filter.dateType == 'DAY'">
            <el-date-picker
              style="width: 290px"
              v-model="ext.filter.time"
              type="daterange"
              placeholder="选择日期"
              clearable
              value-format="yyyyMMdd"
            >
            </el-date-picker>
          </template>
        </div>
      </el-form-item>
    </el-form>
    <el-popover
      placement="bottom-start"
      trigger="hover"
      popper-class="special-time-popover"
    >
      <el-button size="mini" slot="reference" type="primary">
        快捷选择
      </el-button>
      <el-tag size="mini" type="primary" @click="setQuickOption('DAY', 6)">
        近7天
      </el-tag>
      <el-tag size="mini" type="primary" @click="setQuickOption('DAY', 14)">
        近15天
      </el-tag>
      <el-tag size="mini" type="primary" @click="setQuickOption('DAY', 30)">
        近30天
      </el-tag>
      <el-tag size="mini" type="primary" @click="setQuickOption('MONTH', 5)">
        近6月
      </el-tag>
      <el-tag size="mini" type="primary" @click="setQuickOption('MONTH', 11)">
        近12月
      </el-tag>
      <el-tag size="mini" type="primary" @click="setQuickOption('QUARTER', 3)">
        近4季
      </el-tag>
    </el-popover>
    <div class="filter-btns">
      <el-button
        size="mini"
        icon="el-icon-edit"
        type="primary"
        @click="onEdit"
        v-show="isEdit"
      >
        编辑
      </el-button>
      <el-button
        size="mini"
        icon="el-icon-search"
        type="primary"
        @click="previewAll"
        v-show="isEdit || option.showSwitch"
      >
        查询
      </el-button>
    </div>
    <el-dialog
      append-to-body
      :visible.sync="show"
      title="编辑筛选"
      custom-class="newbi-special-time-dialog"
      width="700px"
    >
      <el-form size="mini" label-width="100px">
        <el-form-item label="时间格式">
          <el-radio-group
            v-model="form.dateType"
            @change="countAbsoluteTime(form)"
          >
            <el-radio label="QUARTER">季度</el-radio>
            <el-radio label="MONTH">月份</el-radio>
            <el-radio label="DAY">日</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="计算方式">
          <el-radio-group
            v-model="form.timeType"
            @change="countAbsoluteTime(form)"
          >
            <el-radio label="relative">相对时间</el-radio>
            <el-radio label="absolute">绝对时间</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-show="form.timeType == 'relative'" label="日期基准调整">
          <el-select
            v-model="form.relativeCount"
            style="width: 80px"
            @change="countAbsoluteTime(form)"
          >
            <el-option label="往前" value="left"></el-option>
            <el-option label="往后" value="right"></el-option>
          </el-select>
          <el-input
            v-model="form.relativeSize"
            style="width: 80px"
            @input="countAbsoluteTime(form)"
          >
            <template slot="append">
              {{ dateTypeMap[form.dateType] }}
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="相对时间设置" v-if="form.timeType == 'relative'">
          <el-input
            v-model="form.value1"
            style="width: 110px"
            @input="countAbsoluteTime(form)"
          >
            <template slot="append">
              {{ dateTypeMap[form.dateType] }}
            </template>
          </el-input>
          <el-select
            v-model="form.count1"
            style="width: 60px"
            @change="countAbsoluteTime(form)"
          >
            <el-option label="前" value="left"> </el-option>
            <el-option label="后" value="right"> </el-option>
          </el-select>
          <span style="margin: 0 10px">~</span>
          <el-input
            v-model="form.value2"
            style="width: 110px"
            @input="countAbsoluteTime(form)"
          >
            <template slot="append">
              {{ dateTypeMap[form.dateType] }}
            </template>
          </el-input>
          <el-select
            v-model="form.count2"
            style="width: 60px"
            @change="countAbsoluteTime(form)"
          >
            <el-option label="前" value="left"> </el-option>
            <el-option label="后" value="right"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期值">
          <template v-if="form.dateType == 'QUARTER'">
            <vxe-input
              v-model="form.time[0]"
              placeholder="季度选择"
              type="quarter"
              clearable
              value-format="yyyyMM"
              :disabled="form.timeType == 'relative'"
            ></vxe-input>
            <vxe-input
              v-model="form.time[1]"
              placeholder="季度选择"
              type="quarter"
              clearable
              value-format="yyyyMM"
              :disabled="form.timeType == 'relative'"
            ></vxe-input>
          </template>
          <template v-if="form.dateType == 'MONTH'">
            <el-date-picker
              v-model="form.time"
              type="monthrange"
              placeholder="选择月份"
              clearable
              value-format="yyyyMM"
              :disabled="form.timeType == 'relative'"
            >
            </el-date-picker>
          </template>
          <template v-if="form.dateType == 'DAY'">
            <el-date-picker
              v-model="form.time"
              type="daterange"
              placeholder="选择日期"
              clearable
              value-format="yyyyMMdd"
              :disabled="form.timeType == 'relative'"
            >
            </el-date-picker>
          </template>
        </el-form-item>
        <el-form-item label="图表设置">
          <el-table size="mini" :data="form.chartList">
            <el-table-column label="图表选择">
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.select"></el-checkbox>
                {{ scope.row.chartTitle }}
              </template>
            </el-table-column>
            <el-table-column label="时间维度类型" width="200px">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.tid"
                  @change="onTidChange($event, scope.row)"
                  filterable
                >
                  <el-option label="不选择" value=""></el-option>
                  <el-option
                    v-for="i of scope.row.fields"
                    :key="i.id"
                    :label="i.columnTitle + '【' + i.columnName + '】'"
                    :value="i.id"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="时间维度值" width="200px">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.vid"
                  @change="onVidChange($event, scope.row)"
                  filterable
                >
                  <el-option label="不选择" value=""></el-option>
                  <el-option
                    v-for="i of scope.row.fields"
                    :key="i.id"
                    :label="i.columnTitle + '【' + i.columnName + '】'"
                    :value="i.id"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <div class="btns">
        <el-button size="small" @click="onEditConfirm">取消</el-button>
        <el-button size="small" type="primary" @click="onEditConfirm">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { cubeFieldList } from "../../api/newbi/dataset";
export default {
  props: ["option", "charts", "chartId", "ext", "isEdit"],
  data() {
    return {
      show: false,
      form: {},
      dateTypeMap: {
        DAY: "天",
        MONTH: "月",
        QUARTER: "季",
      },
    };
  },
  computed: {
    chartList() {
      let arr = this.charts
        .filter((i) => {
          if (!i.dataconfig) return false;
          if (i.dataconfig.dataType != "CUBE") return false;
          return true;
        })
        .map((i) => {
          let chart = {
            chartTitle: i.title,
            chartKey: i.key,
            cubeDataId: i.dataconfig.dataId,
            fields: [],
            loading: false,
          };
          this.setChartField(chart);
          return chart;
        });
      return arr;
    },
    countChartStyle() {
      let { outBorderStyle, outBorderColor } = this.option;
      return {
        border: `1px ${outBorderStyle} ${outBorderColor}`,
      };
    },
  },
  created() {
    if (!this.chartId) {
      this.$set(this.ext, "filter", {
        dateType: "DAY", // quarter month day
        value1: 29,
        value2: 0,
        count1: "left",
        count2: "left",
        timeType: "relative",
        relativeCount: "left",
        relativeSize: 1,
        chartList: [],
        time: ["", ""],
      });
      this.countAbsoluteTime(this.ext.filter);
    }
  },
  methods: {
    // 根据月份计算季度
    countQuarter(month) {
      if (month < 4) return 1;
      if (month < 7) return 2;
      if (month < 10) return 3;
      return 4;
    },
    // 根据相对时间计算绝对时间
    countAbsoluteTime(filter) {
      let {
        count1,
        count2,
        value1,
        value2,
        dateType,
        relativeSize,
        relativeCount,
        timeType,
      } = filter;
      if (timeType == "absolute") return;
      let v1, v2;
      let date1 = new Date();
      let date2 = new Date();
      value1 = parseInt(value1);
      value2 = parseInt(value2);
      let count =
        relativeCount == "left"
          ? -parseInt(relativeSize)
          : parseInt(relativeSize);
      if (dateType == "QUARTER") {
        date1.setMonth(date1.getMonth() + count * 3);
        date2.setMonth(date2.getMonth() + count * 3);
        let month = date1.getMonth() + 1;
        date1.setMonth(month + (count1 == "left" ? -value1 * 3 : value1 * 3));
        date2.setMonth(month + (count2 == "left" ? -value2 * 3 : value2 * 3));
        v1 = date1.getFullYear() + "" + this.countQuarter(date1.getMonth() + 1);
        v2 = date2.getFullYear() + "" + this.countQuarter(date2.getMonth() + 1);
      } else if (dateType == "MONTH") {
        date1.setMonth(date1.getMonth() + count);
        date2.setMonth(date2.getMonth() + count);
        let month = date1.getMonth();
        date1.setMonth(month + (count1 == "left" ? -value1 : value1));
        date2.setMonth(month + (count2 == "left" ? -value2 : value2));
        v1 = moment(date1).format("yyyyMM");
        v2 = moment(date2).format("yyyyMM");
      } else {
        date1.setDate(date1.getDate() + count);
        date2.setDate(date2.getDate() + count);
        let day = date1.getDate();
        date1.setDate(day + (count1 == "left" ? -value1 : value1));
        date2.setDate(day + (count2 == "left" ? -value2 : value2));
        v1 = moment(date1).format("yyyyMMDD");
        v2 = moment(date2).format("yyyyMMDD");
      }
      filter.time = [v1, v2];
    },
    // 设置快捷选项时
    setQuickOption(type, size) {
      let filter = this.ext.filter;
      filter.timeType = "relative";
      filter.relativeCount = "left";
      filter.relativeSize = 1;
      filter.dateType = type;
      filter.count1 = "left";
      filter.count2 = "left";
      filter.value1 = size;
      filter.value2 = 0;
      this.countAbsoluteTime(filter);
    },
    onTidChange(id, chart) {
      chart.tfield = chart.fields.find((i) => i.id == id);
    },
    onVidChange(id, chart) {
      chart.vfield = chart.fields.find((i) => i.id == id);
    },
    // 获取图表字段配置
    setChartField(chart) {
      if (chart.fields.length) return;
      chart.loading = true;
      cubeFieldList({ cubeDataId: chart.cubeDataId }).then((res) => {
        chart.fields = res.data.data;
        chart.loading = false;
      });
    },
    previewAll() {
      this.$bus.$emit("previewAll");
    },
    onEdit() {
      this.form = {
        ...this.ext.filter,
        chartList: this.chartList.map((i) => {
          let chart = {
            ...i,
            select: false,
            tid: "",
            tfield: null,
            vid: "",
            vfield: null,
          };
          let past = this.ext.filter.chartList.find(
            (j) => j.chartKey == i.chartKey
          );
          if (past) {
            chart.select = true;
            chart.tid = past.tid;
            chart.tfield = i.fields.find((j) => j.id == past.tid);
            chart.vid = past.vid;
            chart.vfield = i.fields.find((j) => j.id == past.vid);
          }
          this.setChartField(chart);
          return chart;
        }),
      };
      this.show = true;
    },
    onEditConfirm() {
      this.ext.filter = {
        ...this.form,
        chartList: this.form.chartList
          .filter((i) => i.select)
          .map((i) => {
            return {
              chartKey: i.chartKey,
              chartTitle: i.chartTitle,
              cubeDataId: i.cubeDataId,
              tid: i.tid,
              tfield: i.tfield,
              vid: i.vid,
              vfield: i.vfield,
            };
          }),
      };
      this.show = false;
    },
  },
};
</script>
<style lang="scss">
.new-special-time {
  position: relative;
  .condition {
    .el-form-item {
      margin-bottom: 0px;
    }
  }
  .abs {
    .el-input,
    .vxe-input {
      margin-top: 2px;
      width: 140px;
      & + * {
        margin-left: 10px;
      }
    }
  }
  .rel {
    .el-input-group__append {
      padding: 0 12px;
    }
    .el-input__inner {
      text-align: center;
    }
  }
  .filter-btns {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    display: flex;

    .el-button {
      display: block;

      & + .el-button {
        margin-left: 5px;
      }
    }
  }
}
.newbi-special-time-dialog {
  .btns {
    display: flex;
    justify-content: space-evenly;
    margin-top: 30px;
    .el-button {
      width: 120px;
    }
  }
  .checkbox-item .el-checkbox__label {
    line-height: 14px;
    width: 230px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .filter-item {
    margin-bottom: 5px;
  }
  .el-input-group__append {
    padding: 0 12px;
  }
}
.special-time-popover {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  width: 150px;
  .el-tag {
    display: block;
    width: 60px;
    text-align: center;
    margin: 4px;
    cursor: pointer;
  }
}
</style>
