<template>
  <nm-container>
    <nm-list style="width: 100%" ref="list" v-bind="list" highlight-current-row>
      <!--查询条件-->
      <template v-slot:querybar>
        <el-form-item label="产品档案：" prop="productId">
          <el-input v-model="list.model.key" placeholder="产品档案" clearable />
        </el-form-item>
      </template>
      <!-- 商品名称列添加下拉框-->
      <template v-slot:col-dcProductId="{ row }">
        <el-select v-model="row.dcProductId" filterable multiple placeholder="请选择" @change="onSelectChange(row, $event)">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </template>
      <!--操作列-->
      <template v-slot:col-operation="{ row }">
        <nm-button v-bind="buttons.match" @click="match(row)" />
      </template>
    </nm-list>
  </nm-container>
</template>
<script>
import cols from './cols'
import page from '../../index/page'
const api = $api.tPM.tpmProducts
//const ocApi = $api.ocms.product

export default {
  data() {
    return {
      date: [],
      list: {
        title: '商品列表',
        action: api.tpmProductDiffQuery,
        noFooter: true,
        model: {
          key: '',
          storeCode: '',
          storeId: 0,
        },
        operationWidth: '80',
        noOperation: false,
        noFullscreen: true,
        noRefresh: true,
        noReset: true,
        cols,
      },
      buttons: page.buttons,
      options: [],
      value: '',
      isTrue: false,
      currentSel: false,
    }
  },
  mounted() {
    this.loadSelectData()
  },
  methods: {
    match(row) {
      //匹配前验证
      if (row.dcProductId.length <= 0) {
        this.$message({
          message: '请选择要匹配的商品',
          type: 'warning',
        })
        return false
      }
      this.$confirm('是否确认匹配？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        api
          .matchProduct(this.list.model.storeId, row.tpmProductCode, row.dcProductId)
          .then((rst) => {
            if (rst) {
              this.$message({
                message: '匹配成功',
                type: 'success',
              })
            } else {
              this.$message.error(rst)
            }
          })
          .catch((rst) => {
            this.$message.error(rst)
          })
      })
    },
    onSelectChange(row, e) {
      console.log(e)
      let obj = []
      obj = this.options.filter((item) => {
        return e.indexOf(item.value) > -1
      })
      row.dcProductCode = []
      obj.forEach((item) => {
        row.dcProductCode.push(item.productCode)
      })
    },
    refresh(code, id) {
      this.list.model.storeCode = code
      this.list.model.storeId = id
      this.loadSelectData()
      this.$refs.list.refresh()
    },
    loadSelectData() {
      if (this.list.model.storeId > 0) {
        api
          .getDcProductForSelect(this.list.model.storeId)
          .then((rst) => {
            this.options = rst
            this.options.unshift({ value: 0, label: '请选择' })
          })
          .catch(() => {
            this._error('加载失败！')
          })
      }
    },
  },
}
</script>
