<template>
  <div id="menu-table">
    <el-table :data="data" row-key="_id" border>
      <el-table-column align="center" :label="$t('pages.menus.order_num')" sortable prop="order_num" width="80"></el-table-column>
      <el-table-column align="center" :label="$t('pages.menus.icon')" width="80">
        <template #default="{ row }"><span :class="['iconfont', row.icon]"></span></template>
      </el-table-column>
      <el-table-column align="center" :label="$t('pages.menus.name')" prop="name"></el-table-column>
      <el-table-column align="center" :label="$t('pages.menus.route_name')" prop="route_name"></el-table-column>
      <el-table-column align="center" :label="$t('pages.menus.i18n_code')" prop="i18n_code"></el-table-column>
      <el-table-column align="center" :label="$t('pages.menus.parentName')" prop="parent_name"></el-table-column>

      <el-table-column align="center" :label="$t('pages.menus.path')" prop="path"></el-table-column>
      <el-table-column align="center" :label="$t('pages.menus.component')" prop="component"></el-table-column>
      <el-table-column align="center" :label="$t('pages.menus.type')" prop="type" width="100">
        <template #default="{ row }">{{ getType(row) }} </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('pages.menus.is_use')" prop="is_use" width="80">
        <template #default="{ row }">
          <el-tag v-if="row.is_use === '0'" type="success"> {{ getStatus(row) }} </el-tag>
          <el-tag v-else type="info"> {{ getStatus(row) }} </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('pages.menus.remark')" prop="remark" width="100"> </el-table-column>
      <el-table-column align="center" :label="$t('common.opera')">
        <template #default="{ row }">
          <el-link :underline="false" type="primary" size="mini" @click="toUpdate(row)" style="margin-right: 10px">{{ $t('common.update') }}</el-link>
          <el-link :underline="false" type="primary" size="mini" @click="toAddNext(row)" style="margin-right: 10px">
            {{ $t('pages.menus.addNext') }}
          </el-link>
          <el-link v-if="row.is_default !== '0'" :underline="false" type="danger" size="mini" @click="toDelete(row)">
            {{ $t('common.delete') }}
          </el-link>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
const data = inject('menuTree', [])
const typeList = inject('typeList', [])
const toUpdate = inject('toUpdate')
const toAddNext = inject('toAddNext')
const toDelete = inject('toDelete')
const { t } = useI18n()
const getType = (row) => {
  let word = ''
  const r = typeList.find((f) => f.value === row.type)
  if (r) word = r.label
  return word
}
const getStatus = (row) => {
  let word = ''
  switch (row.is_use) {
    case '0':
      word = t('common.is_use_abled')
      break
    case '1':
      word = t('common.is_use_disabled')
      break

    default:
      break
  }
  return word
}
</script>
<style scoped></style>
