<template>
  <a-spin :spinning="loading">
    <a-button
      type="primary"
      :disabled="list.length === 3"
      style="margin-bottom: 10px"
      @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 === 'name'">
          <DictSelect
            v-if="record.isEdit"
            dict-code="memberEquity"
            placeholder="请选择类型"
            style="width: 120px"
            v-model:value="record.name"
          />
          <div v-else>{{ record.name }}</div>
        </template>
        <template v-else-if="column.key === 'price'">
          <a-input-number
            v-if="record.isEdit"
            v-model:value="record.price"
            placeholder="0.00"
          />
          <div v-else>￥{{ record.price }}</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 { UserPlanPrice } from '@/api/love/plan-price/model';
  import DictSelect from '@/views/search/components/apps/components/dict-select.vue';

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

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

  // 列
  const columns = reactive<ColumnsType>([
    {
      key: 'index',
      align: 'center',
      width: 30,
      customRender: ({ index }) => index + 1,
      fixed: 'left'
    },
    {
      title: '名称',
      align: 'center',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: '价格',
      align: 'center',
      dataIndex: 'price',
      key: 'price'
    },
    {
      title: '服务内容',
      align: 'center',
      dataIndex: 'comments',
      key: 'comments'
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      width: 100
    }
  ]);

  /* 添加 */
  const add = () => {
    list.value.push({
      planId: props.planId,
      isEdit: true,
      name: '',
      price: 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);
  };

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