<template>
  <el-row v-loading="dataListLoading">
    <el-col :span="10" :offset="7">
      <el-form :model="dataForm" :rules="rules" @keyup.enter.native="getDataList()" ref="dataForm">
        <el-form-item prop="productId">
          <el-input v-model="dataForm.productId" placeholder="请输入商品ID" clearable></el-input>
          <el-button type="primary" @click="getDataList()">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <template v-if="booLoading">

    </template>
  </el-row>
</template>

<script>
export default {
  name: 'tools-like',
  data () {
    return {
      dataForm: {
        productId: '' // 602950702411
      },
      rules: {
        productId: [
          { required: true, message: '请输入商品ID', trigger: 'blur' }
        ]
      },
      dataListLoading: false
    }
  },
  methods: {
    // 获取数据列表
    getDataList () {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return
        }
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/tb/getProductAskInfo'),
          method: 'POST',
          data: this.$http.adornData({
            'page': this.pageIndex,
            'size': this.pageSize,
            'productId': this.dataForm.productId
          })
        }).then(({ data }) => {
          if (data.status) {
          } else {
            this.$message.error(data.msg)
          }
          this.dataListLoading = false
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$--color-primary: #3E8EF7;
/deep/ .el-form-item {
  .el-form-item__content {
    display: flex;
    align-items: center;

    input {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border: 1px solid $--color-primary;
    }

    button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
}
</style>
