const statisticsCard = {
  template: `
  <div class="statistics-card" :class="{ 'statistics-card_border':border,'statistics-card_shadow':shadow,'statistics-card_colourfull':colorful }" :style="{ backgroundImage:'url('+background+')' }">
    <div class="statistics-card_title" v-show="title">{{ title }}
      <el-tooltip effect="dark" :content="tip" placement="top" v-if="tip">
        <i class="el-icon-warning"></i>
      </el-tooltip>
    </div>
    <count-to class="statistics-card_count" :start-val='0' :end-val="Number(count)" :duration=4000 v-show="count!==null" :style="{ color:countColor }" :decimals="decimals" ></count-to>
    <slot/>
  </div>`,
  props: {
    title: {
      type: String,
      default: ""
    },
    tip: {
      type: String,
      default: ""
    },
    border: {
      type: Boolean,
      default: true
    },
    count: {
      type: Number | String,
      default: null
    },
    shadow: {
      type: Boolean,
      default: false
    },
    colorful: {
      type: Boolean,
      default: false
    },
    background: {
      type: String,
      default: "unset"
    },
    countColor: {
      type: String,
      default: "#5e6c84"
    },
    decimals: {
      type: Number,
      default: 0
    }
  },
  watch: {
    count(newV) {
      if (this.decimals === 0) {
        let split = String(newV).split(".");
        this.decimals = split[1] ? split[1].length : 0;
      }
    }
  }
}

const statisticsTimeRange = {
  template: `
  <div>
    <el-form-item>
      <el-select v-model="timeRangeType" @change="dateChanged">
          <el-option v-for="typeItem in timeRangeTypes" :key="typeItem.key" :label="typeItem.text" :value="typeItem.key"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-date-picker v-model="timeRange" v-show="datePickerType !=='daterange'" :type="datePickerType" placeholder="选择日期"
      :format="datePickerFormat"
      clearable
      :picker-options="{'firstDayOfWeek': 1}"
      @change="dateChanged()">
      </el-date-picker>
    </el-form-item>
    <el-form-item>
    <el-date-picker
    v-show="datePickerType =='daterange'"
    v-model="timeRange"
    type="daterange"
    clearable
    @change="dateRangeChanged()"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期">
  </el-date-picker>
  </el-form-item>
  </div>
  `,
  props:{
    custom:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      datePickerFormat: "",
      timeRangeTypes: [{
        text: "日",
        key: "day"
      }, {
        text: "周",
        key: "week"
      }, {
        text: "月",
        key: "month"
      }],
      timeRangeType: "day",
      timeRange: null
    }
  },
  methods: {
    dateChanged() {
        this.$emit('changed', { timeRangeType: this.timeRangeType, timeRange: new Date(this.timeRange).getTime() });
    },
    handelDate(date){
      date[0] = date[0].getFullYear()+'-'+(date[0].getMonth()+1).toString().padStart(2,'0')+'-'+date[0].getDate().toString().padStart(2,'0')
      date[1] = date[1].getFullYear()+'-'+(date[1].getMonth()+1).toString().padStart(2,'0')+'-'+date[1].getDate().toString().padStart(2,'0')
      return date
   },
   dateRangeChanged(){
    let arr = []
    arr = this.handelDate(this.timeRange)
    this.$emit('changed', { timeRangeType: this.timeRangeType, timeRange:arr});
   }   
  },
  computed: {
    datePickerType() {
      switch (this.timeRangeType) {
        case "day":
          this.datePickerFormat = "yyyy 年 MM 月 dd 日";
          return "date";
          break;
        case "week":
          this.datePickerFormat = "yyyy 第 WW 周";
          return "week";
          break;
        case "month":
          this.datePickerFormat = "yyyy 年 MM月";
          return "month";
          break;
        case "between":
          this.datePickerFormat = null;
          return "daterange"
          break
      }
    }
  },
  mounted(){
   if(this.custom){
    this.timeRangeTypes= [{
      text: "日",
      key: "day"
    }, {
      text: "周",
      key: "week"
    }, {
      text: "月",
      key: "month"
    },{
      text:'自定义',
      key:'between'
    }]
   }
  }
}

const StatisticsCardTitle = {
  template: `
  <div class="component-statistics-card_title">
    <slot />
    <slot name="right" />
  </div>
  `
}

const componentMixins = {
  components: {
    statisticsCard,
    StatisticsCardTitle,
    statisticsTimeRange
  },
  methods: {
    getDecimals(numbers) {
      let split = String(numbers).split(".");
      return split[1] ? split[1].length : 0;
    },
  }
};