<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.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 :lg="6" :sm="12">
          <a-form-model-item label="EOB状态">
            <a-select v-model="form.eobSts" placeholder="请选择EOB状态" allowClear>
              <a-select-option v-for="(item,i) in EOBStatusOptions" :key="i" :value="item.value">{{item.name}}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :lg="6" :sm="12">
          <a-form-model-item label="EOB赔付金额(人民币)">
            <a-input type="number" v-model.trim="form.eobAmountCny" 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.trim="form.eobAmountUsd" placeholder="EOB赔付金额(美元)" />
          </a-form-model-item>
        </a-col>
        <a-col :sm="24" class="none-label">
          <a-form-model-item label="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.stop="handlerReset">
              <Icon name="ssireset" :size="14" />重置
            </a-button>
            <!-- <a-button type="primary">导出</a-button> -->
            <a-button class="mar-left10" type="primary" @click="addNewEvt">
              <Icon name="ssiadd" :size="14" />新建EOB
            </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="eobSts" slot-scope="text">
        <span>{{text | formatEOBStatus}}</span>
      </template>
      <template slot="operation" slot-scope="text, record, index">
        <a-button type="link" @click.stop="editEvt(record, true)">修改</a-button>
        <a-button type="link" class="success" @click.stop="editEvt(record)">查看</a-button>
        <a-button v-if="record.eobNo" 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";
import moment from "moment";
import {EOBStatusOptions} from '@/utils/utilsdictOptions.js'
import mixins from "@/mixins";
const columns = [
  { title: "EOB编号", dataIndex: "eobNo", ellipsis: true, width: 100 },
  { title: "保险公司", dataIndex: "payorName", ellipsis: true, width: 80 },
  { title: "EOB状态", dataIndex: "eobSts", ellipsis: true, width: 90, scopedSlots: { customRender: "eobSts" } },
  { title: "EOB赔付金额(人民币)", dataIndex: "eobAmountCny", ellipsis: true, width: 85 },
  { title: "EOB赔付金额(美元)", dataIndex: "eobAmountUsd", ellipsis: true, width: 85 },
  { title: "备注", dataIndex: "eobRemark", ellipsis: true, width: 120 },
  { title: "操作", dataIndex: "operation", scopedSlots: { customRender: "operation" }, fixed: "right", width: "200px", align: 'center'},
];
export default {
  data() {
    return {
      columns,
      EOBStatusOptions,
      form: {
        payorCode: '',
        eobSts: '',
        eobAmountCny: '',
        eobAmountUsd: ''
      },
      dataList: [],
      companyOptions: [], //保险公司
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  mixins: [mixins],
  components: {
    BurtPagination,
  },
  created(){
    this.getData();
    this._getCompanyOptions();
  },
  methods: {
    moment,
    handlerSearch() {
      this.pagination.pageNum = 1;
      this.getData();
    },
    // 重置
    handlerReset() {
      this.form = {
        payorCode: '',
        eobSts: '',
        eobAmountCny: '',
        eobAmountUsd: ''
      }
    },
    // 获取保险公司下拉选项
    _getCompanyOptions() {
      this.$apis.GETCOMPANYOPTIONS().then((res) => {
        this.companyOptions = res.content || [];
      });
    },
    getData() {
       this.$apis.QUERYEOBLIST({
        ...this.form,
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
       })
      .then((res) => {
        if (res.returnCode == "0000") {
          let content = res.content || {};
          this.pagination.total = content.total || 0;
          this.dataList = content.list || [];
        } else {
          this.$message.error(res.returnMsg);
        }
      });
    },
    //删除记录
    delRecord(index) {
      this.$modal.confirm({
        title: "删除",
        content: "确定删除该条记录？",
        okText: "确认",
        cancelText: "取消",
        onOk: () => {
          this.$apis.DELEOBRECEIPTINFO({
            eobNo: this.dataList[index].eobNo,
          })
          .then((res) => {
            if (res.returnCode == "0000") {
              this.$message.success("删除成功");
              this.dataList.splice(index, 1);
            } else {
              this.$message.error(res.returnMsg);
            }
          });
        },
        onCancel: () => {},
      });
    },
    //新建EOB
    addNewEvt(){
      this.$router.push({
        path: '/verification/detail'
      })
    },
    //修改
    editEvt(record, isEdit){
      const { eobNo } = record;
      localStorage.setItem('EobDataDetail', JSON.stringify(record));
      this.$router.push({
        path: '/verification/detail',
        query: {
          eobNo,
          isEdit
        }
      })
    }
  },
};
</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>