<template>
    <div class="stateDiv" :style="{width:stateStatsData.width+'px'}">
      <div v-show="showTips">
        请在属性栏选择任务
      </div>
      <div v-show="!showTips" class="showContainer" 
          :style="{width:stateStatsData.width+'px', height:(stateStatsData.height)+'px'}">
        <div class="stateStatstitle" :style="titleStyle" >
          {{title}}
          <Icon v-show="showReLinkIcon" @click="redo" class="redo header" type="md-redo"  />
        </div>
        <div class="stateContainer" :style="contentStyle">
            <StateStats :item-id="itemId" :base-info="baseInfo" :styles="styles"></StateStats>
        </div>
      </div>
    </div>
</template>

<script>
import * as utils from "@libs/base.js";
import StateStats from "@modules/statestats/components/StateStats.vue";

export default {
  mounted() {
    let self = this;
    let curTask = this.$store.getters.getNodeProp(this.itemId);
    this.showTips = true;
    if (curTask && curTask.selectedTask) {
      this.taskId = curTask.selectedTask.Code || 0;
      this.periodType = curTask.selectedTask.PeriodType;
      this.startDate = curTask.selectedTask.StartDate;
      this.title = curTask.selectedTask.Title;
      this.showReLinkIcon = curTask.selectedTask.ShowReLinkIcon;
      this.showTips = this.taskId == 0;
    }

    this.$root.$on(window.On_StateStats_TaskChanged + this.itemId, function(
      msg
    ) {
      self.showTips = false;
      self.taskId = msg.Code;
      self.periodType = msg.PeriodType;
      self.startDate = msg.StartDate;
      self.title = msg.Title;
      self.showReLinkIcon = msg.ShowReLinkIcon;
    });

    this.$root.$on(window.On_ReloadChanged + this.itemId, function(msg) {
      self.showReLinkIcon = msg;
    });
  },
  data() {
    return {
      showTips: true,
      showReLinkIcon: false,

      taskId: 0,
      periodType: 0,
      startDate: "",
      title: "",
      entityKey: "",
      period: ""
    };
  },

  props: ["itemId"],
  computed: {
    stateStatsData() {
      return this.$store.getters.getItemById(this.itemId);
    },

    baseInfo() {
      return {
        taskId: this.taskId,
        period: this.period,
        entityKey: this.entityKey,
        periodType: this.periodType,
        showFilledChart: true,
        showStateList: false,
        showChildrenState: false,
        showHeader: false
      };
    },

    styles() {
      return {
        width: this.stateStatsData.width,
        height: this.stateStatsData.height - 50
      };
    },

    contentSetting() {
      return this.$store.getters.getContentSettingById(this.itemId);
    },

    titleStyle() {
      let setting = this.contentSetting;
      let style = {
        "font-size": setting.TitleFontSize + "px",
        color: setting.TitleColor,
        "text-align": setting.TitleAlign,
        "background-color": setting.TitleBg,
        border:
          setting.TitleBorderWidth + "px solid " + setting.TitleBorderColor
      };

      return style;
    },

    contentStyle() {
      let setting = this.contentSetting;
      let style = {
        "font-size": setting.PrimFontSize + "px",
        color: setting.PrimColor,
        "background-color": setting.ContentBg,
        width: this.stateStatsData.width + "px",
        height: this.stateStatsData.height - 30 + "px"
      };

      return style;
    }
  },

  methods: {
    redo() {
      let urlOp = ["_taskId_=" + this.taskId, "period" + this.period];
      let redoUrl = "Workflow/StateStats/Index?";
      let url = redoUrl + urlOp.join("&");
      window.open(utils.doRemoteUrl(url));
    }
  },
  components: { StateStats },

  watch: {}
};
</script>
<style>
html {
  font-size: 100px;
}
</style>
<style scoped>
.stateDiv {
  width: 100%;
  height: 100%;
}
.stateStatstitle {
  height: 50px;
  line-height: 50px;
  text-align: center;
  width: 100%;
  text-indent: 15px;
}
.showContainer,
.stateContainer {
}

.redo {
  right: 25px;
  padding-right: 0;
  position: absolute;
  padding-left: 0;
  cursor: pointer;
  width: auto;
  line-height: 30px;
  border: none;
}
</style>

