<template>
  <el-dialog title="商品选择器" 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="purchasePlan-picker">
    <div class="purchasePlan-picker__body">
      <div class="purchasePlan-picker__filter">
        <div class="filter-item">
          <el-input v-model="searchParams.keyword" clearable placeholder="请输入单号" style="width: 160px" />
        </div>
        <div class="filter-item">
          <el-button type="primary" @click="handleSearch">搜索 </el-button>
        </div>
      </div>
      <el-table ref="purchasePlanTable" v-loading="loading" :data="purchasePlanData.data" border row-key="id"
        @selection-change="handleSelectionChange" @row-click="handleRowClick" 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.id)"></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" :key="column.label" align="center" v-bind="column">
         <!--  <template slot-scope="scope" v-if="scope.row.warehouse_id">
            {{ scope.row.warehouse_id }}
          </template> -->
        </el-table-column>
      </el-table>
      <div class="purchasePlan-picker__tools">
        <div class="tools">
        </div>
        <el-pagination v-if="purchasePlanData.data_total" background :page-sizes="[10, 30, 50, 100]"
          :total="purchasePlanData.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: 'EnPurchasePlan',
  props: {
    ...DefaultOptions.props
  },
  data() {
    return {
      ...DefaultOptions.data,
      dialogVisible: false,
      selected: [],
      radioGuide: '',
      purchasePlanParams: {
        page_no: 1,
        page_size: 10,
        market_enable: true,
      },
      searchParams: {
        sn: ''
      },
      purchasePlanData: {
        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.id) ? 0 : 1
    },
    // 关闭
    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 purchasePlans = this.limit === 1 ? [this.radioGuide] : this.selected
      purchasePlans = JSON.parse(JSON.stringify(purchasePlans))
      this.$emit('confirm', purchasePlans)
      typeof this.resolve === 'function' && this.resolve(purchasePlans)
      this.$emit('close')
    },
    // 选择
    handleSelectionChange(val) {
      this.selected = val
    },
    // 分页大小发生改变
    handleSizeChange(size) {
      this.purchasePlanParams.page_size = size
      this.getGoodsList()
    },
    // 当前页数发生改版
    handleCurrentChange(current) {
      this.purchasePlanParams.page_no = current
      this.getGoodsList()
    },
    // 搜索
    handleSearch() {
      this.purchasePlanParams.page_no = 1
      this.purchasePlanParams = {
        ...this.purchasePlanParams,
        ...this.searchParams
      }
      this.getGoodsList()
    },
    // 点击了某行
    handleRowClick(row) {
      if (this.limit === 1) {
        this.radioGuide = row
      } else {
        this.$refs.purchasePlanTable.toggleRowSelection(row)
      }
    },
    // 获取采购计划列表
    async getGoodsList() {
      this.loading = true
      const params = JSON.parse(JSON.stringify(this.purchasePlanParams))
      //params.order_type=this.goodsApiParams.order_type
      //params.warehouse_ids=this.goodsApiParams.warehouse_ids.join(',')
      //console.log(warehouse_ids.typeOf());
      request({
        url: this.goodsApi,
        method: 'get',
        loading: false,
        params: {
          ...params,
        }
      }).then(response => {
        this.loading = false
        if(response.records==undefined){
          this.purchasePlanData = response
        }else{
          response.data=response.records
          response.data_total=response.total
          this.purchasePlanData = response
        } 
      })
    }
  }
}
</script>

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

  .purchasePlan-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;
    }
  }

  &__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>
