<template>
    <div class="work-brnch-box">
        <!-- 上 -->
        <div class="flex-row-start top">
            <div class="flex-row-start dept-left">
                <dept-todo-view title="待办" v-loading="loadingToDo" :dataInfo="toToData"></dept-todo-view>
                <dept-todo-view title="已办" v-loading="loadingHasToDo" :dataInfo="hasToDodoData"
                    style="margin-left: 0"></dept-todo-view>
            </div>
            <div class="flex-row-start dept-chart-box">
                <dept-chart-view id="shelves" title="部门上架" v-loading="loadingResource" :dataList="resourceData"
                    ref="resourceChart" :colorArray="resourceColor">
                </dept-chart-view>
                <dept-chart-view id="apply" title="部门申请" v-loading="loadingApply" :dataList="applyData" ref="applyChart"
                    :colorArray="applyColor">
                </dept-chart-view>
                <dept-chart-view id="demand" title="部门需求" v-loading="loadingRequire" :dataList="requireData"
                    ref="requireChart" :colorArray="requireColor">
                </dept-chart-view>
            </div>
        </div>
        <!-- 中 -->
        <div class="center">
            <center-view></center-view>
        </div>
        <!-- 下 -->
        <div class="bottom">
            <bottom-view></bottom-view>
        </div>
    </div>
</template>
<script>
import BottomView from '../workBench/components/bottom-view.vue'
import CenterView from '../workBench/components/center-view.vue'
import DeptChartView from '../workBench/components/dept-chart-view.vue'
import deptTodoView from '../workBench/components/dept-todo-view.vue'
import * as Apis from './api.js'
import bus from '@/views/bus.js'
export default {
  components: {
    deptTodoView,
    BottomView,
    CenterView,
    DeptChartView
  },
  data () {
    return {
      // 部门待办
      toToData: {
        color: '#f86f01',
        imgSrc: require('@/assets/img/workBench/todo.png'),
        bgColor: 'rgba(228,138,1,0.12)',
        borderColor: 'rgba(250,123,12,0.54)',
        textColor: '#f86f01',
        num: 0,
        list: [],
        type: 'todo',
        // url: 'activiti-my-todo-task',
        url: 'myAgent-CompetencyApplication'
      },
      // 部门已办
      hasToDodoData: {
        noMarginleft: true,
        color: '#21b107',
        imgSrc: require('@/assets/img/workBench/hasToDo.png'),
        bgColor: 'rgba(37,165,13,0.12)',
        borderColor: 'rgba(49,194,20,0.54)',
        textColor: '#21b107',
        num: 0,
        list: [],
        // url: 'activiti-my-join-task',
        url: 'hasToDoTasks-CompetencyApplication'
      },
      // 部门申请
      resourceData: [],
      resourceColor: ['#fe845e', '#0058e1', '#48c6c7', '#48c760', '#9c78ed', '#ff9999', '#d5c438', '#ff3e55'],
      // 部门申请
      applyData: [],
      applyColor: ['#fe845e', '#0058e1', '#48c6c7', '#48c760', '#9c78ed', '#ff9999', '#d5c438', '#ff3e55'],
      // 部门需求
      requireData: [],
      requireColor: ['#fe845e', '#0058e1', '#48c6c7', '#48c760', '#9c78ed', '#ff9999', '#d5c438', '#ff3e55'],
      loadingToDo: false,
      loadingHasToDo: false,
      loadingResource: false,
      loadingApply: false,
      loadingRequire: false
    }
  },
  created () {
    bus.$off('workInit')
    bus.$on('workInit', () => {
      console.log('刷新工作台===================')
      this.getToDo()
      this.getHasToDo()
    })
  },
  mounted () {
    // 部门待办
    this.getToDo()
    // 部门已办
    this.getHasToDo()
    // 上架
    this.getShelvesTotal()
    // 申请
    this.getApplyTotal()
    // 需求
    this.getRequireTotal()
  },
  methods: {
    // 待办
    getToDo () {
      this.loadingToDo = true
      // const data = {
      //   limit: 5,
      //   page: 1
      // }
      this.$http.get('/act/task/myToDoTaskPage?page=1&limit=5').then(res => {
        this.loadingToDo = false
        this.toToData.list = res.data.data.list || []
        this.toToData.num = res.data.data.total || 0
      })
      // Apis.getToDoTask(data, res => {
      //   this.loadingToDo = false
      //   if (res.data.code !== 0) {
      //     return this.$message.error(res.data.msg)
      //   }
      //   console.log('res----待办-------->', res.data)
      //   this.toToData.list = res.data.data.records || []
      //   this.toToData.num = res.data.data.total || 0
      // }, err => {
      //   this.$message.error(err)
      //   this.loadingToDo = false
      // })
    },
    // 已办
    getHasToDo () {
      // const data = {
      //   limit: 5,
      //   page: 1
      // }
      this.loadingHasToDo = true
      this.$http.get('/act/his/getMyHandledInstancePage?ended=1?page=1&limit=5').then(res => {
        this.loadingHasToDo = false
        this.hasToDodoData.list = res.data.data.list || []
        this.hasToDodoData.num = res.data.data.total || 0
      })
      // Apis.getHasToDoTask(data, res => {
      //   this.loadingHasToDo = false
      //   if (res.data.code !== 0) {
      //     return this.$message.error(res.data.msg)
      //   }
      //   console.log('res----已办-------->', res.data)
      //   this.hasToDodoData.list = res.data.data.records || []
      //   this.hasToDodoData.num = res.data.data.total || 0
      // }, err => {
      //   this.$message.error(err)
      //   this.loadingHasToDo = false
      //   console.log('err-----已办------->', err)
      // })
    },
    // 部门上架
    getShelvesTotal () {
      this.loadingResource = true
      Apis.getTotalByDept({}, res => {
        this.loadingResource = false
        if (res.data.code !== 0) {
          return this.$message.error(res.data.msg)
        }
        console.log('res----部门上架-------->', res.data)
        this.resourceData = this.formatList(res.data.data.total || [])
        this.$nextTick(() => {
          this.$refs.resourceChart.initChart(this.resourceData)
        })
      }, err => {
        this.$message.error(err)
        this.loadingResource = false
      })
    },
    // 部门申请
    getApplyTotal () {
      this.loadingApply = true
      Apis.getApply({}, res => {
        this.loadingApply = false
        if (res.data.code !== 0) {
          return this.$message.error(res.data.msg)
        }
        console.log('res----部门申请-------->', res.data)
        this.applyData = this.formatList(res.data.data.total || [])
        this.$nextTick(() => {
          console.log('this.applyData------------>', this.applyData)
          this.$refs.applyChart.initChart(this.applyData)
        })
      }, err => {
        this.$message.error(err)
        this.loadingApply = false
      })
    },
    formatList (list = [], nameStr = 'type') {
      const arr = []
      list.map(v => {
        const obj = {}
        obj.name = v[nameStr]
        obj.value = v.count
        arr.push(obj)
      })
      return arr
    },
    // 部门需求
    getRequireTotal () {
      this.loadingRequire = true
      Apis.getRequire({}, res => {
        this.loadingRequire = false
        if (res.data.code !== 0) {
          return this.$message.error(res.data.msg)
        }
        console.log('res----部门需求-------->', res.data)
        this.requireData = this.formatList(res.data.data.total || [], 'flag')
        this.$nextTick(() => {
          this.$refs.requireChart.initChart(this.requireData)
        })
      }, err => {
        this.$message.error(err)
        this.loadingRequire = false
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.margin-h-16 {
    margin: 0 16px;
}

.flex-row-start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.work-brnch-box {

    .top {
        height: 284px;
        margin-bottom: 16px;

    }

    .dept-left {
        width: 836px;
        background: #fff;
        margin-right: 16px;
        box-shadow: 2px 2px 5px #ccc;
    }

    .dept-chart-box {
        width: 780px;
        height: 100%;
        background: #fff;
        box-shadow: 2px 2px 5px #ccc;
        &>div{
          border-left: 1px solid rgba($color: #d0d4de, $alpha: 0.5);
        }
        &>div:nth-of-type(1){
          border: none;
        }
    }
}
</style>
