<template>
  <div>
    <div class="pl-5">
      <el-radio-group v-model="query.status" @change="search">
        <el-radio v-for="item in statusList" :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="申请时间">
            <el-date-picker unlink-panels clearable @change="createTimeChange" format="YYYY/MM/DD"
              value-format="YYYY-MM-DD" v-model="query.createTime" type="daterange" :shortcuts="shortcuts"
              range-separator="To" start-placeholder="开始时间" end-placeholder="结束时间" />
          </el-form-item>
        </template>
        <template v-slot:extra_button>
          <exportExcel api="jiesuanManage/jiesuan/listTixian" sheet_name="提现记录" :title_obj="titleObj"
            :extro_params="{ is_export: 1, ...query }">
          </exportExcel>
        </template>
      </Search>
    </div>
    <div class="table-default">
      <el-table :data="tableData" class="mt-3" v-loading="loading">
        <el-table-column prop="created_at" label="提现时间" min-width="200px" />
        <el-table-column prop="tixian_money" label="提现金额" show-overflow-tooltip min-width="200px">
        </el-table-column>
        <el-table-column prop="card_no" show-overflow-tooltip label="提现账户" min-width="200px">
        </el-table-column>
        <el-table-column prop="name_of_payee" label="收款人姓名" min-width="200px" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="pay_channel" label="支付通道" show-overflow-tooltip min-width="200px">
        </el-table-column>
        <el-table-column prop="pay_no" label="银行流水" show-overflow-tooltip min-width="200px" />
        <el-table-column prop="status_str" 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.status_str }}</el-text>
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" show-overflow-tooltip min-width="150px">
        </el-table-column>
        <el-table-column label="操作" min-width="200px">
          <template #default="scope">
            <div v-action="'jiesuan.Jiesuan.updateTicket'">
              <el-button link type="primary" size="small" @click="lookInvoice(scope.row)"
                v-if="scope.row.ticket_link">查看电子发票</el-button>
              <el-button link type="primary" size="small" @click="uploadInvoice(scope.row)">{{ scope.row.ticket_link ?
                '重新上传' : '上传电子发票' }} </el-button>
              <div class="text-xs font-bold">注：如果是纸质发票请邮寄</div>
            </div>
            <br />
          </template>
        </el-table-column>
      </el-table>
      <Paginate />
    </div>
    <Dialog v-model="uploadVisible" width="500px" title="上传电子发票" destroy-on-close>
      <create @close="closeUpload" :primary="uploadData"></create>
    </Dialog>
  </div>
</template>

<script lang="ts" setup>
import { shortcuts } from '@/utils/shortcuts'
import { InfoFilled } from '@element-plus/icons-vue';
import { useGetList } from '@/hook/curd/useGetList';
import create from './form/create.vue'
const api = 'jiesuanManage/jiesuan/listTixian';
import { titleObj } from "./excelTitle"
const { data, query, search, reset, loading } = useGetList(api);
const rolesIdentify = inject('rolesIdentify')
const uploadVisible = ref(false)
const uploadData = ref({})
const statusList = ref([
  { name: '全部', value: '' },
  { name: '待审核', value: 1 },
  { name: '审核失败', value: 2 },
  { name: '待打款', value: 3 },
  { name: '已打款', value: 4 },
  { name: '打款失败', value: 5 },
])
const colorType = (data: object) => {
  const type = data.status
  switch (type) {
    case 4:
      return 'success'
    case 3:
      return 'warning'
    case 1:
      return 'warning'
    case 2:
      return 'danger'
    case 5:
      return 'danger'
  }
}
const createTimeChange = (e: object) => {
  console.log(e, 'timeChangetimeChangetimeChange');
  if (query.value.createTime) {
    const timeArr = toRaw(e);
    query.value.tixian_start_at = timeArr[0]
    query.value.tixian_end_at = timeArr[1]
  } else {
    delete query.value.tixian_start_at
    delete query.value.tixian_end_at
  }
}
const resetQuery = () => {
  reset()
}

const closeUpload = () => {
  uploadVisible.value = false
  search()
}
// 上传发票
const uploadInvoice = (row: object) => {
  uploadVisible.value = true
  uploadData.value = row
  console.log(row, 'uploadInvoiceuploadInvoice');
}
// 查看电子发票
const lookInvoice = (row: object) => {
  window.open(row.ticket_link)
  console.log(row, 'uploadInvoiceuploadInvoice');
}

const tableData = computed(() => data.value?.data);

onMounted(() => {
  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>
