<template>
  <a-tabs
    @change="changeTab"
    v-model:activeKey="activeKey"
  >
    <a-tab-pane
      key="1"
      tab="申请中"
    ></a-tab-pane>
    <a-tab-pane
      key="2"
      tab="处理中"
    ></a-tab-pane>
    <a-tab-pane
      key="3"
      tab="已处理"
    ></a-tab-pane>
    <a-tab-pane
      key="4"
      tab="已关闭"
    ></a-tab-pane>
  </a-tabs>
  <a-form
    :label-col="{ xl: 7, lg: 5, md: 7, sm: 4 }"
    :wrapper-col="{ xl: 17, lg: 19, md: 17, sm: 20 }"
  >
    <a-row :gutter="24">
      <a-col
        :xl="6"
        :lg="12"
        :md="12"
        :sm="24"
        :xs="24"
      >
        <a-form-item label="骑行订单号">
          <a-input
            v-model:value.trim="queryform.cyclingOrderNumber"
            placeholder="请输入骑行订单号"
            allow-clear
          ></a-input>
        </a-form-item>
      </a-col>
      <a-col
        :xl="6"
        :lg="12"
        :md="12"
        :sm="24"
        :xs="24"
      >
        <a-form-item label="用户手机">
          <a-input
            v-model:value.trim="queryform.phoneNumber"
            placeholder="请输入用户手机"
            allow-clear
          ></a-input>
        </a-form-item>
      </a-col>
      <a-col
        :xl="8"
        :lg="12"
        :md="12"
        :sm="24"
        :xs="24"
        v-if="activeKey == '3'"
      >
        <a-form-item>
          <template #label>
            退款时间
            <a-tooltip title="退款完成时间">
              <QuestionCircleOutlined style="margin-left: 5px;color: rgb(192,192,192);" />
            </a-tooltip>
          </template>
          <a-range-picker
            valueFormat="YYYY-MM-DD"
            v-model:value="queryform.refundTime"
            :placeholder="['请选择退款时间起', '请选择退款时间止']"
          />
        </a-form-item>
      </a-col>
      <a-col
        :xl="6"
        :lg="12"
        :md="12"
        :sm="24"
        :xs="24"
      >
        <a-form-item
          class="ele-text-right"
          :wrapper-col="{ span: 24 }"
        >
          <a-space>
            <a-button
              type="primary"
              style="background-color: #5cc750"
              @click="search"
            >查询</a-button>
            <a-button @click="reset">重置</a-button>
            <a-button @click="exportOrder">导出</a-button>
          </a-space>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
  <a-table
    bordered
    :pagination="pagination"
    :columns="columns"
    :dataSource="dataSource"
    :scroll="{ x: 'max-content' }"
    @change="handleTableChange"
  >
    <template #bodyCell="{ column ,record}">
      <template v-if="column.key === 'arrivedState'">
        <a-tag
          v-if="record.arrivedState == '退款成功'"
          color="#f50"
        >退款成功</a-tag>
        <a-tag
          v-if="record.arrivedState == '退款失败'"
          color="#87d068"
        >退款失败</a-tag>
      </template>
      <template v-if="column.key === 'phone'">
        <a @click="viewUserInfo(record)">{{record.phone}}</a>
      </template>
      <template v-if="column.key === 'cyclingOrderNumber'">
        <a @click="viewOrderInfo(record)">{{record.cyclingOrderNumber}}</a>
      </template>
      <template v-if="column.key === 'action'">
        <a-space>
          <div v-if="activeKey == '1'">
            <a @click="handleRevie(record)">审核</a>
          </div>
          <div v-if="activeKey == '2'">
            <a-popconfirm
              title="请确认您是否要取消退款,操作后将不可恢复!"
              ok-text="确定"
              cancel-text="取消"
              placement="top"
              @confirm="handleCancel(record)"
            >
              <a href="#">取消退款</a>
            </a-popconfirm>
            <a-divider type="vertical" />
            <a @click="handleCompleteRefund(record)">完成退款</a>
          </div>
        </a-space>
      </template>
    </template>
  </a-table>
  <!-- 审核表单 -->
  <a-modal
    v-model:open="openRevie"
    title="审核"
    @ok="handleOkModalRevie"
    @cancel="handleCancelModalRevie"
    width="1000px"
    :maskClosable="false"
  >
    <RefundOrderRevie ref="formModel"></RefundOrderRevie>
  </a-modal>
  <!-- 确认退款 -->
  <a-modal
    v-model:open="openConfirm"
    title="确认退款"
    @ok="handleOkModalConfirm"
    @cancel="handleCancelModalConfirm"
    width="1000px"
    :maskClosable="false"
  >
    <ConfirmRefund ref="formModelConfirm"></ConfirmRefund>
  </a-modal>
  <!-- 用户详情 -->
  <a-modal
    v-model:open="openUserInfo"
    title="用户详情"
    width="1000px"
    :maskClosable="false"
    :footer="[]"
    :key="modalUserKey"
  >
    <UserInfo ref="formModelUserInfo"></UserInfo>
  </a-modal>
  <!-- 订单详情 -->
  <a-modal
    v-model:open="openOrderInfo"
    title="订单详情"
    width="1000px"
    :maskClosable="false"
    :footer="[]"
    :key="modalOrderKey"
  >
    <OrderInfo ref="formModelOrderInfo"></OrderInfo>
  </a-modal>
</template>
<script setup>
import { ref, onMounted, reactive, nextTick } from 'vue';
import { message } from 'ant-design-vue'
import { callPayment } from '@/apis/call.js'
import config from '@/utils/config.js'
import RefundOrderRevie from '@/views/form/cyclingorderrefund/refundorderrevie/RefundOrderRevie.vue';
import ConfirmRefund from '@/views/form/cyclingorderrefund/confirmrefund/ConfirmRefund.vue';
import UserInfo from '@/views/form/cyclingorderrefund/userinfo/UserInfo.vue';
import OrderInfo from '@/views/form/cyclingorderrefund/orderinfo/OrderInfo.vue';
import { getGUID } from '@/utils/tools'

const activeKey = ref('1')
const openRevie = ref(false);
const formModel = ref(null);
const openConfirm = ref(false);
const formModelConfirm = ref(null);
const openUserInfo = ref(false);
const formModelUserInfo = ref(null);
const openOrderInfo = ref(false);
const formModelOrderInfo = ref(null);
const modalOrderKey = ref(null);
const modalUserKey = ref(null);
const columns = ref([
  {
    title: '申请时间',
    dataIndex: 'applyTime',
    width: 200,
    key: 'applyTime',
    align: 'center'
  },
  {
    title: '运营区域',
    dataIndex: 'operationArea',
    width: 200,
    key: 'operationArea',
    align: 'center'
  },
  {
    title: '用户手机',
    dataIndex: 'phone',
    width: 200,
    key: 'phone',
    align: 'center'
  },
  {
    title: '骑行订单号',
    dataIndex: 'cyclingOrderNumber',
    width: 200,
    key: 'cyclingOrderNumber',
    align: 'center'
  },
  {
    title: '本次申请退款(元)',
    dataIndex: 'applyRefundAmount',
    width: 200,
    key: 'applyRefundAmount',
    align: 'center'
  },
  {
    title: '实付金额(元)',
    dataIndex: 'actualPayAmount',
    width: 200,
    key: 'actualPayAmount',
    align: 'center'
  },
  {
    title: '支付方式',
    dataIndex: 'payMethod',
    width: 200,
    key: 'payMethod',
    align: 'center'
  },
  {
    title: '支付时间',
    dataIndex: 'payTime',
    width: 200,
    key: 'payTime',
    align: 'center'
  },
  {
    title: '申请原因',
    dataIndex: 'applyReason',
    width: 200,
    key: 'applyReason',
    align: 'center'
  },
  {
    title: '来源',
    dataIndex: 'source',
    width: 200,
    key: 'source',
    align: 'center'
  },
  {
    title: '申请人',
    dataIndex: 'applicant',
    width: 200,
    key: 'applicant',
    align: 'center'
  },
  {
    title: '操作',
    key: 'action',
    width: 100,
    align: 'center',
    fixed: 'right'
  }
]);
const queryform = ref({
  state: activeKey.value - 1,
  cyclingOrderNumber: '',
  phoneNumber: '',
  refundTime: [],
  pageParam: {
    pageNum: config.pageParam.pageNum,
    pageSize: config.pageParam.pageSize
  }
})
// 表格行数据
const dataSource = ref([])

let pagination = reactive({
  total: dataSource.value.length,
  current: config.pageParam.pageNum,
  pageSize: config.pageParam.pageSize,
  showSizeChanger: true,
  pageSizeOptions: config.pageParam.pageSizeOptions,
  showQuickJumper: true
})

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

const search = () => {
  getData()
}

const reset = () => {
  queryform.value = {
    state: activeKey.value - 1,
    cyclingOrderNumber: '',
    phoneNumber: '',
    refundTime: [],
    pageParam: {
      pageNum: config.pageParam.pageNum,
      pageSize: config.pageParam.pageSize
    }
  }
  getData()
}

const getData = async () => {
  callPayment("/wxPayment/queryRefundList", queryform.value).then((res) => {
    if (res.code != 200) {
      message.error(res.message)
      dataSource.value = []
      return
    }
    dataSource.value = res.data.records
  });
}

const changeTab = (key) => {
  queryform.value.state = key - 1
  switch (key) {
    case "1":
      columns.value = [
        {
          title: '申请时间',
          dataIndex: 'applyTime',
          width: 200,
          key: 'applyTime',
          align: 'center'
        },
        {
          title: '运营区域',
          dataIndex: 'operationArea',
          width: 200,
          key: 'operationArea',
          align: 'center'
        },
        {
          title: '用户手机',
          dataIndex: 'phone',
          width: 200,
          key: 'phone',
          align: 'center'
        },
        {
          title: '骑行订单号',
          dataIndex: 'cyclingOrderNumber',
          width: 200,
          key: 'cyclingOrderNumber',
          align: 'center'
        },
        {
          title: '本次申请退款(元)',
          dataIndex: 'applyRefundAmount',
          width: 200,
          key: 'applyRefundAmount',
          align: 'center'
        },
        {
          title: '实付金额(元)',
          dataIndex: 'actualPayAmount',
          width: 200,
          key: 'actualPayAmount',
          align: 'center'
        },
        {
          title: '支付方式',
          dataIndex: 'payMethod',
          width: 200,
          key: 'payMethod',
          align: 'center'
        },
        {
          title: '支付时间',
          dataIndex: 'payTime',
          width: 200,
          key: 'payTime',
          align: 'center'
        },
        {
          title: '申请原因',
          dataIndex: 'applyReason',
          width: 200,
          key: 'applyReason',
          align: 'center'
        },
        {
          title: '来源',
          dataIndex: 'source',
          width: 200,
          key: 'source',
          align: 'center'
        },
        {
          title: '申请人',
          dataIndex: 'applicant',
          width: 200,
          key: 'applicant',
          align: 'center'
        },
        {
          title: '操作',
          key: 'action',
          width: 100,
          align: 'center',
          fixed: 'right'
        }
      ]
      break
    case "2":
      columns.value = [
        {
          title: '申请时间',
          dataIndex: 'applyTime',
          width: 200,
          key: 'applyTime',
          align: 'center'
        },
        {
          title: '运营区域',
          dataIndex: 'operationArea',
          width: 200,
          key: 'operationArea',
          align: 'center'
        },
        {
          title: '用户手机',
          dataIndex: 'phone',
          width: 200,
          key: 'phone',
          align: 'center'
        },
        {
          title: '骑行订单号',
          dataIndex: 'cyclingOrderNumber',
          width: 200,
          key: 'cyclingOrderNumber',
          align: 'center'
        },
        {
          title: '实付金额(元)',
          dataIndex: 'actualPayAmount',
          width: 200,
          key: 'actualPayAmount',
          align: 'center'
        },
        {
          title: '退款金额(元)',
          dataIndex: 'refundAmount',
          width: 200,
          key: 'refundAmount',
          align: 'center'
        },
        {
          title: '退款方式',
          dataIndex: 'refundMethod',
          width: 200,
          key: 'refundMethod',
          align: 'center'
        },
        {
          title: '支付方式',
          dataIndex: 'payMethod',
          width: 200,
          key: 'payMethod',
          align: 'center'
        },
        {
          title: '支付时间',
          dataIndex: 'payTime',
          width: 200,
          key: 'payTime',
          align: 'center'
        },
        {
          title: '申请原因',
          dataIndex: 'applyReason',
          width: 200,
          key: 'applyReason',
          align: 'center'
        },
        {
          title: '来源',
          dataIndex: 'source',
          width: 200,
          key: 'source',
          align: 'center'
        },
        {
          title: '申请人',
          dataIndex: 'applicant',
          width: 200,
          key: 'applicant',
          align: 'center'
        },
        {
          title: '操作',
          key: 'action',
          width: 200,
          align: 'center',
          fixed: 'right',
        }
      ]
      break
    case "3":
      columns.value = [
        {
          title: '申请时间',
          dataIndex: 'applyTime',
          width: 200,
          key: 'applyTime',
          align: 'center'
        },
        {
          title: '运营区域',
          dataIndex: 'operationArea',
          width: 200,
          key: 'operationArea',
          align: 'center'
        },
        {
          title: '用户手机',
          dataIndex: 'phone',
          width: 200,
          key: 'phone',
          align: 'center'
        },
        {
          title: '骑行订单号',
          dataIndex: 'cyclingOrderNumber',
          width: 200,
          key: 'cyclingOrderNumber',
          align: 'center'
        },
        {
          title: '审核时间',
          dataIndex: 'reviewTime',
          width: 200,
          key: 'reviewTime',
          align: 'center'
        },
        {
          title: '审核人',
          dataIndex: 'reviewer',
          width: 200,
          key: 'reviewer',
          align: 'center'
        },
        {
          title: '实付金额(元)',
          dataIndex: 'actualPayAmount',
          width: 200,
          key: 'actualPayAmount',
          align: 'center'
        },
        {
          title: '退款金额(元)',
          dataIndex: 'refundAmount',
          width: 200,
          key: 'refundAmount',
          align: 'center'
        },
        {
          title: '到账状态',
          dataIndex: 'arrivedState',
          width: 200,
          key: 'arrivedState',
          align: 'center'
        },
        {
          title: '退款到账时间',
          dataIndex: 'arrivedTime',
          width: 200,
          key: 'arrivedTime',
          align: 'center'
        },
        {
          title: '退款方式',
          dataIndex: 'refundMethod',
          width: 200,
          key: 'refundMethod',
          align: 'center'
        },
        {
          title: '支付方式',
          dataIndex: 'payMethod',
          width: 200,
          key: 'payMethod',
          align: 'center'
        },
        {
          title: '交易流水号',
          dataIndex: 'tradeSerialNumber',
          width: 200,
          key: 'tradeSerialNumber',
          align: 'center'
        },
        {
          title: '支付时间',
          dataIndex: 'payTime',
          width: 200,
          key: 'payTime',
          align: 'center'
        },
        {
          title: '申请原因',
          dataIndex: 'applyReason',
          width: 200,
          key: 'applyReason',
          align: 'center'
        },
        {
          title: '来源',
          dataIndex: 'source',
          width: 200,
          key: 'source',
          align: 'center'
        },
        {
          title: '申请人',
          dataIndex: 'applicant',
          width: 200,
          key: 'applicant',
          align: 'center'
        }
      ]
      break
    case "4":
      columns.value = [
        {
          title: '申请时间',
          dataIndex: 'applyTime',
          width: 200,
          key: 'applyTime',
          align: 'center'
        },
        {
          title: '运营区域',
          dataIndex: 'operationArea',
          width: 200,
          key: 'operationArea',
          align: 'center'
        },
        {
          title: '用户手机',
          dataIndex: 'phone',
          width: 200,
          key: 'phone',
          align: 'center'
        },
        {
          title: '骑行订单号',
          dataIndex: 'cyclingOrderNumber',
          width: 200,
          key: 'cyclingOrderNumber',
          align: 'center'
        },
        {
          title: '驳回时间',
          dataIndex: 'rejectTime',
          width: 200,
          key: 'rejectTime',
          align: 'center'
        },
        {
          title: '驳回原因',
          dataIndex: 'rejectReason',
          width: 200,
          key: 'rejectReason',
          align: 'center'
        },
        {
          title: '实付金额(元)',
          dataIndex: 'actualPayAmount',
          width: 200,
          key: 'actualPayAmount',
          align: 'center'
        },
        {
          title: '本次申请退款(元)',
          dataIndex: 'applyRefundAmount',
          width: 200,
          key: 'applyRefundAmount',
          align: 'center'
        },
        {
          title: '支付方式',
          dataIndex: 'payMethod',
          width: 200,
          key: 'payMethod',
          align: 'center'
        },
        {
          title: '支付时间',
          dataIndex: 'payTime',
          width: 200,
          key: 'payTime',
          align: 'center'
        },
        {
          title: '申请原因',
          dataIndex: 'applyReason',
          width: 200,
          key: 'applyReason',
          align: 'center'
        },
        {
          title: '来源',
          dataIndex: 'source',
          width: 200,
          key: 'source',
          align: 'center'
        },
        {
          title: '申请人',
          dataIndex: 'applicant',
          width: 200,
          key: 'applicant',
          align: 'center'
        }
      ]
      break
    default: break
  }
  getData()
}

const exportOrder = () => {

}

let handleTableChange = (pagina) => {
  pagination.current = pagina.current
  pagination.pageSize = pagina.pageSize
  queryform.value.pageParam.pageNum = pagina.current
  queryform.value.pageParam.pageSize = pagina.pageSize
  getData()
}

const handleCancel = (record) => {

  const data = {
    refundId: record['id'],
    operate: "3"
  }
  callPayment("/wxPayment/reviewRefund", data).then(res => {
    if (res.code == 200) {
      message.success("取消成功");
      getData();
    } else {
      message.error(res.message)
    }
  })
}

const handleRevie = (record) => {
  openRevie.value = true;
  nextTick(() => {
    if (formModel.value) {
      const params = record == null ? {} : {
        refundId: record['id']
      }
      formModel.value.openForm(params);
    } else {
      console.log('formModel is not ready yet');
    }
  });
}

const handleOkModalRevie = () => {
  formModel.value.formSave(bres => {
    openRevie.value = false;
    if (bres.code == 200) {
      getData()
    }
  });
}

const handleCancelModalRevie = () => {
  formModel.value.resetAll(bres => {
  });
}

const handleCompleteRefund = (record) => {
  openConfirm.value = true;
  nextTick(() => {
    if (formModelConfirm.value) {
      const params = record == null ? {} : {
        refundId: record['id'],
        orderNumber: record['cyclingOrderNumber'],
        phone: record['phone'],
        applyRefundAmount: record['actualPayAmount'],
        refundMethod: record['refundMethod']
      }
      formModelConfirm.value.openForm(params);
    } else {
      console.log('formModel is not ready yet');
    }
  });
}

const handleOkModalConfirm = () => {
  formModelConfirm.value.formSave(bres => {
    openConfirm.value = false;
    if (bres.code == 200) {
      getData()
    }
  });
}

const handleCancelModalConfirm = () => {
  formModel.value.resetAll(bres => {
  });
}

const viewUserInfo = (record) => {
  openUserInfo.value = true;
  modalUserKey.value = getGUID();
  nextTick(() => {
    if (formModelUserInfo.value) {
      const params = record == null ? {} : {
        phone: record['phone'],
      }
      formModelUserInfo.value.openForm(params);
    } else {
      console.log('formModel is not ready yet');
    }
  });
}

const viewOrderInfo = (record) => {
  openOrderInfo.value = true;
  modalOrderKey.value = getGUID();
  nextTick(() => {
    if (formModelOrderInfo.value) {
      const params = record == null ? {} : {
        ebikeCode: record['ebikeCode'],
        startTime: record['startTime'],
        endTime: record['endTime'],
        ridePoint: record['ridePoint'],
        returnPoint: record['returnPoint'],
        orderNumber: record['cyclingOrderNumber'],
      }
      formModelOrderInfo.value.openForm(params);
    } else {
      console.log('formModel is not ready yet');
    }
  });
}

</script>