<template>
  <div class="white_bg burt-container">
    <!-- form -->
    <a-form-model ref="form" layout="vertical" :model="form">
      <a-row :gutter="30">
        <a-col :lg="6" :sm="12">
          <a-form-model-item label="保障公司">
            <a-select v-model="form.payorId" placeholder="请选择">
              <a-select-option value="1">待核销</a-select-option>
              <a-select-option value="2">已核销</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :lg="6" :sm="12">
          <a-form-model-item label="EOB收到日期">
            <a-range-picker
              format="YYYY年MM月DD日"
              v-model="form.dateRange"
              :placeholder="['开始日期', '结束日期']"
            />
          </a-form-model-item>
        </a-col>
        <a-col :lg="6" :sm="12">
          <a-form-model-item label="EOB名称">
            <a-input v-model="form.mrnNo" placeholder="请输入EOB名称" />
          </a-form-model-item>
        </a-col>
        <a-col :lg="6" :sm="12">
          <a-form-model-item label="EOB金额(人民币)">
            <a-input
              type="number"
              v-model="form.mrnNo"
              placeholder="请输入金额"
            />
          </a-form-model-item>
        </a-col>
        <a-col :lg="6" :sm="12">
          <a-form-model-item label="EOB金额(美元)">
            <a-input
              type="number"
              v-model="form.mrnNo"
              placeholder="请输入金额"
            />
          </a-form-model-item>
        </a-col>
        <a-col :lg="6" :sm="12">
          <a-form-model-item label="EOB状态">
            <a-select v-model="form.payorId" placeholder="请选择">
              <a-select-option value="1">待核销</a-select-option>
              <a-select-option value="2">已核销</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :md="24" :lg="12" class="none-label">
          <a-form-model-item label="button">
            <a-button type="primary">导出</a-button>
            <a-button class="mar-left10" type="primary">
              <Icon name="ssiadd" :size="14" />新建EOB
            </a-button>
            <a-button class="mar-left10" type="primary">
              <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-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <!-- table -->
    <a-table
      :columns="columns"
      :data-source="dataList"
      :scroll="{ x: true }"
      :pagination="false"
    >
      <template slot="operation" slot-scope="record, index">
        <a-button type="link">修改</a-button>
        <a-button type="link" class="success">新增</a-button>
        <a-button type="link" class="danger" @click.stop="delRecord(index)"
          >删除</a-button
        >
      </template>
    </a-table>
    <BurtPagination :pagination="pagination" @pageChange="getData" />
  </div>
</template>

<script>
import BurtPagination from "@/components/CUSTOMER/pagation";
const columns = [
  { title: "病历号", dataIndex: "mrnNo", ellipsis: true, width: 100 },
  { title: "客户姓名", dataIndex: "patientName", ellipsis: true, width: 85 },
  { title: "保险公司", dataIndex: "patientName2", ellipsis: true, width: 80 },
  { title: "就诊日期", dataIndex: "patientName3", ellipsis: true, width: 110 },
  { title: "理赔状态", dataIndex: "patientName0", ellipsis: true, width: 90 },
  { title: "账单金额", dataIndex: "patientName4", ellipsis: true, width: 85 },
  { title: "自付金额", dataIndex: "patientName5", ellipsis: true, width: 85 },
  { title: "理赔金额", dataIndex: "patientName6", ellipsis: true, width: 85 },
  { title: "回款金额", dataIndex: "patientName7", ellipsis: true, width: 85 },
  { title: "未清金额", dataIndex: "patientName8", ellipsis: true, width: 85 },
  {
    title: "保险公司欠费",
    dataIndex: "patientName9",
    ellipsis: true,
    width: 110,
  },
  { title: "个人欠费", dataIndex: "patientName9", ellipsis: true, width: 85 },
  { title: "备注", dataIndex: "patientName10", ellipsis: true, width: 120 },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" },
    fixed: "right",
    width: "170px",
  },
];
export default {
  data() {
    return {
      columns,
      form: {
        dateRange: [],
      },
      dataList: [],
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  components: {
    BurtPagination,
  },
  methods: {
    handlerSearch() {
      this.pagination.pageNum = 1;
      this.getData();
    },
    getData() {},
    //删除记录
    delRecord(index) {
      this.$modal.confirm({
        title: "删除",
        content: "确定删除该条记录？",
        okText: "确认",
        cancelText: "取消",
        onOk: () => {
          console.log(index, 111)
        },
        onCancel: () => {},
      });
    },
  },
};
</script>

<style lang="less" scoped>
.none-label {
  text-align: right;
  .ant-form-item-label {
    opacity: 0;
  }
}
.ant-btn .icon-class {
  .mg-r(10);
}
.success.ant-btn-link {
  color: #4cd964;
}
.danger.ant-btn-link {
  color: #ff3b30;
}
</style>
