<template>
  <div>
    <el-dialog :visible.sync="showGoodsCategoryDialog" width="680px" @close="cancel">
      <div slot="title" class="header">
        <div class="title">商品分类</div>
        <el-input class="input" v-model="name" size="small" placeholder="请输入分类名称进行搜索">
          <i slot="suffix" class="el-input__icon el-icon-search" @click="getInfo"></i>
        </el-input>
      </div>
      <el-table :data="goodsCategoryList" @current-change="checkedCategory">
        <el-table-column label="分类名称">
          <template slot-scope="scope">
            <el-radio v-model="radioIndex" :label="scope.row.name"></el-radio>
          </template>
        </el-table-column>
        <el-table-column label="商品数量" prop="productNum" align="center"></el-table-column>
        <el-table-column label="创建时间" prop="createTime" align="center"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getGoodsFirstCategoryApi } from '@/api/product';

  export default {
    data() {
      return {
        goodsCategoryList: [],
        categoryInfo: null,
        radioIndex: '',
        showGoodsCategoryDialog: true,
        name: ''
      };
    },
    methods: {
      openDialog(categoryId, categoryName) {
        if (categoryId && categoryName) {
          this.categoryInfo = {
            id: categoryId,
            name: categoryName
          };
          this.radioIndex = categoryName
        }
        this.getInfo()
      },
      cancel() {
        this.$emit("cancel");
      },
      getInfo() {
        getGoodsFirstCategoryApi(this.name).then(res => {
          this.goodsCategoryList = res;
        });
      },
      checkedCategory(item) {
        this.categoryInfo = item;
        this.radioIndex = item.name
      },
      confirm() {
        if (!this.categoryInfo) {
          this.$message.warning('至少选择一个关联分类');
          return;
        }
        this.cancel()
        this.$emit("confirm", this.categoryInfo);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      font-size: 18px;
      color: #303133;
    }

    .input {
      width: 200px;
      margin-right: 30px;
    }
  }
</style>
