<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 ::v-deep .el-card__header {
  padding: 15px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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