<template>
<div>

  <el-dialog
    title="已关联商品"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="510px"
  >
  <div class="content">
    <el-form :inline="true" :model="searchForm">
      <el-form-item label="产品名称">
        <el-input
          v-model="searchForm.name"
          size="small"
          placeholder="请输入产品名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="search()"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>

    <el-button
      type="primary"
      icon="el-icon-plus"
      size="small"
      @click="handleRelated()"
      >关联商品</el-button
    >
    <el-table
      :data="dataList"
      border
      style="width: 100%"
    >
      <el-table-column
        prop="categoryName"
        header-align="center"
        align="center"
        label="产品名称"
      >
      </el-table-column>
      <el-table-column
        prop="status"
        header-align="center"
        align="center"
        label="上下线状态"
      >
      </el-table-column>
   
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="handle()"
            >取消关联</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchForm.current"
      :page-sizes="[10, 20]"
      :page-size="searchForm.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
   
  </div>
   
  </el-dialog>


  <!-- 关联商品 -->
    <related-goods-detail v-if="relatedVisible" ref="related" @close="relatedVisible = false"></related-goods-detail>
</div>
</template>
<script>
import relatedGoodsDetail from './relatedGoodsDetail';

export default {
  components: {
    relatedGoodsDetail
  },
  data () {
    return {
      visible: false,
      relatedVisible:true,
      dataList: [],
      searchForm: {
        name:'',
        current: 1,
        size: 10,
      },
      total:0
     
    }
  },
 
  methods: {
     handleRelated(){
      this.relatedVisible = true;
      this.$refs.related.open()
    },
    open(){
      this.visible = true
    },
    submit () {
       this.visible = false
      this.$emit('close')
      //  this.$http({
      //       url: this.$http.adornUrl(`/prod/category`),
      //       method: this.dataForm.categoryId ? 'put' : 'post',
      //       data: this.$http.adornData({
      //         'categoryId': this.dataForm.categoryId || undefined,
      //         'categoryName': this.dataForm.categoryName,
      //         'status': this.dataForm.status,
      //         'seq': this.dataForm.seq,
      //         'grade': this.dataForm.grade,
      //         'parentId': this.dataForm.parentId,
      //         'pic': this.dataForm.pic
      //       })
      //     }).then(({ data }) => {
      //       this.$message({
      //         message: '操作成功',
      //         type: 'success',
      //         duration: 1500,
      //         onClose: () => {
      //           this.visible = false
      //           this.$emit('close')
      //         }
      //       })
      //     })
    },
    // 获取数据列表
    getDataList() {
      // this.dataListLoading = true;
      // this.$http({
      //   url: this.$http.adornUrl("/prod/category/listCategory"),
      //   method: "get",
      //   params: this.$http.adornParams(this.searchForm),
      // }).then(({ data }) => {
      //   // this.dataList = treeDataTranslate(data, 'categoryId', 'parentId')
      //   this.dataList = data.records;
      //   this.total = data.total;
      //   this.dataListLoading = false;
      // });
    },
    handle(){},
    handleSizeChange(val) {
      this.searchForm.size = val;
      this.searchForm.current = 1;
      this.getDataList();
    },
    handleCurrentChange(val) {
      this.searchForm.current = val;
      this.getDataList();
    },
   
  }
}
</script>

<style lang="scss">

  .content{
 
  }
</style>
