<template>
  <div class="white_bg burt-container">
    <Goback title="回款详情" />
    <a-tabs v-model="activeKey" @change="paneChange">
      <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title">
        <template v-if="activeKey === '0'">
          <!-- 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="请选择保险公司"
                    allow-clear
                    :disabled="!isEdit"
                    @change="changePayor"
                  >
                    <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="5" :sm="12">
                <a-form-model-item label="回款日期">
                  <a-date-picker
                    format="YYYY-MM-DD"
                    format-value="YYYY-MM-DD 00:00:00"
                    v-model="form.backDate"
                    placeholder="选择日期"
                    allow-clear
                    :disabled="!isEdit"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :lg="5" :sm="12">
                <a-form-model-item label="回款金额(人民币)">
                  <a-input
                    type="number"
                    v-model="form.backAmountCny"
                    placeholder="请输入金额"
                    allow-clear
                    :disabled="!isEdit"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :lg="5" :sm="12">
                <a-form-model-item label="可核销余额">
                  <a-input v-model="residueBackAmount" disabled />
                </a-form-model-item>
              </a-col>
              <a-col :lg="5" :sm="12">
                <a-form-model-item label="回款金额(美元)">
                  <a-input
                    type="number"
                    v-model="form.backAmountUsd"
                    placeholder="请输入金额"
                    allow-clear
                    :disabled="!isEdit"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :lg="6" :sm="12">
                <a-form-model-item label="汇率差">
                  <a-input
                    v-model="form.backExchangeRate"
                    placeholder="请输入金额"
                    allow-clear
                    :disabled="!isEdit"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :lg="5" :sm="12">
                <a-form-model-item label="EOB编号">
                  <a-input
                    v-model="form.eobNos"
                    placeholder="请输入EOB编号"
                    allow-clear
                    :disabled="!isEdit"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :lg="5" :sm="12">
                <a-form-model-item label="EOB备注">
                  <a-input
                    v-model="form.eobRemark"
                    placeholder="请输入EOB备注"
                    allow-clear
                    :disabled="!isEdit"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :lg="5" :sm="12">
                <a-form-model-item label="上传附件">
                  <a-upload
                    name="file"
                    :multiple="false"
                    :showUploadList="true"
                    :disabled="!isEdit"
                    :fileList="fileList"
                    :customRequest="(file) => uploadFile(file)"
                    :beforeUpload="() => beforeUpload()"
                    :remove="(file) => removeFile(file)"
                  >
                    <a-button type="primary">
                      <Icon name="ssiupload" :size="18" />上传文件
                    </a-button>
                  </a-upload>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </template>
        <template v-else>
          <!-- form -->
          <a-form-model
            ref="form"
            :labelCol="{ span: 5 }"
            :wrapperCol="{ span: 16 }"
            :model="form"
            class="bill-form"
          >
            <a-row :gutter="30">
              <a-col :lg="8" :sm="12">
                <a-form-model-item label="保险公司">
                  <a-select
                    v-model="form.payorCode"
                    placeholder="请选择保险公司"
                    allow-clear
                    :disabled="!isEdit"
                    @change="changePayor"
                  >
                    <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="8" :sm="12">
                <a-form-model-item label="可核销余额">
                  <a-input v-model="residueBackAmount" disabled />
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
          <div class="bill-content">
            <!-- 已关联账单 -->
            <template v-if="selectedRows.length > 0">
              <div class="table-title">
                <span>已关联账单</span>
                <a-button class="mar-left10" type="primary" @click="exportExcel">
                  <Icon name="ssidaochu" :size="14" />导出
                </a-button>
              </div>
              <a-table
                class="table-content"
                :columns="selectedColumns"
                :data-source="selectedRows"
                :scroll="{ x: '100%', y: 450 }"
                :pagination="false"
              >
              <template slot="status" slot-scope="text">
                <span :style="{color: text == 2 ? 'red' : ''}">{{ text==1?'有效':text==2?'无效':'' }}</span>
              </template>
                <template slot="operation" slot-scope="text, record, index">
                  <a-button
                    type="link"
                    class="danger"
                    @click.stop="delRecord(record, index)"
                    >删除</a-button
                  >
                </template>
              </a-table>
            </template>
            <!-- table -->
            <template v-if="isEdit">
              <a-row class="search-form">
                <a-form-model
                  ref="searchForm"
                  layout="inline"
                  :labelCol="{ span: 8 }"
                  :wrapperCol="{ span: 16 }"
                  :model="searchForm"
                >
                  <a-row :gutter="30">
                    <a-col :lg="5" :sm="10">
                      <a-form-model-item label="账单日期">
                        <a-range-picker
                          format="YYYY-MM-DD"
                          value-format="YYYY-MM-DD"
                          v-model="searchForm.billDate"
                          :placeholder="['开始时间', '结束时间']"
                        />
                      </a-form-model-item>
                    </a-col>
                    <a-col :lg="4" :sm="10">
                      <a-form-model-item label="病历号">
                        <a-input
                          v-model="searchForm.mrnNo"
                          placeholder="请输入病历号"
                          allow-clear
                          :disabled="!isEdit"
                        />
                      </a-form-model-item>
                    </a-col>
                    <a-col :lg="4" :sm="12">
                      <a-form-model-item label="客户名称">
                        <a-input
                          v-model="searchForm.patientName"
                          placeholder="请输入客户名称"
                          allow-clear
                          :disabled="!isEdit"
                        />
                      </a-form-model-item>
                    </a-col>
                    <a-col :lg="4" :sm="12">
                      <a-form-model-item label="状态">
                        <a-select style="width: 160px;" v-model="searchForm.rStatus" 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 :lg="4" :sm="12">
                      <a-form-model-item label="账单编号">
                        <a-input
                          v-model="searchForm.receiptNo"
                          placeholder="请输入账单编号"
                          allow-clear
                          :disabled="!isEdit"
                        />
                      </a-form-model-item>
                    </a-col>
                    <a-col :lg="2" :sm="12">
                      <div class="btn-div mar-bottom10 none-label">
                        <a-button type="primary" @click="_getNewEOBList">
                          <Icon name="ssisearch_active" :size="14" />查询
                        </a-button>
                      </div>
                    </a-col>
                  </a-row>
                </a-form-model>
              </a-row>
              <div class="table-title">账单列表</div>
              <a-table
                :columns="columns"
                :data-source="dataList"
                :scroll="{ x: '100%', y: 300 }"
                :pagination="false"
                :rowKey="'id'"
                :row-selection="{
                  selectedRowKeys: selectedRowKeys,
                  onSelect: onSelectChange,
                  onSelectAll: onSelectAll,
                }"
              >
              <template slot="status" slot-scope="text">
                <span :style="{color: text == 2 ? 'red' : ''}">{{ text==1?'有效':text==2?'无效':'' }}</span>
              </template>
              </a-table>
              <BurtPagination
                :pagination="pagination"
                @pageChange="pageChange"
              />
            </template>
          </div>
        </template>
      </a-tab-pane>
      <div v-if="isEdit" slot="tabBarExtraContent">
        <a-button class="mar-left10" type="primary" @click="addNewEvt(0)">
          <Icon :name="backMoneyNo ? 'ssibaocun' : 'ssiadd'" :size="14" />暂存
        </a-button>
        <a-button class="mar-left10" type="primary" @click="addNewEvt(1)">
          <Icon :name="backMoneyNo ? 'ssibaocun' : 'ssiadd'" :size="14" />结案
        </a-button>
      </div>
    </a-tabs>
  </div>
</template>

<script>
import Goback from "@/components/CUSTOMER/goback";
import BurtPagination from "@/components/CUSTOMER/pagation";
import { EOBStatusOptions } from "@/utils/utilsdictOptions.js";
import { exportFile } from '@/utils/index';
import moment from "moment";
import mixins from "@/mixins";
export default {
  data() {
    return {
      isEdit: false,
      EOBStatusOptions,
      dialogShow: false,
      form: {
        payorCode: "",
        backDate: null,
        backAmountCny: "",
        backAmountUsd: "",
        backExchangeRate: "",
        eobNos: "", // EOB编号
        eobRemark: "", // EOB备注
      },
      fileList: [], // 上传文件列表
      dataList: [],
      isEditNewEOB: false, //是否在新建回款
      companyOptions: [], //保险公司
      pagination: {
        pageNum: 1,
        pageSize: 5,
        total: 0,
      },
      selectedRowKeys: [], // Check here to configure the default column
      selectedRows: [], // Check here to configure the default column
      backMoneyNo: "",
      editRules: {
        backAmountUsd: [{ required: true, message: "请输入", trigger: "blur" }],
        backAmount: [{ required: true, message: "请输入", trigger: "blur" }],
      },

      searchForm: {
        billDate: [],
        mrnNo: "", // 病历号
        patientName: "", // 客户名字
      },
      savedStatus: false, //是否已保存
      relatedList: [],

      panes: [
        { title: "基础信息", key: "0", show: true, content: "PaymentClaims" },
        { title: "账单列表", key: "1", show: false, content: "Insurance" },
      ],
      activeKey: "0",
      statusOptions: [
        {
          name: '无效',
          code:2
        },
        {
          name: '有效',
          code: 1
        }
      ]
    };
  },
  mixins: [mixins],
  components: {
    Goback,
    BurtPagination,
  },
  computed: {
    columns() {
      const base = [
        {
          title: "账单编号",
          dataIndex: "receiptNo",
          ellipsis: true,
          width: 150,
        },
        {
          title: "账单状态",
          dataIndex: "status",
          ellipsis: true,
          width: 150
          ,scopedSlots: { customRender: "status" } 
        },
        { title: "病历号", dataIndex: "mrnNo", ellipsis: true, width: 195 },
        {
          title: "客户姓名",
          dataIndex: "patientName",
          ellipsis: true,
          width: 160,
        },
        { title: "保险公司", dataIndex: "payorName", ellipsis: true, width: 195 },
        {
          title: "账单日期",
          dataIndex: "receiptDate",
          ellipsis: true,
          width: 180,
        },
        {
          title: "收银",
          dataIndex: "receiptTellerName",
          ellipsis: true,
          width: 120,
        },
        {
          title: "理赔账单金额",
          dataIndex: "actualAmount",
          ellipsis: true,
          width: 150,
        },
        {
          title: "回款金额",
          dataIndex: "writeOffAmount",
          ellipsis: true,
          width: 150,
        },
        {
          title: "个人欠费",
          dataIndex: "arrearsAmountShow",
          ellipsis: true,
          width: 150,
        },
        {
          title: "未清余额",
          dataIndex: "residueBackAmount",
          ellipsis: true,
          width: 150,
        },
      ];
      return base;
    },
    selectedColumns() {
      const base = JSON.parse(JSON.stringify(this.columns));
      const changeAmount = this.changeAmount;
      base[8] = {
        title: "回款金额",
        dataIndex: "backAmount",
        ellipsis: true,
        width: 150,
        customRender: (val, row) => {
          return (
            <a-input-number
              v-model={row.backAmount}
              allow-clear
              disabled={!this.isEdit}
              onBlur={() => {
                changeAmount(row);
              }}
            />
          );
        },
      };
      base[10] = {
        title: "未清余额",
        dataIndex: "residueBackAmount",
        ellipsis: true,
        width: 150,
        customRender: (val, row) => {
          const residueBackAmount =
            Number(row.currentReceiptAmount || 0) - Number(row.backAmount || 0) - Number(row.arrearsAmount || 0);
          return Number(residueBackAmount.toFixed(2));
        },
      };
      base[9] =  {
        title: "个人欠费",
        dataIndex: "arrearsAmount",
        ellipsis: true,
        width: 150,
        customRender: (val, row) => {
          return (
            <a-input-number
              v-model={row.arrearsAmount}
              allow-clear
              disabled={!this.isEdit}
              onBlur={() => {
                changeAmount(row);
              }}
            />
          );
        },
      };
      base.splice(8, 0, {
        title: "余末金额",
        dataIndex: "currentReceiptAmount",
        ellipsis: true,
        width: 150,
      });
      base.push({
        title: "回款日期",
        dataIndex: "backDate",
        ellipsis: true,
        width: 150,
      });
      if (this.isEdit) {
        base.push({
          title: "操作",
          dataIndex: "operation",
          fixed: "right",
          width: 100,
          scopedSlots: { customRender: "operation" },
        });
      }
      return base;
    },
    // 可核销余额
    residueBackAmount() {
      let totalMoney = Number(this.form.backAmountCny || 0);
      this.selectedRows.forEach((item) => {
        totalMoney -= Number(item.backAmount);
      });
      return Number(totalMoney.toFixed(2));
    },
  },
  created() {
    const { backMoneyNo, isEdit } = this.$route.query;
    this.backMoneyNo = backMoneyNo;
    this.isEdit = isEdit;
    this._getCompanyOptions();
    if (backMoneyNo) {
      const backMoneyDataDetail = JSON.parse(
        localStorage.getItem("backMoneyDataDetail") || "{}"
      );
      this.form = backMoneyDataDetail;
      this.form.backDate = this.form.backDate
        ? moment(this.form.backDate).format("YYYY-MM-DD 00:00:00")
        : null;

      // 如果有上传附件则显示列表
      if (backMoneyDataDetail.fileList) {
        this.fileList = backMoneyDataDetail.fileList.map((d) => {
          const file = {
            uid: Math.random() * 10000,
            name: d.fileName,
            status: "done",
            url: d.fileUrl,
          };
          return file;
        });
      }
      this.getData();
    }
    this._getNewEOBList();
  },
  methods: {
    moment,
    paneChange() {
      this.panes.forEach((item) => {
        item.show = false;
      });
      this.panes[Number(this.activeKey)].show = true;
    },
    changeAmount(row) {
      if (Number(row.actualAmount || 0) - Number(row.backAmount || 0) < 0) {
        this.$message.warning("录入账单回款金额大于账单金额");
      }
    },
    onSelectChange(selectedRow, selected) {
      if (selected) {
        this.selectedRowKeys.push(selectedRow.id);
        this.selectedRows.push(selectedRow);
      } else {
        const index = this.selectedRowKeys.findIndex(
          (item) => item === selectedRow.id
        );
        this.selectedRowKeys.splice(index, 1);
        this.selectedRows.splice(index, 1);
        this._confirmDelReceipt([selectedRow]);
      }
    },
    onSelectAll(selected, selectedRows, changeRows) {
      console.log(selected, selectedRows, changeRows);
      if (selected) {
        this.selectedRowKeys = this.selectedRowKeys.concat(
          changeRows.map((item) => item.id)
        );
        this.selectedRows = this.selectedRows.concat(changeRows);
      } else {
        changeRows.forEach((item) => {
          const findIndex = this.selectedRowKeys.findIndex(
            (rowId) => rowId === item.id
          );
          this.selectedRowKeys.splice(findIndex, 1);
          this.selectedRows.splice(findIndex, 1);
        });
        this._confirmDelReceipt(changeRows);
      }
    },
    delRecord(record, index) {
      this.selectedRowKeys.splice(index, 1);
      this.selectedRows.splice(index, 1);
      if (record.relationed) {
        // 已经关联的调用接口删除
        this._confirmDelReceipt([record]);
      }
    },
    _confirmDelReceipt(records) {
      console.log(records);
      if (!this.backMoneyNo) return;
      const receiptVoList = records
        .filter((item) => {
          const findIndex = this.relatedList.findIndex(
            (rowId) => rowId === item.id
          );
          return findIndex > -1;
        })
        .map((item) => {
          return {
            id: item.id,
          };
        });
      console.log(receiptVoList);
      if (receiptVoList.length === 0) return;
      this.$apis
        .DELETERECEIPTRECORD({
          backMoneyNo: this.backMoneyNo,
          receiptVoList,
        })
        .then((res) => {
          if (res.returnCode == "0000") {
            this._getNewEOBList();
          } else {
            this.$message.error(res.returnMsg);
          }
        });
    },
    // 修改保险公司
    changePayor() {
      if (
        this.selectedRowKeys.length > 0 &&
        (this.form.id || this.savedStatus)
      ) {
        this.$modal.confirm({
          title: "提示",
          content: "是否解除已关联账单",
          okText: "确认",
          cancelText: "取消",
          onOk: () => {
            this.selectedRowKeys = [];
            this.selectedRows = [];
          },
          onCancel: () => {},
        });
      }
      this._getNewEOBList();
    },
    pageChange(pager) {
      this.pagination = {
        ...this.pagination,
        ...pager,
      };
      this._getNewEOBList();
    },
    // 获取保险公司下拉选项
    _getCompanyOptions() {
      this.$apis.GETCOMPANYOPTIONS().then((res) => {
        this.companyOptions = res.content || [];
      });
    },
    // 获取已关联的账单
    getData() {
      this.$apis
        .QUERYBACKRECEIPTLIST({
          pageNum: 1,
          pageSize: 999,
          backMoneyNo: this.backMoneyNo,
          payorCode: this.form.payorCode,
        })
        .then((res) => {
          if (res.returnCode == "0000") {
            const list = res.content.list || [];
            this.selectedRowKeys = list.map((d) => d.id);
            this.selectedRows = list.map((item) => {
              item.relationed = true;
              return item;
            });
            this.relatedList = list.map((d) => d.id);
          } else {
            this.$message.error(res.returnMsg);
          }
        });
    },
    // 获取所有账单
    _getNewEOBList() {
      let billDate = this.searchForm.billDate || [];
      this.$apis
        .QUERYBACKRECEIPTINFOLIST({
          pageNum: this.pagination.pageNum,
          pageSize: this.pagination.pageSize,
          backMoneyNo: this.backMoneyNo,
          payorCode: this.form.payorCode,
          ...this.searchForm,
          receiptEndDate: billDate[1] ? billDate[1] + " 23:59:59" : undefined,
          receiptStartDate: billDate[0] ? billDate[0] + " 00:00:00" : undefined,
        })
        .then((res) => {
          if (res.returnCode == "0000") {
            let content = res.content || {};
            this.pagination.total = content.total || 0;
            this.dataList = content.list.map(item => {
              item.arrearsAmountShow = item.arrearsAmount
              item.arrearsAmount = ''
              return item
            }) || [];
          } else {
            this.$message.error(res.returnMsg);
          }
        });
    },
    //新建/保存回款
    addNewEvt(backStatus) {
      return new Promise((resolve, reject) => {
        console.log(this.selectedRows);
        if (!this.form.payorCode) {
          this.$message.warning("请选择保险公司");
          reject();
          return;
        }
        if (!this.form.backDate) {
          this.$message.warning("请选择回款日期");
          reject();
          return;
        }
        if (!this.form.backAmountCny) {
          this.$message.warning("请输入回款金额");
          reject();
          return;
        }
        let receiptVoList = this.selectedRows.map((item) => {
          return {
            id: item.id,
            backAmount: item.backAmount,
            arrearsAmount: item.arrearsAmount,
          };
        });
        const valid = receiptVoList.some((item) => {
          const exist = !item.backAmount && item.backAmount !== 0
          return exist;
        });
        if (valid) {
          this.$message.warning("存在关联账单未输入回款金额");
          reject();
          return;
        }

        const formData = {
          ...this.form,
          receiptVoList,
          backDate: this.form.backDate
            ? moment(this.form.backDate).format("YYYY-MM-DD HH:mm:ss")
            : "",
          backMoneyNo: this.backMoneyNo, //回款编号
          backStatus, // 0暂存 1结案
        };

        // 上传附件格式转换
        formData.fileList = this.fileList.map((d) => {
          const file = {
            fileName: d.name,
            fileUrl: d.url,
          };
          return file;
        });

        this.$apis.SAVEBACKMONEY(formData).then((res) => {
          if (res.returnCode == "0000") {
            this.backMoneyNo = res.content;
            this.savedStatus = true;
            this.$message.success("成功");
            this.selectedRowKeys = [];
            this.getData();
            this._getNewEOBList();

            // this.$router.go(-1);
            resolve();
          } else {
            this.$message.error(res.returnMsg);
            reject();
          }
        });
      });
    },

    /* ======== 上传区域 ======== */
    // 上传之前
    beforeUpload() {
      const len = this.fileList.length;
      if (len >= 5) {
        this.$message.warning("不能超过5个文件");
        return false;
      }
      return true;
    },
    // 删除文件
    removeFile(file) {
      let index;
      this.fileList.forEach((item, i) => {
        if (item.uid == file.uid) {
          index = i;
        }
      });
      this.fileList.splice(index, 1);
      return true;
    },
    // 上传文件
    uploadFile(fileData) {
      let formData = new FormData();
      formData.append("file", fileData.file);
      this.$apis.UPLOADIMG(formData).then((res) => {
        fileData.onSuccess();
        let tmp = {
          uid: Math.random() * 10000,
          name: res.original,
          status: "done",
          url: res.url,
        };
        this.fileList.push(tmp);

        this.$forceUpdate();
      });
    },
    //导出报表
    exportExcel(){
			let filter = {
        backMoneyNo: this.backMoneyNo,
        payorCode: this.form.payorCode,
			}
			this.$apis.EXPORTBACKRECEIPTLIST(filter).then(res => {
					exportFile(res, '已关联账单.xls');
			})
    }
  },
};
</script>

<style lang="less" scoped>
.none-label {
  text-align: right;
  .ant-form-item-label {
    opacity: 0;
  }
}
.table-title {
  font-size: 15px;
  margin: 6px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.table-content {
  margin-bottom: 8px;
}
.search-form {
  margin-top: 24px;
  .ant-form .ant-form-item {
    margin-bottom: 4px;
  }
}
.ant-btn .icon-class {
  .mg-r(10);
}
.success.ant-btn-link {
  color: #4cd964;
}
.danger.ant-btn-link {
  color: #ff3b30;
}
.burt-container {
  height: calc(100vh - 86px);
  display: flex;
  flex-direction: column;
  ::v-deep {
    .ant-tabs {
      flex: 1;
      min-height: 0;
    }
  }
}
.bill-content {
  height: calc(100vh - 380px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 12px;
}
::v-deep .bill-form {
  .ant-form .ant-form-item {
    margin-bottom: 4px !important;
  }
}
</style>
