<template>
  <!-- 新增编辑 -->
  <a-modal
    width="900px"
    :maskClosable="false"
    :visible="props.visible"
    :confirm-loading="loading"
    :forceRender="true"
    :title="props.title"
    :body-style="{ paddingBottom: '8px', height: '400px', overflowY: 'auto' }"
    @update:visible="updateVisible"
    @ok="save"
    @close="updateVisible(false)"
  >
    <div class="config-content">
      <div class="config-button">
        <a-button class="border-radius" type="primary" @click="add">新增</a-button>
      </div>
      <div class="config-table">
        <common-table :columns="columns" bordered ref="tableRef" :rowSelection="false" :isPage="false" :dataSource="dataSource">
          <template #bodyCell="{ column, record, index }">
            <template v-if="['title', 'linkUrl'].includes(column.dataIndex)">
              <a-input v-model:value="record[column.dataIndex]" placeholder="请输入"></a-input>
            </template>
            <template v-if="column.dataIndex == 'pictureFileId'">
              <img :src="filePreviewUrl + record.pictureFileId" alt="" class="do-top-img" v-if="record.pictureFileId" />
              <a-upload
                v-else
                name="file"
                :multiple="false"
                :action="FileUploadUrls"
                :headers="headers"
                @change="info => afterUpload(info, record)"
                :showUploadList="false"
              >
                <a-button type="primary" class="border-radius">
                  <template #icon>
                    <CloudUploadOutlined />
                  </template>
                  <span>上传图片</span>
                </a-button>
              </a-upload>
            </template>
            <!-- 操作 -->
            <template v-if="column.key == 'action'">
              <a-space :size="16">
                <icon-font iconClass="icon-opt-shanchu" font-size="24px" title="删除" color="#60666b" @click="remove(index)"></icon-font>
              </a-space>
            </template>
          </template>
        </common-table>
      </div>
    </div>
  </a-modal>
</template>

<script setup name="ConfigEdit">
import { ref, onMounted } from 'vue';
import { getToken } from '@/utils/token-util';
import { API_BASE_PREFIX } from '@/config/setting';
import { FileUploadUrl } from '@/views/system/backend/file/api/FileApi';
import { message } from 'ant-design-vue';

const props = defineProps({
  visible: Boolean,
  title: String,
  listName: String,
  currentItem: Object
});

const emits = defineEmits(['update:visible']);
// 弹框加载
const loading = ref(false);

// 上传文件时候要带header
const headers = ref({
  Authorization: getToken()
});

// 文件预览接口
const filePreviewUrl = ref(`${API_BASE_PREFIX}/sysFileInfo/public/preview?fileId=`);
// 上传文件的url
const FileUploadUrls = ref(`${API_BASE_PREFIX}${FileUploadUrl}?secretFlag=N`);

// 表格配置
const columns = ref([
  {
    key: 'index',
    title: '序号',
    width: 48,
    align: 'center',
    isShow: true,
    hideInSetting: true
  },
  {
    dataIndex: 'title',
    title: '标题',
    ellipsis: true,
    width: 100,
    isShow: true
  },
  {
    dataIndex: 'pictureFileId',
    title: '图片',
    width: 100,
    ellipsis: true,
    isShow: true
  },
  {
    dataIndex: 'linkUrl',
    title: '跳转地址',
    width: 100,
    ellipsis: true,
    isShow: true
  },
  {
    key: 'action',
    title: '操作',
    width: 40,
    isShow: true
  }
]);

// 配置数据列表
const dataSource = ref([]);

onMounted(() => {
  if (props.listName == 'formItemBreadcrumbList') {
    columns.value.splice(2, 1);
  }
  dataSource.value = props.currentItem[props.listName];
});

// 新增
const add = () => {
  let obj = {
    title: '',
    linkUrl: ''
  };
  if (props.listName != 'formItemBreadcrumbList') {
    obj.pictureFileId = '';
  }
  dataSource.value.push(obj);
};

// 删除
const remove = index => {
  dataSource.value.splice(index, 1);
};

/**
 * 上传文件改变时的状态
 *
 * @param info 组件回调原有参数
 * @param fieldCode 文件表单字段名称
 * @author fengshuonan
 * @date 2021/12/29 14:25:18
 */
const afterUpload = (info, record) => {
  if (info.file.status === 'done') {
    message.success(`${info.file.name} 图片上传成功`);
    // 设置表单对应的文件属性的值
    record.pictureFileId = info.file.response.data.fileId;
  } else if (info.file.status === 'error') {
    message.error(`${info.file.name} 图片上传失败`);
  }
};

// 更改弹框状态
const updateVisible = value => {
  emits('update:visible', value);
};

// 点击保存
const save = () => {
  updateVisible(false);
};
</script>

<style lang="less" scoped>
.wh100 {
  width: 100%;
  height: 100%;
}
:deep(.full-screen) {
  display: none;
}
.config-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.config-button {
  margin-bottom: 10px;
}
.config-table {
  flex: auto;
}
.do-top-img {
  width: 24px;
  height: 24px;
  margin-top: -3px;
  margin-right: 10px;
}
</style>
