<template>
  <div>
    <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="clearProject"
            >
              <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="costSelect"
              placeholder="请选择类型"
              clearable
              @clear="clearCost"
            >
              <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
              @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>
      <el-col :span="23">
        <el-table
          :data="costData.projectCostList"
          stripe
          border
        >
          <el-table-column
            label="人员名称"
            align="center"
            prop="user.nickName"
            width="180"
          />
          <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="department.name"
            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-popover
                placement="top"
                :width="300"
                trigger="click"
                :content="scope.row.expenseDetail"
              >
                <template #reference>
                  <el-button
                    text
                    type="primary"
                    icon="Notebook"
                  >
                    明细
                  </el-button>
                </template>
              </el-popover>
              <el-button
                text
                type="primary"
                size="small"
                icon="Edit"
                @click="costEdit(scope.row)"
              >编辑</el-button>
              <el-button
                text
                type="primary"
                size="small"
                icon="Delete"
                @click="costDelete(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { payData } from '@/pinia/cost/cost'
defineOptions({
  name: 'ProjectPay'
})
// 费用数据存储
const costData = payData()
// 搜索条件
const condition = reactive({
  pageInfo: {
    page: 1,
    pageSize: 10
  },
  reimburser: 85,
  projectCode: '',
  genre: 10,
  dayTime: '',
  monthTime: '',
  yearTime: ''
})
// 时间搜索
const timeTypeList = reactive([
  { label: '按日期查询', value: 'date' },
  { label: '按月份查询', value: 'month' },
  { label: '按年份查询', value: 'year' }
])
const timeTypeValue = ref('date')
const changeTimeType = (value) => {
  if (value === 'year') {
    condition.monthTime = ''
    condition.dayTime = ''
  } else if (value === 'month') {
    condition.yearTime = ''
    condition.dayTime = ''
  } else {
    condition.yearTime = ''
    condition.monthTime = ''
  }
}
// 项目搜索
const projectList = reactive([])
const projectSelect = ref('')
const clearProject = () => {
  projectSelect.value = ''
  condition.projectId = 0
}
// 费用类型
const costTypeList = reactive([])
const costSelect = ref('')
const clearCost = () => {
  costSelect.value = ''
  condition.genre = 0
}
// 人员搜索
const peopleSelect = ref('')
const userList = reactive([])
const clearPeopleSelect = () => {
  peopleSelect.value = ''
  condition.reimburser = 0
}
// 费用类型弹窗
const costTypePopup = ref(false)
// 查询费用列表
const consultPayList = () => {
  costData.getCostList(condition)
}

// 重置
const payListReset = () => {
}

const addDetailRecord = () => {
}

const costEdit = (value) => {
  console.log(value)
}

const costDelete = (value) => {
  console.log(value)
}
</script>

<style scoped>
</style>
