<template>
  <div class="app-container organization-manage">
    <!-- 搜索 -->
    <el-form :model="state.queryParams" ref="queryRef" :inline="true">
      <el-form-item label="代理商姓名" prop="agentfddbrname">
        <el-input v-model="state.queryParams['agentfddbrname.value']" placeholder="账号/公司名称" clearable @keyup.enter="handleQuery({initPageIndex: true})" />
      </el-form-item>
      <el-form-item label="代理商企业码" prop="agentsqym">
        <el-input v-model="state.queryParams['agentsqym.value']" placeholder="代理商企业码(模糊查询)" clearable @keyup.enter="handleQuery({initPageIndex: true})" />
      </el-form-item>
      <!-- 按钮组件 -->
      <all-button
        :labData="[
          {title: '全部', value: ''},
          {title: '待审核', value: '待审核'},
          {title: '审核通过', value: '审核通过'},
          {title: '审核不通过', value: '审核不通过'}
        ]"
        @labChange="labChange"
        :buttonType="['', '', 'query', 'refresh']"
        @queryButton="handleQuery({initPageIndex: true})"
        @refreshButton="handleQuery({initPageIndex: true})"
      />
    </el-form>
    <!-- 表格 -->
    <el-table v-loading="state.tableLoading" :data="state.tableData" row-key="id" style="flex: 1" stripe border table-layout="fixed" @cell-dblclick="tableCelldbl">
      <el-table-column align="center" prop="agentsid" label="代理商id" min-width="150" sortable></el-table-column>
      <el-table-column align="center" prop="agentsqym" label="代理商企业码" min-width="150"></el-table-column>
      <el-table-column align="center" prop="agentsamount" label="代理商余额" min-width="150"></el-table-column>
      <el-table-column align="center" prop="agentfddbrname" label="代理商姓名" min-width="150"></el-table-column>
      <el-table-column align="center" prop="agentsname" label="代理商企业名称" min-width="150"></el-table-column>
      <el-table-column align="center" prop="agentsshzt" label="审核状态" min-width="150"></el-table-column>
      <el-table-column align="center" prop="agentstel" label="代理商联系电话" min-width="150"></el-table-column>
      <el-table-column align="center" prop="agentssf" label="代理商认证身份" min-width="150"></el-table-column>
      <el-table-column align="center" prop="agentsprovince" label="代理商认证地址" min-width="200">
        <template #default="scope">
          {{ scope.row.agentsprovince + '/' + scope.row.agentscity + '/' + scope.row.agentsarea }}
        </template>
      </el-table-column>

      <el-table-column align="center" prop="agentssfky" label="代理商是否可用" min-width="150">
        <template #default="scope">
          <el-tag v-if="scope.row[scope.column.property]">可用</el-tag>
          <el-tag v-if="!scope.row[scope.column.property]">不可用</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="agentsupdate" label="更新时间" min-width="150"></el-table-column>

      <el-table-column align="center" :width="fitWidth" label="操作" class-name="small-padding fixed-width" fixed="right">
        <template #default="scope">
          <div class="operation-box">
            <el-text class="operate-btn-item" type="primary" @click="handleDictInfo(scope.row)">查看详情</el-text>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="paginaionConfig.query.pageindex"
        :page-sizes="paginaionConfig.sizeOptions"
        :page-size="paginaionConfig.query.rows"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paginaionConfig.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script setup name="Account">
import allStoreApi from '@store/modules/allStoreApi'
import useSystemManageStore from '@store/modules/systemManage'
import _ from 'lodash'
import usePagination from '@/hooks/usePagination'
import useFitColumn from '@/hooks/useFitColumn'
import tableCelldbl from '@/hooks/tableCelldbl'
const router = useRouter()

const {proxy} = getCurrentInstance()
const systemManageStore = useSystemManageStore()
const {paginaionConfig, handleSizeChange, handleCurrentChange} = usePagination(handleQuery)
const {fitWidth} = useFitColumn()
// 接口封装文件
const alleApi = allStoreApi()

const state = reactive({
  tableLoading: false,
  tableData: [],
  queryParams: {
    'agentsshzt.value': '',
    'agentfddbrname.value': '',
    'agentsqym.value': ''
  }
})

// 角色组信息
const roleList = ref([])
provide('roleList', readonly(roleList))

// 重置搜索项
const resetButton = () => {
  state.queryParams = {}
  handleQuery({initPageIndex: true})
}

// 选项卡
const labChange = (data) => {
  state.queryParams['agentsshzt.value'] = data
  handleQuery({initPageIndex: true})
}

// 默认信息
const getRoleList = async () => {
  const {Total, Data} = await systemManageStore.sysusergroupLoad({
    pageindex: 1,
    rows: 1000
  })
  roleList.value = Data
}

function handleQuery(config) {
  if (config?.initPageIndex) paginaionConfig.query.pageindex = 1
  getList(Object.assign(_.cloneDeep(paginaionConfig.query), state.queryParams))
}

/** 查询菜单列表 */
const getList = async (query) => {
  state.tableLoading = true
  const params = {
    pagevalue: 307,
    ...query
  }
  const {Total, Data} = await alleApi.list_get(params)
  paginaionConfig.total = Total
  state.tableData = Data
  state.tableLoading = false
}

// 查看详情
const handleDictInfo = async (query) => {
  router.push({path: '/dlsmanage/dlsinfo', query: {agentsid: query.agentsid}})
}

/** 删除 */
const handleDictDel = async (query) => {
  try {
    let params = JSON.parse(JSON.stringify(query))
    params['productid.value'] = state.editView.productid
    params['productid'] = state.editView.productid
    await proxy.$modal.confirm('请问确认删除吗？')
    await alleApi.del(params)
    proxy.$modal.msgSuccess('删除成功！')
    handleQuery()
  } catch (error) {}
}

onMounted(() => {
  handleQuery({initPageIndex: true})
  // 其他信息
  // getRoleList()
})
</script>
