<template>
  <div class="container">
    <div class="content">
      <div class="title">
        <el-date-picker
            v-model="date"
            type="daterange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
        />
        <el-select
            v-model="salesPerson"
            placeholder="销售人"
            style="width: 100px;margin: 0 10px"
        >
          <el-option
              v-for="item in salesPersonOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
        <el-select v-model="type" placeholder="类型" style="width: 100px">
          <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
        <el-select v-model="source" placeholder="开单来源" style="width: 100px;margin-left: 10px">
          <el-option
              v-for="item in sourceOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
        <el-select
            v-model="chargeMan"
            placeholder="收费员"
            style="width: 100px;margin-left: 10px"
        >
          <el-option
              v-for="item in chargeManOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
        <el-select
            v-model="pay"
            placeholder="支付方式"
            style="width: 100px;margin-left: 10px"
        >
          <el-option
              v-for="item in payOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </div>
      <div class="content-box">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="chargeTime" label="收费时间" align="center" show-overflow-tooltip/>
          <el-table-column label="销售单号" prop="projectCode" show-overflow-tooltip></el-table-column>
          <el-table-column label="患者姓名" prop="customer"></el-table-column>
          <el-table-column prop="source" label="开单来源" />
          <el-table-column prop="type" label="收费/退费" align="center"></el-table-column>
          <el-table-column prop="originalPrice" label="原价" align="center"></el-table-column>
          <el-table-column prop="discount" label="优惠" align="center"></el-table-column>
          <el-table-column prop="receivable" label="应收" align="center"></el-table-column>

          <el-table-column prop="netReceipts" label="实收" align="center"></el-table-column>
          <el-table-column prop="payType" label="支付类型" align="center"></el-table-column>
          <el-table-column label="销售人" prop="salePersonId"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {post} from "@/utils/request.ts";
const tableData = ref<any[]>([])
const date = ref<any>([])
const salesPerson = ref<any>('')
const salesPersonOptions = [{}
]
const type = ref<any>('')
const typeOptions = [{
  value: '1',
  label: '全部'
}
]
const source = ref<any>('')
const sourceOptions = [{
  value: '1',
  label: '全部'
}
]

const chargeMan = ref<any>('')
const chargeManOptions = [{
  value: '1',
  label: '全部'
}
]

const pay = ref<any>('')
const payOptions = [{
  value: '1',
  label: '全部'
}
]

const getDate = () => {
  post("charge/getChargeRecord").then((res:any)=>{
    tableData.value = res.list
  })
}

onMounted(()=>{
  getDate();
})
</script>
<style scoped lang="scss">
.title{
  margin-bottom: 20px;
}
</style>