<template>
  <a-table :columns="columns" :dataSource="dataSource" bordered :customRow="rowClick">
    <template v-for="col in ['scode', 'sname']" #[col]="{ text, record }" :key="col">
      <span>
        <a-input
          v-if="editableData[record.key]"
          v-model:value="editableData[record.key][col]"
          style="margin: -5px 0"
          @mouseleave="mouseleave(editableData, record.key, col)"
        />
        <template v-else>
          {{ text }}
        </template>
      </span>
    </template>
    <template #opera="{ record }">
      <a-upload v-model:file-list="imgList" name="file" :multiple="false" action="">
        <span
          style="
            color: #0671dd;
            font-size: 14px;
            font-weight: 500;
            line-height: 16px;
            letter-spacing: 0px;
          "
          >选择</span
        >
      </a-upload>
    </template>
    <template #operation="{ record }">
      <DeleteOutlined
        style="
          color: #f8252c;
          font-size: 16px;
          font-weight: 500;
          line-height: 16px;
          cursor: pointer;
        "
        @click="del(record)"
      />
    </template>
  </a-table>
</template>
  <script lang="ts">
import { defineComponent, ref, computed, unref, reactive, onMounted,watch } from 'vue';
import { DeleteOutlined } from '@ant-design/icons-vue';
import { cloneDeep } from 'lodash-es';
import { fileFields } from './fileUploadData';
const props = {
    fileList:{type:Array,default:[]}
}
export default defineComponent({
  name: 'AccountModal',
  components: { DeleteOutlined },
  emits: ['success', 'register'],
  props,
  setup(props, { emit }) {
    const fileList =  ref(props.fileList);
    let imgList = ref([])
    let editableData = reactive({});
    onMounted(async () => {});
    const columns = fileFields;
    let dataSource = [
      {
        xh: 1,
        key: 'A001',
        sname: '资源名称',
        scode: 's-001',
        type: 'ppt',
        operation: '',
        status: '已提交',
      },
      {
        xh: 2,
        key: 'A002',
        sname: '资源名称1',
        scode: 's-002',
        type: 'ppt',
        operation: '',
        status: '已提交',
      },
    ];
    watch(()=>props.fileList,(list)=>{
        fileList.value = list
        console.log('上传数据列表',list)
    })

    const rowClick = (record, index) => {
      return {
        onclick: () => {
          editableData[record.key] = cloneDeep(record);
        },
        onContextmenu: (event) => {},
        onMouseenter: (event) => {}, // 鼠标移入行
        onMouseleave: (event) => {},
      };
    };
    const mouseleave = (editData, key, col) => {
      const updateValue = editData[key][col];
      //保存数据
      dataSource.forEach((item) => {
        if (item.key === key && updateValue != '') item[col] = updateValue;
      });
      //清空editableData
      //editableData = reactive({});
    };
    const del = (row) => {
      editableData = reactive({});
      dataSource = dataSource.filter((item) => item.key != row.key);
    };
    return {
      columns,
      dataSource,
      editableData,
      rowClick,
      mouseleave,
      fileList,
      imgList,
      del,
    };
  },
});
</script>
  <style scoped lang="less">
</style>
  