<template>
  <div class="app-container organization-manage">
    <!-- 搜索 -->
    <el-form :model="state.queryParams" ref="queryRef" :inline="true">
      <el-form-item label="用户手机号" prop="yhinfotel">
        <el-input v-model="state.queryParams['yhinfotel.value']" placeholder="用户手机号" clearable
          @keyup.enter="handleQuery({ initPageIndex: true })" />
      </el-form-item>
      <el-form-item label="用户账号" prop="yhinfozh">
        <el-input v-model="state.queryParams['yhinfozh.value']" placeholder="用户账号" clearable
          @keyup.enter="handleQuery({ initPageIndex: true })" />
      </el-form-item>
      <el-form-item label="用户类型" prop="yhinfolx">
        <el-select style="width: 200px" clearable v-model="state.queryParams['yhinfolx.value']" placeholder="请选择用户类型">
          <el-option key="未拥有终端" label="未拥有终端" value="个人"></el-option>
          <el-option key="拥有终端" label="拥有终端" value="路由器"></el-option>
          <el-option key="全部" label="全部" value="all"></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="用户ID" prop="yhinfoid">
        <el-input v-model="state.queryParams['yhinfoid.value']" placeholder="账号/公司名称" clearable @keyup.enter="handleQuery({initPageIndex: true})" />
      </el-form-item> -->
      <!-- <el-form-item label="关联客户ID" prop="yhinfocustomerid">
        <el-input v-model="state.queryParams['yhinfocustomerid.value']" placeholder="关联用户ID" clearable @keyup.enter="handleQuery({initPageIndex: true})" />
      </el-form-item> -->
      <!-- 按钮组件 yhinfolx -->
      <all-button @labChange="labChange" :buttonType="['', '', 'query', 'refresh']"
        @addButton="accountEditRef.openDialog()" @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="yhinfoid" label="用户ID" min-width="150" sortable></el-table-column>
      <el-table-column align="center" prop="yhinfotel" label="用户手机号" min-width="150"></el-table-column>

      <!-- <el-table-column align="center" prop="yhinfoisrz" label="用户是否通过验证" min-width="150">
        <template #default="scope">
          <el-tag v-if="scope.row[scope.column.property] == 0">已通过</el-tag>
          <el-tag v-if="scope.row[scope.column.property] == 1">未通过</el-tag>
        </template>
</el-table-column> -->
      <el-table-column align="center" prop="yhinfozh" label="用户帐号" min-width="150"></el-table-column>
      <!-- <el-table-column align="center" prop="yhinfocustomerid" label="关联用户ID" min-width="150"></el-table-column> -->
      <el-table-column align="center" prop="yhinfoproductid" label="关联产品ID" min-width="150">
        <template #default="scope">
          <span>{{ scope.row[scope.column.property] ? scope.row[scope.column.property] : '-' }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="yhinfolx" label="用户类型" min-width="150">
        <template #default="scope">
          <el-tag type="danger" 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="yhinfoneworderid" label="关联订单ID" min-width="150"></el-table-column>
      <el-table-column align="center" prop="yhinfoboxid" label="关联路由器设备" min-width="150"></el-table-column>
      <!-- <el-table-column align="center" prop="yhinfoisrz" label="用户是否通过验证" min-width="150"></el-table-column> -->
      <!-- <el-table-column align="center" prop="yhinfostardate" label="开始时间" min-width="150"></el-table-column> -->
      <!-- <el-table-column align="center" prop="yhinfoenddate" label="结束时间" min-width="150"></el-table-column> -->
      <el-table-column align="center" prop="yhinfocreatedate" label="用户创建时间" min-width="150"></el-table-column>
      <el-table-column align="center" prop="yhinfoenddate" label="账号到期时间" min-width="150"></el-table-column>
      <!-- <el-table-column align="center" prop="customersfky" 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="accountEditRef.openDialog(scope.row)">编辑</el-text>
            <el-text class="operate-btn-item" type="danger" @click="handleDictDel(scope.row)">删除</el-text>
          </div>
        </template>
      </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 v-if="scope.row.yhinfolx == '个人'" class="operate-btn-item" type="primary"
              @click="handleUserInfo(scope.row)">订单信息</el-text>
            <el-text v-if="scope.row.yhinfolx == '路由器'" class="operate-btn-item" type="primary"
              @click="handleLyqInfo(scope.row)">终端信息</el-text>
            <el-text class="operate-btn-item" type="primary" @click="handleDictInfo(scope.row)">用户资料</el-text>
            <el-text class="operate-btn-item" type="primary"
              @click="accountEditRef.openDialog(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>

    <paymentEdit width="50%" ref="accountEditRef" @refresh="handleQuery" />
  </div>
</template>

<script setup name="Account">
import allStoreApi from '@store/modules/allStoreApi'
import useSystemManageStore from '@store/modules/systemManage'
import paymentEdit from '../components/paymentEdit/index.vue'
import _ from 'lodash'
import usePagination from '@/hooks/usePagination'
import useFitColumn from '@/hooks/useFitColumn'
import tableCelldbl from '@/hooks/tableCelldbl'

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

const state = reactive({
  tableLoading: false,
  tableData: [],
  queryParams: {
    'yhinfolx.value': 'all'
  }
})

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

// components组件
const accountEditRef = ref(null)
const router = useRouter()
// 查看详情
const handleDictInfo = async (query) => {
  router.push({ path: '/peoplesmanage/prowlerinfo', query: { customerid: query.yhinfocustomerid } })
}
// 查看详情
const handleUserInfo = async (query) => {
  router.push({ path: '/kuandaimanage/kuandaiinfo', query: { yhinfoid: query.yhinfoid } })
}
// 查看详情
const handleLyqInfo = async (query) => {
  router.push({ path: '/kuandaimanage/luyouqiinfo', query: { yhinfoid: query.yhinfoid } })
}

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

// 重置搜索项
const resetButton = () => {
  state.queryParams = {}
  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
  const params = Object.assign(_.cloneDeep(paginaionConfig.query), state.queryParams)
  if (params['yhinfolx.value'] === 'all') {
    delete params['yhinfolx.value']
  }
  getList(params)
}

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

/** 删除 */
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 allStoreApi.del(params)
    proxy.$modal.msgSuccess('删除成功！')
    handleQuery()
  } catch (error) { }
}

onMounted(() => {
  let query = router.currentRoute.value.query
  if (query.customerid) {
    state.queryParams['yhinfocustomerid.value'] = query.customerid
  }
  handleQuery({ initPageIndex: true })
  // 其他信息
  // getRoleList()
})
</script>
