<template>
  <div class="app-container account-manage">
    <!-- 搜索 -->
    <el-form :model="state.queryParams" ref="queryRef" :inline="true">
      <el-form-item label="用户名" prop="accountname">
        <el-input v-model="state.queryParams.accountname" placeholder="账号/公司名称" clearable @keyup.enter="handleQuery({initPageIndex: true})" />
      </el-form-item>

      <el-form-item label="用户类型" prop="accounttype">
        <el-select style="width: 200px" clearable v-model="state.queryParams.accounttype" placeholder="请选择用户类型">
          <el-option key="商户" label="商户" value="商户"></el-option>
          <el-option key="管理员" label="管理员" value="管理员"></el-option>
          <el-option key="代理商" label="代理商" value="代理商"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="联系人手机" prop="accountlxrphone">
        <el-input v-model="state.queryParams.accountlxrphone" placeholder="联系人手机号码" clearable @keyup.enter="handleQuery({initPageIndex: true})" />
      </el-form-item>

      <el-form-item label="公司名称" prop="accountgsm">
        <el-input v-model="state.queryParams.accountgsm" placeholder="公司名称" clearable @keyup.enter="handleQuery({initPageIndex: true})" />
      </el-form-item>

      <!-- 按钮组件 -->
      <all-button
        :buttonType="['add', 'reset', 'query', 'refresh']"
        @addButton="accountEditRef.openDialog()"
        @queryButton="handleQuery({initPageIndex: true})"
        @resetButton="resetButton()"
        @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="tableCelldbl2">
      <el-table-column align="center" prop="accountid" label="用户ID" min-width="150" sortable></el-table-column>
      <el-table-column align="center" prop="accountname" label="用户名" min-width="150"></el-table-column>
      <!-- <el-table-column align="center" prop="accounttype" label="用户类型" min-width="150" sortable></el-table-column> -->
      <el-table-column align="center" prop="accountnickname" label="昵称" 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="accountlxrphone" label="联系人手机" 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="accountgrouplist" label="角色组" min-width="180">
        <template #default="scope">
          <span v-if="!Boolean(scope.row[scope.column.property])">-</span>
          <p v-else style="margin: 0">
            <el-tag v-for="(item, index) in getRoleListTagArr(scope.row[scope.column.property])" :key="`role-tags-${index}`" style="margin-right: 5px">{{ item.title }}</el-tag>
          </p>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="accountcreatedate" label="开通时间" min-width="160" sortable></el-table-column>
      <el-table-column align="center" label="操作" width="100" 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>
          </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>

    <AccountEdit width="50%" ref="accountEditRef" @refresh="handleQuery" />

    <!-- <OperatorRole width="50%" v-model="modalConfig2.modalEditVisible" :title="modalConfig2.title"
      :keys="modalConfig2.modalHandleKey" :modalType="modalConfig2.modalType" /> -->
  </div>
</template>

<script setup name="Account">
import useAccountManageStore from '@store/modules/accountManage'
import useSystemManageStore from '@store/modules/systemManage'
import AccountEdit from './components/AccountEdit/index.vue'
// import OperatorRole from './components/OperatorRole/index.vue'
import _ from 'lodash'
import usePagination from '@/hooks/usePagination'
import useFitColumn from '@/hooks/useFitColumn'
import tableCelldbl2 from '@/hooks/tableCelldbl'

const {proxy} = getCurrentInstance()
const accountManageStore = useAccountManageStore()
const systemManageStore = useSystemManageStore()
const {paginaionConfig, handleSizeChange, handleCurrentChange} = usePagination(handleQuery)
const {fitWidth} = useFitColumn()

const state = reactive({
  tableLoading: false,
  tableData: [],
  queryParams: {
    accountname: '',
    accounttype: '',
    accountlxrphone: '',
    accountgsm: ''
    // ['accountstatus']: 1,
  }
})

const _form = JSON.parse(JSON.stringify(toRaw(state.queryParams)))
const dictsData = ref(proxy.useDict('关联公司'))
const roleList = ref([])
const accountEditRef = ref(null)

provide('roleList', readonly(roleList))
provide('dictsDataParent', readonly(dictsData))

const resetButton = () => {
  state.queryParams = {
    accountname: '',
    accounttype: '',
    accountlxrphone: '',
    accountgsm: ''
  }
  handleQuery({initPageIndex: true})
}

const getRoleListTagArr = (str) => {
  let result = []
  const taglist = str.split(',')

  taglist.forEach((item) => {
    roleList.value.forEach((innerItem) => {
      if (innerItem.id === Number(item)) result.push(innerItem)
    })
  })
  return result
}

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

  state.tableLoading = false
}

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 availableChange = async (row, newVal) => {
  row.loading = true
  try {
    // await accountManageStore.sysuserUp({ account: row.account, available: newVal })
    // row.loading = false
    // proxy.$modal.msgSuccess('操作成功！')
  } catch (error) {
    handleQuery()
  }
}

onMounted(() => {
  handleQuery({initPageIndex: true})
  getRoleList()
})
</script>
