<template>
  <el-dialog
    title="选择非在售商品"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    width="1000px"
    top="50px"
    center
    class="out-of-stock-dialog"
    :before-close="handleClose"
  >
    <div class="cpHeight">
      <el-form ref="form" :model="queryParams" label-width="90px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="商品编号" prop="waresCode">
              <el-input v-model="form.waresCode" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商品名称" prop="waresName">
              <el-input v-model="form.waresName" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="商品状态" prop="preSaleStatus">
              <el-select
                v-model="form.preSaleStatus"
                clearable
              >
                <el-option
                  v-for="item in presaleList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="getDataList">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
      <div style="margin-bottom: 10px">
        <el-tag v-for="item in selection" :key="item.pkId" effect="plain" size="small" closable class="tag-item" type="info" @close="removeSelectedHandle(item)">
          {{ item.waresName }} ({{ item.waresCode }})
        </el-tag>
      </div>
      <el-table
        ref="tableRef"
        :data="dialogList"
        style="width: 100%"
        row-key="pkId"
        :header-cell-style="{ background: '#EEEEEE' }"
        :row-class-name="tableRowClassName"
        @selection-change="selectionChangeHandle"
      >
        <el-table-column
          type="selection"
          :reserve-selection="true"
          width="55"
        />
        <el-table-column align="center" prop="cover1" :label="'产品主图'">
          <template slot-scope="scope">
            <img style="width: 40px; height: 40px" :src="scope.row.cover1" alt="">
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="waresName"
          label="商品名称"
        />
        <el-table-column
          align="center"
          prop="waresCode"
          label="商品编号"
        />
        <el-table-column
          align="center"
          prop="specialAreaVal"
          label="所属专区"
        />
        <el-table-column
          align="center"
          prop="preSaleStatusVal"
          label="预售状态"
        />
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getDataList"
      />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">{{ '取消' }}</el-button>
      <el-button type="primary" @click="onSubmit('form')">{{
        '确认'
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import * as api from '@/api/product.js'
export default {
  name: 'OutOfStockProductList',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    selected: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dialogList: [],
      presaleList: [],
      total: 0,
      selection: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      form: {
        productName: '',
        productCode: '',
        preSaleStatus: ''
      }
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  created() {
    this.selection = [...this.selected]
    this.getPreSaleStatus()
  },
  mounted() {
    this.getList()
  },
  methods: {
    getPreSaleStatus() {
      api.presale_status().then((res) => {
        this.presaleList = res.data
      })
    },
    removeSelectedHandle(product) {
      const tempIdx = this.selection.findIndex((item) => item.pkId === product.pkId)
      if (~tempIdx) {
        this.$refs.tableRef.toggleRowSelection(this.selection[tempIdx], false)
        this.selection.splice(tempIdx, 1)
      }
    },
    getList() {
      api.getOutOfStockProduct(this.queryParams).then(
        (res) => {
          res.rows.forEach((item) => {
            item.quantity = 1
            item.isGift = 0
          })
          this.dialogList = res.rows
          this.total = res.total
          this.updateTableSelection()
        }
      )
    },
    updateTableSelection() {
      this.$nextTick(() => {
        if (this.selection.length) {
          this.selection.forEach((item) => {
            const row = this.dialogList.find((row) => row.pkId === item.pkId)
            if (row) {
              this.$refs.tableRef.toggleRowSelection(row, true)
              this.$refs.tableRef.doLayout()
            }
          })
        }
      })
    },
    handleClose() {
      this.dialogVisible = false
    },
    getDataList() {
      this.queryParams.pageNum = 1
      api.getOutOfStockProduct({
        ...this.queryParams,
        ...this.form
      }).then((res) => {
        res.rows.forEach((item) => {
          item.quantity = 1
          item.isGift = 0
        })

        this.dialogList = res.rows
        this.total = res.total
        this.updateTableSelection()
      })
    },
    selectionChangeHandle(rows) {
      this.selection = rows
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warning-row'
      } else if (rowIndex % 2 == 0) {
        return 'success-row'
      }
      return ''
    },
    onSubmit() {
      this.$emit('submit', this.selection)
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.cpHeight {
  height: 500px;
  overflow-y: auto;
}
.out-of-stock-dialog {
  ::v-deep .el-dialog__body {
    padding-bottom: 0 !important;
  }
}

</style>
