<template>
  <div v-if="dialogVisible">
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="75%"
  >
    <div class="winTabs">
      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane
          :label="item.label"
          :name="item.id"
          v-for="(item, index) of tabList"
          :key="item.id"
        >
          <slot :name="item.name" v-if="item.type == 'detail'">
            <ModalDail :key="item.name" :data="montList" ref="detail" @visblit="visblit"/>
          </slot>
          <slot :name="item.name" v-if="item.type == 'commission'">
            <flowSheet :key="item.name" :data="montList"  @visblit="visblit" :ref="item.ref"/>
          </slot>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
  </div>
</template>

<script>
import  {commitAudit,getUserList} from '@/api/utils'
import ModalDail from "@/views/commission/components/modalDail";
import flowSheet from "@/views/commission/components/flowSheet ";
export default {
  components:{
    ModalDail,flowSheet,
  },
  props: {
    tabList: {
      //tab栏列表
      type: Array,
      default: () => [
        {
          label: "详情",
          id: "1",
          name: "detail",
          type: "detail",
          data:null,
        },
        {
          label: "流转详情",
          id: "2",
          name: "commission",
          type: "commission",
          ref: "commission",
          data: null,
        },
      ],
    },
  },
  data() {
    return {
      activeName: this.tabList[0].id, //tab栏选中项
      dialogVisible:false,
      montList:null,//父组件数据
      viable:true,
      title:'',
    };
  },
  created() {

  },
  mounted() {
    console.log(this.montList)
  },
  methods: {
    initData() {
      this.activeName = this.tabList[0].id;
    },
    handleTabClick() {
      const item = this.tabList.find((item) => item.id == this.activeName);
      if(item.id==2){
        this.viable=true
        this.$nextTick(()=>{
          this.$refs[item.ref][0].getDataList();
        })
      }
      if(item.id==1){
        this.viable=false
      }
    },
    visblit(){
      this.dialogVisible=false
    },
    handle(row){
      this.dialogVisible=true
      this.montList=row
      this.tabList[0].data=row
      this.tabList[1].data=row
      this.activeName = this.tabList[0].id;
      this.title= '任务详情'+"【"+this.montList.nodeLabel+"】"
    },
  }
};
</script>

<style lang="scss" scoped>
.demo-ruleForm{
  position: relative;
}
.winTabs{
  height: 500px;
}
</style>
