<template>
  <a-spin :spinning="loading" v-if="planId > 18">
    <a-button
      type="primary"
      :disabled="list.length === 9"
      style="margin-bottom: 10px; margin-top: 30px"
      @click="add"
    >
      <span>添加</span>
    </a-button>
    <a-table
      size="middle"
      row-key="projectOrderId"
      :pagination="false"
      :data-source="list"
      :columns="columns"
    >
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.key === 'icon'">
          <div
            class="icon-bg"
            style="display: flex; align-items: center; justify-content: center"
          >
            <a-avatar :size="40" shape="square" :src="`${record.icon}`" />
          </div>
          <!--          <ele-image-upload-->
          <!--            v-model:value="record.images"-->
          <!--            :limit="1"-->
          <!--            :drag="true"-->
          <!--            :item-style="{ width: '50px', height: '50px' }"-->
          <!--            @upload="onUpload"-->
          <!--          />-->
        </template>
        <template v-if="column.key === 'name'">
          <a-input
            v-if="record.isEdit"
            v-model:value="record.name"
            style="max-width: 250px"
          />
          <div v-else>{{ record.name }}</div>
        </template>
        <template v-if="column.key === 'comments'">
          <a-textarea
            v-if="record.isEdit"
            :rows="1"
            :maxlength="100"
            placeholder="请输入备注"
            v-model:value="record.comments"
          />
          <div v-else>{{ record.comments }}</div>
        </template>
        <template v-else-if="column.key === 'action'">
          <a-space>
            <a v-if="record.isEdit" @click="done(record, index)">完成</a>
            <a v-else @click="edit(record, index)">修改</a>
            <a-divider type="vertical" />
            <a-popconfirm
              title="确定要删除此记录吗？"
              @confirm="remove(record, index)"
            >
              <a class="ele-text-danger">删除</a>
            </a-popconfirm>
          </a-space>
        </template>
      </template>
    </a-table>
  </a-spin>
</template>

<script lang="ts" setup>
  import { ref, reactive, watch } from 'vue';
  import type { ColumnsType } from 'ant-design-vue/es/table';
  import { UserPlanIcon } from '@/api/love/plan-icon/model';
  import { uploadFile } from '@/api/system/file';
  import { message } from 'ant-design-vue';

  const props = withDefaults(
    defineProps<{
      value?: UserPlanIcon[];
      planId?: number;
      placeholder?: string;
    }>(),
    {
      placeholder: '请选择数据'
    }
  );

  // 已添加成员
  const list = ref<UserPlanIcon[]>([]);
  // 请求状态
  const loading = ref(false);

  // 列
  const columns = reactive<ColumnsType>([
    {
      key: 'index',
      align: 'center',
      width: 30,
      customRender: ({ index }) => index + 1,
      fixed: 'left'
    },
    {
      title: '图标',
      align: 'center',
      dataIndex: 'icon',
      key: 'icon'
    },
    {
      title: '权益',
      align: 'center',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      width: 100
    }
  ]);

  /* 添加 */
  const add = () => {
    list.value.push({
      planId: props.planId,
      isEdit: true,
      name: '',
      price: undefined,
      icon: undefined,
      comments: undefined
    });
  };

  /* 编辑 */
  const edit = (_row: any, index: number) => {
    list.value[index].isEdit = true;
  };

  /* 完成编辑 */
  const done = (_row: any, index: number) => {
    list.value[index].isEdit = false;
  };

  /* 删除 */
  const remove = (_row: any, index: number) => {
    list.value.splice(index, 1);
  };

  // 上传文件
  const onUpload = (item) => {
    const { file } = item;
    uploadFile(file)
      .then((data) => {
        // images.value.push({
        //   uid: data.id,
        //   url: data.thumbnail,
        //   status: 'done'
        // });
        list.value[0].icon = data.thumbnail;
      })
      .catch((e) => {
        message.error(e.message);
      });
  };

  watch(
    () => props.value,
    (value) => {
      if (value) {
        list.value = value;
      }
    },
    { immediate: true }
  );
</script>
