<template>
  <div class="sales">
    <slot name="title">
      <h5>销售订单明细</h5>
    </slot>
    <slot name="bts" />
    <div class="table">
      <el-table
        :data="dataList"
        style="width: 100%"
        v-bind="tableAttributes"
        @select-all="handleSelectionAllChange"
        @selection-change="handleSelectionAllChange"
      >
        <el-table-column
          v-if="isSelection"
          align="left"
          style="padding-left: 10px;"
          type="selection"
          width="55"
        />
        <el-table-column
          v-if="isIndex"
          type="index"
          width="50"
        />
        <el-table-column
          v-for="(item,index) in column"
          :key="index"
          show-overflow-tooltip
          v-bind="{...item,...columnAttributes}"
          :prop="item.prop"
        >
          <template v-slot="{row,$index}">
            <template v-if="!item.isInput">
              {{ row[item.prop] }}
            </template>
            <template v-else>
              <el-input
                v-model="row[item.prop] "
                class="yinput"
                :type="item.type?item.type:'number'"
                :placeholder="item.placeholder"
                size="mini"
                @mousewheel.native.prevent
              />
            </template>
            <template v-if="item.isCustom">
              <slot name="custom" :item="{row,$index}" />
            </template>
          </template>
        </el-table-column>
        <el-table-column v-if="isOperation" fixed="right" label="操作" min-width="100" align="center">
          <template v-slot="{row,$index}">
            <slot name="operation" :item="{row,$index}" />
          </template>
        </el-table-column>
      </el-table>
    </div>

    <slot />
    <slot name="events">
      <div>
        <!--        <el-button type="primary" size="mini">保存</el-button>-->
        <!--        <el-button size="mini">重置</el-button>-->
        <!--        <el-button type="primary" size="mini">提交</el-button>-->
        <!--        <el-button size="mini">重置</el-button>-->
        <!--        <el-button size="mini">通知退货</el-button>-->
      </div>
    </slot>
  </div>
</template>

<script>
export default {
  name: 'SalesTable',
  props: {
    isSelection: {
      type: Boolean,
      default: false
    },
    isIndex: {
      type: Boolean,
      default: false
    },
    isOperation: {
      type: Boolean,
      default: false
    },
    tableAttributes: {
      type: Object,
      default: () => {
        return {}
      }
    },
    columnAttributes: {
      type: Object,
      default: () => {
        return {}
      }
    },
    dataList: {
      type: Array,
      default: () => {
        return []
      }
    },
    column: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      activities: [{
        content: '活动按期开始',
        color: '#0bbd87',
        timestamp: '2018-04-15'
      }, {
        content: '通过审核',
        timestamp: '2018-04-13'
      }, {
        content: '创建成功',
        timestamp: '2018-04-11'
      }],
      selection: []
    }
  },
  methods: {
    handleDel(row) {
      console.log(row)
    },
    handleSelectionAllChange(data) {
      this.$emit('handleSelection', data)
    }

  }
}
</script>

<style lang="scss" scoped>
.sales {
  margin: 20px;
  padding: 20px;
  box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
}

::v-deep .el-table-column--selection .cell {
  padding: 0 10px 0 10px;
}

.diy-table-1 {
  margin: 20px 0;
}
</style>
