<template>
  <!-- 地块调查 风险评估 -->
  <a-table :columns="opinionColumns" :data-source="localData" :pagination="false" bordered size="middle">
    <template #headerCell="{ column }">
      <span :class="{ required: psfs === 1 && !['mail', 'memo', 'action'].includes(column.dataIndex) }"> {{ column.title }}</span>
    </template>
    <template #bodyCell="{ column, record, index }">
      <template v-if="column.dataIndex === 'isHead'">
        <a-radio :value="1" v-model:checked="record[column.dataIndex]" @change="changeIsHead(index)">是</a-radio>
      </template>
      <template v-else>
        <a-input v-model:value="record[column.dataIndex]" @input="emit('update:data', localData)" />
      </template>
    </template>
    <!--操作栏-->
    <template #action="{ index }">
      <a-button type="link" @click="toDelete(index)">删除</a-button>
    </template>
  </a-table>
</template>
<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { opinionColumns } from '../data';
  const props = defineProps({
    data: {
      type: Object,
    },
    psfs: {
      type: Number,
    },
  });
  const emit = defineEmits(['update:data']);
  const localData = ref([]);
  watch(
    () => props?.data,
    async (val: any) => {
      if (val) {
        localData.value = val.map((item) => ({ ...item }));
      }
    },
    { deep: true, immediate: true }
  );
  function changeIsHead(index) {
    localData.value.forEach((item, i) => {
      item.isHead = i === index ? 1 : 0;
    });
    emit('update:data', localData.value);
  }
  function toDelete(index) {
    localData.value.splice(index, 1);
    emit('update:data', localData.value);
  }
  defineExpose({
    localData,
  });
</script>
