<template>
  <div>
    <entity-content :data="mess" :colNum = "taskItems.showCol" :homeSettings = "homeSettings" :width = "width">
      <entity-card slot-scope="item" :item="item" :colNum = "taskItems.showCol" :homeSettings = "homeSettings" :width = "width">
        <!-- <div slot="message" style="display:inline;position:relative;top:-1px;left:1px;"> -->
          <msg-count-tips slot="message" :groupId="item.key" :needLoad="false"></msg-count-tips>
        <!-- </div> -->
        <div slot="top" class="card-action-top">
          <TaskIcon :mess="mess" :tag="tag" :item="item" :iconbtnStyle="iconbtnStyle" :userId="userId" :Menus="!taskItems.menu.hideDropdown"></TaskIcon>
        </div>
        <div slot="bottom" class="card-action-bottom" :style = "acBotStyle">
      
          <c-btn @on-click="taskEnterSkip('DataInput',item.key,item.creater)" 
          name="cBtn1" class="cBtn-position cBtn1-left"  :style="bottomStyle"
          v-if= "item.IsReleased && (item.globalTask.IsCreate || item.globalTask.IsPerform || (item.globalTask.IsShare && item.globalTask.TaskShareType != taskType.Business))">立即进入</c-btn>

          <c-btn @on-click="taskEnterSkip('BusinessModel',item.key,item.creater)" 
          name="cBtn2" class="cBtn-position cBtn2-left" :style="topStyle"
          v-if= "(item.globalTask.IsCreate || item.globalTask.TaskShareType == taskType.Business || item.globalTask.TaskShareType == taskType.All) && item.templateUrl">修改模板</c-btn>
        </div>
      </entity-card>
    </entity-content>
  </div>
</template>


<script>
import entityContent from "@components/nr/components/nr-func-content";
import entityCard from "@components/nr/components/nr-func-card";
import svgIcon from "@components/nr/components/nr-func-icon";
import cBtn from "@components/nr/components/nr-func-cBtn";
import msgCountTips from "../Message/MsgCountTips";
import { mapMutations } from "vuex";
import taskApi from "../../api/task.js";
import TaskIcon from './TaskIcon';
export default {
  components: { entityContent, entityCard, TaskIcon, cBtn, "msg-count-tips": msgCountTips },
  data: () => ({}),
  computed: {
    taskItems() {
      let id = this.itemid,
        taskItems = this.$store.getters.getTaskPro(id);
      if (!taskItems || taskItems.length == 0) {
        this.initTaskProById(id);
      }
      let taskPro = this.$store.getters.getNodeProp(id);
      if (!taskPro || taskPro.length == 0) {
        let newTaskPro = this.$store.getters.getTaskPro(id).taskPro;
        this.setNodeProp({ id: id, taskPro: newTaskPro });
      }
      $.extend(
        this.$store.getters.getTaskPro(id).taskPro,
        this.$store.getters.getNodeProp(id).taskPro
      );
      return this.$store.getters.getTaskPro(id).taskPro;
    },
    tag() {
      let id = this.itemid;
      return this.$store.getters.getTag(id).curTag;
    },

    homeSettings() {
      return this.$store.getters.getItemById(this.itemid).contentSetting;
    },
    width() {
      let id = this.itemid;
      return this.$store.getters.getWidth(id);
    },
    height(){
      let id = this.itemid;
      return this.$store.getters.getHeight(id);
    },
    iconbtnStyle() {
      // let baseWidth = parseInt(this.width / this.taskItems.showCol - 20),
      // afterCalWidth = baseWidth > 270 ? 270 : (baseWidth < 150 ? 150 : baseWidth);
      return {
        width: "24px",
        height: "24px"
      };
    },
    topStyle() {
      let baseWidth = parseInt(this.width / this.taskItems.showCol - 20),
        afterCalWidth =
          (baseWidth > 270 ? 270 : baseWidth < 200 ? 200 : baseWidth) / 3,
        minWidth = afterCalWidth < 200;

        if(baseWidth<=210){
          return{
            bottom:10 + "px", 
            "margin-left":10 + "px",
          }
          
        }else if(baseWidth>210){
          return{
            bottom:10 + "px",
           "margin-left":10+"px",
          }   
        } 
    },
    bottomStyle() {
      let baseWidth = parseInt(this.width / this.taskItems.showCol - 20),
        afterCalWidth =
          (baseWidth > 270 ? 270 : baseWidth < 200 ? 200 : baseWidth) / 3,
        minWidth = afterCalWidth <= 200;
        // console.log("baseWidth:",baseWidth);
        if(baseWidth ==211){
          return{
            bottom:10 + "px", 
           "padding-right":5 + "px",
          }
        }
        if(baseWidth==234){
          return{
            bottom:10 + "px", 
           "padding-right":8 + "px",
          }
        }   
       if(baseWidth<=210){
          return{
            bottom:10 + "px", 
           "padding-right":5 + "px",
          }

        }else if(baseWidth>210){
          return{
            bottom:10 + "px",
           "padding-right" : 12 + "px",
          }   
        }         
    },
    acBotStyle() {
      if(!this.width) return;
        return {       
          height: (this.width / this.taskItems.showCol - 20) * 2 / 3 - 31 + "px"
        };
    }
  },
  methods: {
    ...mapMutations(["initTaskProById", "setNodeProp"]),
    taskEnterSkip(type, _taskId_, _userId_) {
      let data = {
        _taskId_: _taskId_,
        _userId_: _userId_
      };
      taskApi.taskEnterSkip(type, data);
    }
  },
  props: {
    mess: {
      type: Array
    },
    itemid: {
      type: String
    },
    userId: {
      type: String
    },
    taskType: {
      type: Object
    }
  },
  created() {}
};
</script>
<style scoped>
div.card-action-top, div.card-action-bottom {
  margin: 0;
  height: 100%;
}
div.card-action-top img {
  margin: 0 12px 0 0;
}
div.card-action-top img:nth-last-child(1) {
  margin: 0 15px 0 0;
}
.cBtn-position{
  position: absolute;
  font-family: "微软雅黑";
  font-size:12px;
  border-radius: 0 !important;
  line-height: 16px !important;
  float:left;
}
.cBtn-position:hover{
  color:#50a4e2;

} 
.cBtn1-left{
   left:26%;
   border-right:1px solid #cecece;
   /*padding-right:5px;*/
   margin-right:10px;
}
.cBtn2-left{
/* margin-left:10px;*/

}

</style>
