<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="terminalId">
          <el-input v-model="list.model.key" placeholder="终端档案" clearable />
        </el-form-item>
      </template>
      <!-- 商品名称列添加下拉框-->
      <template v-slot:col-dcTerminal="{ row }">
        <el-select v-model="row.dcTerminal" filterable remote :remote-method="remoteMethod" 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

export default {
  data() {
    return {
      date: [],
      list: {
        title: '终端列表',
        action: api.tpmDcTerminalsDiffData,
        noFooter: true,
        model: {
          key: '',
          storeCode: '', //0142000790
          storeId: 0, //118
        },
        operationWidth: '80',
        noOperation: false,
        noFullscreen: true,
        noRefresh: true,
        noReset: true,
        cols,
      },
      buttons: page.buttons,
      options: [],
      options1: [],
      selectData: [],
      value: '',
      isTrue: false,
      currentSel: false,
    }
  },
  mounted() {
    //this.loadSelectData('')
  },
  methods: {
    match(row) {
      let taMsg = '是否确认匹配?'
      // 取消 0 验证运行匹配空终端 匹配前验证
      if (row.dcTerminalId === 0) {
        taMsg = '未选择匹配终端，该操作会删除当前匹配终端?'
        //   this.$message({
        //     message: '请选择要匹配的终端',
        //     type: 'warning',
        //   })
        //   return false
      }
      this.$confirm(taMsg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        api
          .matchTerminal(row.tpmTerminalCode, row.dcTerminalId)
          .then((rst) => {
            if (rst) {
              this.$message({
                message: '匹配成功',
                type: 'success',
              })
              this.$refs.list.refresh()
            } else {
              this.$message.error(rst)
            }
          })
          .catch((rst) => {
            this.$message.error(rst)
          })
      })
    },
    onSelectChange(row, e) {
      let obj = {}
      obj = this.options.find((item) => {
        return item.value === e
      })
      row.dcTerminalCode = obj.code
      row.dcTerminalId = obj.value
      row.dcTerminalName = obj.label
      if (obj.isAgreement) {
        row.isAgreement = '是'
      } else {
        row.isAgreement = ''
      }
    },
    refresh(code, id) {
      this.list.model.storeCode = code
      this.list.model.storeId = id
      //this.loadSelectData('')
      this.$refs.list.refresh()
    },
    loadSelectData(query) {
      if (this.list.model.storeId > 0) {
        api
          .selectTerminalData(this.list.model.storeId, query)
          .then((data) => {
            this.options = data
            this.options.unshift({ value: 0, label: '请选择' })
          })
          .catch(() => {
            this._error('加载失败！')
          })
      }
    },
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loadSelectData(query)
        }, 300)
      } else {
        this.options = []
      }
    },
  },
}
</script>
