<template>
  <div>
    <el-radio-group v-model="query.status" @change="search" class="pl-5">
      <el-radio v-for="item in statusList" :label="item.value" :key="item.value">{{ item.name }}</el-radio>
    </el-radio-group>
    <Search :search="search" :reset="resetQuery">
      <template v-slot:body>
        <!-- <el-form-item label="所属商务" prop="business_id">
          <el-select v-model="query.business_id" filterable clearable placeholder="选择所属商务">
            <el-option v-for="item in businessList" :key="item.id" :label="item.username" :value="item.id" />
          </el-select>
        </el-form-item> -->
        <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>
        <el-form-item label="商户名称" v-if="!([4, 5].includes(query.status))" prop="owner_name">
          <el-input v-model="query.owner_name" placeholder="请输入商户名称" clearable />
        </el-form-item>
        <el-form-item label="商户ID" v-if="!([4, 5].includes(query.status))" prop="company_uid">
          <el-input v-model="query.company_uid" placeholder="请输入商户ID" clearable />
        </el-form-item>
      </template>
      <template v-slot:extra_button>
        <exportExcel api="jiesuanManage/financeCheck/list" sheet_name="财务审核" :title_obj="titleObj[query.status]"
          :extro_params="{ is_export: 1, ...query }">
        </exportExcel>
      </template>
    </Search>
    <div class="table-default">
      <el-table :data="tableData" class="mt-3" v-loading="loading">
        <el-table-column prop="owner_name" label="商户名称" min-width="200px" v-if="!([4, 5].includes(query.status))">
          <template #default="scope">
            <div>{{ scope.row.owner_name }}</div>
            <div>ID:{{ scope.row.company_uid }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="tixian_money" label="提现金额" show-overflow-tooltip min-width="200px">
        </el-table-column>
        <el-table-column v-if="!([4, 5].includes(query.status))" prop="tixian_money" label="打款金额" show-overflow-tooltip
          min-width="200px">
        </el-table-column>
        <el-table-column prop="created_at" show-overflow-tooltip label="提现时间" min-width="200px">
        </el-table-column>
        <el-table-column prop="card_no" label="提现账户" show-overflow-tooltip min-width="200px">
        </el-table-column>
        <el-table-column prop="status_str" label="状态" show-overflow-tooltip>
          <template #default="scope">
            <el-text class="mx-1" :type="colorType(scope.row)">{{ scope.row.status_str }}</el-text>
            <div v-if="query.status == 4">
              <el-text class="mx-1" :type="colorType(scope.row)">{{ scope.row.updated_at }}</el-text>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name_of_payee" label="对公账户名称" show-overflow-tooltip min-width="150px">
        </el-table-column>
        <el-table-column prop="remark" label="备注" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template #default="scope">
            <el-button link type="primary" size="small" v-if="query.status == 1"
              @click="openType('withdrawDetailVisible', scope.row)">提现详情</el-button>
            <br />
            <div v-if="query.status == 1" v-action="'jiesuan.FinanceCheck.check'">
              <el-button link type="primary" size="small" @click="openType('approvedVisible', scope.row)">审核通过</el-button>
              <br />
              <el-button link type="primary" size="small"
                @click="openType('noapprovedVisible', scope.row)">审核不通过</el-button>
              <br />
            </div>
            <div v-if="query.status == 3" v-action="'jiesuan.FinanceCheck.remit'">
              <el-button link type="primary" size="small"
                @click="openType('applyVisible', scope.row, '打款成功')">打款成功</el-button>
              <br />
              <el-button link type="primary" size="small"
                @click="openType('applyVisible', scope.row, '打款失败')">打款失败</el-button>
              <br />
            </div>
            <el-button link type="primary" size="small" @click="lookInvoice(scope.row)"
              v-if="scope.row.ticket_link">查看电子发票</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Paginate />
    </div>
    <Dialog v-model="withdrawDetailVisible" width="80%" title="提现详情" destroy-on-close>
      <withdrawDetail @close="closeType('withdrawDetailVisible')" :primary="withdrawDetailData"></withdrawDetail>
    </Dialog>
    <el-dialog width="500px" v-model="noapprovedVisible" title="审核不通过" destroy-on-close @close="noapprovedClose">
      <el-form :model="form" label-width="120px">
        <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>
    <Dialog v-model="applyVisible" width="50%" :title="titleDialog" destroy-on-close>
      <create @close="closeType('applyVisible')" :primary="applyData"></create>
    </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 { useOpen } from '@/hook/curd/useOpen';
import { titleObj } from './excelTitle'
import create from './form/create.vue'
import { jiesuanManageJiesuanAccountInfo, jiesuanManageBankAccountListShangwu, jiesuanManageFinanceCheckCheck } from '@/api/settlement/index'
import moment from 'moment';
const start_date = moment().startOf('month').format('YYYY-MM-DD')
const end_date = moment().endOf('month').format('YYYY-MM-DD')
const { open, close, title, visible, id } = useOpen();
const api = 'jiesuanManage/financeCheck/list';
const router = useRouter()
const route = useRoute()
import withdrawDetail from './withdrawDetail/index.vue'
const statusList = ref([
  { name: '待审核', value: 1 },
  { name: '审核不通过', value: 2 },
  { name: '待打款', value: 3 },
  { name: '打款成功', value: 4 },
  { name: '打款失败', value: 5 },
])
// 查看电子发票
const lookInvoice = (row: object) => {
  window.open(row.ticket_link)
  console.log(row, 'uploadInvoiceuploadInvoice');
}
const { data, query, search, reset, loading } = useGetList(api);
const dialogFormVisible = ref(false)
const userDetailData = ref({})
const current = ref({})
const form = ref({})
const businessList = ref([])
const rolesIdentify = inject('rolesIdentify')
const withdrawDetailVisible = ref(false)
const withdrawDetailData = ref({})
const applyVisible = ref(false)
const applyData = ref({})
const titleDialog = ref('')
const approvedVisible = ref(false)
const noapprovedVisible = ref(false)

const isShowOperate = computed(() => [1, 3].includes(query.value.status))

const colorType = (data: object) => {
  const type = data.status
  switch (type) {
    case 4:
      return 'success'
    case 1:
      return 'warning'
    case 3:
      return 'warning'
    case 5:
      return 'danger'
    case 2:
      return 'danger'
  }
}
const noapprovedClose = () => {
  form.value = {}
  noapprovedVisible.value = false
}
const noapproveChange = () => {
  jiesuanManageFinanceCheckCheck({ id: current.value.id, status: 2, ...form.value }).then(res => {
    ElMessage.success(res.message)
    noapprovedVisible.value = false
    search()
  })
}

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 = () => {
  query.value.status = 1
  query.value.business_id = ''
  query.value.createTime = ''
  delete query.value.tixian_start_at
  delete query.value.tixian_end_at
  search()
}
const closeType = (type: string) => {
  switch (type) {
    case 'withdrawDetailVisible':
      withdrawDetailVisible.value = false
      break;
    case 'approvedVisible':
      approvedVisible.value = false
      break;
    case 'noapprovedVisible':
      noapprovedVisible.value = false
      break;
    case 'applyVisible':
      applyVisible.value = false
      break;
  }
  search()
}

const openType = (type: string, data?: object, title?: string) => {
  current.value = data || {}
  switch (type) {
    case 'withdrawDetailVisible':
      withdrawDetailVisible.value = true
      withdrawDetailData.value = data || {}
      break;
    case 'approvedVisible':
      ElMessageBox.confirm(
        '确认审核通过吗?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          jiesuanManageFinanceCheckCheck({ id: current.value, status: 3 }).then(res => {
            console.log(res, 'jiesuanManageFinanceCheckCheck');
            ElMessage.success(res.message)
            search()
          })
        })
        .catch(() => {

        })
      break;
    case 'noapprovedVisible':
      noapprovedVisible.value = true
      break;
    case 'applyVisible':
      applyVisible.value = true
      applyData.value = data || {}
      if (title == '打款成功') {
        applyData.value.isShowPayNo = true
        applyData.value.status = 4
      } else if (title == '打款失败') {
        applyData.value.isShowPayNo = false
        applyData.value.status = 5
      }
      titleDialog.value = title || '';
      break;
  }
}
const tableData = computed(() => data.value?.data);

onMounted(() => {
  query.value.status = 1
  jiesuanManageBankAccountListShangwu().then(res => {
    businessList.value = res.data;
    console.log(res, 'jiesuanManageJiesuanAccountInfo');
  })
  console.log(rolesIdentify, 'rolesIdentifyrolesIdentify');
  search();
});
</script>

<style scoped lang="scss">
.col {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100px;
  width: 25%;
}

.col:last-child {
  align-items: start;
}

.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>
