<template>
  <el-container class="gva-table-box">
    <el-header>
      <el-row style="margin-top: 15px">
        <el-col :span="20">
          <el-form inline>
            <el-form-item label="项目编号">
              <el-input v-model="searchWorkingHours.code" />
            </el-form-item>
            <el-form-item label="月份">
              <el-date-picker
                v-model="searchWorkingHours.time"
                type="month"
                placeholder="选择月份"
                format="YYYY-MM"
                value-format="YYYY-MM"
              />
            </el-form-item>
            <el-form-item label="年份">
              <el-date-picker
                v-model="searchWorkingHours.yearTime"
                type="year"
                placeholder="选择年份"
                format="YYYY"
                value-format="YYYY"
              />
            </el-form-item>
            <el-form-item label="人员">
              <el-select
                v-model.number="searchWorkingHours.people"
                placeholder="查询"
                style="width: 115px"
                clearable
                filterable
              >
                <el-option
                  v-for="item in constructorOptions"
                  :key="item.ID"
                  :label="item.nickName"
                  :value="item.ID"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="listSwitching(isOpen)"
              >查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4"><el-dropdown>
          <el-button type="primary">
            菜单<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="listSwitching(1)">
                详情列表
              </el-dropdown-item>
              <el-dropdown-item @click="listSwitching(2)">
                总列表
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown></el-col>
      </el-row>
    </el-header>
    <el-main>
      <div v-if="isOpen === 1">
        <el-table :data="workingHoursList">
          <el-table-column
            prop="projectCode"
            label="项目编号"
          />
          <el-table-column
            prop="constructor.nickName"
            label="姓名"
          />
          <el-table-column
            prop="days"
            label="天数"
          />
          <el-table-column
            prop="peopleTime"
            label="时间"
          />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                type="primary"
                @click="openWorkingHours(scope.row)"
              >修改</el-button>
              <el-button
                type="danger"
                @click="erasureWorkingHours(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="isOpen === 2">
        <el-table :data="workingHoursSum">
          <el-table-column
            prop="Name"
            label="姓名"
          />
          <el-table-column
            prop="SumDay"
            label="总天数"
          />
          <el-table-column
            prop="PriceSum"
            label="总金额"
          />
        </el-table>
      </div>
      <div class="gva-pagination">
        <el-pagination
          :current-page="searchWorkingHours.pageInfo.page"
          :page-size="searchWorkingHours.pageInfo.pageSize"
          :page-sizes="[10, 30, 50, 100]"
          :total="workingTotal"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
      <!--      修改-->
      <el-dialog
        v-model="workingDialog"
        title="Warning"
        width="500"
        align-center
      >
        <div>
          <el-form label-width="auto">
            <el-form-item label="编号">
              <el-input
                v-model="workingHoursData.projectCode"
                disabled
              />
            </el-form-item>
            <el-form-item label="人员">
              <el-input
                v-model="workingHoursData.constructor.nickName"
                disabled
              />
            </el-form-item>
            <el-form-item label="天数">
              <el-input-number
                v-model.number="workingHoursData.days"
                :precision="1"
              />
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="workingDialog = false">取消</el-button>
            <el-button
              type="primary"
              @click="modifyWorkingHours"
            >
              修改
            </el-button>
          </div>
        </template>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import {
  deleteWorkingHours,
  queryConstructorList, queryWorkingHoursList, queryWorkingHoursSum,
  updateWorkingHours
} from '@/api/finance'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getAllUsers } from '@/api/user'

// 施工人员----------------------------------------------------------------

const constructorOptions = ref()

const searchData = ref({
  pageInfo: {
    page: 1,
    pageSize: 10
  },
  name: ''
})

const total = ref(0)

// 分页
const handleSizeChange = (val) => {
  searchData.value.pageInfo.pageSize = val
  queryData()
}

const handleCurrentChange = (val) => {
  searchData.value.pageInfo.page = val
  queryData()
}

const constructorTableData = ref()

// 工时----------------------------------------------------------------------------------------------------------------
const searchWorkingHours = ref({
  pageInfo: {
    page: 1,
    pageSize: 10
  },
  code: '',
  time: '',
  yearTime: '',
  people: null,
})

const workingTotal = ref(0)

const workingHoursList = ref()
const workingHoursSum = ref()

const queryData = async() => {
  await getAllUsers().then(res => {
    constructorOptions.value = res.data
  })
  await queryConstructorList(searchData.value).then(res => {
    constructorTableData.value = res.data.list
    searchData.value.pageInfo.page = res.data.page
    searchData.value.pageInfo.pageSize = res.data.pageSize
    total.value = res.data.total
  })
  await queryWorkingHoursList(searchWorkingHours.value).then(res => {
    workingHoursList.value = res.data.list
    searchWorkingHours.value.pageInfo.page = res.data.page
    searchWorkingHours.value.pageInfo.pageSize = res.data.pageSize
    workingTotal.value = res.data.total
  })
}

const isOpen = ref(1)

// 列表切换
const listSwitching = async(val) => {
  if (searchWorkingHours.value.people === '') {
    searchWorkingHours.value.people = null
  }
  if (val === 1) {
    await queryData()
  } else if (val === 2) {
    await queryWorkingHoursSum(searchWorkingHours.value).then(res => {
      workingHoursSum.value = res.data.list
      searchWorkingHours.value.pageInfo.page = res.data.page
      searchWorkingHours.value.pageInfo.pageSize = res.data.pageSize
      workingTotal.value = res.data.total
    })
  }
  isOpen.value = val
}

// 工时
const workingDialog = ref(false)
const workingHoursData = ref()
const openWorkingHours = (val) => {
  workingHoursData.value = val
  workingDialog.value = true
}

const modifyWorkingHours = async() => {
  await updateWorkingHours(workingHoursData.value).then(res => {
    if (res.code === 0) {
      ElMessage.success('修改成功')
    }
    queryData()
    workingDialog.value = false
  })
}

// 删除
const erasureWorkingHours = async(val) => {
  ElMessageBox.confirm(
    '确定进行删除操作吗?',
    '删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
      await deleteWorkingHours(val).then(res => {
        if (res.code === 0) {
          ElMessage.success('删除成功')
        }
        queryData()
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

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

<style scoped lang="scss">

</style>
