<template>
  <div>
    <div class="pl-5">
      <el-radio-group v-model="query.refund_status" @change="search">
        <el-radio v-for="item in statusListTop" :label="item.value" :key="item.value">{{ item.name }}</el-radio>
      </el-radio-group>
    </div>
    <div class="flex justify-between">
      <Search :search="search" :reset="resetQuery">
        <template v-slot:body>
          <el-form-item label="订单号" prop="trade_no">
            <el-input v-model="query.trade_no" placeholder="请输入订单号" clearable />
          </el-form-item>
          <el-form-item label="用户ID" prop="uid">
            <el-input v-model="query.uid" placeholder="请输入用户ID" clearable />
          </el-form-item>
          <el-form-item label="充值类型" prop="order_type">
            <el-select v-model="query.order_type" filterable clearable placeholder="选择充值类型">
              <el-option v-for="item in channelOrderTypeList" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="推广名称" prop="promotion_id">
            <el-select v-model="query.promotion_id" filterable remote clearable
              :remote-method="(query) => { remoteMethod(query, 'channelPromotions') }" placeholder="全部推广名称">
              <el-option v-for="item in channelPromotions" :key="item.promotion_id" :label="item.name"
                :value="item.promotion_id" />
            </el-select>
          </el-form-item>
          <el-form-item label="小程序" v-if="!query.promotion_id" prop="miniprogram_id">
            <el-select v-model="query.miniprogram_id" filterable remote
              :remote-method="(query) => { remoteMethod(query, 'channelMiniprogram') }" clearable placeholder="选择小程序">
              <el-option v-for="item in channelMiniprogram" :key="item.miniprogram_id" :label="item.name"
                :value="item.miniprogram_id" />
            </el-select>
          </el-form-item>
          <el-form-item label="优化师" v-if="!query.promotion_id && !rolesIdentify.includes('optimizer')" prop="user_id">
            <el-select v-model="query.user_id" filterable remote clearable
              :remote-method="(query) => { remoteMethod(query, 'channelPromotionsUsers') }" placeholder="选择优化师">
              <el-option v-for="item in promotionsUsersList" :key="item.user_id" :label="item.name"
                :value="item.user_id" />
            </el-select>
          </el-form-item>
          <el-form-item label="订单时间">
            <el-date-picker unlink-panels clearable @change="orderTimeChange" format="YYYY/MM/DD"
              value-format="YYYY-MM-DD" v-model="query.orderTime" type="daterange" :shortcuts="shortcuts"
              range-separator="To" start-placeholder="开始时间" end-placeholder="结束时间" />
          </el-form-item>
		  <el-form-item label="支付名称" prop="pay_merchant_name"  v-if="rolesIdentify.includes('administrator')">
		    <el-input v-model="query.pay_merchant_name" placeholder="请输入支付名称" clearable />
		  </el-form-item>
		  <el-form-item label="收款主体" prop="payee_name" v-if="rolesIdentify.includes('administrator')">
		    <el-input v-model="query.payee_name" placeholder="请输入收款主体" clearable />
		  </el-form-item>
		  <el-form-item label="支付商户号" prop="pay_appid"  v-if="rolesIdentify.includes('administrator')">
		    <el-input v-model="query.pay_appid" placeholder="请输入支付商户号" clearable />
		  </el-form-item>
        </template>
        <template v-slot:extra_button>
          <exportExcel v-if="rolesIdentify.includes('administrator')"  api="orderRefund/order_list" sheet_name="订单列表" :title_obj="titlePtObj[query.refund_status]"
            :extro_params="{ is_all: true, ...query }">
          </exportExcel>
		  <exportExcel v-else="rolesIdentify.includes('administrator')"  api="orderRefund/order_list" sheet_name="订单列表" :title_obj="titleObj[query.refund_status]"
		    :extro_params="{ is_all: true, ...query }">
		  </exportExcel>
		  
        </template>
      </Search>
    </div>
    <div class="table-default">
      <el-table :data="tableData" class="mt-3" v-loading="loading">
        <el-table-column prop="company_name" label="商户名称" min-width="200px"
          v-if="rolesIdentify.includes('administrator')">
          <template #default="scope">
            <div>{{ scope.row.company_name }}</div>
            <div>ID:{{ scope.row.puser_id }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="优化师" show-overflow-tooltip min-width="200px"
          v-if="!rolesIdentify.includes('optimizer')">
        </el-table-column>
        <el-table-column prop="xcx_name" show-overflow-tooltip label="小程序" min-width="200px">
        </el-table-column>
        <el-table-column prop="uid" label="用户ID" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="trade_no" label="订单号" show-overflow-tooltip min-width="200px">
        </el-table-column>
        <el-table-column prop="order_created_at" label="订单时间" show-overflow-tooltip min-width="200px" />
        <el-table-column prop="ranse_created_at" label="染色注册时间" show-overflow-tooltip min-width="200px" />
        <el-table-column prop="refund_price" label="申退金额" show-overflow-tooltip min-width="200px" />
        <el-table-column prop="order_price" label="充值金额" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="promotion_name" label="推广名称" show-overflow-tooltip min-width="200px">
        </el-table-column>
        <el-table-column prop="tip_text" label="档位类型" show-overflow-tooltip min-width="150px">
        </el-table-column>
        <el-table-column prop="pay_name" label="支付方式" show-overflow-tooltip min-width="150px">
        </el-table-column>
		<el-table-column prop="pay_merchant_name" label="支付名称" show-overflow-tooltip min-width="150px"  v-if="rolesIdentify.includes('administrator')">
		</el-table-column>
		<el-table-column prop="payee_name" label="收款主体" show-overflow-tooltip min-width="150px"  v-if="rolesIdentify.includes('administrator')">
		</el-table-column>
		<el-table-column prop="pay_appid" label="支付商户号" show-overflow-tooltip min-width="150px"  v-if="rolesIdentify.includes('administrator')">
		</el-table-column>
        <el-table-column prop="pay_at" label="退款时间" v-if="query.refund_status == 1" show-overflow-tooltip
          min-width="180px">
        </el-table-column>
        <el-table-column prop="refund_no" label="退款单号" v-if="query.refund_status == 1" show-overflow-tooltip
          min-width="150px">
        </el-table-column>
        <el-table-column v-if="query.refund_status == 1" prop="status_text" label="订单状态" show-overflow-tooltip
          min-width="150px">
          <template #default="scope">
            <div class="wrapper">
              <span class="text-lg font-bold content">
                <el-text class="mx-1" type="info">{{ scope.row.status_text }}</el-text>
              </span>
            </div>
          </template>
        </el-table-column>
      <!--  <el-table-column v-if="query.refund_status == 0" prop="pt_verify_status_text" label="平台审核" show-overflow-tooltip
          min-width="150px">
          <template #default="scope">
            <div class="wrapper">
              <span class="text-lg font-bold content">
                <el-text class="mx-1" :type="colorType(scope.row)">{{ scope.row.pt_verify_status_text }}</el-text>
              </span>
            </div>
          </template>
        </el-table-column> -->
    <!--    <el-table-column v-if="query.refund_status == 0" prop="pt_verify_remark" label="平台审核备注" show-overflow-tooltip
          min-width="150px">
        </el-table-column> -->
       <!-- <el-table-column v-if="query.refund_status == 0" prop="sh_verify_status_text" label="商户审核" show-overflow-tooltip
          min-width="150px">
          <template #default="scope">
            <div class="wrapper">
              <span class="text-lg font-bold content">
                <el-text class="mx-1" :type="colorType(scope.row)">{{ scope.row.sh_verify_status_text }}</el-text>
              </span>
            </div>
          </template>
        </el-table-column> -->
       <!-- <el-table-column v-if="query.refund_status == 0" prop="sh_verify_remark" label="商户审核备注" show-overflow-tooltip
          min-width="150px">
        </el-table-column> -->
        <el-table-column v-if="query.refund_status == 0" label="操作" fixed="right">
          <template #default="scope">
          <!--  <el-button link type="primary" size="small" v-action="'orderRefund.RefundOrder.platformVerify'"
              @click="openType('noapprovedVisible', scope.row, '平台审核')">平台审核</el-button>
            <br /> -->
          <!--  <el-button link type="primary" size="small" v-action="'orderRefund.RefundOrder.companyVerify'"
              @click="openType('noapprovedVisible', scope.row, '商户审核')">商户审核</el-button>
            <br /> -->
           <!-- <el-button :disabled="!scope.row.can_pay" link type="primary" size="small"
              v-action="'orderRefund.RefundOrder.payToUser'"
              @click="openType('approvedVisible', scope.row)">确认打款</el-button>
            <br /> -->
			<el-button link type="primary" size="small"
			  v-action="'orderRefund.RefundOrder.payToUser'"
			  @click="openType('approvedVisible', scope.row)">确认打款</el-button>
			<br />
          </template>
        </el-table-column>
      </el-table>
      <Paginate />
    </div>
    <el-dialog width="500px" v-model="noapprovedVisible" :title="titleDialog" destroy-on-close @close="noapprovedClose">
      <el-form :model="form" label-width="120px">
        <el-form-item label="审核结果">
          <el-radio-group v-model="form.status" @change="search">
            <el-radio v-for="item in statusList" :label="item.value" :key="item.value">{{ item.name }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" :rows="3" type="textarea" placeholder="请输入内容" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="noapprovedClose">取消</el-button>
          <el-button type="primary" @click="noapproveChange">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { shortcuts } from '@/utils/shortcuts'
import { useRouter, useRoute } from 'vue-router'
import { InfoFilled } from '@element-plus/icons-vue';
import { useGetList } from '@/hook/curd/useGetList';
import {titleObj,titlePtObj} from "./excelTitle"
import {
  channelOrderList,
  channelMiniprogramUseList,
  channelPromotionsOptions,
  channelPromotionsUsers,
  channelOrderStatus,
  channelOrderType,
} from '@/api/orders/index'

import { orderRefundVerifyPt, orderRefundVerifySh, orderRefundPayToUser } from '@/api/orders/index'
import moment from 'moment';
const form = ref({ status: 1 })
const start_date = moment().startOf('month').format('YYYY-MM-DD')
const end_date = moment().endOf('month').format('YYYY-MM-DD')
const statusList = ref([
  { name: '审核通过', value: 1 },
  { name: '审核不通过', value: 2 },
])
const statusListTop = ref([
  { name: '待退款', value: 0 },
  { name: '已退款', value: 1 },
])
const api = 'orderRefund/order_list';
const router = useRouter()
const route = useRoute()
const approvedVisible = ref(false)
const noapprovedVisible = ref(false)
const { data, query, search, reset, loading } = useGetList(api);
const titleDialog = ref('')
const current = ref({})
const promotionsUsersList = ref([])
const channelMiniprogram = ref([])
const channelPromotions = ref([])
const channelOrderStatusList = ref([])
const channelOrderTypeList = ref([])
const rolesIdentify = inject('rolesIdentify')

const colorType = (data: object) => {
  const type = data.pt_verify_status || data.sh_verify_status
  switch (type) {
    case 0:
      return 'warning'
    case 1:
      return 'success'
    case 2:
      return 'danger'
  }
}
const noapprovedClose = () => {
  form.value = { status: 1 };
  noapprovedVisible.value = false;
}

const noapproveChange = () => {
  let api;
  if (titleDialog.value == '平台审核') {
    api = orderRefundVerifyPt
  } else if (titleDialog.value == '商户审核') {
    api = orderRefundVerifySh
  }
  api({ refund_id: current.value.id, ...form.value }).then(res => {
    console.log(res, 'apiapiapiapi');
    ElMessage.success(res.message)
    noapprovedVisible.value = false;
    search()
  })
}

const openType = (type: string, data?: object, title?: string) => {
  current.value = data || {}
  switch (type) {
    case 'approvedVisible':
      ElMessageBox.confirm(
        '确认打款吗?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          orderRefundPayToUser({ refund_id: current.value.id }).then(res => {
            ElMessage.success(res.message)
            search()
          })
        })
        .catch(() => {

        })
      break;
    case 'noapprovedVisible':
      titleDialog.value = title || ''
      noapprovedVisible.value = true
      break;
  }
}

const orderTimeChange = (e: object) => {
  console.log(e, 'timeChangetimeChangetimeChange');
  if (query.value.orderTime) {
    const timeArr = toRaw(e);
    query.value.created_at_start = timeArr[0]
    query.value.created_at_end = timeArr[1]
  } else {
    delete query.value.created_at_start
    delete query.value.created_at_end
  }
}
const remoteMethod = (query: string, type: string,) => {
  console.log(query, 'queryquery', type);
  switch (type) {
    case 'channelPromotionsUsers':
      initRemoteOption('channelPromotionsUsers', { name: query })
      break;
    case 'channelMiniprogram':
      initRemoteOption('channelMiniprogram', { name: query })
      break;
    case 'channelPromotions':
      initRemoteOption('channelPromotions', { name: query })
      break;
  }
}

const initRemoteOption = (type: string, params?: object) => {
  switch (type) {
    case 'channelPromotionsUsers':
      channelPromotionsUsers({ limit: 30, ...params }).then(res => {
        promotionsUsersList.value = res.data
      })
      break;
    case 'channelMiniprogram':
      channelMiniprogramUseList({ limit: 30, ...params }).then(res => {
        channelMiniprogram.value = res.data
      })
      break;
    case 'channelPromotions':
      channelPromotionsOptions({ limit: 30, ...params }).then(res => {
        channelPromotions.value = res.data
      })
      break;
  }
}

const init = () => {
  channelOrderStatus().then(res => {
    console.log(res);
    channelOrderStatusList.value = res.data
  })
  channelOrderType().then(res => {
    console.log(res);
    channelOrderTypeList.value = res.data
  })
}

const resetQuery = () => {
  query.value = Object.assign({ page: query.value.page, limit: query.value.limit, refund_status: 0 });
  search()
}
const tableData = computed(() => data.value?.data);

onMounted(() => {
  console.log(rolesIdentify, 'rolesIdentifyrolesIdentify');
  initRemoteOption('channelPromotionsUsers')
  initRemoteOption('channelMiniprogram')
  initRemoteOption('channelPromotions')
  init()
  query.value.refund_status = 0;
  search();
});
</script>

<style scoped lang="scss">
.table-default {
  .set-warpper {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .wrapper {
    margin: 8px;

    .label {
      margin-right: 6px;
    }

    .content {
      font-size: 15px;
    }
  }
}
</style>
