<template>
  <el-drawer
    v-model="drawerData.drawerShow"
    title="评审配置"
    direction="rtl"
    :before-close="drawerData.handleClose"
    size="70%"
  >
    <el-row :gutter="20">
      <el-col :span="6">
        <div style="height: 40px">评审流程</div>
        <el-tree
          :data="drawerData.treeData"
          accordion
          @node-click="drawerData.handleNodeClick"
        />
      </el-col>
      <el-col :span="18">
        <el-tabs class="demo-tabs">
          <el-tab-pane v-for="(item, index) in list" :key="index">
            <template #label>
              <span class="custom-tabs-label">
                <span>{{item.label}}</span>
              </span>
            </template>
            <el-table :data="drawerData.tableData"  style="width: 100%">
              <el-table-column type="selection" />
              <el-table-column prop="name" label="交付物" />
              <el-table-column prop="type" label="评审方式" width="100" />
              <el-table-column prop="isComment" label="必须审批" width="100" />
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </el-drawer>
</template>

<script lang="ts">
import { reactive } from 'vue'
interface Tree {
  label: string
  children?: Tree[]
}
interface JudgeTableObj{
  name: string;
  type: string;
  isComment: '是' | '否'
}
export default {
  name: 'Judge',
  props: {
    list: {
      type: Array,
      default: null
    }
  },
  setup() {
    const data: Tree[] = [
      {
        label: '无分类',
        children: [
          {
            label: '重大里程碑节点'
          },
          {
            label: '立项评审'
          },
          {
            label: '研发方案评审'
          },
          {
            label: '文档评审流程'
          },
          {
            label: '项目计划发布评审'
          },
          {
            label: 'GR1质量阀里程碑评审'
          },
          {
            label: '新文档评审流程'
          }
        ]
      },
      {
        label: 'DCP',
        children: [
          {
            label: '重大里程碑节点'
          },
          {
            label: '立项评审'
          },
          {
            label: '研发方案评审'
          }
        ]
      },
      {
        label: 'TR',
        children: [
          {
            label: '项目计划发布评审'
          },
          {
            label: 'GR1质量阀里程碑评审'
          },
          {
            label: '新文档评审流程'
          }
        ]
      },
      {
        label: '文档',
        children: []
      }
    ]
    const tableData: JudgeTableObj[] = [
      {
        name: 'admin',
        type: '不需要评审',
        isComment: '否'
      },
      {
        name: '测试',
        type: '不需要评审',
        isComment: '是'
      }
    ]
    const drawerData = reactive({
      drawerShow: false,
      activeName: '',
      treeData: data,
      tableData: tableData,
      show: () => {
        drawerData.drawerShow = true
      },
      handleNodeClick: (data: Tree) => {
        console.log(data)
      }
    })
    return { drawerData }
  }
}
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
