<template>
  <div>
    <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="申请时间">
          <el-date-picker unlink-panels clearable @change="orderTimeChange" 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>
    </Search>
    <div class="table-default">
      <Operate :show="open" v-action="'jiesuan.BankAccount.addCompanyCard'" />
      <el-table :data="tableData" class="mt-3" v-loading="loading">
        <el-table-column prop="owner_name" label="商户名称" min-width="200px" />
        <el-table-column prop="business_str" label="所属商务" min-width="200px" />
        <el-table-column label="收款信息" show-overflow-tooltip min-width="250px">
          <template #default="scope">
            <div>收款人：{{ scope.row.name_of_payee }}</div>
            <div>银行卡号：{{ scope.row.card_no }}</div>
            <div>开户银行：{{ scope.row.bank_name }}</div>
            <div>开户支行：{{ scope.row.sub_bank_name }}</div>
            <div>收款人手机号：{{ scope.row.phone_of_payee }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" show-overflow-tooltip label="添加时间" min-width="200px">
        </el-table-column>
     <!--   <el-table-column prop="checked_at" 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>
          </template>
        </el-table-column> -->
      <!--  <el-table-column prop="remark" label="备注" show-overflow-tooltip min-width="200px">
        </el-table-column> -->
        <el-table-column label="操作" width="200">
          <template #default="scope">
          <!--  <el-button link type="primary" v-if="scope.row.status == 1" size="small" @click="open(scope.row)"
              v-action="'jiesuan.BankAccount.addCompanyCard'">编辑</el-button> -->
			  
          <!--  <el-button link type="primary" size="small" @click="deletePromotion(scope.row)"
              v-action="'jiesuan.BankAccount.delCompanyCard'" v-if="scope.row.status != 2">删除</el-button> -->
			  <el-button link type="primary"  size="small" @click="open(scope.row)"
			    v-action="'jiesuan.BankAccount.addCompanyCard'">编辑</el-button>
			  <el-button link type="primary" size="small" @click="deletePromotion(scope.row)"
			    v-action="'jiesuan.BankAccount.delCompanyCard'" >删除</el-button>
            <br />
          </template>
        </el-table-column>
      </el-table>
      <Paginate />
    </div>
    <Dialog v-model="visible" :title="title" destroy-on-close>
      <Create @close="close(search)" :primary="id" :api="api" />
    </Dialog>
  </div>
</template>

<script lang="ts" setup>
import Create from './form/create.vue';
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 { jiesuanManageBankAccountListShangwu, jiesuanManageBankAccountDelCompanyCard } 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/bankAccount/listCompanyCard';
const router = useRouter()
const route = useRoute()
const { data, query, search, reset, loading } = useGetList(api);
const userDetailVisible = ref(false)
const userDetailData = ref({})
const current = ref({})
const businessList = ref([])
const rolesIdentify = inject('rolesIdentify')

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

const deletePromotion = (row: object) => {
  ElMessageBox.confirm(
    `确定要删除此列表吗?`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      jiesuanManageBankAccountDelCompanyCard({ id: row.id }).then(res => {
        ElMessage.success(res.message)
        search()
        console.log(res);
      })
    })
    .catch(() => {

    })
}

const closeUserDetail = () => { }

const orderTimeChange = (e: object) => {
  console.log(e, 'timeChangetimeChangetimeChange');
  if (query.value.createTime) {
    const timeArr = toRaw(e);
    query.value.create_start_at = timeArr[0]
    query.value.create_end_at = timeArr[1]
  } else {
    delete query.value.create_start_at
    delete query.value.create_end_at
  }
}

const resetQuery = () => {
  reset()
}
const openType = (type: string, data: object) => {
  current.value = data;
  switch (type) {
    case 'userDetailVisible':
      userDetailVisible.value = true
      userDetailData.value = data
      break;
    case 'backConfigVisible':
      break;
  }
}
const tableData = computed(() => data.value?.data);

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