<!--
  @description: 桌面
-->
<template>
  <div class="home_wrap">
    <el-row :gutter="8">
      <el-col :lg="elcolData.todolg" :xl="elcolData.elcolxl">
        <div class="bg-purple">
          <div class="left-title clearfix">
            <!-- <span class="pointer" @click="seeMore">
              待办任务
              <el-badge :value="todoTotal" class="mark" />
            </span> -->
          </div>
          <!-- <desktopTodoList @getTodoTotal="getTodoTotal" /> -->
          <!-- <div class="enterInto p16-0" @click="seeMore">进入待办列表查看更多</div> -->
        </div>
      </el-col>
      <!--roleCode=11 项目经理展示 其余角色不展示-->
      <!--      <el-col v-if="roleCode==='11'" :lg="8" :xl="6" class="mb16">
        <div class="bg-purple">
          <div class="left-title clearfix">
            <span>开标提醒</span>
            <div class="fr">
              <div class="remind">
                <i class="iconfont icon-message" />今日有标
              </div>
            </div>
          </div>
          <calendar
            :res-date="bidOpeningCurrentMonthInfo"
            @childCertainMonth="getCertainMonthOpening"
          />
        </div>
      </el-col>-->
      <!--      <el-col :lg="16" :xl="18">
        <div class="bg-purple minHeight" />
      </el-col>
      <el-col :lg="8" :xl="6">
        <div class="bg-purple minHeight" />
      </el-col>-->
    </el-row>
  </div>
</template>
<script>
import { getCertainMonthOpeningList } from '@/api/bidding/bidBulletin'
// 组件
import calendar from '@comp/bidding/calendar' // 日历组件
import desktopTodoList from './work/desktopTodo-list'

export default {
  name: 'Home',
  components: {
    calendar, // 日历组件
    desktopTodoList // 待办列表组件
  },
  data() {
    return {
      roleCode: '', // 角色code
      // 待办列表el-col 占用宽度
      elcolData: {
        todolg: 16, // 待办列表
        elcolxl: 18
      },
      todoTotal: 0, // 待办总数
      bidOpeningCurrentMonthInfo: [] // 当前月份开标信息
    }
  },
  created() {
    this.handleRoleCode()
  },
  methods: {
    // 根据角色判断是否显示开标日历
    handleRoleCode() {
      this.roleCode = this.$store.getters.info.currentRol && this.$store.getters.info.currentRol.roleCode // 角色code 11代理机构
      // roleCode !== '11'不是项目经理角色 不展示开标日历  待办列表宽度占24
      // if (this.roleCode !== '11') {
      this.elcolData.todolg = 24
      this.elcolData.elcolxl = 24
      // }
    },
    // 项目经理-获取某月开标列表(日历组件触发)
    getCertainMonthOpening(Month) {
      getCertainMonthOpeningList({ currentDate: Month }).then(res => {
        this.bidOpeningCurrentMonthInfo = res.data
      }).catch(() => {
      })
    },
    // 获取子组件待办列表传回待办总数
    getTodoTotal(todoTotal) {
      this.todoTotal = todoTotal
    },
    // 进入列表查看待办
    seeMore() {
      // this.$router.push({
      //   path: '/work/todo'
      // })
    }
  }
}
</script>
<style lang="less" scoped>
  @import '~@assets/style/common/maincommon.less';
  .home_wrap{
    width: 100%;
    overflow-x: hidden;
    background-color: #edf0f5;
    min-height: calc(100vh - 56px - 20px)!important;
    .bg-purple {
      //min-height: 370px;
      //max-height: 370px;
      min-height: calc(100vh - 56px - 20px)!important;
      background-color: #fff;
      padding: 0 8px;
      font-size: 14px !important;
      .left-title {
        display: block;
        padding: 8px 0;
      }
    }
    .minHeight{
      min-height: 510px;
      max-height: 510px;
    }
    .mark {
      margin-top: 10px;
    }

    .renewButton {
      line-height: 14px;
      height: auto;
      padding: 8px 14px;
      width: auto;
    }

    .enterInto {
      font-size: 14px;
      text-align: center;
      color: #6687ed;
      background-color: #fff;
      cursor: pointer;
    }

    .remind {
      width: 108px;
      height: 32px;
      line-height: 32px;
      font-family: PingFangSC-Medium;
      background: #ffcfc0;
      border-radius: 24px 0 0 24px;
      color: #ff6030;
      i {
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        margin: 0 5px;
        border-radius: 50%;
        display: inline-block;
        background-color: #ff6030;
        color: #fff;
      }
    }
    .quick-entry-nav{
      min-height: 300px;
      li{
        margin: 20px 0;
        width: 32%;
        display: inline-block;
        text-align: center;
        img {
          width: 48px;
          height: 48px;
          margin: 0 auto;
          display: block;
        }
      }
    }

  }
</style>
