<template>
  <el-dialog width="840px" :visible.sync="dialogVisible" :append-to-body="false" :modal-append-to-body="false"
    :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" @closed="handleClose"
    class="order-picker">
    <div class="order-picker__body">
      <div class="order-picker__filter">
        <div class="filter-item">
          <el-input v-model="searchParams.orderSn" clearable placeholder="输入订单编号" style="width: 160px" />
        </div>
        <div class="filter-item">
          <el-button type="primary" @click="handleSearch">搜索 </el-button>
        </div>
      </div>
      <el-table 
        ref="orderTable" 
        v-loading="loading" 
        :data="orderData.data" 
        border 
        row-key="order_id" 
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick" 
        :row-class-name="rowClassName"
				max-height="400"
        style="width: 100%; min-height: 400px"
      >
        <el-table-column v-if="limit === 1" label="选择" width="55" align="center">
          <template slot-scope="scope">
            <el-radio v-model="radioGuide" :label="scope.row" :disabled="selectedIds.some(v => v === scope.row.order_id)">&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column v-else type="selection" label="选择" width="55" :selectable="checkDisable" reserve-selection
          align="center" />
        <el-table-column v-for="column in columns" v-if="column.prop !== 'create_time'" :key="column.label" align="center"
          v-bind="column" />
        <el-table-column v-for="column in columns" v-if="column.prop === 'create_time'" :key="column.label" align="center"
          v-bind="column">
          <template slot-scope="scope">{{ scope.row.create_time | unixToDate }}</template>
        </el-table-column>
      </el-table>
      <div class="order-picker__tools">
        <div class="tools">
        </div>
        <el-pagination v-if="orderData.data_total" background :page-sizes="[10, 30, 50, 100]"
          :total="orderData.data_total" layout="total, sizes, prev, next, pager, jumper"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import * as DefaultOptions from './defaultOptions'
import request from '@/utils/request'

export default {
  name: 'EnPickerOrder',
  props: {
    ...DefaultOptions.props
  },
  data() {
    return {
      ...DefaultOptions.data,
      dialogVisible: false,
      selected: [],
      radioGuide: '',
      orderParams: {
        page_no: 1,
        page_size: 10
      },
      searchParams: {
        orderSn: ''
      },
      orderData: {
        data: [],
        data_total: 0
      },
      // 加载订单列表
      loading: false
    }
  },
  mounted() {
    this.getGoodsList()
  },
  watch: {
    show: {
      immediate: true,
      handler(newVal) {
        this.$nextTick(() => {
          this.dialogVisible = newVal
        })
      }
    }
  },
  methods: {
    checkDisable(row, index) {
      return this.selectedIds.some(v => v === row.order_id) ? 0 : 1
    },
    isDisabledSku(row) {
      return this.selectedIds.some(v => v === row.order_id) ? 1 : 0
    },
    rowClassName({ row }) {
      return this.isDisabledSku(row) ? 'hide' : ''
    },
    // 关闭
    handleClose() {
      this.$nextTick(this.close)
      this.dialogVisible = false
      this.$emit('closed')
    },
    // 取消
    handleCancel() {
      this.dialogVisible = false
      this.$emit('cancel')
      typeof this.reject === 'function' && this.reject('取消了')
    },
    // 确认
    handleConfirm() {
      if (this.limit === 1) {
        if (!this.radioGuide) return this.$message.error('请选择订单')
      } else {
        if (!this.selected.length) return this.$message.error('请选择订单')
      }
      this.dialogVisible = false
      let orders = this.limit === 1 ? [this.radioGuide] : this.selected
      orders = JSON.parse(JSON.stringify(orders))
      this.$emit('confirm', orders)
      typeof this.resolve === 'function' && this.resolve(orders)
      this.$emit('close')
    },
    // 选择
    handleSelectionChange(val) {
      this.selected = val
    },
    // 分页大小发生改变
    handleSizeChange(size) {
      this.orderParams.page_size = size
      this.getGoodsList()
    },
    // 当前页数发生改版
    handleCurrentChange(current) {
      this.orderParams.page_no = current
      this.getGoodsList()
    },
    // 搜索
    handleSearch() {
      this.orderParams.page_no = 1
      this.orderParams = {
        ...this.orderParams,
        ...this.searchParams
      }
      this.getGoodsList()
    },
    // 点击了某行
    handleRowClick(row) {
      if (this.isDisabledSku(row)) return
      if (this.limit === 1) {
        this.radioGuide = row
      } else {
        this.$refs.orderTable.toggleRowSelection(row)
      }
    },
    // 获取订单列表
    async getGoodsList() {
      this.loading = true
      const params = JSON.parse(JSON.stringify(this.orderParams))
      request({
        url: this.orderApi,
        method: 'get',
        loading: false,
        params: {
          ...params,
          ...this.orderApiParams,
        }
      }).then(response => {
        this.loading = false
        this.orderData = response
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.order-picker {
  clear: both;

  .order-picker__filter {
    float: right;
  }

  /deep/ {
    .el-dialog__body {
      padding-top: 20px;
      padding-bottom: 20px;
    }

    .el-dialog__header {
      padding: 9px 20px 10px;
      border-bottom: 1px solid #e5e5e5;
      text-shadow: 0 1px 0 #fff;
      background-color: #efefef;
    }

    .el-dialog__footer {
      border-top: solid 1px #e5e5e5;
      background: #f5f5f5;
    }

    .el-table .el-table__body-wrapper .el-table__row {
      cursor: pointer;
    }
    
    .el-table__row.hide {
      td:is([rowspan="1"]) {
        background-color: #f2f2f2 !important;
      }
    }
  }

  &__filter {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-right: none;
    position: relative;
    margin-bottom: 10px;

    .filter-item {
      display: flex;
      align-items: center;
    }

    .filter-item+.filter-item {
      margin-left: 10px;
    }

    .filter-item:last-child {
      flex: 1;
      margin-left: 20px;

      /deep/ .el-button {
        width: 100%;
        max-width: 120px;
        font-weight: bold;
      }
    }
  }

  &__body {
    max-height: 650px;
    overflow: hidden auto;
  }

  &__tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;

    .tools {
      display: flex;
    }
  }
}
</style>
