/*
 *@description:货主主表
 *@author: hudw
 *@date: 2022-03-14 15:14:53
*/
<template>
  <p-table
    :id="$route.meta.menuId + '_main'"
    :autoLoad="true"
    :getCheckboxProps="
      (record) => ({
        props: {
          disabled: record.status == 5 ? true : false,
        },
      })
    "
    rowSelectFixed
    :dataSource="dataSource"
    :selectedRowKeys="selectedRowKeys"
    :scroll="{ x: true }"
    ref="mainTable"
    bordered
    :columns="mx_columns"
    :pagination="10"
    rowKey="cargoOwnerId"
    :remoteUrl="mx_remoteUrl"
    :remoteBefore="remoteBefore"
    dragle
    :rowSelectType="2"
    v-on="$listeners"
  >
    <template slot="operation" slot-scope="text, record">
      <a href="javascript:;" @click.stop="show_info_item(record)" v-action:view>查看</a>
      <a-divider type="vertical" />
      <a href="javascript:;" :disabled="record.status !== 10||record.status == 5" @click.stop="update_item(record)" v-action:edit>修改</a>
      <a-divider type="vertical" />
      <p-switch @click="toggle_item(record)" :replaceFields="{ true: 10, false: 0 }" :checked="record.status" :disabled="record.status == 5" size="small" v-action:status></p-switch>
      <a-divider type="vertical" />
      <a href="javascript:;" @click.stop="copy_item(record)" :disabled="record.status == 5" v-action:copy>复制</a>
      <a-divider type="vertical" />
      <a href="javascript:;" @click.stop="delete_item(record)" :disabled="record.status == 5" v-action:del>删除</a>
    </template>
  </p-table>
</template>
<script>
import { setMainColumns } from './tableConfig'
import { mainTableInfoUrl, mainIsEnable, deleteMainItem } from '../../api'
let arr = []

export default {
  props: {
    options: {
      type: Object,
      default: () => {},
    },
    selectedRowKeys: {
      type: Array,
      default: () => [],
    },
    tableExtendedField: {
      type: Array,
      default: () => [],
    },
    getFieldsValue: {
      type: Function,
    },

    activeID: {
      type: String,
    },
  },

  data() {
    return {
      dataSource: arr,
      confirmLoading: false,
      //dataSource: [],
      mx_remoteUrl: {
        method: 'post',
        url: mainTableInfoUrl,
      },
      mx_remoteParams: {},
      mx_columns: setMainColumns(this, this.tableExtendedField),
    }
  },
  mounted() {},
  watch: {
    tableExtendedField(value) {
      if (value.length > 0) {
        this.mx_columns = setMainColumns(this, value)
      }
    },
    activeID(v) {
      console.log('activeID', v)
      this.$refs.mainTable.activeID = v
    },
  },
  methods: {
    copy_item(record) {
      this.$emit('copy', record)
    },
    show_info_item(record) {
      this.$emit('view', record)
    },
    delete_item(record) {
      deleteMainItem(this, [record.cargoOwnerId])
    },
    update_item(record) {
      this.$emit('update', record)
    },
    toggle_item(record) {

      let status = ~~record.status
      return mainIsEnable(this, [{ cargoOwnerId: record.cargoOwnerId, cargoOwnerCode: record.cargoOwnerCode, cargoOwnerName: record.cargoOwnerName }], status)
    },
    reload(args) {
      return this.$refs.mainTable.reload(args)
    },
    remoteBefore(vNode, remoteUrl) {
      let searchBar = this.$parent.$parent.$parent.$refs.searchBar
      if (searchBar) {
        const { getFieldsValue } = searchBar
        remoteUrl.data = { ...remoteUrl.data, ...getFieldsValue() }
      }
    },
  },
}
</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>