<template>
  <div :elid="wrapId" :ref="wrapId" :style="[wrapStyle]">
    <div style="display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;">
      <el-date-picker
        v-model="dateValues.value"
        :type="dateValues.type"
        :format="dateValues.formatter"
        :placeholder="dateValues.placeholder"
        :start-placeholder="dateValues.startPlaceholder"
        :end-placeholder="dateValues.endPlaceholder"
        @change="change"
        :style="dateStyle()"
      >
      </el-date-picker>
    </div>
  </div>
</template>

<script>
import bm from "../../mixins/base-mixins";

export default {
  name: "fviz-date",
  mixins: [bm],
  data() {
    return {
      dateValues: {
        value: this.objVal.defaultValue,
        type: '',
        formatter: '',
        placeholder: '',
        startPlaceholder: '',
        endPlaceholder: ''
      }
    };
  },
  computed: {},
  watch: {
    'objVal.defaultValue': {
      handler: function (newVal, oldVal) {
          this.dateValues.value = newVal;
      },
    }
  },
  methods: {
    dateStyle(){
      $("[elid = '" + this.wrapId + "'] .el-input").css({
        "width": this.objVal.fwidth + "px"
      });

      $("[elid = '" + this.wrapId + "'] .el-range-editor--small .el-input").css({
        "width": this.objVal.fwidth + "px"
      });

      let style = {
        "color": this.objVal.dateFontColor,
        "font-size": this.objVal.dateFontSize + "px",
        "font-weight": this.objVal.dateFontWeight,
        "border": this.objVal.dateBorderColor + " " + this.objVal.dateBorderType + " " +this.objVal.dateBorderWidth + "px",
        "height": this.objVal.fheight + "px",
        "background-color": this.objVal.backgroudColor
      };

      if (this.objVal.dateBorderRadius) {
        let radiusObj = eval(this.objVal.dateBorderRadius);
        style["border-top-left-radius"] = radiusObj[0] + "px";
        style["border-top-right-radius"] = radiusObj[1] + "px";
        style["border-bottom-right-radius"] = radiusObj[2] + "px";
        style["border-bottom-left-radius"] = radiusObj[3] + "px";
      }

      $("[elid = '" + this.wrapId + "'] .el-input__inner").css(style);

      this.dateValues.type = this.objVal.dateType;
      this.dateValues.formatter = this.objVal.dateFormatter;
      this.dateValues.placeholder = this.objVal.placeholder;
      this.dateValues.startPlaceholder = this.objVal.startPlaceholder;
      this.dateValues.endPlaceholder = this.objVal.endPlaceholder;

    },
    formatterDateTime(date){
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? ('0' + m) : m;
      var d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      var h = date.getHours();
      h = h < 10 ? ('0' + h) : h;
      var minute = date.getMinutes();
      minute = minute < 10 ? ('0' + minute) : minute;
      var second = date.getSeconds();
      second = second < 10 ? ('0' + second) : second;
      if(this.objVal.dateType == "year"){
        return y;
      }else if(this.objVal.dateType == "month"){
        return y + '-' + m;
      }else if(this.objVal.dateType == "date"){
        return y + '-' + m + '-' + d;
      }else {
        return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
      }
    },
    change(val){
      var date = new Date(val);
      var dateVal = this.formatterDateTime(date);
      this.comId.value = dateVal;
      this.chain(this.comId.value);
    },
    chain(value){
      let me = this;
      //组件id
      let comId = me.objVal.id;

      //控件模板中配置变量赋值
      //id
      if (eval(comId) && eval(comId).hasOwnProperty("fvizId")) {
        if (me.dataObj["id"]) {
          eval(comId)["fvizId"] = me.dataObj["id"];
        }
      }
      //分类名称
      if (eval(comId) && eval(comId).hasOwnProperty("fvizName")) {
        eval(comId)["fvizName"] = value;
      }

      //联动
      if (eval(comId) && eval(comId).chain) {
        eval(comId).chain();
      }
    },
    //初始化
    init() {
       this.comId.value = '';
    },
    //刷新
    refresh() {
      this.init();
    },
  },
  mounted() {
    this.dateStyle();
  },
  created() {
    if (!this.preview) {
      this.init();
    }
  },
};
</script>
