<template>
  <!-- 数据操作 -->
  <a-space style="margin-bottom: 10px">
    <a-button style="background-color: #5cc750" type="primary" class="ele-btn-icon" @click="handleAdd">
      <template #icon>
        <plus-outlined />
      </template>
      <span>新增</span>
    </a-button>
  </a-space>
  <a-table :pagination="pagination"
        @change="handleTableChange"
        bordered
        :columns="columns"
        :dataSource="dataSource"
    >
    <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action' && record['orgId'] != '258106438092689000'">
          <a @click="handleDeal(record)">编辑</a>
        </template>
    </template>
  </a-table>
  <!-- 编辑品牌商信息 -->
  <a-modal
    v-model:open="open"
    :title="openTitle"
    @ok="handleOkModal"
    @cancel="handleCancelModal"
    width="800px"
    :maskClosable="false"
  >
    <OrgForm ref="formModel"></OrgForm>
  </a-modal>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue';
import { message } from 'ant-design-vue'
import { callUser } from '@/apis/call.js'
import config from '@/utils/config.js'
import OrgForm from '@/views/form/orgmanage/orgform.vue'

const open = ref(false);
const openTitle = ref('品牌商信息');
const formModel = ref(null);

const columns = [
  {
    title: '序号',
    key: 'index',
    width: 70,
    align: 'center',
    dataIndex: 'index'
  },
  {
    title: '品牌商名称',
    dataIndex: 'orgName',
    key: 'orgName',
  },
  {
    title: '操作',
    key: 'action',
    width: 200,
    align: 'center'
  }
];
// 表格行数据
const dataSource = ref([])
const data = ref([])
// 查询相关
const queryform = ref({
  pageParam: {
    pageNum: config.pageParam.pageNum,
    pageSize: config.pageParam.pageSize
  }
})

//对于每页数据的管理
let pagination = reactive({
  total: dataSource.value.length,
  current: queryform.value.pageParam.pageNum,
  pageSize: queryform.value.pageParam.pageSize,
  showSizeChanger: true,
  pageSizeOptions: config.pageParam.pageSizeOptions,
  showQuickJumper: true
})

onMounted(() => {
  getData();
})

// 对每页数据显示的交互
let handleTableChange = (pagina) => {
  pagination.current = pagina.current
  pagination.pageSize = pagina.pageSize
  queryform.value.pageParam.pageNum = pagina.current
  queryform.value.pageParam.pageSize = pagina.pageSize
  getData();
}

const getData = async () => {
  callUser("/organizations/page?pageNum=" + queryform.value.pageParam.pageNum + "&pageSize=" + queryform.value.pageParam.pageSize, {},"get").then((res) => {
    if (res.code != 200) {
      message.error(res.message)
      dataSource.value = []
      data.value = []
      pagination.total = 0
      return
    }
    data.value = res.data.records
    data.value = data.value.map((item, index) => {
      index++
      return { ...item, index }
    })
    dataSource.value = data.value
    pagination.total = res.data.totalRow
  });
}

const handleAdd = async () => {
  open.value = true;
  nextTick(() => {
    if (formModel.value) {
      formModel.value.openForm({});
    } else {
      console.log('formModel is not ready yet');
    }
  });
}

const handleDeal = async (record) => {
  open.value = true;
  nextTick(() => {
    if (formModel.value) {
      formModel.value.openForm({ ...record });
    } else {
      console.log('formModel is not ready yet');
    }
  });
}

/**
* 处理停车点申请modal确定
*/
const handleOkModal = () => {
  formModel.value.formSave(bres => {
    open.value = false;
    if(bres){
      getData()
    }
  });
}

const handleCancelModal = () => {
  formModel.value.resetAll(bres => {
    if(bres) open.value = false;
  });
}
</script>