<!-- 进件管理 -->
<template>
  <div class="gyq_container">
    <div class="gyq_content">
      <div class="row">
        <el-form :model="queryForm" inline>
          <el-form-item label="商户类型">
            <el-select v-model="queryForm.userType" style="width: 200px;">
              <el-option v-for="item in userTypeList" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="店铺名称">
            <el-input style="width: 200px;" v-model="queryForm.shopName" placeholder="请输入店铺名称"></el-input>
          </el-form-item>
          <el-form-item label="进件状态">
            <el-select v-model="queryForm.status" style="width: 200px;">
              <el-option v-for="item in statusList" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="支付宝账号">
            <el-input style="width: 200px;" v-model="queryForm.alipayAccount" placeholder="请输入支付宝账号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" :loading="tableData.loading" @click="queryHandle">查询</el-button>
            <el-button icon="Refresh" :loading="tableData.loading" @click="resetHandle">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="row">
        <el-button type="primary" icon="Plus" @click="selectShopsDialogRef?.show()">发起进件</el-button>
      </div>
      <div class="row mt14">
        <el-table :data="tableData.list" v-loading="tableData.loading" stripe border>
          <el-table-column label="商户号" prop="merchantCode" width="200"></el-table-column>
          <el-table-column label="商户简称" prop="shortName" width="150"></el-table-column>
          <el-table-column label="商户类型" prop="userType" width="120">
            <template v-slot="scope">
              {{ userTypeListFilter(scope.row.userType).label }}
            </template>
          </el-table-column>
          <el-table-column label="绑定店铺名称" prop="shopName" width="200"></el-table-column>
          <el-table-column label="支付宝进件状态" prop="alipayStatus" min-width="200">
            <template v-slot="scope">
              <div class="column">
                <div>
                  <el-tag :type="statusListFilter(scope.row.alipayStatus).type" disable-transitions>{{
                    statusListFilter(scope.row.alipayStatus).label }}</el-tag>
                </div>
                <div class="error_text" v-if="scope.row.alipayStatus == 'REJECTED'">
                  {{ scope.row.alipayErrorMsg }}
                </div>
                <div>
                  <el-link type="primary" v-if="scope.row.alipayStatus == 'SIGN '"
                    @click="singCodeDialogRef?.show(scope.row.alipaySignUrl, 1)">查看签约码</el-link>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="微信进件状态" prop="wechatStatus" min-width="200">
            <template v-slot="scope">
              <div class="column">
                <div>
                  <el-tag :type="statusListFilter(scope.row.wechatStatus).type" disable-transitions>{{
                    statusListFilter(scope.row.wechatStatus).label }}</el-tag>
                </div>
                <div class="error_text" v-if="scope.row.wechatStatus == 'REJECTED'">
                  {{ scope.row.wechatErrorMsg }}
                </div>
                <div>
                  <el-link type="primary" v-if="scope.row.wechatStatus == 'SIGN'"
                    @click="singCodeDialogRef?.show(scope.row.wechatSignUrl, 2)">查看签约码</el-link>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="更新时间" prop="updateTime" width="200"></el-table-column>
          <el-table-column label="创建时间" prop="createTime" width="200"></el-table-column>
          <el-table-column label="操作" fixed="right" width="160">
            <template v-slot="scope">
              <el-button link type="primary"
                v-if="scope.row.wechatStatus == 'INIT' || scope.row.wechatStatus == 'AUDIT' || scope.row.wechatStatus == 'SIGN' || scope.row.alipayStatus == 'INIT' || scope.row.alipayStatus == 'AUDIT' || scope.row.alipayStatus == 'SIGN'"
                @click="checkStatusHandle(scope.row)">查询</el-button>
              <el-button link type="primary" @click="toDetail(scope.row, 'check')">详情</el-button>
              <el-button link type="primary" @click="toDetail(scope.row, 'editor')"
                v-if="scope.row.alipayStatus == 'REJECTED' || scope.row.wechatStatus == 'REJECTED'">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="row mt14">
        <el-pagination v-model:current-page="tableData.page" v-model:page-size="tableData.size"
          :page-sizes="[10, 30, 50, 100]" background layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <!-- 选择商户 -->
    <selectShopsDialog ref="selectShopsDialogRef" @success="selectSuccessHandle" />
    <!-- 显示签约码 -->
    <singCodeDialog ref="singCodeDialogRef" />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from 'vue-router';
import selectShopsDialog from "./components/selectShopsDialog.vue";
import singCodeDialog from "./components/singCodeDialog.vue";
import { entryManagerList, queryEntry } from '@/api/common'

const singCodeDialogRef = ref(null)

const router = useRouter();

const selectShopsDialogRef = ref(null);

// 选择商户成功回调
function selectSuccessHandle(shop) {
  console.log('选择的商户：', shop);
  router.push({ name: 'applyment_in', query: { shopId: shop.id } });
}

const userTypeList = ref([
  {
    value: '0',
    label: '个体商户'
  },
  {
    value: '1',
    label: '企业商户'
  },
])

function userTypeListFilter(userType) {
  let obj = userTypeList.value.find(item => item.value == userType)
  if (obj) {
    return obj
  } else {
    return {
      label: userType,
      value: userType
    }
  }
}

const statusList = ref([
  {
    value: 'WAIT',
    label: '待提交',
    type: 'info'
  },
  {
    value: 'INIT',
    label: '待处理',
    type: 'info'
  },
  {
    value: 'AUDIT',
    label: '待审核',
    type: 'warning'
  },
  {
    value: 'SIGN',
    label: '待签约',
    type: 'primary'
  },
  {
    value: 'FINISH',
    label: '已完成',
    type: 'success'
  },
  {
    value: 'REJECTED',
    label: '失败',
    type: 'danger'
  },
])

function statusListFilter(status) {
  let obj = statusList.value.find(item => item.value == status)
  if (obj) {
    return obj
  } else {
    return {
      label: status,
      value: status
    }
  }
}

const queryForm = ref({
  userType: '',
  shopName: '',
  status: '',
  alipayAccount: ''
});

function queryHandle() {
  tableData.page = 1
  getTableData()
}

function resetHandle() {
  queryForm.value.userType = ''
  queryForm.value.shopName = ''
  queryForm.value.status = ''
  queryForm.value.alipayAccount = ''
  queryHandle()
}

const tableData = reactive({
  loading: false,
  page: 1,
  size: 10,
  total: 0,
  list: [],
})

// 分页大小发生变化
function handleSizeChange(e) {
  tableData.size = e;
  getTableData();
}

// 分页发生变化
function handleCurrentChange(e) {
  tableData.page = e;
  getTableData();
}

// 查询状态
async function checkStatusHandle(row) {
  try {
    tableData.loading = true
    const businessLicenceInfo = JSON.parse(row.businessLicenceInfo)
    await queryEntry({
      shopId: row.shopId,
      licenceNo: businessLicenceInfo.licenceNo
    })
    getTableData()
  } catch (error) {
    tableData.loading = false
    console.log(error);
  }
}

// 获取表格数据
async function getTableData() {
  try {
    tableData.loading = true
    const res = await entryManagerList({
      page: tableData.page,
      size: tableData.size,
      ...queryForm.value
    })
    tableData.list = res.records
    tableData.total = res.totalRow
  } catch (error) {
    console.log(error);
  }
  setTimeout(() => {
    tableData.loading = false;
  }, 300);
}

// 跳转编辑页面
function toDetail(row, type) {
  const businessLicenceInfo = JSON.parse(row.businessLicenceInfo)
  router.push({
    name: 'applyment_in',
    query: {
      shopId: row.shopId,
      licenceNo: businessLicenceInfo.licenceNo,
      type: type
    }
  })
}

onMounted(() => {
  getTableData()
})
</script>

<style scoped lang="scss">
.gyq_container {
  padding: 14px;

  .gyq_content {
    padding: 14px;
    background-color: #fff;
    border-radius: 8px;
  }
}

.row {
  &.mt14 {
    margin-top: 14px;
  }
}

.column {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.error_text {
  font-size: 14px;
  color: var(--el-color-danger);
}
</style>