<template>
  <div id="homePage">
    <v-runtime-template :template="html" ref="homeHtmlTemplate"/>
  </div>
</template>

<script>
import VRuntimeTemplate from "v-runtime-template";

import homeTodo from "@/components/home/homeTodo.vue";
import todayMeeting from "@/components/home/todayMeeting.vue";
import oftenFlow from "@/components/home/oftenFlow.vue";
import homeNotice from "@/components/home/homeNotice.vue";
import homeNews from "@/components/home/homeNews.vue";
import homeCarousel from "@/components/home/homeCarousel.vue";
import oftenSystem from "@/components/home/oftenSystem.vue";
import customChart from "@/components/home/customChart.vue";

export default {
  name: "customHome",
  props: ["html", "data"],
  components: {
    VRuntimeTemplate,
    homeTodo,
    todayMeeting,
    oftenFlow,
    homeNotice,
    homeNews,
    homeCarousel,
    oftenSystem,
    customChart
  },
  data() {
    return {};
  },
  methods: {
    //刷新列表
    forceUpdateHtml() {
      this.$refs.homeHtmlTemplate.$forceUpdate();
    },
    refreshList(columnName) {
      this.$parent.getColumnData(columnName);
    },
    //打开更多
    openMore(url) {
      this.$router.push({ path: url });
    },
    //点开详情
    handleRowClick(url) {
      this.$router.push(url);
    },
    taskListClick(row){
      if (row.status=='SHARE' || row.status=='BACKSHARE') {
         if (row.identityList && row.identityList.length==1) {      
            this.$router.push("/task/" + row.id+"/"+row.identityList[0].id);   
         }else{
            let html='<select ref='+Math.random()+' id="approvalLeaderSelect" style="width: 200px;height: 30px;border-radius: 4px;margin: 20px 70px;" ><option value="">请选择</option>';
             row.identityList.forEach(identity => {
                html+='<option value="'+identity.id+'">'+identity.name+'</option>';
             });
             html+='</select>';
             let this_ =this;
             this.$alert(html, '请选择一个领导代为审批', {
                dangerouslyUseHTMLString: true,
                beforeClose:function(action, instance, done){
                  if(action=='confirm'){
                    let se = document.getElementById('approvalLeaderSelect');
                    if(se.selectedIndex==0){
                      this.$message.warning("请选择代为审批的领导");
                    }else{
                      instance.close();
                      this_.$router.push("/task/" + row.id+"/"+se[se.selectedIndex].value);
                    }
                  }else{
                    instance.close();
                  }
                }
            });
         }
      } else {
         this.$router.push("/task/" + row.id+"/0");
      }
    }
  },
  created() {
    this.$nextTick(function() {
      this.$refs.homeHtmlTemplate.$options["methods"] = {};
    });
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/element-variables.scss";
.el-card /deep/ .el-card__header {
  padding: 15px;
}

/deep/.el-card /deep/ .el-card__header b {
  border-left: 3px solid #00f;
  padding: 0 0 0 10px;
}

/deep/.el-card .el-card__body {
  padding: 0 10px;
}

/deep/ .more-button {
  float: right;
  padding: 3px 0;
  color: #999;
  font-weight: bold;
  font-size: 13px;
}

/deep/ .tools-icon {
  float: right;
  padding: 3px 10px;
  color: #999;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
}

/deep/ .more-button:hover, /deep/ .tools-icon:hover {
  color: $--theme-color;
}

.near-col /deep/ .el-card {
  margin-bottom: 15px;
}

/deep/ .el-table::before {
  height: 0px;
}

/deep/ .el-card__header {
  padding: 10px 20px;
}

/deep/ .el-badge__content.is-fixed {
  top: 8px;
  right: 0px;
}

/deep/.el-table__row > td {
  padding: 4px 0;
}

/deep/.custom_column .el-col .el-card {
  height: 100%;
}

/deep/.often-flow-container {
  padding: 10px 10px 0px 10px;
}

/deep/.often-flow-container .el-tag {
  margin: 0 5px 5px 0;
  color: $--color-text-regular;
  cursor: pointer;
}

/deep/.often-flow-container .el-tag:hover {
  color: $--theme-color;
}
</style>
