<!--  -->
<template>
  <div class="pending">
    <div class="tab_show">
      <div class="" style="font-weight: 600;font-size: 12px;margin-bottom: 15px;">
        商品库存
      </div>
      <!-- 搜索 -->
       <div class="filter-container">
         <div style="display:flex;justify-content: space-between;background-color: #f5f5f5;padding:10px">
          <div style="line-height:200%">筛选查询</div>
          <div>
            <button @click="toggleFilter">收起筛选</button>
            <el-button  plain @click="search" size="mini" style="background-color: #3F9B6A;color: #fff;">查询</el-button>
            <el-button plain @click="resetting" size="mini" style="color: #000;border-color:#d5d5d5;">重置</el-button>
          </div>
         </div>
         <div :class="fut?'formSearch':'collapsed'" ref="formSearch">
            <el-form :inline="true" :model="formInline" label-width="auto">
              <el-form-item label="商品名称">
                <el-input v-model="formInline.searchType" placeholder="请输入方案编号" size="mini" style="width: 178px;margin-right: 5px;"/>
              </el-form-item>
              <el-form-item label="上架时间">
                <el-input v-model="formInline.searchType" placeholder="请输入方案编号" size="mini" style="width: 178px;margin-right: 5px;"/>
              </el-form-item>
              <el-form-item label="入库时间">
                <el-input v-model="formInline.searchType" placeholder="请输入方案编号" size="mini" style="width: 178px;margin-right: 5px;"/>
              </el-form-item>
              <el-form-item label="商品类型">
                <el-input v-model="formInline.searchType" placeholder="请输入方案编号" size="mini" style="width: 178px;margin-right: 5px;"/>
              </el-form-item>
              <el-form-item label="入库数量">
                <el-input v-model="formInline.searchType" placeholder="请输入方案编号" size="mini" style="width: 178px;"/>
              </el-form-item>
              <el-form-item label="入库人">
                <el-input v-model="formInline.searchType" placeholder="请输入方案编号" size="mini" style="width: 178px;margin-right: 5px;"/>
              </el-form-item>
              <el-form-item label="未记账">
                <el-input v-model="formInline.searchType" placeholder="请输入方案编号" size="mini" style="width: 178px;margin-right: 5px;"/>
              </el-form-item>
              <el-form-item label="出库未处理">
                <el-input v-model="formInline.searchType" placeholder="请输入方案编号" size="mini" style="width: 178px;margin-right: 5px;"/>
              </el-form-item>
              <el-form-item label="组合情况">
              <el-select v-model="formInline.searchType" placeholder="资源类型" size="mini"
                style="width: 178px;margin-right: 15px">
                <el-option label="1" value="1" />
              </el-select>
                </el-form-item>
              </el-form>
              </div>
        </div>
        <div style="margin: 15px 0;">
          <el-button  plain @click="search" size="mini" style="background-color: #3F9B6A;color: #fff;">入库登记</el-button>
          <el-button plain @click="shopzuhe" size="mini" style="background-color: #3F9B6A;color: #fff;">商品组合</el-button>
          <el-button  plain @click="search" size="mini" style="background-color: #3F9B6A;color: #fff;">导出商品</el-button>
        </div>
      <!-- 表格 -->
      <div class="tableBox">
        <el-table
          ref="multipleTable"
          v-loading="loading"
          :data="tableData"
          border
          tooltip-effect="dark"
           @selection-change="handleSelectionChange"
        :header-cell-style="{fontSize: '12px', backgroundColor: '#FAFAFA',color:'#000',fontWeight: 'normal'}"
          style="width: 100%;font-size:12px;"
        >
          <el-table-column
              type="selection"
              v-if="teble_sel"
              min-width="4%">
            </el-table-column>
          <el-table-column
            prop="productId"
            label="商品id"
            show-overflow-tooltip
           min-width="8%"
          />
          <el-table-column label="商品主图" width="150" align="center">
            <template slot-scope="scope">
              <img height="80" width="80" :src="scope.row.image" alt srcset>
            </template>
          </el-table-column>
          <el-table-column prop="productName" label="商品名称" min-width="10%" />
          <el-table-column prop="shopName" label="商家名称" min-width="10%" />
          <el-table-column
            prop="sectionPrice"
            label="售价区间"
            show-overflow-tooltip
           min-width="10%"
          />
          <!-- <el-table-column
            prop="memberSection"
            label="会员价"
            show-overflow-tooltip
          /> -->
          <el-table-column
            prop="stockNumber"
            label="库存"
            show-overflow-tooltip
            min-width="8%"
          />
          <el-table-column
            prop="volume"
            label="实际销售"
            show-overflow-tooltip
            min-width="6%"
          />
          <el-table-column
            prop="fictitiousNumber"
            label="虚拟销售"
            show-overflow-tooltip
            min-width="6%"
          />
          <el-table-column prop="createTime" label="创建时间"min-width="10%" />
          <el-table-column
            prop="shelveState"
            label="上架状态"
            show-overflow-tooltip
            min-width="10%"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.shelveState == 0">已下架</span>
              <span v-if="scope.row.shelveState == 1">已上架</span>
              <span v-if="scope.row.shelveState == 2">待审核</span>
              <span v-if="scope.row.shelveState == 3">审核失败</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="15%">
            <template slot-scope="scope">
              <div class="btnList">
                <el-button
                  v-if="scope.row.shelveState == 1"
                  slot="reference"
                 style="color: #3F9B6A;font-size: 12px;"
                  type="text"
                  @click="OutForced(scope.row)"
                >下架</el-button>
                <el-button
                  v-if="scope.row.shelveState == 1"
                  type="text"
                  style="color: #3F9B6A;font-size: 12px;"
                  @click="setFictitious(scope.row)"
                >虚拟销量</el-button>
                <el-button
                  v-if="scope.row.shelveState == 2"
                  type="text"
                  style="color: #3F9B6A;font-size: 12px;"
                  @click="examineShow(scope.row)"
                >审核</el-button>
                <el-button
                  type="text"
                  style="color: #3F9B6A;font-size: 12px;"
                  @click="Godetails(scope.row)"
                >查看详情</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="fenye">
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 50, 100]"
            :page-size="10"
            layout="prev, pager, next,total, sizes,  jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
              <div style="padding: 5px 10px 5px 20px;border:1px solid #EBEEF5;display: flex;justify-content: space-between;margin-top: 10px;" v-if="teble_sel">
                  <div style="font-size: 12px;">
                    <span>已选择{{this.zuheNum}}项</span>
                    <el-button
                      type="text"
                      style="color: #3F9B6A;font-size: 12px;margin-left: 10px;"
                      @click="toggleSelection"
                    >清楚选项</el-button>
                  </div>
                  <div>
                    <el-button  plain @click="search" size="mini" style="background-color: #3F9B6A;color: #fff;">确定组合</el-button>
                    <el-button plain @click="selClose" size="mini" style="background-color: #fff;color: #000;">取消</el-button>
                  </div>
              </div>
      </div>
      <add-commodity ref="addCommodity" :examine-show="examineShow" @reset="reset" />
    </div>
  </div>
</template>

<script>
  import {
    getClassifyGetAll,
    Forced,
    setFictitious,
    examine,
    productExport
  } from '@/api/commodity';
  import AddCommodity from './addCommodity';
import { async } from 'q';
export default {
components: { AddCommodity },
  data () {
    // 这里存放数据
    return {
      activeName: 'first',
      formInline: {
        searchType: '1',
        search: '', // 搜索字段
        state: '',
        // afterState: '', // 售后状态 0-无售后 1-售后中 2-售后成功 3-售后关闭
        dates: [], // 下单时间数组
        page: 1,
        shopName: '',
        pageSize: 10
      },
      fut:true,
      teble_sel:false,
      total: 1,
      tableData: [],
      tableLoading: false,
      detailVisible: false,
      form: {},
      zuheNum:0
    }
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getAll(this.formInline)
  },
  // 方法集合
  methods: {
    toggleFilter(){
      this.fut = !this.fut
    },
    handleSizeChange (val) {
      this.formInline.pageSize = val
      this.getAll(this.formInline)
    },
    handleCurrentChange (val) {
      this.formInline.page = val
      this.getAll(this.formInline)
    },
    //  查询
    search () {

    },
  handleSelectionChange(val) {
         console.log(val)
         this.zuheNum = val.length
        },
        //清除选项
        toggleSelection() {
                this.$refs.multipleTable.clearSelection();
              },
              selClose(){
                 this.teble_sel = false
              },
    //商品组合
    shopzuhe(){
      this.teble_sel = true
    },
    // 审核弹窗
    examineShow (row) {
      this.ForcedForm.productId = row.productId;
      this.ForcedForm.reject = '';
      this.examineVisible = true;
      if (row.isDetail) {
        this.isDetail = row.isDetail
      }
      console.log(row, 'test')
    },
    reset () {
      this.getAll(this.formInline)
    },
    // 查看详情
    Godetails (row) {
      this.$refs.addCommodity.show(row.productId)
    },
    // 初始化查询所有数据
    async getAll (formInline) {
      this.tableLoading = true
     const res = await getClassifyGetAll(formInline);
     this.loading = false;
     this.total = res.data.total;
     this.tableData = res.data.list;
    },
    // 导出订单

  }
}
</script>
<style lang='scss' scoped>
.pending{
  padding-left: 15px;
}
.tab_show{
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #fff;
}
.filter-container {
font-size:12px;
border:1px solid #EBEEF5;

}
.formSearch{
    height: 105px; /* 或者你想要的任何高度 */
    /* 过渡效果 */
    transition: height 0.3s ease-in-out; /* 动画的持续时间、类型 */
    overflow: hidden; /* 隐藏溢出的内容，这样高度变化时内容不会显示出来 */

}
.collapsed {
  margin-top: 0px;
  height: 0;
    transition: height 0.3s ease-in-out; /* 动画的持续时间、类型 */
    overflow: hidden; /* 隐藏溢出的内容，这样高度变化时内容不会显示出来 */
}
::v-deep .collapsed{
  .el-form--inline .el-form-item{
        margin-top: 10px;
    margin-right:0;
    margin-bottom:0px;
  }
  .el-form-item__label{
    font-size:12px;
  }
}
::v-deep .formSearch{
  .el-form--inline .el-form-item{
      margin-top: 10px;
    margin-right:0;
    margin-bottom:0px;
  }
  .el-form-item__label{
    font-size:12px;
  }
}
.fenye {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
