<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="4" :lg="6" :sm="12">
          <a-form-model-item label="病历号">
            <a-input
              v-model="form.patientNo"
              placeholder="请输入病历号"
              allow-clear
            ></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :xl="4" :lg="6" :sm="12">
          <a-form-model-item label="客户姓名">
            <a-input
              v-model="form.patientName"
              placeholder="请输入客户姓名"
              allow-clear
            ></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :xl="4" :lg="6" :sm="12">
          <a-form-model-item label="客户类型">
            <a-select
              v-model="form.patientType"
              placeholder="请选择客户类型"
              allowClear
            >
              <a-select-option
                v-for="item in patientTypeOptions"
                :key="item.code"
                :value="item.code"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xl="4" :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="4" :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="5" :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="3" :lg="6" :sm="12">
          <a-form-model-item label="支付方式">
            <a-select
              v-model="form.paymentCode"
              placeholder="请选择支付方式"
              allowClear
            >
              <a-select-option
                v-for="item in paymentOptions"
                :key="item.code"
                :value="item.code"
                allow-clear
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xl="12" :lg="12" :sm="12" 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-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>

    <!-- table -->
    <a-table
      :columns="columns"
      :data-source="dataList"
      row-key="id"
      :scroll="{ x: true }"
      :customRow="handlerRowClick"
      :pagination="true"
    >
      <template slot="operation" slot-scope="record">
        <a-button
          v-if="record.isEdit"
          type="link"
          @click.stop="saveChange(record)"
          >保存</a-button
        >
        <a-button v-else type="link" @click.stop="changeDataStatus(record)"
          >修改</a-button
        >
        <!-- <a-button type="link" class="success">查看</a-button> -->
        <a-popconfirm
          title="你确定要关闭吗？"
          ok-text="确定"
          cancel-text="取消"
          @confirm="deleteData"
        >
          <a-button type="link" class="danger">删除</a-button>
        </a-popconfirm>
      </template>
    </a-table>
    <!--分页-->
    <BurtPagination :pagination="pager" @pageChange="_getChargeListDetail" />

    <div class="title-div">费用支付明细</div>
    <a-table
      :columns="payColumns"
      :data-source="payDataList"
      row-key="id"
      :scroll="{ x: true }"
      :pagination="false"
      class="payTable"
    >
      <template slot="paymentType" slot-scope="text">
        <a-button class="danger">{{ text | payStyleFilters }}</a-button>
      </template>
    </a-table>
  </div>
</template>

<script>
import BurtPagination from "@/components/CUSTOMER/pagation";
import { mapState } from "vuex"
export default {
  data() {
    const columns = [
      { title: "项目", dataIndex: "itemcatDesc", width: 180 },
      {
        title: "项目明细",
        dataIndex: "itemDesc",
        width: 180,
      },
      {
        title: "单价",
        dataIndex: "itemPrice",
        width: 120,
      },
      { title: "数量", dataIndex: "itemQty", width: 180 },
      { title: "单位", dataIndex: "itemUnit", width: 180 },
      { title: "金额", dataIndex: "chargeAmount", width: 180 },
      { title: "折扣（%）", dataIndex: "discountAmount", width: 180 },
      { title: "折后金额", dataIndex: "actualAmount", width: 180 },
      { title: "减免金额", dataIndex: "reduceAmount", width: 180 },
      { title: "实际金额", dataIndex: "paidAmount", width: 180 },

      { title: "免赔额", dataIndex: "deductible", width: 180 },
      { title: "自付额", dataIndex: "selfPaid", width: 180 },
      { title: "其他费用", dataIndex: "otherPaid", width: 180 },
      { title: "实际金额", dataIndex: "actualPaid", width: 180 },
      {
        title: "操作",
        key: "operation",
        width: "175px",
        fixed: "right",
        scopedSlots: { customRender: "operation" },
      },
    ];
    const payColumns = [
      { title: "免赔额", dataIndex: "deductible", width: 180 },
      { title: "自付额", dataIndex: "selfPaid", width: 180 },
      { title: "其他费用", dataIndex: "otherPaid", width: 180 },
      { title: "个人支付", dataIndex: "personalPaid", width: 180 },
      { title: "商保支付", dataIndex: "ciPaid", width: 180 },
      {
        title: "支付方式",
        dataIndex: "paymentType",
        width: 180,
        scopedSlots: { customRender: "paymentType" },
      },
    ];
    return {
      receiptNo: "",
      columns,
      payColumns,
      form: {},
      pageForm: {
        doctorCode: "",
        patientName: "",
        patientNo: "",
        paymentCode: "",
        payorId: 0,
        visitTimeEnd: "",
        visitTimeStart: "",
      },
      patientTypeOptions: [
        {
          name: "商保",
          code: 1,
        },
      ], //客户类型
      companyOptions: [], //保险公司
      doctorOptions: [], //就诊医生
      paymentOptions: [
        {
          name: "商保",
          code: 1,
        },
      ], //支付方式
      dataList: [],
      pager: {
        pageNum: 1,
        pageSize: 10,
      },
      payDataList: [],
      payPager: [
        {
          pageNum: 1,
          pageSize: 10,
        },
      ],
    };
  },
  components: {
    BurtPagination,
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.common.userInfo
    })
  },
  filters: {
    payStyleFilters(value) {
      const styleMap = {
        1: "支付宝",
        2: "微信",
        3: "现金",
      };
      return styleMap[value];
    },
  },
  created() {
    const { receiptNo } = this.$route.query;
    this.receiptNo = receiptNo || "";

    this._getChargeListDetail();
    this._getCompanyOptions();//获取保险公司下拉选项
    this._getDoctorListNoPage();//获取看诊医生下拉选项
    this._getReceiptPaymentDetail(); //费用支付明细
  },
  methods: {
    // 获取列表数据
    _getChargeListDetail() {
      const data = {
        receiptNo: this.receiptNo,
        ...this.pager,
      };
      this.$apis.GETCHARGELISTDETAIL(data).then((res) => {
        console.log("11111111111获取table信息=", res);
        if (res.returnCode == "0000") {
          this.dataList = (res.content && res.content.list) || [];
          // this.pager.total = (res.content && res.content.total) || 0;
        } else {
          this.$message.error(res.returnMsg);
        }
      });
    },
    // 获取保险公司下拉选项
    _getCompanyOptions() {
      this.$apis.GETCOMPANYOPTIONS().then((res) => {
        console.log("获取保险公司下拉选项", res);
        if (res.returnCode == "0000") {
          this.companyOptions = res.content || [];
        } else {
          this.$message.error(res.returnMsg);
        }
      });
    },
    // 获取看诊医生下拉选项
    _getDoctorListNoPage(){
      this.$apis.GETDOCTORlISTNOPAGE({"providerId": this.userInfo.providerId}).then((res) => {
        if (res.returnCode === "0000") {
          this.doctorOptions = res.content || [];
        }else{
          this.$message.success(res.returnMsg);
        }
        
      });
    },
    // 获取费用支付明细
    _getReceiptPaymentDetail() {
      const params = {
        receiptNo: this.receiptNo,
        ...this.payPager,
      };
      this.$apis.GETRECEIPTPAYMENTDETAIL(params).then((res) => {
        console.log("获取费用支付明细", res);
        if (res.returnCode == "0000") {
          let content = res.content || {};
          this.payDataList = content;
        } else {
          this.$message.error(res.returnMsg);
        }
      });
    },

    // 选中就诊时间
    onSelectVisitTime(date, dateString) {
      console.log(date, dateString);
    },
    // 重置
    handlerReset() {
      this.form = {};
    },

    //设置行属性
    handlerRowClick(record) {
      const { receiptNo } = record;
      console.log("receiptNo=", receiptNo);
      return {
        style: {
          color: record.isEdit ? "#2B63FF" : "#252631",
        },
        on: {
          // 点击行
          click: () => {
            if (record.isEdit) {
              return true;
            }
            this.$router.push({
              name: "chargeQueryDetail",
              query: { receiptNo },
            });
          },
        },
      };
    },
    // 修改按钮
    changeDataStatus(record) {
      this.$set(record, "isEdit", true);
    },
    saveChange(record) {
      record.isEdit = undefined;
      record.isNew = undefined;
    },
    handlerSearch() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false;
        }
        this.pager.pageNum = 1;
        this.pageForm = this.$lodash.cloneDeep(this.form);
        this._getChargeListDetail();
      });
    },
    deleteData() {
      this.$message.success("删除成功");
    },
    // 新建账单信息
    addNewCharge() {
      // this.$router.push("/customer/edit");
    },
  },
};
</script>
<style lang="less" scoped>
.none-label {
  text-align: right;
  .ant-form-item-label {
    opacity: 0;
  }
}
.ant-btn .icon-class {
  .mg-r(10);
}
.title-div {
  line-height: 56px;
  color: #252631;
  font-weight: bold;
  border-bottom: 1px solid #eee;
}
.payTable{
  .ant-btn{
    border-color: #1890ff;
    color: #1890ff;
  }
}
</style>