<template>
  <!-- 收费查询-账单查询 -->
  <div class="white_bg burt-container custom-info">
    <!-- form -->
    <a-form-model ref="form" layout="vertical" :model="form">
      <a-row :gutter="30">
        <a-col :xl="6" :lg="6" :sm="12">
          <a-form-model-item label="病历号">
            <a-input v-model="form.mrnNo" placeholder="请输入病历号" allow-clear />
          </a-form-model-item>
        </a-col>
        <a-col :xl="6" :lg="6" :sm="12">
          <a-form-model-item label="客户姓名">
            <a-input v-model="form.patientName" placeholder="请输入客户姓名" allow-clear />
          </a-form-model-item>
        </a-col>
        <a-col :xl="6" :lg="6" :sm="12">
          <a-form-model-item label="保险公司">
            <a-select v-model="form.payorId" placeholder="请选择保险公司" allowClear>
              <a-select-option v-for="item in companyOptions" :key="item.corpCode" :value="item.id">
                {{ item.longName }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xl="6" :lg="6" :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 :xl="6" :lg="6" :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 :xl="6" :lg="6" :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 :xl="6" :lg="6" :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 :xl="6" :lg="6" :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 :xl="6" :lg="6" :sm="12">
          <a-form-model-item label="账单编号">
            <a-input v-model="form.receiptNo" placeholder="请输入账单编号" allow-clear />
          </a-form-model-item>
        </a-col>
        <a-col :xl="6" :lg="6" :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 :xl="8" :lg="3" :sm="3" class="none-label">
          <a-form-model-item label="button">
            <!-- <a-button>更新数据</a-button> -->
            <!-- <a-button class="mar-left10" type="primary" @click="addNewCharge">
              <Icon name="ssiadd" :size="14" />新建预授权</a-button> -->
            <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-row>
    </a-form-model>

    <!-- 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" @click.stop="receiptEvt(record)">结算</a-button> -->
        <a-button type="link" class="success" @click.stop="detailEvt(record)">查看</a-button>
        <!-- <a-popconfirm title="你确定要关闭吗？" ok-text="确定" cancel-text="取消" @confirm="deleteData" >
          <a-button type="link" class="danger">删除</a-button>
        </a-popconfirm> -->
      </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>
    </a-table>
    <!--分页-->
    <BurtPagination :pagination="pagination" @pageChange="_getChargeList" />
  </div>
</template>

<script>
import BurtPagination from "@/components/CUSTOMER/pagation";
import { mapState } from "vuex"
import moment from "moment";
import { receiptTypeOptions } from '@/utils/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,scopedSlots: { customRender: "status" } },
      { title: "病历号", dataIndex: "mrnNo",width: 180},
      { title: "客户姓名",dataIndex: "patientName",width: 120,},
      { title: "保险公司", dataIndex: "payorName", 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 },
      { title: "未清余额", dataIndex: "residueBackAmount", width: 180 },
      { title: "操作", key: "operation", width: "175px",fixed: "right",scopedSlots: { customRender: "operation" }, align: "center"},
    ];
    return {
      columns,
      receiptTypeOptions,
      form: {},
      pageForm: {
        doctorCode: "",
        patientName: "",
        mrnNo: "",
        paymentCode: "",
        payorId: 0,
        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
        }
      ]
    };
  },
  components: {
    BurtPagination,
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.common.userInfo
    })
  },
  created() {
    this._getCompanyOptions();
    this._getDoctorListNoPage();//获取医生下拉选项
  },
  methods: {
    moment,
    // 获取列表数据
    _getChargeList() {
      const data = {
        ...this.pageForm,
        ...this.pagination,
      };
      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] + ' 00:00:00'
        this.form.visitTimeEnd = 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();
      });
    },
    // 新建账单信息
    addNewCharge() {
      // this.$router.push("/customer/edit");
    },
		//导出报表
    exportExcel(){
			let filter = {
					...this.form,
			}
			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);
}
</style>