<template>
  <!-- 收费查询-账单查询 -->
  <div class="white_bg burt-container custom-info">
    <!-- form -->
    <a-form-model ref="form" layout="vertical" :model="form">
      <a-row :gutter="30">
        <a-col :xl="4" :lg="6" :sm="12">
          <a-form-model-item label="保险公司">
            <a-select v-model="form.payorCode" placeholder="请选择" allowClear>
              <a-select-option v-for="item in companyOptions" :key="item.id" :value="item.payorCode">
                {{ item.longName }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xl="4" :lg="6" :sm="12">
          <a-form-model-item label="病案号">
            <a-input v-model="form.mrnNo" placeholder="请输入" allow-clear />
          </a-form-model-item>
        </a-col>
        <a-col :xl="4" :lg="6" :sm="12">
          <a-form-model-item label="客户名称">
            <a-input v-model="form.patientName" placeholder="请输入" allow-clear />
          </a-form-model-item>
        </a-col>
        <a-col :xl="6" :lg="6" :sm="12">
          <a-form-model-item label="账单起止日期">
            <a-range-picker 
              format="YYYY-MM-DD" 
              format-value="YYYY-MM-DD"
              v-model="billRange" 
              :placeholder="['开始时间','结束时间']"  
              @change="onSelectBillTime" 
            />
          </a-form-model-item>
        </a-col>
        <a-col :xl="6" :lg="6" :sm="12">
          <a-form-model-item label="回款起止日期">
            <a-range-picker 
              format="YYYY-MM-DD" 
              format-value="YYYY-MM-DD"
              v-model="returnRange" 
              :placeholder="['开始时间','结束时间']"  
              @change="onSelectReturnTime" 
            />
          </a-form-model-item>
        </a-col>
        <a-col :xl="10" :lg="10" :sm="12" class="none-label">
          <a-form-model-item label="button">
            <a-button class="mar-left10" type="primary" @click="handlerReset">
              <Icon name="ssireset" :size="14" />重置
            </a-button>
            <a-button class="mar-left10" type="primary" @click="handlerSearch">
              <Icon name="ssisearch_active" :size="14" />查询
            </a-button>
            <a-button class="mar-left10" type="primary" @click="exportExcel">
              <Icon name="ssidaochu" :size="14" />导出
            </a-button>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>

    <!-- table -->
    <a-table 
      :columns="columns" 
      :data-source="dataList" 
      :scroll="{ x: true }" 
      :pagination="false" 
      :rowKey="'id'"
    >
      <template slot="index" slot-scope="text, record, index">
        {{ index + 1 }}
      </template>
    </a-table>
    <!--分页-->
    <BurtPagination :pagination="pagination" @pageChange="getList" />
  </div>
</template>

<script>
import BurtPagination from "@/components/CUSTOMER/pagation";
import { exportFile } from '@/utils/index';

export default {
  data() {
    const columns = [
      { title: "序号", dataIndex: "index", key:"index",align:'center', width: 80,scopedSlots: { customRender: "index" }},
      { title: "病历号", dataIndex: "mrnNo",width: 120},
      { title: "客户姓名",dataIndex: "patientName",width: 120,},
      { title: "保险公司", dataIndex: "payorName", width: 120 },
      { title: "账单编号", dataIndex: "receiptNo", width: 120 },
      { title: "账单日期", dataIndex: "receiptDate", width: 120 },
      { title: "收银", dataIndex: "receiptTellerName", width: 120 },
      { title: "账单金额", dataIndex: "actualAmount", width: 120 },
      { title: "回款金额", dataIndex: "paidAmountEob", width: 120 },
      { title: "回款日期", dataIndex: "eobBackDate", width: 120 },
      { title: "EOB号", dataIndex: "eobNo", width: 120 },
      { title: "EOB名称", dataIndex: "eobName", width: 120 },
    ];
    return {
      columns,
      billRange: null,
      returnRange: null,
      form: {
        payorCode: '',
        mrnNo: '',
        patientName: '',
        receiptDateStart: '',
        receiptDateEnd: '',
        eobBackDateStart: '',
        eobBackDateEnd: ''
      },
      pageForm: {}, // 搜索form

      companyOptions: [], //保险公司
      dataList: [],
      pagination: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0
    };
  },
  components: {
    BurtPagination,
  },
  created() {
    this.getList();
    this._getCompanyOptions();
  },
  methods: {
    // 获取列表数据
    getList() {
      const data = {
        ...this.pageForm,
        ...this.pagination,
      };
      this.$apis.backMoneyReport(data).then((res) => {
        let content = res.content || {};
        this.dataList = content.list || [];
        this.total = content.total || 0;
      });
    },
    // 获取保险公司下拉选项
    _getCompanyOptions() {
      this.$apis.GETCOMPANYOPTIONS().then((res) => {
        this.companyOptions = res.content || [];
      });
    },

    onSelectBillTime(date, dateString) {
        this.form.receiptDateStart = dateString[0] ? dateString[0] + ' 00:00:00' : ''
        this.form.receiptDateEnd = dateString[1] ? dateString[1] + ' 23:59:59' : ''
    },
    onSelectReturnTime(date, dateString) {
        this.form.eobBackDateStart = dateString[0] ? dateString[0] + ' 00:00:00' : ''
        this.form.eobBackDateEnd = dateString[1] ? dateString[1] + ' 23:59:59' : ''
    },

    // 重置
    handlerReset() {
      this.form = {}
    },

    // 搜索
    handlerSearch() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false;
        }
        this.pagination.pageNum = 1;
        this.pageForm = this.$lodash.cloneDeep(this.form);
        this.getList();
      });
    },

    //导出报表
    exportExcel(){
        let filter = {
            ...this.form,
        }
        this.$apis.exportBackMoneyReport(filter).then(res => {
            exportFile(res, '账单回款报表.xls');
        })
    }
  },
};
</script>
<style lang="less" scoped>
.none-label {
  text-align: left;
  .ant-form-item-label {
    opacity: 0;
  }
}
.ant-btn .icon-class {
  .mg-r(10);
}
</style>