<template>
  <el-dialog title="商品/选择器" width="60%" :visible.sync="dialogVisible" :append-to-body="false"
    :modal-append-to-body="false" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="true"
    @closed="handleClose" class="goods-picker">
    <div class="goods-picker__body">
      <div class="goods-picker__filter">
        <div class="filter-item">
          <el-input size="small" v-model="searchParams.keyword" clearable placeholder="请输入关键字" style="width: 200px" />
        </div>
        <div class="filter-item">
          <el-button size="small" type="primary" @click="handleSearch">搜索 </el-button>
        </div>
      </div>
      <el-table size="small" ref="goodsTable" v-loading="loading" :data="goodsListData.items" border row-key="id"
        @selection-change="handleSelectionChange" @row-click="handleRowClick" 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" />
      </el-table>
      <div class="goods-picker__tools">
        <div class="tools">
        </div>
        <el-pagination v-if="goodsListData.total" background :page-sizes="[10, 30, 50, 100]"
          :total="goodsListData.total" layout="total, sizes, prev, pager, next, 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: '',
      goodsParams: {
        page: 1,
        limit: 10,
        // market_enable: true //状态
      },
      searchParams: {
        keyword: ''
      },
      goodsListData: {
        items: [],
        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 goods = this.limit === 1 ? [this.radioGuide] : this.selected
      goods = JSON.parse(JSON.stringify(goods))
      this.$emit('confirm', goods)
      typeof this.resolve === 'function' && this.resolve(goods)
      this.$emit('close')
    },
    // 选择
    handleSelectionChange(val) {
      this.selected = val
    },
    // 分页大小发生改变
    handleSizeChange(size) {
      this.goodsParams.page_size = size
      this.getGoodsList()
    },
    // 当前页数发生改版
    handleCurrentChange(current) {
      this.goodsParams.page = current
      this.getGoodsList()
    },
    // 搜索
    handleSearch() {
      this.goodsParams.page = 1
      this.goodsParams = {
        ...this.goodsParams,
        ...this.searchParams
      }
      this.getGoodsList()
    },
    // 点击了某行
    handleRowClick(row) {
      if (this.limit === 1) {
        this.radioGuide = row
      } else {
        this.$refs.goodsTable.toggleRowSelection(row)
      }
    },
    // 获取列表
    async getGoodsList() {
      this.loading = true
      const params = JSON.parse(JSON.stringify(this.goodsParams))
      request({
        url: this.goodsApi,
        method: 'get',
        loading: false,
        params: {
          ...params,
          ...this.goodsApiParams,
        }
      }).then(response => {
        this.loading = false
        this.goodsListData = response.data.data
      })
    }
  }
}
</script>

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

  .goods-picker__filter {
    float: right;
  }

  ::v-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;

      ::v-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>
