<template>
  <div class="page-body">

    <vxe-table border show-overflow keep-source ref="xTable" :height="tableHeight" :data="detailsData" :export-config="{}"

      :edit-config="{ trigger: 'click', mode: 'cell', icon: 'vxe-icon-edit', showStatus: false }">
      <vxe-column width="80">
        <template #default="{ row }">
          <div class="oplinks">
            <a @click.stop="pageAdd(row)" title="新增">
              <a-icon type="plus-circle" />
            </a>
            <a @click.stop="pageDelete(row)" title="删除">
              <a-icon type="delete" />
            </a>
          </div>
        </template>
      </vxe-column>
      <vxe-column field="endpoint" width="220" title="endpoint" :edit-render="{ name: '$input', props: {} }">
      </vxe-column>
      <vxe-column field="domain" width="220" title="domain" :edit-render="{ name: '$input', props: {} }">
      </vxe-column>
      <vxe-column field="access_key" width="220" title="access_key" :edit-render="{ name: '$input', props: {} }">
      </vxe-column>
      <vxe-column field="bucket" width="220" title="bucket" :edit-render="{ name: '$input', props: {} }">
      </vxe-column>
      <vxe-column field="code" width="220" title="编码" :edit-render="{ name: '$input', props: {} }">
      </vxe-column>
      <vxe-column field="type" width="220" title="类型" :edit-render="{ name: '$input', props: {} }">
      </vxe-column>
    </vxe-table>


    <div class="footerbar">
      <a-button type="primary" @click="ok">确定</a-button>
    </div>

  </div>
</template>

<script>
import BASE_URL from '@/services/base/api.js';

export default {
  i18n: require('./i18n'),

  props: {
    pageMode: {
      type: String,
      default: "edit"
    },
    dataId: {
    }

  },

  data() {

    // 页面数据变量
    var pageData = {

      actions: {

        update: `${BASE_URL.BASE_URL}/Oss/v1/oss/batchHandle`,
        get: `${BASE_URL.BASE_URL}/Oss/v1/oss/list`
      },

      sourceDetailsData: [],
      detailsData: [
      ],

      deletedDetailsData: [

      ],
      tableHeight: 400
    };




    return pageData;
  },
  created() {
    this.$mk.post({
      url: this.actions.get,
      loading: "加载中...",
      data: {
        "page": 1,
        "limit": 10000,
        "start_time": 0,
        "order_bys": [

        ],
        "search_rules": [
        {
              column: "beid", // 字段名
              mode: "=", // 搜索模式
              value: this.dataId.toString()
            }
        ],
        "end_time": 0
      }
    }).then(a => {
      let ds = [];
      if (a.data && a.data.Oss) {
        this.sourceDetailsData = a.data.Oss;
     
        a.data.Oss.forEach(item => {
          ds.push(JSON.parse(JSON.stringify(item)));
        })
       
      }

      for (let i = ds.length; i < 5; i++) {
          ds.push({})
        } 
        this.detailsData = ds;

    }).catch(() => {

      for (let i = this.detailsData.length; i < 10; i++) {
        this.detailsData = [...this.detailsData, {}];
      }
    });

  },
  // 函数
  methods: {


    loadData() {
    },
    findSourceInfo(idStr) {
      for (var i = 0; i < this.sourceDetailsData.length; i++) {
        let o = this.sourceDetailsData[i];
        if (o.id.toString() == idStr) {
          return o;
        }
      }
    },
    ok() {

      let save = () => {

        this.$refs.xTable.clearEdit();
        
        let action = this.actions.update;

        let ds = JSON.parse(JSON.stringify(this.detailsData));

        var postdata = {
          insertList: [],
          updateList: [],
          deleteList: this.deletedDetailsData
        }; 
        ds.forEach(item => {
          if (!item.endpoint) {
            return;
          }
          item.beid = this.$mk.toBigInt(this.dataId);
          delete item._X_ROW_KEY;
          if (item.id && item.id != "0") {
            let source = this.findSourceInfo(item.id);
            item.id = source.id;
            postdata.updateList.push(item);
          } else {
            postdata.insertList.push(item);
          }
        })
        this.$mk.post({
          url: action,
          loading: "保存中...",
          data: postdata,
          useBigInt: true
        }).then(() => {
          this.$mk.success("OSS保存成功");
          this.$emit("callback", { success: true });
        }).catch((a) => {
          this.$mk.error(a.data.msg);
        });
      };

      save();


    },

    cancel() {
      this.$emit("callback", {});
    },

    pageAdd(row) {

      const $table = this.$refs.xTable
      const record = {
      }
      if (row) {

        this.detailsData.splice($table.getRowSeq(row), 0, record);
      } else {
        this.detailsData.push(record)
      }



    },

    pageDelete(row) {
      const $table = this.$refs.xTable;
      if (row.id) {
        let source = this.findSourceInfo(row.id); 
        this.deletedDetailsData.push(source.id)
      }
      this.detailsData.splice($table.getRowSeq(row) - 1, 1);

    },

  },
  // 监听属性
  watch: {

  }
};

</script>
<style></style>
