<!--
 Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

 https://www.mall4j.com/

 未经允许，不可做商业用途！

 版权所有，侵权必究！
-->
<template>
  <!-- 财务对账 -->
  <div class="Mall4j table">
    <div class="search-bar">
      <el-form
        clearable
        :inline="true"
        :model="dataFrom"
        class="demo-form-inline"
        @submit.prevent
      >
        <el-form-item :label="$t('multishop.shopWalletLog.orderNumber') + '：'">
          <el-input
            v-model="dataFrom.orderId"
            maxlength="19"
            clearable
            :placeholder="$t('multishop.shopWalletLog.orderNumberTips')"
            @input="orderIdInput"
          />
        </el-form-item>
        <el-form-item :label="$t('multishop.shopWalletLog.refundNumber') + '：'">
          <el-input
            v-model="dataFrom.refundId"
            class="returnInput"
            maxlength="19"
            :placeholder="$t('multishop.shopWalletLog.refundNumberTips')"
            @input="refundIdInput"
          />
        </el-form-item>
        <el-form-item :label="$t('multishop.shopWalletLog.ioType') + '：'">
          <el-select
            v-model="dataFrom.ioType"
            clearable
            :placeholder="$t('multishop.shopWalletLog.ioType')"
          >
            <el-option
              v-for="item in ioType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('multishop.shopWalletLog.amountType') + '：'">
          <el-select
            v-model="dataFrom.amountType"
            clearable
            :placeholder="$t('multishop.shopWalletLog.amountType')"
          >
            <el-option
              v-for="item in amountType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('multishop.shopWalletLog.reason') + '：'">
          <el-select
            v-model="dataFrom.reason"
            width="200"
            clearable
            :placeholder="$t('multishop.shopWalletLog.reason')"
          >
            <el-option
              v-for="item in reason"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="时间范围："
          class="date-range-param"
        >
          <el-select
            v-model="datePickerType"
            class="date-picker-type"
            @change="setdatePickerType(datePickerType)"
          >
            <el-option
              v-for="item in datePickerTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-date-picker
            v-model="dateRangeParam"
            :type="datePickerType"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="defaultTime"
          />
        </el-form-item>
        <el-button
          type="primary"
          @click="onSubmit(true)"
        >
          {{ $t('table.search') }}
        </el-button>
        <el-button
          plain
          @click="clear"
        >
          {{ $t('table.clear') }}
        </el-button>
      </el-form>
    </div>
    <div class="list">
      <el-table
        :data="tableData"
        header-cell-class-name="table-header"
        row-class-name="table-row"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          align="left"
          :label="$t('table.id')"
          width="90"
        />
        <el-table-column
          prop="orderId"
          :label="$t('multishop.shopWalletLog.orderNumber')"
          align="center"
          width="150"
        >
          <template #default="scope">
            <span>{{ scope.row.orderId ? scope.row.orderId : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="refundId"
          :label="$t('multishop.shopWalletLog.refundNumber')"
          align="center"
          width="150"
        >
          <template #default="scope">
            <span>{{ scope.row.refundId ? scope.row.refundId : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="changeAmount"
          :label="$t('shop.changeAomunt')"
          align="center"
        >
          <template #default="scope">
            <span><span>￥ {{ price(scope.row.changeAmount) > 0 ? ['-','+'][scope.row.ioType] : "" }}</span>{{ price(scope.row.changeAmount) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="operation"
          :label="$t('multishop.shopWalletLog.amountType')"
          align="center"
          width="100"
        >
          <template #default="scope">
            <span>{{ amountType[scope.row.amountType] ? amountType[scope.row.amountType].label : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="freightAmount"
          :label="$t('multishop.shopWalletLog.deliveryFreight')"
          align="center"
        >
          <template #default="scope">
            <span>{{ handlerPrice(scope.row.freightAmount) || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="userAmount"
          :label="$t('multishop.shopWalletLog.amount')"
          align="center"
        >
          <template #default="scope">
            <span><span v-if="scope.row.userAmount">{{ ['-','+'][scope.row.ioType] }}</span>{{ handlerPrice(scope.row.userAmount) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="reason"
          :label="$t('multishop.shopWalletLog.reason')"
          align="center"
          min-width="150"
        >
          <template #default="scope">
            <span>{{ reason2[scope.row.reason] }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="platformAmount"
          :label="$t('multishop.shopWalletLog.platformCommission')"
          align="center"
          width="120"
        >
          <template #default="scope">
            <span v-if="scope.row.reason === 2"><span v-if="scope.row.platformCommission > 0">+</span>{{ price(scope.row.platformCommission) }}</span>
            <span v-else-if="scope.row.platformCommission > 0">-{{ price(scope.row.platformCommission) }}</span>
            <span v-else>{{ price(scope.row.platformCommission) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          :label="$t('multishop.shopWalletLog.createTime')"
          align="center"
          min-width="180"
        />
        <el-table-column
          prop="operation"
          :label="$t('table.actions')"
          align="center"
          fixed="right"
        >
          <template #default="scope">
            <el-button
              v-if="scope.row.reason !== 4 && scope.row.reason !== 6 && scope.row.reason !== 5 && scope.row.amountType !== 2"
              v-permission="['shop:shopWallet:page']"
              link
              type="primary"
              @click="handleDetail(scope.row.orderId, scope.row.refundId)"
            >
              {{ $t('table.detail') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页条 -->
    <pagination
      v-model:current-page="params.pageNum"
      v-model:page-size="params.pageSize"
      style="text-align: right"
      :total="total"
      @size-change="onPagination"
      @current-change="onPagination"
    />
  </div>
</template>

<script setup>

import { page } from '@/api/multishop/shop_wallet_log'

import Big from 'big.js'

const price = computed(() => {
  return (value) => {
    if (value) {
      return new Big(value).div(100).toFixed(2)
    }
    return 0
  }
})

let tempSearchForm = reactive('')
const total = ref(0)
const datePickerType = ref('daterange') // 日期筛选类型
const dateRangeParam = ref([])
const defaultTime = ref([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59)
])
const datePickerTypeOptions = [
  {
    label: '日期范围',
    value: 'daterange'
  },
  {
    label: '月份范围',
    value: 'monthrange'
  }
]
const params = reactive({
  pageNum: 1,
  pageSize: 10
})
const dataFrom = reactive({
  ioType: '',
  amountType: '',
  orderId: '',
  refundId: '',
  startTime: '',
  endTime: '',
  reason: ''
})
const tableData = ref([])

const ioType = computed(() => {
  return [{
    value: 0,
    label: $t('multishop.shopWalletLog.expenditure')
  }, {
    value: 1,
    label: $t('multishop.shopWalletLog.income')
  }]
})

const amountType = computed(() => {
  return [{
    value: 0,
    label: $t('shop.amoSett')
  }, {
    value: 1,
    label: $t('shop.avaStoAmo')
  }, {
    value: 2,
    label: $t('shop.unavaBalance')
  }] // '未结算金额', '店铺金额', '冻结金额'
})

const reason = computed(() => {
  return [
    {
      value: 0,
      label: $t('multishop.shopWalletLog.userPayment')
    },
    {
      value: 1,
      label: $t('multishop.shopWalletLog.orderSettlement')
    },
    {
      value: 2,
      label: $t('multishop.shopWalletLog.userRefundSuccess')
    },
    {
      value: 4,
      label: $t('multishop.shopWalletLog.withdrawalApplication')
    },
    {
      value: 5,
      label: $t('multishop.shopWalletLog.withdrawalRejected')
    },
    {
      value: 6,
      label: $t('multishop.shopWalletLog.withdrawalPassed')
    }
  ]
})

const reason2 = computed(() => {
  return [
    $t('multishop.shopWalletLog.userPayment'),
    $t('multishop.shopWalletLog.orderSettlement'),
    $t('multishop.shopWalletLog.userRefundSuccess'),
    '',
    $t('multishop.shopWalletLog.withdrawalApplication'),
    $t('multishop.shopWalletLog.withdrawalRejected'),
    $t('multishop.shopWalletLog.withdrawalPassed')
  ]
})

onMounted(() => {
  getData()
})

// 获取数据
const getData = (newData = false) => {
  if (newData || !tempSearchForm) {
    tempSearchForm = { ...dataFrom, ...params }
  } else {
    tempSearchForm.pageNum = params.pageNum
    tempSearchForm.pageSize = params.pageSize
  }
  page(tempSearchForm).then(res => {
    tableData.value = res.list
    total.value = res.total
  })
}
const setdatePickerType = (val) => {
  datePickerType.value = val
}
// 点击分页
const onPagination = () => {
  getData()
}
// 搜索
const onSubmit = (newData = false) => {
  params.pageNum = 1
  dataFrom.startTime = dateRangeParam.value ? dateRangeParam.value[0] : ''
  dataFrom.endTime = dateRangeParam.value ? dateRangeParam.value[1] : ''
  getData(newData)
}
// 查看详情
const router = useRouter()
const handleDetail = (orderId, refundId) => {
  router.push({
    path: '/finance/billing-details',
    query: {
      orderId,
      refundId
    }
  })
}
// 清空
const clear = () => {
  // 重置的数据
  const clearDataFrom = {
    ioType: '',
    amountType: '',
    orderId: '',
    refundId: '',
    startTime: '',
    endTime: '',
    reason: ''
  }
  Object.assign(dataFrom, clearDataFrom)
  dateRangeParam.value = []
}
const orderIdInput = (val) => {
  dataFrom.orderId = val.replace(/[^\d]/g, '')
}
const refundIdInput = (val) => {
  dataFrom.refundId = val.replace(/[^\d]/g, '')
}
/**
 * 精度运算-过滤
 */
const handlerPrice = (val) => {
  if (val == null) {
    return ''
  }
  // (val / 100).toFixed(2)
  return new Big(val).div(100).toFixed(2)
}

</script>

<style lang="scss" scoped>
  .table {
      :deep(.date-picker-type .el-input--suffix) {
        width: 120px !important;
      }
     .list{
       padding: 20px 0;
     }
   }
.search-bar {
  padding-bottom: 6px !important;
  :deep(.el-form .el-button) {
    margin-bottom: 16px;
  }
}
:deep(.el-form-item) {
   margin-right: 20px;
}
:deep(.returnInput .el-input__inner){
   padding-right: 30px;
}
</style>
