<template>
  <!-- 收费查询-账单查询 -->
  <div class="white_bg burt-container custom-info">
    <!-- 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-input
              v-model="form.mrnNo"
              placeholder="请输入病历号"
              allow-clear
            />
          </a-form-model-item>
        </a-col>
        <a-col :xxl="6" :xl="8" :sm="12">
          <a-form-model-item label="客户姓名">
            <a-input
              v-model="form.patientName"
              placeholder="请输入客户姓名"
              allow-clear
            />
          </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"
              value-format="YYYY-MM-DD"
              v-model="form.admissionDateArr"
              :placeholder="['选择开始日期', '选择结束日期']"
            />
          </a-form-model-item>
        </a-col>
        <a-col :xxl="6" :xl="8" :sm="12">
          <a-form-model-item label="保险公司">
            <a-select
              v-model="form.payorIds"
              placeholder="请选择保险公司"
              allowClear
              show-search
              mode="multiple"
              :filterOption="filterCode"
              optionFilterProp="label"
            >
              <a-select-option
                v-for="item in companyOptions"
                :key="item.corpCode"
                :value="item.id"
                :label="item.longName"
              >
                {{ 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="看诊医生">
            <a-select
              v-model="form.doctorCode"
              placeholder="请选择看诊医生"
              allowClear
            >
              <a-select-option
                v-for="item in doctorOptions"
                :key="item.doctorCode"
                :value="item.doctorCode"
              >
                {{ item.doctorDesc }}
              </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-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.isSend"
              placeholder="请选择是否已关联寄送单"
              allowClear
            >
              <a-select-option value="Y" allow-clear> 是 </a-select-option>
              <a-select-option value="N" allow-clear> 否 </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-select
              v-model="form.isEobBack"
              placeholder="请选择是否已回款"
              allowClear
            >
              <a-select-option value="Y" allow-clear> 是 </a-select-option>
              <a-select-option value="N" allow-clear> 否 </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-select
              v-model="form.receiptType"
              placeholder="请选择账单类型"
              allowClear
            >
              <a-select-option
                v-for="item in receiptTypeOptions"
                :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.receiptNo"
              placeholder="请输入账单编号"
              allow-clear
            />
          </a-form-model-item>
        </a-col>
        <a-col :xxl="6" :xl="8" :sm="12">
          <a-form-model-item label="状态">
            <a-select v-model="form.status" placeholder="请选择状态" allowClear>
              <a-select-option
                v-for="item in statusOptions"
                :key="item.code"
                :value="item.code"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xxl="6" :xl="8" :sm="3" class="none-label">
          <a-form-model-item
            label=""
            :labelCol="{ span: 0 }"
            :wrapperCol="{ span: 24 }"
          >
            <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-col :xl="24" :lg="24" :sm="24">
          <div class="residue-amount">
            未清余额合计：<span class="blue-text"
              >￥{{ ciReceiptTotalVo.residueBackAmount || 0 }}
            </span>
            (共计<span class="blue-text">
              {{ ciReceiptTotalVo.totalNum || 0 }} </span
            >条<span v-if="ciReceiptTotalVo.invalidNum"
              >，其中：无效
              <span style="color: red">{{
                ciReceiptTotalVo.invalidNum || 0
              }}</span>
              条</span
            >)
          </div>
        </a-col>
      </a-row>
      <a-row></a-row>
    </a-form-model>

    <!-- table -->
    <div class="scroll-table">
      <a-table
        :columns="columns"
        :data-source="dataList"
        :scroll="{ x: true }"
        :pagination="false"
      >
        <template slot="index" slot-scope="text, record, index">
          {{ index + 1 }}
        </template>
        <template slot="operation" slot-scope="record">
          <a-button type="link" class="success" @click.stop="detailEvt(record)"
            >查看</a-button
          >
        </template>
        <template slot="isSend" slot-scope="text">
          {{ text == 'Y' ? '是' : text == 'N' ? '否' : '' }}
        </template>
        <template slot="isEob" slot-scope="text">
          {{ text == 'Y' ? '是' : text == 'N' ? '否' : '' }}
        </template>
        <template slot="isEobBack" slot-scope="text">
          {{ text == 'Y' ? '是' : text == 'N' ? '否' : '' }}
        </template>
        <template slot="status" slot-scope="text">
          <span :style="{ color: text == 2 ? 'red' : '' }">{{
            text == 1 ? '有效' : text == 2 ? '无效' : ''
          }}</span>
        </template>
        <template slot="redText" slot-scope="text">
          <span style="color: red">{{ text }}</span>
        </template>
      </a-table>
      <!--分页-->
      <BurtPagination :pagination="pagination" @pageChange="_getChargeList" />
    </div>
  </div>
</template>

<script>
import BurtPagination from '@/components/Customers/pagation'
import { mapState } from 'vuex'
import moment from 'moment'
import { receiptTypeOptions } from '@/assets/js/utilsdictOptions.js'
import { exportFile } from '@/utils/index'
export default {
  data() {
    const columns = [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        align: 'center',
        width: 80,
        scopedSlots: { customRender: 'index' }
      },
      { title: '收费时间', dataIndex: 'receiptDate', width: 180 },
      { title: '账单编号', dataIndex: 'receiptNo', width: 180 },
      { title: '账单类型', dataIndex: 'receiptTypeStr', width: 130 },
      {
        title: '状态',
        dataIndex: 'status',
        width: 130,
        customRender: (val) => {
          return (
            <span class={val === '2' ? 'red-text' : ''}>
              {val === '2' ? '无效' : '有效'}
            </span>
          )
        }
      },
      { title: '病历号', dataIndex: 'mrnNo', width: 180 },
      { title: '客户姓名', dataIndex: 'patientName', width: 120 },
      {
        title: '就诊日期',
        dataIndex: 'admissionDate',
        width: 120,
        customRender: (val) => {
          return val ? moment(val).format('YYYY-MM-DD') : ''
        }
      },
      { title: '保险公司', dataIndex: 'payorName', width: 200 },
      { title: '保险卡', dataIndex: 'cardNo', width: 200 },
      { title: '客户生日', dataIndex: 'birthday', width: 200 },
      { title: '就诊医生', dataIndex: 'doctorName', width: 150 },
      {
        title: '是否已关联寄送单',
        dataIndex: 'isSend',
        width: 180,
        scopedSlots: { customRender: 'isSend' }
      },
      {
        title: '是否已回款',
        dataIndex: 'isEobBack',
        width: 180,
        scopedSlots: { customRender: 'isEobBack' }
      },
      { title: '应收金额', dataIndex: 'chargeAmount', width: 180 },
      { title: '折扣（%）', dataIndex: 'discountAmount', width: 180 },
      { title: '减免金额', dataIndex: 'reduceAmount', width: 180 },
      { title: '应付金额', dataIndex: 'payableAmount', width: 180 },
      { title: '客户自付', dataIndex: 'selfpaidAmount', width: 180 },
      { title: '理赔金额', dataIndex: 'actualAmount', width: 180 },
      { title: '保险已支付', dataIndex: 'backAmount', width: 180 },
      { title: '保险欠费', dataIndex: 'insuranceArrearsAmount', width: 180 },
      {
        title: '个人欠费',
        dataIndex: 'arrearsAmount',
        width: 180,
        scopedSlots: { customRender: 'redText' }
      },
      {
        title: '备注',
        dataIndex: 'remark',
        width: 200,
        scopedSlots: { customRender: 'redText' }
      },
      { title: '未清余额', dataIndex: 'residueBackAmount', width: 180 },
      { title: '账龄', dataIndex: 'diffDay', width: 180 },
      {
        title: '操作',
        key: 'operation',
        width: '175px',
        fixed: 'right',
        scopedSlots: { customRender: 'operation' },
        align: 'center'
      }
    ]
    return {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
      columns,
      receiptTypeOptions,
      form: {},
      pageForm: {
        doctorCode: '',
        patientName: '',
        admissionDateArr: [],
        mrnNo: '',
        paymentCode: '',
        payorIds: [],
        visitTimeEnd: '',
        visitTimeStart: '',
        receiptType: '',
        receiptNo: ''
      },
      patientTypeOptions: [
        {
          name: '商保',
          code: 1
        }
      ], //客户类型
      companyOptions: [], //保险公司
      doctorOptions: [], //就诊医生
      paymentOptions: [
        {
          name: '商保',
          code: 1
        }
      ], //支付方式
      dataList: [],
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      receiptTypeDict: {
        1: '收费',
        2: '退费'
      },
      statusOptions: [
        {
          name: '无效',
          code: 2
        },
        {
          name: '有效',
          code: 1
        }
      ],
      ciReceiptTotalVo: {},
      iscreated: false
    }
  },
  components: {
    BurtPagination
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.common.userInfo
    })
  },
  created() {
    this.iscreated = true
    this._getCompanyOptions()
    this._getDoctorListNoPage() //获取医生下拉选项
  },
  activated() {
    if (!this.iscreated) {
      this._getCompanyOptions()
    } else {
      this.iscreated = false
    }
  },
  methods: {
    moment,
    // 获取未清余额合计
    getReceiptCount() {
      this.$apis
        .receiptCount({
          ...this.pageForm,
          ...this.pagination,
          admissionDateStart:
            this.form.admissionDateArr && this.form.admissionDateArr[0]
              ? moment(this.form.admissionDateArr[0]).format(
                  'YYYY-MM-DD 00:00:00'
                )
              : '',
          admissionDateEnd:
            this.form.admissionDateArr && this.form.admissionDateArr[1]
              ? moment(this.form.admissionDateArr[1]).format(
                  'YYYY-MM-DD 23:59:59'
                )
              : ''
        })
        .then((res) => {
          if (res.returnCode == '0000') {
            console.log(res.content)
            this.ciReceiptTotalVo = res.content
          }
        })
    },
    // 选择框筛选
    filterCode(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      )
    },
    // 获取列表数据
    _getChargeList() {
      const data = {
        ...this.pageForm,
        ...this.pagination,
        admissionDateStart:
          this.form.admissionDateArr && this.form.admissionDateArr[0]
            ? moment(this.form.admissionDateArr[0]).format(
                'YYYY-MM-DD 00:00:00'
              )
            : '',
        admissionDateEnd:
          this.form.admissionDateArr && this.form.admissionDateArr[1]
            ? moment(this.form.admissionDateArr[1]).format(
                'YYYY-MM-DD 23:59:59'
              )
            : ''
      }
      this.$apis.getChargeList(data).then((res) => {
        let content = res.content || {}
        this.dataList =
          content.list.map((item) => {
            item.receiptTypeStr = this.receiptTypeDict[item.receiptType] || ''
            return item
          }) || []
        this.pagination.total = content.total || 0
      })
    },
    // 获取保险公司下拉选项
    _getCompanyOptions() {
      this.$apis.getCompanyOptions().then((res) => {
        this.companyOptions = res.content || []
      })
    },
    // 获取看诊医生下拉选项
    _getDoctorListNoPage() {
      this.$apis
        .getDoctorListNoPage({ providerId: this.userInfo.providerId })
        .then((res) => {
          if (res.returnCode === '0000') {
            this.doctorOptions = res.content || []
          } else {
            this.$message.success(res.returnMsg)
          }
        })
    },
    // 选中就诊时间
    onSelectVisitTime(date, dateString) {
      this.form.visitTimeStart = dateString[0]
        ? dateString[0] + ' 00:00:00'
        : ''
      this.form.visitTimeEnd = dateString[1] ? dateString[1] + ' 23:59:59' : ''
      console.log(date, dateString)
    },
    // 重置
    handlerReset() {
      this.form = {}
    },
    //查看
    detailEvt(record) {
      localStorage.setItem('chargeQueryDetail', JSON.stringify(record))
      const { receiptNo } = record
      this.$router.push({
        name: 'chargeQueryDetail',
        query: { receiptNo }
      })
    },
    //账单结算
    receiptEvt(record) {
      this.$modal.confirm({
        title: '结算',
        content: '确定结算该账单？',
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          this.$apis
            .receiptSettlement({
              id: record.id
            })
            .then((res) => {
              if (res.returnCode === '0000') {
                this.$message.success('结算成功')
                this._getChargeList()
              } else {
                this.$message.error(res.returnMsg)
              }
            })
        }
      })
    },
    handlerSearch() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false
        }
        this.pagination.pageNum = 1
        this.pageForm = this.$lodash.cloneDeep({
          ...this.form,
          dateRange: undefined
        })
        this._getChargeList()

        this.getReceiptCount()
      })
    },

    //导出报表
    exportExcel() {
      let filter = {
        ...this.form,
        admissionDateStart:
          this.form.admissionDateArr && this.form.admissionDateArr[0]
            ? moment(this.form.admissionDateArr[0]).format(
                'YYYY-MM-DD 00:00:00'
              )
            : '',
        admissionDateEnd:
          this.form.admissionDateArr && this.form.admissionDateArr[1]
            ? moment(this.form.admissionDateArr[1]).format(
                'YYYY-MM-DD 23:59:59'
              )
            : ''
      }
      delete filter.admissionDateArr
      this.$apis.rceiptListReport(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);
}

.residue-amount {
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  margin: 0 0 10px;
}
.scroll-table {
  height: calc(100vh - 355px);
  overflow: scroll;
}
@media screen and (min-width: 1920px) {
  .scroll-table {
    height: calc(100vh - 342px);
  }
}
</style>