<template>
  <!-- <BasicTable @register="registerTable" /> -->
  <div class="wrap">
    <div class="head">
      <div class="value-head">关系</div>
      <div class="value-head">姓名</div>
      <div class="value-head">年龄</div>
      <div class="value-head">工作单位</div>
      <div class="value-head">职务</div>
    </div>
    <div class="array-item">
      <div class="content-item" v-for="(item, index) in list" :key="index">
        <div class="value-content">
          <Input v-model:value="item.relation" @change="onChange" />
        </div>
        <div class="value-content">
          <Input v-model:value="item.name" @change="onChange" />
        </div>
        <div class="value-content">
          <Input type="number" v-model:value="item.age" @change="onChange" />
        </div>
        <div class="value-content">
          <Input v-model:value="item.company" @change="onChange" />
        </div>
        <div class="value-content">
          <Input v-model:value="item.job" @change="onChange" />
        </div>
        <a-button
          class="mr-2 delete-btn"
          preIcon="mdi:close-thick"
          color="error"
          @click="remove(index)"
        />
      </div>
    </div>
    <a-button class="add-btn mr-2" size="small" color="success" @click="create"> 追加 </a-button>
  </div>
</template>
<script lang="ts">
  import { defineComponent, onUpdated, reactive, nextTick, toRefs, watch } from 'vue';
  import { Input } from 'ant-design-vue';

  const props = {
    value: { type: [], default: [] },
    placeholder: { type: String, default: '' },
  };

  export default defineComponent({
    name: 'ArrCom',
    components: { Input },
    props,
    emits: ['change'],
    setup(props, { emit }) {
      const state = reactive({
        list: [] as object[],
      });
      // 初始化
      function init() {
        // setTimeout(() => {

        // }, 200);
        nextTick(() => {
          console.log(`props.value`, props.value);
          console.log(`props.placeholder`, props.placeholder);
          state.list = props.value;
        });
      }
      watch(props.value, (value: object[]) => {
        state.list = value;
      });
      onUpdated(() => {
        init();
      });

      function onChange() {
        emit('change', state.list);
      }
      function create() {
        state.list.push({ relation: '', name: '', age: '', company: '', job: '' });
      }
      function remove(i) {
        state.list.splice(i, 1);
        emit('change', state.list);
      }

      return {
        onChange,
        create,
        remove,
        ...toRefs(state),
      };
    },
  });
</script>
<style scoped>
  .head {
    display: flex;
    width: 93%;
    text-align: left;
    justify-content: space-around;
  }

  .value-head {
    width: 20%;
    font-weight: bold;
    line-height: 20px;
  }

  .content-item {
    display: flex;
    margin: 5px 0;
  }

  .value-content {
    /* width: 50%; */
    margin-right: 2px;
  }

  .delete-btn {
    position: relative;
    top: 5px;
    padding: 5px;
  }

  .add-btn {
    margin-top: 2px;
    color: #fff;
  }
</style>
