<template>
  <a-table :disabled="props.isView" :columns="columns" :dataSource="props.fileList" bordered :customRow="rowClick"
    :pagination="false">
    <template v-for="col in ['scode', 'sname']" #[col]="{ text, record }" :key="col">
      <span>
        <a-input :disabled="props.isView" 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 #thumbnail="{ record }">
      <a-upload :disabled="props.isView" v-model:file-list="record.imgList" :remove="removeImg" :id="record.fileId"
        name="file" :multiple="false" :data="record" :custom-request="customUpload">
        <span :disabled="props.isView" style="
            color: #0671dd;
            font-size: 14px;
            font-weight: 500;
            line-height: 16px;
            letter-spacing: 0px;
          ">选择</span>
      </a-upload>
    </template>
    <template #fileCode="{ record, index }">
      <a-input @blur="changeCode(index, record.fileCode)" :disabled="props.isView" v-model:value="record.fileCode"
        placeholder="请输入编码" />
    </template>
    <template #fileName="{ record }">
      <a-input :disabled="props.isView" v-model:value="record.fileName" placeholder="请输入文件名字" />
    </template>
    <template #operation="{ index }">
      <DeleteOutlined :disabled="props.isView" style="
          color: #f8252c;
          font-size: 16px;
          font-weight: 500;
          line-height: 16px;
          cursor: pointer;
        " @click="del(index)" />
    </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';
import { update, getImgUrl } from '/@/api/dataAdmin/assembly';
import { session } from '/@/utils/Memory';
import { message } from 'ant-design-vue';

export default defineComponent({
  name: 'AccountModal',
  components: { DeleteOutlined },
  emits: ['success', 'register', 'remove'],
  props: {
    fileList: { type: Array, default: [] },
    isView: { type: Boolean, default: ref(false) },
  },
  setup(props, { emit }) {
    let imgList = ref([]);
    let editableData = reactive({});
    onMounted(async () => { });
    const columns = fileFields;
    let dataSource = [];
    watch(() => props.fileList, (j) => j.map(i => getThumbnail(i)));

    function getThumbnail(i) {
      if (i.thumbnail && i.thumbnail.indexOf(',') > -1) {
        var arr = i.thumbnail.split(',')
        getImgUrl(arr[0], arr[1]).then(res => {
          var name = res.match(/\/([^/]+)\?/)[1];
          i.imgList = [{
            uid: i.fileId,
            name: name,
            status: 'done',
            url: res,
          }];
        })
      }
    }

    function imgListClear() {
      props.fileList.map(i => i.imgList = []);
    }

    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;
      });
    };
    const del = (j) => {
      if (!props.isView) props.fileList.remove(j);
    };

    //缩略图上传
    function customUpload({ file, onSuccess, onError, data }) {
      if (data?.imgList?.length > 0) data.imgList.splice(0, 1)
      const formData = new FormData();
      formData.append('file', file);
      update(formData, session.getItem('sysFild').dirId).then(r => {
        if (r && r.resp_code == 0 && r.resp_msg == "OK") {
          data.thumbnail = `${r.datas.id},${r.datas.dirId}`;
          onSuccess()
        } else {
          onError()
        }
      })
    }

    function removeImg(j) {
      var o = props.fileList.find(i => i.fileId == j.uid);
      if (o) o.thumbnail = "";
    }

    function changeCode(i, e) {
      props.fileList.map((j, index) => {
        if (i != index && e == j.fileCode) {
          message.error('资源编码不重复！');
        }
      })
    }

    return {
      changeCode,
      removeImg,
      imgListClear,
      customUpload,
      columns,
      dataSource,
      editableData,
      rowClick,
      mouseleave,
      props,
      imgList,
      del,
    };
  },
});
</script>
<style scoped></style>
  