<template>
  <el-dialog
    :title="title"
    :close-on-click-modal="false"
    :visible.sync="detailsVisible"
    :before-close="closeDialog"
  >
    <el-form :model="detailsForm">
      <el-row>
        <el-col :span="12">
          <el-form-item label="类型:">
            <el-select placeholder="请选择" v-model="detailsForm.role" clearable class="max150">
              <el-option label="用户" :value="1"></el-option>
              <el-option label="专家" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收支类型:">
            <el-select placeholder="请选择" v-model="detailsForm.role" clearable class="max150">
              <el-option label="红包" :value="1"></el-option>
              <el-option label="打赏" :value="2"></el-option>
              <el-option label="充值" :value="3"></el-option>
              <el-option label="提现" :value="4"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="时间:">
            <div class="block">
              <el-date-picker v-model="time" type="datetime" placeholder="选择日期时间" class="max200"></el-date-picker>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="6">
          <el-form-item>
            <el-button size="mini" type="primary" round>查询</el-button>
            <el-button size="mini" type="info" plain round>重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="total">
        <div>
          <span>收入合计:{{income}}</span>
        </div>
        <div>
          <span>支出合计:{{ expenditure}}</span>
        </div>
      </div>
      <!-- <el-form-item label="特权用户:">
        <template>
          <el-checkbox-group v-model="checkList">
            <el-checkbox :label="1">普通用户</el-checkbox>
            <el-checkbox :label="2">vip用户</el-checkbox>
            <el-checkbox :label="3">svip用户</el-checkbox>
            <el-checkbox :label="4">企业用户</el-checkbox>
          </el-checkbox-group>
        </template>
      </el-form-item>-->
    </el-form>
    <div class="MaintenanceTable">
      <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        tooltip-effect="dark"
        @selection-change="selectionChange"
        class="OutTable"
        border
        v-loading="listLoading"
      >
        <el-table-column type="selection"></el-table-column>
        <!-- <el-table-column prop="ProjectCode" label="项目编号"></el-table-column> -->
        <el-table-column prop="flow_num" label="流水号" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="role" label="类型" :show-overflow-tooltip="true">
          <template slot-scope="scope">{{ scope.row.role == 1 ? '用户' : '专家' }}</template>
        </el-table-column>
        <el-table-column prop="type" label="收支类型" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="amount" label="交易金额" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="balance" label="用户余额" :show-overflow-tooltip="true"></el-table-column>
      </el-table>
      <div class="pagenation">
        <span>
          <el-pagination
            background
            layout="prev, pager, next, sizes, total, jumper"
            :total="total"
            :current-page.sync="page.pageNum"
            @current-change="handleCurrentChange"
            @size-change="handSizeChange"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="page.pageSize"
          ></el-pagination>
        </span>
      </div>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    detailsVisible: {
      type: Boolean,
      default: false
    }
    // detailsForm: {
    //   type: Object,
    //   default: function() {
    //     return {};
    //   }
    // }
  },
  data() {
    return {
      checkList: [1],
      title: "账单明细",
      detailsForm: {},
      time: "",
      listLoading: false, // table是否展示loading
      tableData: [
        {
          flow_num: "10086",
          type: "红包",
          amount: "+100.00",
          balance: "100.00",
          role: 1
        },
        {
          flow_num: "10086",
          type: "打赏",
          amount: "+100.00",
          balance: "100.00",
          role: 2
        }
      ], // 列表数据
      page: {
        // 页码
        pageNum: 1,
        pageSize: 10
      },
      total: 10,
      income: "10000.00",
      expenditure: "10000.00"
    };
  },
  methods: {
    closeDialog() {
      this.$emit("closeDialog", "detailsVisible");
    },
    handSizeChange() {},
    handleCurrentChange() {},
    selectionChange() {}
  }
};
</script>
<style scoped>
::v-deep .el-textarea__inner {
  min-height: 200px !important;
}
.el-input {
  width: auto;
}
.max150 {
  max-width: 150px;
}
.max200 {
  max-width: 200px;
}
.total {
  font-family: "PingFang SC Bold", "PingFang SC Medium", "PingFang SC",
    sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.847058823529412);
  line-height: 28px;
}
.MaintenanceTable {
  margin-top: 20px;
}
</style>