<template>
  <div style="margin-bottom: 20px;">
      <Card :padding="30" style="height: 188px;width: 1610px;">
      <template #title>
        <p >
          <Icon type="ios-film-outline"></Icon>
          常用业务事项
        </p>
      </template>
      <template #extra>
        <a href="#" @click.prevent="toWorkbenchList">
          <Icon type="ios-loop-strong"></Icon>
          更多
        </a>
      </template>
        <Row :gutter="16">
          <Col v-for="(bus,index) in BusList" :span="4" :key="bus.busCode" >
          <template v-if="index<6">
            <Card @click.native="toBusForm(bus)" style="cursor: pointer">
              <Row >
                <Col :span="6">
                  <img src="./defalut.png" width="40" height="40"/>
                </Col>
                <Col :span="18">
                  <h3 style="margin-top: 5px;">{{bus.busName}}</h3>
                </Col>
              </Row>
            </Card>
            <commonComponent v-if="nowBusCode === bus.busCode" openType="draftBox" :value="nowBus" :show.sync="showCommonComponent"></commonComponent>
            </template>
          </Col>
        </Row>
      </Card>
  </div>
</template>

<script>
  import commonComponent from '../common-component.vue'
  import { getWorkbench } from '../workflow-api'

  let $this
  export default {
    name: 'workflowWorkbenchCard',
    components: {
      commonComponent,
    },
    data () {
      return {
        showCommonComponent: false,
        openPanels: [],//展开的列表的集合
        /*childrenGroup: [],//子分类*/
        BusList: [],//子业务
        nowBus: {},//当前业务
        nowBusCode: '',//当前业务编码
        commonList: [],//固化常用列表
        fieldList: [//用户可以自行选择查询的字段列表及配置

        ]
      }
    },
    methods: {
      toWorkbenchList () {
        this.$router.push({
          name: 'my-apply-list'
        })
      },
      toBusForm (bus) {
        this.nowBus = bus
        this.nowBus.openType = 'draftBox'
        this.nowBusCode = bus.busCode
        this.showCommonComponent = true
      },
      handleBusList(data){
        if (this.BusList.length>=6){
          return;
        }
        if (data.childrenBus && data.childrenBus.length>0){
          this.BusList.push(...data.childrenBus)
        }
        if (data.childrenGroup && data.childrenGroup.length>0){
          data.childrenGroup.forEach(n =>{
            this.handleBusList(n)
          })
        }
      },
      reloadData() {
        this.BusList = []
        getWorkbench(this.$config.systemCode).then(res => {
          if (res.data.result) {
            this.handleBusList(res.data.result)
          }
        }).catch(err => {
          this.BusList = [];
          this.$Message.error('查询失败！')
          console.log(err)
        })
      },
    },
    mounted () {
      this.reloadData();
      $this = this
    },
    watch: {
      /*group: {
        immediate: true,
        handler: function () {
          //赋值
          if (this.group) {
            this.childrenGroup = this.group.childrenGroup
            this.childrenBus = this.group.childrenBus
            if (this.childrenGroup && this.childrenGroup.length > 0) {
              this.initOpenPanels()
            }
          } else {
            this.childrenGroup = []
            this.childrenBus = []
            this.openPanels = []

          }
        }
      }*/
    }
  }
</script>

<style>

</style>
