<template>
  <div>
    <avue-crud ref="crud" :option="myOption" :data="list">
      <template slot="url">
        <div>
          <a>{{ labels.upload }}</a> / <a>{{ labels.download }}</a>
        </div>
      </template>
      <template slot="menu">
        <div>{{ labels.download }}</div>
      </template>
    </avue-crud>
  </div>
</template>
<script>
import { ft } from '../../../lib/utils.js';

const LABELS = {
  attachmentDescription: ft('i18n_common_static_resource_placeholder', '静态资源占位符'),
  attachmentType: ft('i18n_common_attachment_type', '附件类型'),
  download: ft('i18n_common_download', '下载'),
  noData: ft('i18n_common_no_data', '暂无数据'),
  upload: ft('i18n_common_upload', '上传'),
  uploadDownload: ft('i18n_common_upload_download', '上传下载')
};

/**
 * 界面配置总管理界面
 * 左侧 维护 所有可配数据列表
 * 主内容根据 可配数据类型 展示 表单，表格，详情，组件列表管理，可选择设置对应的数据
 * 进入屏蔽其他操作状态，单纯进行布局， 保存 及 发布 ， 可维护类型为 表格 表单 详情， 组合， 可 维护 模版 页面  模块
 * block 内含一组组件
 */
export default {
  name: 'item-attachment',
  props: {
    labels: {
      type: Object,
      default: function () {
        return LABELS;
      }
    },
    list: {
      type: Array,
      default: () => {
        return [];
      }
    },
    setting: {
      type: Array,
      default: () => {
        return [];
      }
    },
    option: {
      type: Object,
      default: () => {
        return {
          addBtn: true,
          editBtn: false,
          columnBtn: false,
          filterBtn: false,
          page: false,
          column: [
            { label: LABELS.attachmentType, prop: 'label' },
            { label: LABELS.attachmentDescription, prop: 'desc' },
            { label: LABELS.uploadDownload, prop: 'url', type: 'upload', slot: true }
          ]
        };
      }
    }
  },
  data() {
    return {
      tableObj: {},
      tableData: {}
    };
  },
  computed: {
    myOption() {
      if (this.setting && this.setting.data && this.setting.data.fieldData) {
        const setting = this.setting.data.fieldData;
        const addBtn = !(!setting.addable || setting.addable === 'false');
        const option = this.option;
        option.addBtn = addBtn;
        option.delBtn = addBtn;
        option.emptyText = LABELS.noData;

        const columns = option.column || [];

        for (const column of columns) {
          if (column.i18nKey) {
            column.label = ft(column.i18nKey, column.displayName || column.label || '');
          }
        }

        return option;
      }
      return {};
    }
  },
  methods: {
    listRowUpdate(row, index, done, loading) {
      // 行修改
      this.$set(this.ProviderData.tableData, index, row);
      loading();
      this.$emit('change', this.ProviderData);
      done();
    },
    listRowSave(payload, done) {
      this.ProviderData.tableData.push(payload);
      this.$emit('change', this.ProviderData);
      done();
    },
    listRowDel(payload) {
      this.ProviderData.tableData.splice(payload.index, 1);
    }
  }
};
</script>
<style scoped></style>
