<template>
  <div>
    <el-row>
      <el-col :span="5">
        <el-form-item
          label="收款日期："
        >
          <el-date-picker
            v-model="condition.time"
            type="month"
            placeholder="请选择收款月份"
            format="YYYY-MM"
            value-format="YYYY-MM"
          />
        </el-form-item>
      </el-col>
      <el-col
        :span="1"
        style="margin-left: 20px"
      >
        <el-button
          type="primary"
          :icon="Search"
          @click="searchCollection"
        >查询</el-button>
      </el-col>
      <el-col
        :span="2"
        style="margin-left: 50px"
      >
        <el-button
          type="primary"
          :icon="Plus"
          @click="paymentAddShow = true"
        >
          新增
        </el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="16">
        <el-row>
          <el-table
            :data="pay.paymentList"
            stripe
          >
            <el-table-column
              label="收款时间"
              prop="collectionTime"
              align="center"
              width="180px"
            />
            <el-table-column
              label="收款金额（元）"
              prop="collectionPrice"
              align="center"
              width="250px"
            />
            <el-table-column
              label="银行流水单号"
              prop="serialNumber"
              align="center"
              width="250px"
            />
            <el-table-column
              label="操作"
              align="center"
            >
              <template #default="scope">
                <el-popover
                  placement="top-start"
                  title="收款备注"
                  :width="200"
                  trigger="click"
                  :content="scope.row.remarks"
                >
                  <template #reference>
                    <el-button
                      text
                      type="primary"
                      :icon="Notebook"
                    >
                      备注
                    </el-button>
                  </template>
                </el-popover>
                <el-button
                  text
                  type="primary"
                  :icon="Edit"
                  @click="openPaymentEdit(scope.row)"
                >
                  编辑
                </el-button>
                <el-button
                  text
                  type="primary"
                  :icon="Delete"
                  @click="paymentDelete(scope.row)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-row justify="end">
          <el-pagination
            v-model:current-page="condition.pageInfo.page"
            background
            layout="prev, pager, next"
            :page-size="8"
            :total="pay.paymentTotal"
            @change="changePaymentPage"
          />
        </el-row>
      </el-col>
    </el-row>
    <el-dialog
      v-model="paymentEditShow"
      title="收款编辑"
      width="40%"
    >
      <el-form>
        <el-form-item
          label="收款金额："
          size="large"
        >
          <el-input
            v-model="editAmount"
            placeholder="请输入收款金额"
            clearable
            type="number"
          />
        </el-form-item>
        <el-form-item
          label="收款日期："
          size="large"
        >
          <el-date-picker
            v-model="paymentEditData.collectionTime"
            type="date"
            placeholder="请选择收款日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="银行流水单号："
          size="large"
        >
          <el-input
            v-model="paymentEditData.serialNumber"
            placeholder="可输入银行流水单号(选填)"
          />
        </el-form-item>
        <el-form-item
          label="收款备注："
          size="large"
        >
          <el-input
            v-model="paymentEditData.remarks"
            placeholder="请输入收款备注"
            clearable
            type="textarea"
            maxlength="100"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button
          type="primary"
          size="large"
          @click="paymentEdit"
        >
          确认
        </el-button>
      </template>
    </el-dialog>
    <el-dialog
      v-model="paymentAddShow"
      title="新增收款"
      width="40%"
    >
      <el-form>
        <el-form-item
          label="收款金额："
          size="large"
        >
          <el-input
            v-model="addAmount"
            placeholder="请输入收款金额"
            clearable
            type="number"
            @clear="addAmount = ''"
          />
        </el-form-item>
        <el-form-item
          label="收款日期："
          size="large"
        >
          <el-date-picker
            v-model="paymentAddData.collectionTime"
            type="date"
            placeholder="请选择收款日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            clearable
            @clear="paymentAddData.collectionTime = ''"
          />
        </el-form-item>
        <el-form-item
          label="银行流水单号："
          size="large"
        >
          <el-input
            v-model="paymentAddData.serialNumber"
            placeholder="可输入银行流水单号(选填)"
          />
        </el-form-item>
        <el-form-item
          label="收款备注："
          size="large"
        >
          <el-input
            v-model="paymentAddData.remarks"
            placeholder="请输入收款备注(选填)"
            clearable
            type="textarea"
            maxlength="100"
            show-word-limit
            @clear="paymentAddData.remarks = ''"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button
          type="primary"
          size="large"
          @click="paymentAdd"
        >
          确认
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, defineExpose } from 'vue'
import { Search, Delete, Edit, Notebook, Plus } from '@element-plus/icons-vue'
import { retrievalCollection, updateCollection, deleteCollection, createCollection } from '@/api/collection'
import { collectionOperate } from '@/pinia/collection/Collection'
import { ElMessage, ElMessageBox } from 'element-plus'
import { codeOperate } from '@/pinia/code/code'
defineOptions({
  name: 'Payment'
})
const pay = collectionOperate()
const serial = codeOperate()
// 数据
const condition = reactive({
  pageInfo: {
    page: 1,
    pageSize: 8
  },
  code: '',
  time: ''
})

const paymentEditShow = ref(false)

const paymentEditData = reactive({
  id: 0,
  projectCode: '',
  collectionPrice: 0,
  remarks: '',
  collectionTime: '',
  serialNumber: ''
})

const editAmount = ref('')

const paymentAddShow = ref(false)

const paymentAddData = reactive({
  projectCode: '',
  collectionPrice: 0,
  remarks: '',
  collectionTime: '',
  serialNumber: ''
})

const addAmount = ref('')

// 方法
const openPaymentEdit = (row) => {
  paymentEditShow.value = true
  paymentEditData.projectCode = row.projectCode
  paymentEditData.collectionTime = row.collectionTime
  editAmount.value = row.collectionPrice
  paymentEditData.id = row.ID
  paymentEditData.remarks = row.remarks
}
const paymentEdit = () => {
  const editCondition = condition
  editCondition.code = paymentEditData.projectCode
  paymentEditData.collectionPrice = parseFloat(editAmount.value)
  updateCollection(paymentEditData).then(res => {
    if (res.code === 0) {
      ElMessage({
        message: '编辑成功',
        type: 'success',
        showClose: true,
        duration: 2000
      })
    }
  })
  paymentEditShow.value = false
  pay.getPaymentList(editCondition)
}
const paymentDelete = (row) => {
  const delCondition = condition
  delCondition.code = serial.currentCode
  delCondition.pageInfo.page = 1
  delCondition.time = ''
  ElMessageBox.confirm(
    '确定要删除该收款记录吗?',
    '删除记录',
    {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      const id = { id: row.ID }
      deleteCollection(id).then(res => {
        if (res.code === 0) {
          ElMessage({
            message: '删除成功',
            type: 'success',
            showClose: true,
            duration: 2000
          })
          pay.getPaymentList(delCondition)
        }
      })
    }).catch(() => {})
}
const searchCollection = () => {
  condition.code = serial.currentCode
  condition.pageInfo.page = 1
  retrievalCollection(condition).then(res => {
    if (res.code === 0) {
      pay.changePaymentList(res.data.list)
    }
  })
}
const paymentAdd = () => {
  const addData = paymentAddData
  addData.collectionPrice = addAmount.value.length === 0 ? 0 : parseFloat(addAmount.value)
  addData.projectCode = serial.currentCode
  for (const item in addData) {
    if (item === 'serialNumber') {
      continue
    }
    if (addData[item] === '' || addData[item] === 0) {
      ElMessage({
        message: '请将信息填写完整',
        type: 'error',
        showClose: true,
        duration: 2000
      })
      return
    }
  }
  createCollection(addData).then(res => {
    const reset = condition
    reset.pageInfo.page = 1
    reset.code = serial.currentCode
    reset.time = ''
    if (res.code === 0) {
      ElMessage({
        message: '新增成功',
        type: 'success',
        showClose: true,
        duration: 2000
      })
      addAmount.value = ''
      paymentAddData.collectionTime = ''
      paymentAddData.remarks = ''
      pay.getPaymentList(reset)
      paymentAddShow.value = false
    }
  })
}
const changePaymentPage = (page) => {
  const pageCondition = condition
  pageCondition.code = serial.currentCode
  pageCondition.pageInfo.page = page
  pay.getPaymentList(pageCondition)
}
const outsideChangePage = () => {
  condition.pageInfo.page = 1
}

defineExpose({
  outsideChangePage
})
</script>

<style scoped>

</style>
