<template>
  <div class="white_bg burt-container">
    <!-- form -->
    <a-form-model
      ref="form"
      :model="form"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-row :gutter="30">
        <a-col :xxl="6" :xl="8" :sm="12">
          <a-form-model-item label="保险公司">
            <a-select
              v-model="form.payorCode"
              placeholder="请选择保险公司"
              allowClear
              show-search
              :filterOption="filterCode"
            >
              <a-select-option
                v-for="item in companyOptions"
                :key="item.payorCode"
                :value="item.payorCode"
              >
                {{ item.longName }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xxl="6" :xl="8" :sm="12">
          <a-form-model-item label="EOB编号">
            <a-input v-model="form.eobNo" placeholder="EOB编号" />
          </a-form-model-item>
        </a-col>
        <a-col :xxl="6" :xl="8" :sm="12">
          <a-form-model-item label="创建时间">
            <a-range-picker
              format="YYYY-MM-DD"
              v-model="form.dateRange"
              :placeholder="['开始时间', '结束时间']"
              @change="onSelectVisitTime"
            />
          </a-form-model-item>
        </a-col>
        <a-col :xxl="6" :xl="8" :sm="12">
          <a-form-model-item label="状态">
            <a-select
              v-model="form.backStatus"
              placeholder="请选择状态"
              allowClear
            >
              <a-select-option
                v-for="item in backStatusOptions"
                :key="item.value"
                :value="item.value"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xxl="6" :xl="8" :sm="12">
          <a-form-model-item label="回款金额">
            <a-input v-model="form.backAmountCny" placeholder="回款金额" />
          </a-form-model-item>
        </a-col>
        <a-col :xxl="6" :xl="8" :sm="12">
          <a-form-model-item label="回款编号">
            <a-input v-model="form.backMoneyNo" placeholder="回款编号" />
          </a-form-model-item>
        </a-col>
        <a-col :xxl="6" :xl="8" :sm="12">
          <a-form-model-item label="账单编号">
            <a-input v-model="form.receiptNo" placeholder="账单编号" />
          </a-form-model-item>
        </a-col>
        <a-col :xxl="24" :xl="16" :md="24" class="none-label">
          <a-form-model-item
            label=""
            :labelCol="{ span: 0 }"
            :wrapperCol="{ span: 24 }"
          >
            <a-button 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 class="mar-left10" type="primary" @click="addNewEvt">
              <Icon name="ssiadd" :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 -->
    <div class="scroll-table">
      <a-table
        :columns="columns"
        :data-source="dataList"
        :scroll="{ x: true }"
        :pagination="false"
      >
        <template slot="eobSts" slot-scope="text">
          {{ text == 1 ? '待回款' : '已回款' }}
        </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.backMoneyNo"
            type="link"
            class="danger"
            @click.stop="delRecord(index)"
            >删除</a-button
          >
        </template>
      </a-table>
      <BurtPagination :pagination="pagination" @pageChange="getData" />
    </div>
  </div>
</template>

<script>
import BurtPagination from '@/components/Customers/pagation'
import moment from 'moment'
import { exportFile } from '@/utils/index'
const columns = [
  { title: '回款编号', dataIndex: 'backMoneyNo', ellipsis: true, width: 150 },
  { title: 'EOB编号', dataIndex: 'eobNos', ellipsis: true, width: 140 },
  { title: '保险公司', dataIndex: 'payorName', ellipsis: true, width: 110 },
  {
    title: '回款金额(人民币)',
    dataIndex: 'backAmountCny',
    ellipsis: true,
    width: 190
  },
  {
    title: '未核销余额',
    dataIndex: 'residueBackAmount',
    ellipsis: true,
    width: 130
  },
  { title: 'EOB备注', dataIndex: 'eobRemark', ellipsis: true, width: 140 },
  { title: '创建时间', dataIndex: 'createDate', ellipsis: true, width: 110 },
  { title: '状态', dataIndex: 'backStatusStr', ellipsis: true, width: 90 },
  {
    title: '操作',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' },
    fixed: 'right',
    width: '200px',
    align: 'center'
  }
]
export default {
  data() {
    return {
      labelCol: { span: 5 },
      wrapperCol: { span: 19 },
      columns,
      form: {
        payorCode: '',
        eobNo: '',
        dateRange: [], //创建时间范围
        startDate: '',
        endDate: '',
        backStatus: '0',
        backAmountCny: '', // 回款金额
        backMoneyNo: '', // 回款编号
        receiptNo: '' // 账单编号
      },
      dataList: [],
      companyOptions: [], //保险公司
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      backStatusOptions: [
        { name: '全部', value: '' },
        { name: '已结案', value: '1' },
        { name: '暂存', value: '0' }
      ],
      iscreated: false
    }
  },
  components: {
    BurtPagination
  },
  created() {
    this.iscreated = true
    this.getData()
    this._getCompanyOptions()
  },
  activated() {
    if (!this.iscreated) {
      this.getData()
      this._getCompanyOptions()
    } else {
      this.iscreated = false
    }
  },
  methods: {
    moment,
    pageChange(pager) {
      const { current } = pager
      this.pagination.pageNum = current
      this.getData()
    },
    // 重置
    handlerReset() {
      this.form = {
        payorCode: '',
        eobNo: '',
        dateRange: [], //创建时间范围
        startDate: '',
        endDate: '',
        backStatus: '0',
        receiptNo: '' // 账单编号
      }
    },
    // 选择框筛选
    filterCode(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      )
    },
    // 获取保险公司下拉选项
    _getCompanyOptions() {
      this.$apis.getCompanyOptions().then((res) => {
        this.companyOptions = res.content || []
      })
    },
    // 选中就诊时间
    onSelectVisitTime(date, dateString) {
      this.form.startDate = dateString[0] + ''
      this.form.endDate = dateString[1] + ''
    },
    handlerSearch() {
      this.pagination.pageNum = 1
      this.getData()
    },
    getData() {
      this.$apis
        .queryBackMoneyList({
          ...this.form,
          dateRange: undefined,
          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.map((item) => {
                item.backStatusStr = item.backStatus === '0' ? '暂存' : '已结案'
                return item
              }) || []
          } else {
            this.$message.error(res.returnMsg)
          }
        })
    },
    //新建回款
    addNewEvt() {
      this.$router.push({
        path: '/verification/collectionDetail',
        query: {
          isEdit: true
        }
      })
    },
    //编辑回款
    editEvt(record, isEdit) {
      const { backMoneyNo } = record
      localStorage.setItem('backMoneyDataDetail', JSON.stringify(record))
      console.log(isEdit, record.backStatus)
      // 已结案状态，二次确认
      if (isEdit && record.backStatus === '1') {
        this.$modal.confirm({
          title: '修改',
          content: '处于已结案状态，是否确定修改该条记录？',
          okText: '确认',
          cancelText: '取消',
          onOk: () => {
            this.$router.push({
              path: '/verification/collectionDetail',
              query: {
                backMoneyNo,
                isEdit
              }
            })
          },
          onCancel: () => {}
        })
        return
      }
      this.$router.push({
        path: '/verification/collectionDetail',
        query: {
          backMoneyNo,
          isEdit
        }
      })
    },
    //删除记录
    delRecord(index) {
      let content = '确定删除该条记录？'
      if (this.dataList[index].backStatus === '1') {
        content = '处于已结案状态，确定删除该条记录？'
      }
      this.$modal.confirm({
        title: '删除',
        content,
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          this.$apis
            .deleteBackMoney({
              backMoneyNo: this.dataList[index].backMoneyNo
            })
            .then((res) => {
              if (res.returnCode == '0000') {
                this.$message.success('删除成功')
                this.dataList.splice(index, 1)
              } else {
                this.$message.error(res.returnMsg)
              }
            })
        },
        onCancel: () => {}
      })
    },
    //导出报表
    exportExcel() {
      let filter = {
        ...this.form,
        dateRange: undefined
      }
      this.$apis.backMoneyListExport(filter).then((res) => {
        exportFile(res, '回款列表.xls')
      })
    }
  }
}
</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;
}
.scroll-table {
  height: calc(100vh - 280px);
  overflow: scroll;
}
@media screen and (min-width: 1920px) {
  .scroll-table {
    height: calc(100vh - 320px);
  }
}
</style>