<template>
  <div class="cash_deposit_page">
    <div class="top_content">
      保证金总额<i class="el-icon-warning-outline icon"></i>
      <span>{{ total }}</span>
    </div>
    <div class="product-content">
      <p class="title">交易记录</p>
      <div class="toolbar">
        <el-form
          :inline="true"
          :model="formParams"
        >
          <el-form-item label="店铺名称">
            <el-input v-model="formParams.model.storeName" size="mini" />
          </el-form-item>

          <el-form-item label="保证金状态">
            <el-select
              v-model="formParams.model.state"
              size="mini"
            >
              <el-option
                v-for="(item, index) in stateList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="缴纳时间">
            <el-date-picker
              v-model="date"
              size="mini"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="yyyy-MM-dd HH:mm"
            />
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              size="mini"
              @click="fetch"
            >
              查询
            </el-button>
            <el-button
              plain
              size="mini"
              @click="reset"
            >
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        :data="tableData.records"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="storeName"
          label="店铺名称"
        />
        <el-table-column
          prop="depositType"
          label="保证金类型"
          :formatter="getType"
        />
        <el-table-column
          prop="promotionName"
          label="活动名称"
        />
        <el-table-column
          prop="transactionId"
          label="交易流水号"
        />
        <el-table-column
          prop="amount"
          label="保证金金额"
          :formatter="getPrice"
        />
        <el-table-column
          prop="state"
          label="保证金状态"
          :formatter="getState"
        />
        <el-table-column
          prop="createTime"
          label="缴纳/退保时间"
        />
      </el-table>
    </div>
    <pagination
      v-show="tableData.total > 0"
      :limit.sync="formParams.size"
      :page.sync="formParams.current"
      :total="Number(tableData.total)"
      @pagination="fetch"
    />
  </div>
</template>

<script>
import Finance from '@/api/Finance'
import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      formParams: {
        size: 10,
        current: 1,
        model: {
          depositType: 1,
          promotionId: '',
          state: '',
          orderCode: '',
          amount: '',
          storeName: '',
          startTime: '',
          endTime: ''
        }
      },
      date: [],
      stateList: [
        { label: '全部', value: '' },
        { label: '冻结中', value: 0 },
        { label: '已退回', value: 1 }
      ],
      total: '',
      tableData: {}
    }
  },
  created() {
    this.getDepositList()
    this.getDepositSum()
  },
  methods: {
    async getDepositList() {
      const vm = this
      vm.formParams.model.startTime = vm.date[0] || ''
      vm.formParams.model.endTime = vm.date[1] || ''
      const res = await Finance.getDepositList(vm.formParams)
      const resData = res.data
      if (resData.code === 0 ) {
        vm.tableData = resData.data
      }
    },
    async getDepositSum() {
      const vm = this
      const res = await Finance.getDepositSum()
      const resData = res.data
      if (resData.code === 0) {
        vm.total = resData.data.total / 100
      }
    },
    getPrice(row, item, value) {
      return value / 100
    },
    reset() {
      this.formParams = {
        size: 10,
        current: 1,
        model: {
          depositType: 1,
          promotionId: '',
          state: '',
          orderCode: '',
          amount: '',
          storeName: '',
          startTime: '',
          endTime: ''
        }
      }
      this.date = []
    },
    fetch() {
      this.getDepositList()
    },
    getType(row, item, cellValue) {
      return cellValue === 1 ? '营销活动保证金' : ''
    },
    getState(row, item, cellValue) {
      const ob = { 0: '冻结中', 1: '已退回' }
      return ob[cellValue]
    }
  }
}
</script>

<style lang='less' scoped>
.cash_deposit_page {
    min-height: calc(100% - 20px);
    margin-top: 20px;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
    .top_content {
      height: 100px;
      line-height: 100px;
      font-size: 20px;
      .icon {
        color: red;
        font-size: 20px;
      }
      span {
        font-size: 28px;
        color: #FFAE11;
        margin-left: 20px;
      }
    }
    .product-content {
      p.title {
        background: #D7D7D7;
        margin: 0;
        padding: 10px;
      }
    }
}

/deep/ .el-table {
  th {
      background: #EEF3FF;
      color:#333333;
      font-size:16px;
      font-weight: 400;
      border-color: #E0E5EB;
      text-align: center;
  }
  td {
    font-size: 14px;
    text-align: center;
    color: #666666;
  }

  .cell {
      text-align: center;
      white-space: pre-line;/*保留换行符*/
  }
}
</style>
