<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="name">
          <el-input v-model="query.owner_name" name="owner_name" clearable placeholder="请输入商户名称" />
        </el-form-item>
        <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="申请时间" v-if="query.status == 1">
          <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="query.status != 1">
          <el-date-picker unlink-panels clearable @change="VerifyTimeChange" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
            v-model="query.verifyTime" type="daterange" :shortcuts="shortcuts" range-separator="To"
            start-placeholder="开始时间" end-placeholder="结束时间" />
        </el-form-item>
      </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">
          <template #default="scope">
            <div>{{ scope.row.owner_name }}</div>
            <div>ID:{{ scope.row.company_uid }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="business_name" show-overflow-tooltip label="所属商务" min-width="200px">
        </el-table-column>
        <el-table-column prop="owner_name" label="收款信息" min-width="250px">
          <template #default="scope">
            <div>收款人：{{ scope.row.name_of_payee }}</div>
            <div>银行卡号:{{ scope.row.card_no }}</div>
            <div>开户支行:{{ scope.row.sub_bank_name }}</div>
            <div>开户银行:{{ scope.row.bank_name }}</div>
            <div>收款人手机号:{{ scope.row.phone_of_payee }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="申请时间" show-overflow-tooltip min-width="200px">
        </el-table-column>
        <el-table-column prop="checked_at" v-if="query.status != 1" label="审核时间" show-overflow-tooltip min-width="200px">
        </el-table-column>
        <el-table-column prop="remark" v-if="query.status != 1" label="备注" show-overflow-tooltip min-width="200px">
        </el-table-column>
        <el-table-column prop="status_text" v-if="query.status != 1" label="状态" show-overflow-tooltip min-width="200px">
          <template #default="scope">
            <el-text class="mx-1" :type="colorType(scope.row)">{{ scope.row.status_text }}</el-text>
          </template>
        </el-table-column>

        <el-table-column label="操作" v-if="query.status == 1">
          <template #default="scope">
            <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 />
          </template>
        </el-table-column>
      </el-table>
      <Paginate />
    </div>
    <el-dialog width="500px" v-model="noapprovedVisible" title="审核不通过" destroy-on-close>
      <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="noapprovedVisible = false">取消</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 { useOpen } from '@/hook/curd/useOpen';
import { jiesuanShenheList, jiesuanManageBankAccountListShangwu, jiusanBankCardVerify } 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/verify/list';
const router = useRouter()
const route = useRoute()
const statusList = ref([
  { name: '待审核', value: 1 },
  { name: '已审核', value: 2 },

])
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 applyData = ref({})
const approvedVisible = ref(false)
const noapprovedVisible = ref(false)

const colorType = (data: object) => {
  const type = data.status
  switch (type) {
    case 2:
      return 'success'
    case 1:
      return 'success'
    case 3:
      return 'danger'
    case 0:
      return 'danger'

  }
}

const noapproveChange = () => {
  jiusanBankCardVerify({ id: current.value.id, status: 3, remark: form.value.remark }).then(res => {
    ElMessage.success(res.message)
    if (res.code == 10000) {
      closeType('noapprovedVisible');
    }
    search()
  })
}

const createTimeChange = (e: object) => {
  console.log(e, 'timeChangetimeChangetimeChange');
  if (query.value.createTime) {
    const timeArr = toRaw(e);
    query.value.created_at_start = timeArr[0]
    query.value.created_at_end = timeArr[1]
    delete query.value.checked_at_start
    delete query.value.checked_at_end
    delete query.value.verifyTime
  } else {
    delete query.value.created_at_start
    delete query.value.created_at_end
    delete query.value.checked_at_start
    delete query.value.checked_at_end
    delete query.value.verifyTime
  }
}

const VerifyTimeChange = (e: object) => {
  console.log(e, 'timeVerifyChangetimeChange');
  if (query.value.verifyTime) {
    const timeArr = toRaw(e);
    query.value.checked_at_start = timeArr[0]
    query.value.checked_at_end = timeArr[1]
    delete query.value.created_at_start
    delete query.value.created_at_end
    delete query.value.createTime
  } else {
    delete query.value.checked_at_start
    delete query.value.checked_at_end
    delete query.value.created_at_start
    delete query.value.created_at_end
    delete query.value.createTime


  }
}

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;
  }
  search()
}

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

        })
      break;
    case 'noapprovedVisible':
      noapprovedVisible.value = true
      break;
  }
}
const tableData = computed(() => data.value?.data);

onMounted(() => {
  query.value.status = 1
  jiesuanManageBankAccountListShangwu().then(res => {
    businessList.value = res.data;
  })
  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>
