<template>
  <div>
    <el-row
      class="bg-white"
      style="height: 80px"
      align="middle"
      justify="space-around"
    >
      <el-col
        :span="3"
        class="flex align-center justify-around"
      >
        <el-image
          :src="expense"
          style="width: 50px;height: 50px"
        />
        <el-text style="font-size: 20px;font-weight: 550;color: #409eff">备用金收支</el-text>
      </el-col>
      <el-col :span="21">
        <el-row align="middle">
          <el-col
            :span="4"
            :offset="1"
          >
            <el-row
              justify="center"
              align="middle"
            >
              <el-text
                style="font-size: 20px;color: #409eff;"
                tag="b"
                :line-clamp="1"
              >
                {{ reserve.reserveAmount }}元
              </el-text>
            </el-row>
            <el-row
              justify="center"
              align="middle"
              style="margin-top: 8px"
            >
              <el-text>备用金支入</el-text>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row
              justify="center"
              align="middle"
            >
              <el-text
                style="font-size: 20px;color: #409eff;"
                tag="b"
                :line-clamp="1"
              >
                {{ reserve.expenditureAmount }}元
              </el-text>
            </el-row>
            <el-row
              justify="center"
              align="middle"
              style="margin-top: 8px"
            >
              <el-text>备用金支出</el-text>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-row
              justify="center"
              align="middle"
            >
              <el-text
                style="font-size: 20px;color: #409eff;"
                tag="b"
                :line-clamp="1"
              >
                {{ reserve.balance }}元
              </el-text>
            </el-row>
            <el-row
              justify="center"
              align="middle"
              style="margin-top: 8px"
            >
              <el-text>备用金余额</el-text>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row
      class="bg-white"
      style="height: 600px;margin-top: 20px"
    >
      <el-row>
        <el-col
          :span="24"
        >
          <el-form
            :inline="true"
            style="margin: 5px 0 15px 0;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="projectSelect"
                placeholder="请选择项目"
                clearable
                @clear="clearProjectSelect"
              >
                <el-option
                  v-for="item in projectList"
                  :key="item.ID"
                  :label="item.name"
                  :value="item.ID"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="人员:">
              <el-select
                v-model="projectSelect"
                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-dropdown
                split-button
                type="primary"
              >
                操作
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>
                      <el-button
                        type="primary"
                        icon="Search"
                        @click="consultPayList"
                      >查询</el-button>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <el-button
                        type="primary"
                        icon="Refresh"
                        @click="payListReset"
                      >重置</el-button>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <el-button
                        type="primary"
                        icon="Plus"
                        @click="addDetailRecord"
                      >添加</el-button>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="costTypePopup = true"
              >费用类型</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script setup>
import { getStandbyMoney } from '@/api/cost'
import { getAllProject } from '@/api/project'
import { onMounted, reactive, ref } from 'vue'
import expense from '@/assets/expenses.png'
defineOptions({
  name: 'Standby'
})
onMounted(() => {
  queryAllProject()
  queryStandbyMoney()
})
// 备用金汇总
const reserve = reactive({})
const queryStandbyMoney = () => {
  getStandbyMoney().then(res => {
    if (res.code === 0) {
      console.log(res.data)
      Object.assign(reserve, res.data)
    }
  })
}
// 搜索条件
const condition = reactive({
  pageInfo: {
    page: 1,
    pageSize: 8
  },
  reimburser: 0,
  projectCode: '',
  genre: 0,
  dayTime: '',
  monthTime: '',
  yearTime: ''
})
// 日期查询
const timeTypeValue = ref('date')
const timeTypeList = reactive([
  { label: '按日期查询', value: 'date' },
  { label: '按月份查询', value: 'month' },
  { label: '按年份查询', value: 'year' }
])
const changeTimeType = (value) => {
  if (value === 'year') {
    condition.monthTime = ''
    condition.dayTime = ''
  } else if (value === 'month') {
    condition.yearTime = ''
    condition.dayTime = ''
  } else {
    condition.yearTime = ''
    condition.monthTime = ''
  }
}

// 查询所有项目
const projectSelect = ref('')
const projectList = reactive([])
const queryAllProject = () => {
  getAllProject().then(res => {
    if (res.code === 0) {
      projectList.length = 0
      projectList.push(res.data)
    }
  })
}

// 删除项目
const clearPeopleSelect = () => {}
</script>

<style scoped>

</style>
