<template>
  <div class="app-container">
    <el-tabs v-model="activeTab" @tab-change="handleTabChange">
      <el-tab-pane label="项目阶段" name="phase">
        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
          <el-form-item label="阶段名称" prop="pazName">
            <el-input v-model="queryParams.pazName" placeholder="请输入阶段名称" clearable @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['pms:phase:add']">新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['pms:phase:edit']">修改</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['pms:phase:remove']">删除</el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
        </el-row>

        <el-table v-loading="loading" :data="phaseList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="阶段名称" align="center" prop="pazName" min-width="150" />
          <el-table-column label="计划开始" align="center" prop="planStart" width="100" />
          <el-table-column label="计划结束" align="center" prop="planEnd" width="100" />
          <el-table-column label="实际开始" align="center" prop="realStart" width="100" />
          <el-table-column label="实际结束" align="center" prop="realEnd" width="100" />
          <el-table-column label="里程碑" align="center" prop="milestone" width="80" />
          <el-table-column label="状态" align="center" prop="state" width="80" />
          <el-table-column label="操作" align="center" width="150">
            <template #default="scope">
              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['pms:phase:edit']">修改</el-button>
              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['pms:phase:remove']">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
      </el-tab-pane>

      <el-tab-pane label="阶段任务" name="task">
        <el-form :model="taskQueryParams" ref="taskQueryRef" :inline="true" v-show="showSearch">
          <el-form-item label="任务名称" prop="taskName">
            <el-input v-model="taskQueryParams.taskName" placeholder="请输入任务名称" clearable @keyup.enter="handleTaskQuery" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleTaskQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetTaskQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleTaskAdd" v-hasPermi="['pms:phase:task:add']">新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="success" plain icon="Edit" :disabled="taskSingle" @click="handleTaskUpdate" v-hasPermi="['pms:phase:task:edit']">修改</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain icon="Delete" :disabled="taskMultiple" @click="handleTaskDelete" v-hasPermi="['pms:phase:task:remove']">删除</el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getTaskList" />
        </el-row>

        <el-table v-loading="taskLoading" :data="taskList" @selection-change="handleTaskSelectionChange">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="任务名称" align="center" prop="taskName" min-width="150" />
          <el-table-column label="负责人" align="center" prop="assignee" width="120" />
          <el-table-column label="截止日期" align="center" prop="deadline" width="100" />
          <el-table-column label="操作" align="center" width="150">
            <template #default="scope">
              <el-button link type="primary" icon="Edit" @click="handleTaskUpdate(scope.row)" v-hasPermi="['pms:phase:task:edit']">修改</el-button>
              <el-button link type="primary" icon="Delete" @click="handleTaskDelete(scope.row)" v-hasPermi="['pms:phase:task:remove']">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="taskTotal > 0" :total="taskTotal" v-model:page="taskQueryParams.pageNum" v-model:limit="taskQueryParams.pageSize" @pagination="getTaskList" />
      </el-tab-pane>

      <el-tab-pane label="进度日志" name="log">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleLogAdd" v-hasPermi="['pms:phase:log:add']">新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain icon="Delete" :disabled="logMultiple" @click="handleLogDelete" v-hasPermi="['pms:phase:log:remove']">删除</el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getLogList" />
        </el-row>

        <el-table v-loading="logLoading" :data="logList" @selection-change="handleLogSelectionChange">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="日志内容" align="center" prop="content" min-width="300" :show-overflow-tooltip="true" />
          <el-table-column label="记录时间" align="center" prop="logTime" width="160">
            <template #default="scope">
              <span>{{ parseTime(scope.row.logTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="100">
            <template #default="scope">
              <el-button link type="primary" icon="Delete" @click="handleLogDelete(scope.row)" v-hasPermi="['pms:phase:log:remove']">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="logTotal > 0" :total="logTotal" v-model:page="logQueryParams.pageNum" v-model:limit="logQueryParams.pageSize" @pagination="getLogList" />
      </el-tab-pane>
    </el-tabs>

    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="阶段名称" prop="pazName">
              <el-input v-model="form.pazName" placeholder="请输入阶段名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="里程碑" prop="milestone">
              <el-input v-model="form.milestone" placeholder="请输入里程碑" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="计划开始" prop="planStart">
              <el-date-picker v-model="form.planStart" type="date" placeholder="选择日期" style="width:100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划结束" prop="planEnd">
              <el-date-picker v-model="form.planEnd" type="date" placeholder="选择日期" style="width:100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="实际开始" prop="realStart">
              <el-date-picker v-model="form.realStart" type="date" placeholder="选择日期" style="width:100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实际结束" prop="realEnd">
              <el-date-picker v-model="form.realEnd" type="date" placeholder="选择日期" style="width:100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="状态" prop="state">
              <el-input v-model="form.state" placeholder="请输入状态" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog :title="taskTitle" v-model="taskOpen" width="500px" append-to-body>
      <el-form ref="taskFormRef" :model="taskForm" :rules="taskRules" label-width="100px">
        <el-form-item label="任务名称" prop="taskName">
          <el-input v-model="taskForm.taskName" placeholder="请输入任务名称" />
        </el-form-item>
        <el-form-item label="负责人" prop="assignee">
          <el-input v-model="taskForm.assignee" placeholder="请输入负责人" />
        </el-form-item>
        <el-form-item label="截止日期" prop="deadline">
          <el-date-picker v-model="taskForm.deadline" type="date" placeholder="选择日期" style="width:100%" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitTaskForm">确 定</el-button>
          <el-button @click="taskCancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog :title="logTitle" v-model="logOpen" width="500px" append-to-body>
      <el-form ref="logFormRef" :model="logForm" :rules="logRules" label-width="100px">
        <el-form-item label="日志内容" prop="content">
          <el-input v-model="logForm.content" type="textarea" :rows="4" placeholder="请输入日志内容" />
        </el-form-item>
        <el-form-item label="记录时间" prop="logTime">
          <el-date-picker v-model="logForm.logTime" type="datetime" placeholder="选择日期时间" style="width:100%" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitLogForm">确 定</el-button>
          <el-button @click="logCancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="PmsPhase">
import { listPhase, getPhase, addPhase, updatePhase, delPhase, listPhaseTask, getPhaseTask, addPhaseTask, updatePhaseTask, delPhaseTask, listPhaseLog, addPhaseLog, delPhaseLog } from '@/api/pms/phase'

const { proxy } = getCurrentInstance()
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref('')
const open = ref(false)
const phaseList = ref([])
const activeTab = ref('phase')

const taskLoading = ref(false)
const taskIds = ref([])
const taskSingle = ref(true)
const taskMultiple = ref(true)
const taskTotal = ref(0)
const taskTitle = ref('')
const taskOpen = ref(false)
const taskList = ref([])

const logLoading = ref(false)
const logIds = ref([])
const logMultiple = ref(true)
const logTotal = ref(0)
const logTitle = ref('')
const logOpen = ref(false)
const logList = ref([])

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    pazName: undefined
  },
  rules: {
    pazName: [{ required: true, message: '阶段名称不能为空', trigger: 'blur' }]
  },
  taskForm: {},
  taskQueryParams: {
    pageNum: 1,
    pageSize: 10,
    taskName: undefined
  },
  taskRules: {
    taskName: [{ required: true, message: '任务名称不能为空', trigger: 'blur' }]
  },
  logForm: {},
  logQueryParams: {
    pageNum: 1,
    pageSize: 10
  },
  logRules: {
    content: [{ required: true, message: '日志内容不能为空', trigger: 'blur' }]
  }
})

const { form, queryParams, rules, taskForm, taskQueryParams, taskRules, logForm, logQueryParams, logRules } = toRefs(data)

function getList() {
  loading.value = true
  listPhase(queryParams.value).then(response => {
    phaseList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}

function getTaskList() {
  taskLoading.value = true
  listPhaseTask(taskQueryParams.value).then(response => {
    taskList.value = response.rows
    taskTotal.value = response.total
    taskLoading.value = false
  })
}

function getLogList() {
  logLoading.value = true
  listPhaseLog(logQueryParams.value).then(response => {
    logList.value = response.rows
    logTotal.value = response.total
    logLoading.value = false
  })
}

function handleTabChange(tab) {
  if (tab === 'phase') {
    getList()
  } else if (tab === 'task') {
    getTaskList()
  } else if (tab === 'log') {
    getLogList()
  }
}

function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

function resetQuery() {
  proxy.resetForm('queryRef')
  handleQuery()
}

function handleTaskQuery() {
  taskQueryParams.value.pageNum = 1
  getTaskList()
}

function resetTaskQuery() {
  proxy.resetForm('taskQueryRef')
  handleTaskQuery()
}

function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.pazId)
  single.value = selection.length !== 1
  multiple.value = !selection.length
}

function handleTaskSelectionChange(selection) {
  taskIds.value = selection.map(item => item.taskId)
  taskSingle.value = selection.length !== 1
  taskMultiple.value = !selection.length
}

function handleLogSelectionChange(selection) {
  logIds.value = selection.map(item => item.logId)
  logMultiple.value = !selection.length
}

function reset() {
  form.value = {
    pazId: undefined,
    pazName: undefined,
    planStart: undefined,
    planEnd: undefined,
    realStart: undefined,
    realEnd: undefined,
    milestone: undefined,
    state: undefined
  }
  proxy.resetForm('formRef')
}

function cancel() {
  open.value = false
  reset()
}

function handleAdd() {
  reset()
  open.value = true
  title.value = '新增项目阶段'
}

function handleUpdate(row) {
  reset()
  const pazId = row.pazId || ids.value[0]
  getPhase(pazId).then(response => {
    form.value = response.data
    open.value = true
    title.value = '修改项目阶段'
  })
}

function submitForm() {
  proxy.$refs['formRef'].validate(valid => {
    if (valid) {
      if (form.value.pazId) {
        updatePhase(form.value).then(() => {
          proxy.$modal.msgSuccess('修改成功')
          open.value = false
          getList()
        })
      } else {
        addPhase(form.value).then(() => {
          proxy.$modal.msgSuccess('新增成功')
          open.value = false
          getList()
        })
      }
    }
  })
}

function handleDelete(row) {
  const pazIds = row.pazId || ids.value
  proxy.$modal.confirm('是否确认删除阶段编号为"' + pazIds + '"的数据项？').then(() => {
    return delPhase(pazIds)
  }).then(() => {
    getList()
    proxy.$modal.msgSuccess('删除成功')
  }).catch(() => {})
}

function resetTask() {
  taskForm.value = {
    taskId: undefined,
    taskName: undefined,
    assignee: undefined,
    deadline: undefined
  }
  proxy.resetForm('taskFormRef')
}

function taskCancel() {
  taskOpen.value = false
  resetTask()
}

function handleTaskAdd() {
  resetTask()
  taskOpen.value = true
  taskTitle.value = '新增阶段任务'
}

function handleTaskUpdate(row) {
  resetTask()
  const taskId = row.taskId || taskIds.value[0]
  getPhaseTask(taskId).then(response => {
    taskForm.value = response.data
    taskOpen.value = true
    taskTitle.value = '修改阶段任务'
  })
}

function submitTaskForm() {
  proxy.$refs['taskFormRef'].validate(valid => {
    if (valid) {
      if (taskForm.value.taskId) {
        updatePhaseTask(taskForm.value).then(() => {
          proxy.$modal.msgSuccess('修改成功')
          taskOpen.value = false
          getTaskList()
        })
      } else {
        addPhaseTask(taskForm.value).then(() => {
          proxy.$modal.msgSuccess('新增成功')
          taskOpen.value = false
          getTaskList()
        })
      }
    }
  })
}

function handleTaskDelete(row) {
  const taskIdsVal = row.taskId || taskIds.value
  proxy.$modal.confirm('是否确认删除任务编号为"' + taskIdsVal + '"的数据项？').then(() => {
    return delPhaseTask(taskIdsVal)
  }).then(() => {
    getTaskList()
    proxy.$modal.msgSuccess('删除成功')
  }).catch(() => {})
}

function resetLog() {
  logForm.value = {
    logId: undefined,
    content: undefined,
    logTime: undefined
  }
  proxy.resetForm('logFormRef')
}

function logCancel() {
  logOpen.value = false
  resetLog()
}

function handleLogAdd() {
  resetLog()
  logOpen.value = true
  logTitle.value = '新增进度日志'
}

function submitLogForm() {
  proxy.$refs['logFormRef'].validate(valid => {
    if (valid) {
      addPhaseLog(logForm.value).then(() => {
        proxy.$modal.msgSuccess('新增成功')
        logOpen.value = false
        getLogList()
      })
    }
  })
}

function handleLogDelete(row) {
  const logIdsVal = row.logId || logIds.value
  proxy.$modal.confirm('是否确认删除日志编号为"' + logIdsVal + '"的数据项？').then(() => {
    return delPhaseLog(logIdsVal)
  }).then(() => {
    getLogList()
    proxy.$modal.msgSuccess('删除成功')
  }).catch(() => {})
}

onMounted(() => {
  getList()
})
</script>
