<template>
<!--  押金流水-->
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
    </div>
    <div class="app-container">
      <div
        style="
          justify-content: flex-start;
          margin: 0px 0 12px 0;
          display: flex;
          align-items: center;
        "
      >
        <div style="width: 200px">
          <span>患者名称：{{name}}</span>
        </div>
        <div style="width: 200px">
          <span>可用金额：{{sum}}</span>
        </div>
      </div>
      <div
        style="
          justify-content: flex-start;
          margin: 0px 0 12px 0;
          display: flex;
          align-items: center;
        "
      >
        <div style="width: 550px">
          <span>日期查询：</span>
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            @change="search_tmp"
          >
          </el-date-picker>
        </div>
        <div style="width: 300px">
          <span>押金类型：</span>
          <el-select v-model="deposit_status" placeholder="请选择" @change="search">
            <el-option
              v-for="item in depositlist"
              :key="item.name"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>

      <el-table
        :header-cell-style="{
          backgroundColor: 'rgb(245, 247, 250)',
          color: '#606266',
        }"
        :data="tableData"
        border
      >
        <el-table-column type="index" label="序号" align="center" width="100">
        </el-table-column>
        <el-table-column label="押金类型" align="center">
          <template slot-scope="scope">
<!--            <span>{{ scope.row.deposit_status	 ? scope.row.deposit_status	 : "" }}</span>-->
            <span v-if="scope.row.deposit_status == 1">充值</span>
            <span v-if="scope.row.deposit_status == 2">扣费</span>
            <span v-if="scope.row.deposit_status == 3">退款</span>
            <span v-if="scope.row.deposit_status == 4">退费</span>
          </template>
        </el-table-column>
        <el-table-column label="充值/扣费单据编码" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.deposit_code	 ? scope.row.deposit_code	 : "" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="充值金额" align="center">
          <template slot-scope="scope">
<!--            <span>{{ scope.row.deposit	 ? scope.row.deposit	 : "" }}</span>-->
            <span v-if="scope.row.deposit_status == 1">{{ scope.row.deposit	 ? scope.row.deposit	 : "" }}</span>
            <span v-if="scope.row.deposit_status == 2">-</span>
            <span v-if="scope.row.deposit_status == 3">-</span>
            <span v-if="scope.row.deposit_status == 4">{{ scope.row.deposit	 ? scope.row.deposit	 : "" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="扣费金额" align="center">
          <template slot-scope="scope">
<!--            <span>{{ scope.row.deposit	 ? scope.row.deposit	 : "" }}</span>-->
            <span v-if="scope.row.deposit_status == 1">-</span>
            <span v-if="scope.row.deposit_status == 2">{{ scope.row.deposit	 ? scope.row.deposit	 : "" }}</span>
            <span v-if="scope.row.deposit_status == 3">{{ scope.row.deposit	 ? scope.row.deposit	 : "" }}</span>
            <span v-if="scope.row.deposit_status == 4">-</span>
          </template>
        </el-table-column>
        <el-table-column label="可用金额" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.surplus_deposit	 ? scope.row.surplus_deposit	 : "" }}</span>
          </template>
        </el-table-column>

      </el-table>


      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 50, 100, 200, 500, 1000]"
        :page-size="10"
        background
        align="right"
        style="margin-top: 20px"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import BreadCrumb from "@/xt_pages/components/bread-crumb";
import {
  refundlist,
  depositflow,
  getmonthtime
}from "@/api/deposit";
export default {
  components: {
    BreadCrumb,
  },
  data() {
    return {
      crumbs: [
        { path: false, name: "押金管理" },
        { path: "/DepositManagement/DepositSearch", name: "流水详情" },
      ],
      tableData: [],
      depositlist:[{name:"全部",value:0},{name:"充值",value:1},{name:"扣费",value:2},{name:"退款",value:3},{name:"退费",value:4}],
      value1:"",
      start_time:"",
      end_time:"",
      id: 0,
      name: "",
      sum:0,
      deposit_status:0,
      total: 0,
      page: 1,
      limit: 10,
    };
  },
  created(){
    this.init();
    // this.search();
  },
  methods: {
    // 初始化数据
    init() {
      // this.$route.query.key
      // console.log("this.$route.query.key",this.$route.query.key);
      this.name = this.$route.query.key.his_patient_name
      this.id = this.$route.query.key.his_patient_id
      var params = {}
      getmonthtime(params).then((res) => {
        if (res.data.state == 1){
          this.value1 = [res.data.data.srart_time,res.data.data.end_time]
          console.log("==========this.value1",this.value1);
        }
        this.search();
      })
      // this.search();
    },
    // 查询操作
    search() {
      console.log("this.value1++++++++++++",this.value1);
      if (this.value1 != null){
        if(this.value1[0] != undefined && this.value1[1] != undefined){
          this.start_time = this.value1[0]
          this.end_time = this.value1[1]
        }
      }else {
        this.start_time = ""
        this.end_time = ""
      }
      var params = {
        id: this.id,
        start_time: this.start_time,
        end_time: this.end_time,
        deposit_status: this.deposit_status,
        page: this.page,
        limit: this.limit,
      };
      // console.log("params",params)
      depositflow(params).then((res) => {
        if (res.data.state == 1){
          this.tableData = res.data.data.list;
          this.sum = res.data.data.decimal;
          this.total = res.data.data.total;
        }
      })
    },
    // 查询操作_用于日期
    search_tmp() {
      console.log("this.value1++++++++++++",this.value1);
      if (this.value1 != null){
        if(this.value1[0] != undefined && this.value1[1] != undefined){
          this.start_time = this.value1[0]
          this.end_time = this.value1[1]
        }
      }else {
        this.start_time = ""
        this.end_time = ""
      }
      var params = {
        id: this.id,
        start_time: this.start_time,
        end_time: this.end_time,
        deposit_status: this.deposit_status,
        page: 1,//this.page,
        limit: this.limit,
      };
      // console.log("params",params)
      depositflow(params).then((res) => {
        if (res.data.state == 1){
          this.tableData = res.data.data.list;
          this.sum = res.data.data.decimal;
          this.total = res.data.data.total;
        }
      })
    },

    // 页表操作
    handleSizeChange(val) {
      this.limit = val;
      this.search();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.search();
    },

  },
};
</script>
<style scoped>
/deep/ .el-range-separator {
  width: 10%;
}
</style>
