<template>
  <ai-list v-if="showlist">
    <template slot="title">
      <ai-title title="工作任务"> </ai-title>
    </template>

    <template slot="tabs" class="tabs">
      <el-tabs v-model="currIndex" @tab-click="handleClick">
        <el-tab-pane
          v-for="(tab, i) in tabList"
          :key="i"
          :label="tab.label"
          :name="String(i)"
        >
          <component
            :is="tab.comp"
            v-if="currIndex === String(i)"
            :ref="currIndex"
            :instance="instance"
            :dict="dict"
            @change="changePage"
            :params="params"
            :taskRole="taskRole" 
          ></component>
        </el-tab-pane>
      </el-tabs>
    </template>
  </ai-list>

  <component
    v-else
    @change="changePage"
    :is="componentName"
    :params="params"
    :instance="instance"
    :dict="dict"
    :detailType="detailType"
  ></component>
</template>

<script>
import ExecuteList from './components/ExecuteList'
import InitiatorList from './components/InitiatorList.vue'
import Add from './components/Add.vue'
import Detail from './components/Detail.vue'
import SonDetail from './components/SonDetail.vue'

export default {
  label: '工作任务',
  name: 'AppWorkTask',
  // 组件
  components: {
    ExecuteList,
    InitiatorList,
    Add,
    Detail,
    SonDetail
  },
  props: {
    instance: Function,
    dict: Object
  },
  data() {
    return {
      showlist: true,
      currIndex: '0',
      taskRole: '',
      componentName: '',
      params: {
        taskRole: ''
      },
      detailType: '0', //0我执行详情 1我发起详情
    }
  },
  // 计算
  computed: {
    tabList() {
      return [
        {
          label: '我执行的',
          name: 'ExecuteList',
          comp: ExecuteList,
          taskRole: '1'
        },
        {
          label: '我发起的',
          name: 'InitiatorList',
          comp: InitiatorList,
          taskRole: '0'
        },
        {
          label: '我督办的',
          name: 'ExecuteList',
          comp: InitiatorList,
          taskRole: '2'
        },
        {
          label: '抄送我的',
          name: 'ExecuteList',
          comp: InitiatorList,
          taskRole: '3'
        },
      ]
    }
  },
  // 监听
  watch: {},
  // 实例创建后
  created() {},
  // 实例渲染后
  mounted() {},
  // 方法
  methods: {
    handleClick() {
      this.taskRole = this.tabList[this.currIndex].taskRole
    },
    changePage(data) {
      if (data.type == 'Add') {
        this.componentName = 'Add'
        this.showlist = false
        this.params = data.params
      }
      if (data.type == 'Detail') {
        this.componentName = 'Detail'
        this.showlist = false
        this.params = data.params,
        this.detailType = this.currIndex
      }
      if (data.type == 'SonDetail') {
        this.componentName = 'SonDetail'
        this.showlist = false
        this.params = data.params,
        this.detailType = this.currIndex
      }
      if (data.type == 'list') {
        this.showlist = true
        this.componentName = ''
      }
    }
  }
}
</script>

<style lang="scss"></style>
