<template>
  <div style="width: 97%">
    <el-row>
      <el-col
        :span="24"
      >
        <el-form
          :inline="true"
          style="margin: 15px 0 0 10px;height: 40px"
        >
          <el-form-item label="时间类型:">
            <el-select
              v-model="timeTypeValue"
              placeholder="请选择日期选择器"
              @change="changeTimeType"
            >
              <el-option
                v-for="item in timeTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="timeTypeValue === 'date'"
            label="日期:"
          >
            <el-date-picker
              v-model="condition.dayTime"
              type="date"
              placeholder="请选择日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              clearable
              @clear="condition.dayTime = ''"
            />
          </el-form-item>
          <el-form-item
            v-if="timeTypeValue === 'month'"
            label="月份:"
          >
            <el-date-picker
              v-model="condition.monthTime"
              type="month"
              placeholder="请选择月份"
              format="YYYY-MM"
              value-format="YYYY-MM"
              clearable
              @clear="condition.monthTime = ''"
            />
          </el-form-item>
          <el-form-item
            v-if="timeTypeValue === 'year'"
            label="年份:"
          >
            <el-date-picker
              v-model="condition.yearTime"
              type="year"
              placeholder="请选择年份"
              format="YYYY"
              value-format="YYYY"
              clearable
              @clear="condition.yearTime = ''"
            />
          </el-form-item>
          <el-form-item label="类型:">
            <el-select
              v-model="genreSelect"
              placeholder="请选择类型"
              clearable
              @clear="clearGenre"
            >
              <el-option
                v-for="item in costTypeList"
                :key="item.ID"
                :label="item.name"
                :value="item.ID"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="人员:">
            <el-select
              v-model="peopleSelect"
              placeholder="请选择人员名称"
              clearable
              filterable
              @clear="clearPeopleSelect"
            >
              <el-option
                v-for="item in userList"
                :key="item.ID"
                :label="item.nickName"
                :value="item.ID"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :icon="Search"
              @click="consultCostList"
            >查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :icon="Refresh"
              @click="conditionReset"
            >重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row style="margin-top: 15px;">
      <el-table
        :data="costList"
        stripe
        border
      >
        <el-table-column
          label="人员名称"
          align="center"
          prop="user.nickName"
        />
        <el-table-column
          label="部门"
          align="center"
          prop="department.name"
        />
        <el-table-column
          label="总支入金额(元)"
          align="center"
          prop="DepositAmountSum"
        />
        <el-table-column
          label="总支出金额(元)"
          align="center"
          prop="ExpenditureAmountSum"
        />
        <el-table-column
          label="操作"
          align="center"
        >
          <template #default="scope">
            <el-button
              text
              type="primary"
              :icon="Notebook"
              @click="openDetail(scope.row.expenses)"
            >
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row
      v-show="costListTotal > 10"
      justify="end"
    >
      <el-pagination
        v-model:current-page="condition.pageInfo.page"
        background
        layout="prev, pager, next"
        :total="costListTotal"
        @change="changeCostPage"
      />
    </el-row>
    <el-drawer
      v-model="detailDrawerShow"
      title="费用详情"
      size="65%"
    >
      <el-row />
      <el-table
        :data="detailList"
        height="495px"
      >
        <el-table-column
          label="费用类型"
          align="center"
          prop="expensesGenre.name"
          width="180"
        />
        <el-table-column
          label="时间"
          align="center"
          prop="feeTime"
          width="180"
        />
        <el-table-column
          label="支入金额(元)"
          align="center"
          prop="depositAmount"
          width="180"
        />
        <el-table-column
          label="支出金额(元)"
          align="center"
          prop="expenditureAmount"
          width="180"
        />
        <el-table-column
          label="当前余额(元)"
          align="center"
          prop="thenBalance"
          width="180"
        />
        <el-table-column
          label="操作"
          align="center"
        >
          <template #default="scope">
            <el-button
              text
              type="primary"
              :icon="Notebook"
              @click="fill(scope.row)"
            >
              备注和详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="margin-top: 60px">
        <el-col :span="10">
          <el-form-item label="费用备注：">
            <el-input
              v-model="costNotes"
              placeholder="费用备注"
              type="textarea"
              :rows="3"
            />
          </el-form-item>
        </el-col>
        <el-col
          :span="12"
          :offset="1"
        >
          <el-form-item label="费用详情：">
            <el-input
              v-model="costDetail"
              placeholder="费用详情"
              type="textarea"
              :rows="5"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script setup>
import { peopleCost } from '@/api/cost'
import { reactive, ref, onMounted } from 'vue'
import { getAllUsers } from '@/api/user'
import { queryExpensesGenre } from '@/api/finance'
import { getAllProject } from '@/api/project'
import { Search, Refresh, Notebook } from '@element-plus/icons-vue'

defineOptions({
  name: 'PeopleList'
})
// 数据
const costList = reactive([])
const costListTotal = ref(0)
const userList = reactive([])
const costTypeList = reactive([])
const timeTypeList = reactive([
  { label: '按日期查询', value: 'date' },
  { label: '按月份查询', value: 'month' },
  { label: '按年份查询', value: 'year' }
])
const timeTypeValue = ref('date')
const condition = reactive({
  pageInfo: {
    page: 1,
    pageSize: 10
  },
  reimburser: 0,
  projectId: 0,
  genre: 0,
  dayTime: '',
  monthTime: '',
  yearTime: ''
})
const genreSelect = ref('')
const peopleSelect = ref('')
const detailDrawerShow = ref(false)
const detailList = reactive([])
const costNotes = ref('')
const costDetail = ref('')
// 方法
onMounted(() => {
  getCostList(0, 0, 0)
  getUserList()
  getCostTypeList()
})
// 查询条件转换
const consultCostList = () => {
  let nameId
  let typeId
  let itemId
  peopleSelect.value === '' ? nameId = 0 : nameId = peopleSelect.value
  genreSelect.value === '' ? typeId = 0 : typeId = genreSelect.value
  getCostList(nameId, typeId, itemId)
}
// 获取费用列表
const getCostList = (nameId, typeID, itemId) => {
  condition.reimburser = nameId
  condition.genre = typeID
  condition.projectId = itemId
  peopleCost(condition).then(res => {
    if (res.code === 0) {
      costList.length = 0
      if (res.data.list !== null) {
        costList.push(...res.data.list)
      }
      costListTotal.value = res.data.total
    }
  })
}
// 条件重置
const conditionReset = () => {
  const initial = {
    pageInfo: {
      page: 1,
      pageSize: 10
    },
    reimburser: 0,
    projectId: 0,
    genre: 0,
    dayTime: '',
    monthTime: '',
    yearTime: ''
  }
  genreSelect.value = ''
  peopleSelect.value = ''
  Object.assign(condition, initial)
  consultCostList()
}
// 获取用户列表
const getUserList = () => {
  getAllUsers().then(res => {
    if (res.code === 0) {
      userList.length = 0
      userList.push(...res.data)
    }
  })
}
// 获取费用类型列表
const getCostTypeList = () => {
  queryExpensesGenre().then(res => {
    if (res.code === 0) {
      costTypeList.length = 0
      costTypeList.push(...res.data)
    }
  })
}

const changeTimeType = (value) => {
  if (value === 'year') {
    condition.monthTime = ''
    condition.dayTime = ''
  } else if (value === 'month') {
    condition.yearTime = ''
    condition.dayTime = ''
  } else {
    condition.yearTime = ''
    condition.monthTime = ''
  }
}


const clearGenre = () => {
  genreSelect.value = ''
  condition.genre = 0
}

const clearPeopleSelect = () => {
  peopleSelect.value = ''
  condition.reimburser = 0
}

const openDetail = (scope) => {
  detailDrawerShow.value = true
  detailList.length = 0
  detailList.push(...scope)
}

const changeCostPage = (val) => {
  condition.pageInfo.page = val
  consultCostList()
}

const fill = (row) => {
  costNotes.value = row.remarks
  costDetail.value = row.expenseDetail
}
</script>

<style scoped>

</style>
