<!-- 角色编辑弹窗 -->
<template>
  <ele-modal
    form
    destroy-on-close
    v-model="visible"
    title="PHP Composer Package."
  >
    <el-descriptions
      :border="true"
      :column="mobile ? 1 : 2"
      class="detail-table"
    >
      <el-descriptions-item label="包名称">
        <div>
          <el-tag type="success">{{ data.type }}</el-tag>
          <el-tag style="margin-left: 5px" v-if="data.dev" type="warning"
            >Dev</el-tag
          >
          {{ data.name }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="版本号">
        <div>{{ data.version }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="关键字">
        <div>
          <el-tag
            v-for="name in data.keywords"
            :key="name"
            size="small"
            :disable-transitions="true"
            style="margin-right: 5px"
          >
            {{ name }}
          </el-tag>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="发布时间">
        <div>{{ data.time }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="简介" :span="2">
        <div>{{ data.description }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="版权" :span="2">
        <ele-data-table
          row-key="name"
          :columns="columns"
          :data="data.authors"
        />
      </el-descriptions-item>
    </el-descriptions>
  </ele-modal>
</template>

<script lang="ts" setup>
  import { useMobile } from '@/utils/use-mobile';
  import { ref } from 'vue';
  import type { Columns } from 'ele-admin-plus/es/ele-pro-table/types';

  defineProps<{
    /** 修改回显的数据 */
    data: any;
  }>();

  const { mobile } = useMobile();
  /** 表格列配置 */
  const columns = ref<Columns>([
    {
      type: 'index',
      columnKey: 'index',
      width: 50,
      align: 'center'
    },
    {
      prop: 'name',
      label: '作者'
    },
    {
      prop: 'homepage',
      label: '作者主页'
    }
  ]);

  /** 弹窗是否打开 */
  const visible = defineModel({ type: Boolean });
</script>
