<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="pagination"
	  @change="pageChange"
	>
		<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>
  </div>
</template>

<script>
const columns  =[
	{ title: "病历号", dataIndex: "mrnNo", ellipsis: true, width: 180 },
	{ title: "客户姓名", dataIndex: "patientName", ellipsis: true, width: 180 },
	{ title: "保险公司", dataIndex: "patientName2", ellipsis: true, width: 180 },
	{ title: "就诊日期", dataIndex: "patientName3", ellipsis: true, width: 180 },
	{ title: "账单金额", dataIndex: "patientName4", ellipsis: true, width: 180 },
	{ title: "自付金额", dataIndex: "patientName5", ellipsis: true, width: 180 },
	{ title: "理赔金额", dataIndex: "patientName6", ellipsis: true, width: 180 },
	{ title: "回款金额", dataIndex: "patientName7", ellipsis: true, width: 180 },
	{ title: "未赔付金额", dataIndex: "patientName8", ellipsis: true, width: 180 },
	{ title: "理赔状态", dataIndex: "patientName9", ellipsis: true, width: 180 },
	{ 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
		},
	};
  },
  methods: {
	  pageChange(pager) {
	    const { current } = pager;
	    this.pagination.pageNum = current;
		this.getData();
	  },
	  handlerSearch(){
		  this.pagination.pageNum = 1;
		  this.getData();
	  },
	  getData(){
		  
	  },
	  //删除记录
	  delRecord(index){
		  this.$modal.confirm({
		      title: '删除',
		      content: '确定删除该条记录？',
		      okText: '确认',
		      cancelText: '取消',
		      onOk: ()=>{
		          this.$store.dispatch('medicinal/delMedicine', {
		              id: this.dataList[index].id,
		              status: -1
		          })
		          .then(()=>{
		              this.$message.success('删除成功');
		              this.dataList.splice(index, 1);
		          });
		      },
		      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>
