/*
 *@description:
 *@author: hudw
 *@date: 2022-03-14 15:14:53
*/
<!-- autoColWidth -->
<template>
  <p-table
    :id="$route.meta.menuId + '_main'"
    :autoLoad="false"
    rowSelectFixed
    :dataSource="dataSource"
    :scroll="{ x: true }"
    customScrollbar
    ref="mainTable"
    bordered
    :activeKey="$attrs.mainId"
    :columns="mx_columns"
    :pagination="200"
    :remoteUrl="mx_remoteUrl"
    :remoteBefore="remoteBefore"
    dragle
    :rowSelectType="false"
    v-on="$listeners"
  >
    <template slot="operation" slot-scope="text, record">
      <a href="javascript:;" @click.stop="show_info_item(record)">查看</a>
      <a-divider type="vertical" />
      <a href="javascript:;" @click.stop="update_item(record)">修改</a>
      <a-divider type="vertical" />
      <a href="javascript:;" @click.stop="delete_item(record)">删除</a>
    </template>
  </p-table>
</template>
<script>
// export default function () {

//   // store.commit('setColumnPosition')
//   store.dispatch('getSign');
// }
import { setMainColumns } from './tableConfig'
import { getTabUrl, deleteMainItem } from '../../api'


function findComponentUp(context, componentName) {}
function findComponent(context, componentName) {
  const childrens = context.$children
  let children = null
  if (childrens.length) {
    for (const child of childrens) {
      let name = child.$options.name
      if (name == componentName) {
        children = child
        break
      } else {
        children = findComponent(child, componentName)
        console.log(name)
        if (children) break
      }
    }
  }
  return children
}
export default {
  props: {
    options: {
      type: Object,
      default: () => {},
    },
    selectedRowKeys: {
      type: Array,
      default: () => [],
    },
    tableExtendedField: {
      type: Array,
    },
    getFieldsValue: {
      type: Function,
    },

    activeID: {
      type: String,
    },
    tabKey: {
      type: null,
      default: '1',
    },
  },

  data() {
    return {
      dataSource: [],
      confirmLoading: false,
      mx_remoteUrl: getTabUrl(this.tabKey),
      mx_remoteParams: {},
      mx_columns: setMainColumns(this),
    }
  },
  mounted() {},
  watch: {
    tabKey(key) {
      this.mx_remoteUrl = getTabUrl(key)
      this.$nextTick(() => {
        this.reload()
      })
    },
    tableExtendedField(value) {
      if (value.length > 0) {
        value.forEach((element, index) => {
          this.mx_columns.splice(7 + index, 0, element)
        })
      }
    },
    activeID(v) {
      console.log('activeID', v)
      this.$refs.mainTable.activeID = v
    },
  },
  methods: {
    show_info_item(record) {
      this.$emit('view', record)
    },
    delete_item(record) {
      deleteMainItem(this, [record.id])
    },
    update_item(record) {
      this.$emit('update', record)
    },
    toggle_item(record) {
      let status = +!record.status
      return mainIsEnable(this, [{ providerId: record.id }], status)
    },
    reload(args) {
      return this.$refs.mainTable.reload(args)
    },
    remoteBefore(vNode, remoteUrl) {
      let user = this.$store.getters?.userInfo ?? null
      remoteUrl.data = { ...remoteUrl.data, ...{ userId: user.userId } }
    },
  },
}
</script>
  <style lang="less" >
.row-colorView {
  position: relative;

  width: 100%;
  height: 100%;
  background: #f8f8f8;
  background-image: linear-gradient(45deg, #dbdbdb 25%, transparent 0, transparent 75%, #dbdbdb 0), linear-gradient(45deg, #dbdbdb 25%, transparent 0, transparent 75%, #dbdbdb 0);
  background-position: 0 0, 15px 15px;
  background-size: 10px 10px;
  .content {
    padding: 5px;
    width: inherit;
  }
}
</style>