<template>
  <div class="app-container">
    <div class="flex-center-h" style="margin-bottom: 20px">
      <dropdown-check
        v-model:modValue="projectMasterData.projectTypeSelect"
        title="项目类型"
        :list="projectMasterData.projectType"
        prop="cname"
        @onConfirm="projectMasterData.onConfirm"
      />
      <dropdown-check
        v-model:modValue="projectMasterData.projectTypeChildSelect"
        title="项目子类"
        :list="projectMasterData.projectType"
        prop="cname"
        @onConfirm="projectMasterData.onConfirm"
        style="margin-left: 20px"
      />
      <el-button type="primary" style="margin-left: 20px" size="small" @click="projectMasterData.showDialog">新建模板</el-button>
    </div>
    <div class="list" v-for="(item, index) in projectMasterData.list" :key="index">
      <el-card class="box-card">
        <template #header>
          <div class="card-header space-between">
            <div class="flex-center-h">
              <el-icon style="margin-right: 10px"><CopyDocument /></el-icon>
              <span style="margin-right: 10px">{{item.name}}</span>
              <el-dropdown style="margin-right: 10px">
                <span class="el-dropdown-link" style="color: #1890ff">
                  <el-icon><Setting /></el-icon>
                  操作
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="projectMasterData.showDialog(item.id)">编辑</el-dropdown-item>
                    <el-dropdown-item @click="projectMasterData.delete(item.id)">删除</el-dropdown-item>
                    <el-dropdown-item @click="projectMasterData.showDialog(item.id)">复制现有模板</el-dropdown-item>
                    <el-dropdown-item>复制现有项目</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <el-dropdown>
                <span class="el-dropdown-link" style="color: #1890ff">
                  {{ item.isEnabled ? '停用' : '启用' }}
                  <el-icon class="el-icon--right">
                    <arrow-down />
                  </el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="item.isEnabled = false">启用</el-dropdown-item>
                    <el-dropdown-item @click="item.isEnabled = true">停用</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
            <div class="flex-center-h">
              <el-link type="primary" link @click="projectMasterData.showPhases(item)">配置阶段</el-link>
              <el-link type="primary" link @click="projectMasterData.showFolder(item.id)">配置文件夹</el-link>
              <el-link type="primary" link @click="projectMasterData.showExpectDoc(item)">配置交付文档</el-link>
              <el-link type="primary" link @click="projectMasterData.showPlan(item.id)">配置WBS计划</el-link>
              <el-link type="primary" link @click="projectMasterData.showJudge(item)">评审配置</el-link> 
            </div>
          </div>
          <div style="width: 600px; margin-top: 10px;">
            <el-descriptions :column="3">
              <el-descriptions-item label="项目类型">全局模板</el-descriptions-item>
              <el-descriptions-item label="事业部">{{item.bizUnit}}</el-descriptions-item>
              <el-descriptions-item label="创建日期">{{item.createTime}}</el-descriptions-item>
            </el-descriptions>
          </div>
        </template>
        <el-steps :active="item.templatePhases.length" finish-status="success" simple>
          <el-step v-for="(step, index) in item.templatePhases" :key="index" :title="step.label" />
        </el-steps>
      </el-card>
    </div>
  </div>
  <project-master-edit ref="masterEdit" :list="projectMasterData.projectType" />
  <template-phases ref="templatePhasesDialog" :master="projectMasterData.master" />
  <folder ref="folderWrap" />
  <expectDoc ref="expectDocWrap" :list="projectMasterData.expectDocList" />
  <plan ref="planWrap" />
  <judge ref="judgeWrap" :list="projectMasterData.master.templatePhases" />
</template>

<script lang="ts">
import { getTableList } from '@/services/api/customTable'
import { reactive, ref } from 'vue'
import DropDownCheck from './components/dropdownCheck.vue'
import ProjectMasterEdit from './components/projectMasterEdit.vue'
import TemplatePhases from './components/templatePhases.vue'
import Folder from './components/folder.vue'
import ExpectDoc from './components/expectDoc.vue'
import Plan from './components/plan.vue'
import Judge from './components/judge.vue'
import { ElMessageBox } from 'element-plus'
export default {
  name: 'ProjectMaster',
  components: {
    'dropdown-check': DropDownCheck,
    'project-master-edit': ProjectMasterEdit,
    'template-phases': TemplatePhases,
    'folder': Folder,
    'expectDoc': ExpectDoc,
    'plan': Plan,
    'judge': Judge
  },
  setup() {

    const masterEdit = ref() // 编辑组件
    const templatePhasesDialog = ref() // 配置阶段组件
    const folderWrap = ref() // 配置阶段组件
    const expectDocWrap = ref()
    const planWrap = ref()
    const judgeWrap = ref()
    const projectMasterData = reactive({
      list: [],
      projectType: [],
      projectTypeSelect: [],
      projectTypeChildSelect: [],
      master: {},
      expectDocList: [],
      onConfirm: (key: string) => {
        if (key === '项目类型') {
          console.log(projectMasterData.projectTypeSelect)
        } else {
          console.log(projectMasterData.projectTypeChildSelect)
        }
      },
      // 编辑模板
      showDialog: (id?: string) => {
        masterEdit.value.dialogData.show()
      },
      // 配置阶段
      showPhases: (item: any) => {
        projectMasterData.master = item
        templatePhasesDialog.value.dialogData.show()
      },
      // 配置文件
      showFolder: () => {
        folderWrap.value.drawerData.show()
      },
      // 配置交付清单
      showExpectDoc: (item: any) => {
        expectDocWrap.value.drawerData.show(),
        projectMasterData.expectDocList = item.templatePhases
      },
      // 打开计划
      showPlan: () => {
        planWrap.value.drawerData.show()
      },
      // 配置评审
      showJudge: (item: any) => {
        projectMasterData.master = item
        judgeWrap.value.drawerData.show()
      },
      // 删除模板
      delete: (id: string) => {
        ElMessageBox.confirm('确定删除吗？', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          
        })
      }
    })
    const init = () => {
      getTableList('project/projectMaster').then((res: any) => {
        if (res.code === 200) {
          console.log(res)
          projectMasterData.list = res.data
        }
      })
      getTableList('project/projectType').then((res: any) => {
        if (res.code === 200) {
          console.log('项目类型', res)
          projectMasterData.projectType = res.data
        }
      })
    }
    init()
    return {
      projectMasterData,
      masterEdit,
      templatePhasesDialog,
      folderWrap,
      expectDocWrap,
      planWrap,
      judgeWrap
    }
  }
}
</script>

<style lang="scss" scoped>
.el-link{
  margin-left: 10px;
}
</style>>
