<template>
  <div>
    <p-table
      v-if="hasEditor"
      ref="table"
      dragle
      :size="size"
      :has-row-count="rowCount"
      :rowSelectType="rowSelectType"
      :scroll="tableScroll"
      :columns="columns"
      :rowKey="rowKey"
      :remoteUrl="remoteUrl"
      :remoteData="remoteParamsTable"
      :remoteParams="remoteParamsTable"
      :autoLoad="tableAutoLoad"
      :selectedRowKeys.sync="selectedRowKeys"
      @clickRow="clickRow"
      @select="select"
      :remoteBefore="remoteBefore"
      :bordered="bordered"
    >
      <!-- warehouseAreaType -->
      <span slot="warehouseAreaType" slot-scope="text">
        <span>{{ remoteDataFun1(text) }}</span>
      </span>
      <template v-if="tableBtnArray.length > 0" v-slot:action="text, record">
        <template v-for="(item, i) of tableBtnArray">
          <a-divider v-if="i > 0" :key="item.label" type="vertical" />
          <a :key="i" class="table-operator" @click="item.click(record)">{{ $lang(item.label) }}</a>
        </template>
      </template>
    </p-table>
    <p-table-edit-pro
      v-if="!hasEditor"
      ref="tableEdit"
      dragle
      :size="size"
      :has-row-count="rowCount"
      :rowSelectType="rowSelectType"
      :scroll="tableScroll"
      :columns="columns"
      :rowKey="rowKey"
      :remoteUrl="remoteUrl"
      :remoteData="remoteParamsTable"
      :remoteParams="remoteParamsTable"
      :autoLoad="tableAutoLoad"
      :selectedRowKeys.sync="selectedRowKeys"
      @clickRow="clickRow"
      @select="select"
      :remoteBefore="remoteBefore"
      :bordered="bordered"
    >
      <template v-if="tableBtnArray.length > 0" v-slot:action="text, record">
        <template v-for="(item, i) of tableBtnArray">
          <a-divider v-if="i > 0" :key="item.label" type="vertical" />
          <a :key="i" class="table-operator" @click="item.click(record)">{{ $lang(item.label) }}</a>
        </template>
      </template>
    </p-table-edit-pro>
  </div>
</template>

<script>
import { remoteData } from './api.js'
export default {
  name: 'tableList',
  components: {},
  props: {
    columns: {
      type: Array,
      default() {
        return []
      },
    },
    remoteUrl: {
      type: String | Object,
      default: '',
    },
    remoteParams: {
      type: Object,
      default() {
        return {}
      },
    },
    tableScroll: {
      type: Object | Number,
      default() {
        return {
          x: true,
        }
      },
    },
    tableBtnArray: {
      type: Array,
      default() {
        return []
      },
    },
    rowKey: {
      type: String,
      default: '',
    },
    size: {
      type: String,
      default: '',
    },
    bordered: {
      type: Boolean,
      default: true,
    },
    tableAutoLoad: {
      type: Boolean,
      default: true,
    },
    rowCount: {
      type: Boolean,
      default: true,
    },
    rowSelectType: {
      type: Number,
    },
    hasEditor: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      selectedRowKeys: [],
      remoteParamsTable: '',
      remoteDataList: [],
    }
  },
  watch: {
    remoteParams(val) {
      this.remoteParamsTable = val
    },
  },
  created() {
    this.getTypes()
  },
  mounted() {},
  computed: {},
  methods: {
    reload(data) {
      if (this.hasEditor) {
        this.$refs.table.reload(data)
      } else {
        this.$refs.tableEdit.reload(data)
      }
    },
    clickRow(event, activeID, rowRecord) {
      this.$emit('clickRow', event, activeID, rowRecord)
    },
    remoteBefore(p, d) {
      // console.log(p,'pppppppppp')
    },
    select(record, selected, selectedRows, nativeEvent) {
      this.$emit('select', record, selected, selectedRows, nativeEvent)
    },
    async getTypes() {
      let datas = await remoteData('areatype')
      this.remoteDataList = datas.data
    },
    remoteDataFun1(text) {
      let arrList = this.remoteDataList
      let temp = arrList.find((v) => v.dictCode == text)
      return temp ? temp.dictName : text
    },
  },
}
</script>
