<template>
  <ContainerQuery>
    <div slot="more">
      <el-form :inline="true" size="small">
        <el-form-item>
          <el-input
            v-model="keyword"
            style="width: 200px"
            placeholder="商品名称/商品编码"
            clearable
            @keyup.enter.native="pageChange(1)"
            @clear="pageChange(1)"
          >
            <el-button slot="append" @click="pageChange(1)">
              <i class="el-icon-search"></i>
            </el-button>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="ownerOfCargo"
            style="width: 200px"
            placeholder="货主"
            clearable
            @keyup.enter.native="pageChange(1)"
            @clear="pageChange(1)"
          >
            <el-button slot="append" @click="pageChange(1)">
              <i class="el-icon-search"></i>
            </el-button>
          </el-input>
        </el-form-item>
        <el-form-item>
          <GoodsCategory
            v-model="categoryPath"
            placeholder="商品分类"
            :width="160"
            check-strictly
            clearable
            size="small"
            @change="goodsChane"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="brand"
            style="width: 150px"
            clearable
            placeholder="商品品牌"
            @blur="brand = ''"
            @clear="brandClear"
          >
            <i
              slot="suffix"
              class="el-input__icon el-icon-search"
              @click="sel_brand = true"
            ></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="status"
            clearable
            style="width: 150px"
            placeholder="库存状态"
            @change="pageChange(1)"
          >
            <el-option
              v-for="item in order_status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="#"></el-table-column>
      <el-table-column prop="name" label="商品分类"></el-table-column>
      <el-table-column prop="address" label="商品编码"></el-table-column>
      <el-table-column prop="address" label="商品名称"></el-table-column>
      <el-table-column prop="address" label="库存数量"></el-table-column>
      <el-table-column prop="address" label="安全库存数量"></el-table-column>
      <el-table-column prop="address" label="安全库存状态">
        <template slot-scope="scope">
          <el-button type="warning" size="mini" @click="scope">警告</el-button>
          <el-button v-if="false" type="success" size="mini">正常</el-button>
          <el-button v-if="false" type="danger" size="mini">缺货</el-button>
          <el-button v-if="false" type="info" size="mini">无货</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="品牌"></el-table-column>
      <el-table-column prop="address" label="货主"></el-table-column>
      <el-table-column prop="address" label="备注"></el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="scope">编辑</el-button>
          <el-button type="text">删除</el-button>
          <el-button type="text">记录</el-button>
        </template>
      </el-table-column>
    </el-table>
    <FooterPage
      :page-size="pageSize"
      :total-page.sync="total"
      :current-page.sync="page"
      @pageChange="pageChange"
      @sizeChange="sizeChange"
    ></FooterPage>
    <!--    选择品牌-->
    <BrandSelModel
      v-if="sel_brand"
      :is-check="false"
      :dialog-visible="sel_brand"
      @close="sel_brand = false"
      @confirm="brandConfirm"
    />
  </ContainerQuery>
</template>
<script>
  import GoodsCategory from "@/component/common/GoodsCategory.vue";
  import BrandSelModel from "@/component/goods/BrandSelModel.vue";

  export default {
    components: { GoodsCategory, BrandSelModel },
    data() {
      return {
        tableData: [{ name: "张三" }],
        categoryPath: "",
        order_status: [{ label: "全部", value: 1 }],
        status: "",
        page: 1,
        pageSize: 10,
        total: 0,
        brand: "",
        brandId: "",
        sel_brand: false,
        keyword: "",
        ownerOfCargo: "",
      };
    },
    methods: {
      // 分类搜索
      goodsChane(val) {
        this.pageChange(1);
      },
      pageChange() {},
      sizeChange() {},
      brandConfirm(val) {
        this.brand = val[0].title;
        this.brandId = val[0].id;
        this.pageChange(1);
      },
      // 搜索 品牌输入框清空
      brandClear() {
        this.brand = "";
        this.brandId = "";
        this.pageChange(1);
      },
    },
  };
</script>
<style></style>
