<template>
  <div>
    <!--              步骤条            -->
    <el-steps :space="200" :active="active" finish-status="success" style=" width:80%;transform: translateX(30%);margin-top: 30px">
      <el-step title="填写商品信息"></el-step>
      <el-step title="填写商品促销"></el-step>
      <el-step title="填写商品属性"></el-step>
      <el-step title="选择商品关联"></el-step>
    </el-steps>




        <el-card class="box-card" style="width: 94%;transform: translateX(3%);margin-top: 30px">
          <el-table :data="arr" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="编号" width="80" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.id }}</span>
              </template>
            </el-table-column>
            <el-table-column label="商品图片" width="150" align="center">
              <template slot-scope="scope">
                <img :src="scope.row.picImg" alt="图片损坏">
              </template>
            </el-table-column>
            <el-table-column label="商品名称" width="400" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.shopName }}</span>
                <br>
                品牌：<span style="margin-left: 10px">{{ scope.row.brandName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="货号" width="150" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px">货号：{{ scope.row.shopNum }}</span>
              </template>
            </el-table-column>
            <el-table-column label="标签" width="150" align="center">
              <template slot-scope="scope">
                上架：
                <el-switch
                  v-model="scope.row.publishStatus"
                  @change="updateShop(scope.row)"
                  active-color="#409EFF"
                  inactive-color="#C0CCDA"
                  :active-value="1"
                  :inactive-value="0">
                </el-switch>
                <br>
                新品：
                <el-switch
                  v-model="scope.row.newStatus"
                  @change="updateShop(scope.row)"
                  active-color="#409EFF"
                  inactive-color="#C0CCDA"
                  :active-value="1"
                  :inactive-value="0">
                </el-switch>
                <br>
                推荐：
                <el-switch
                  v-model="scope.row.recommandStatus"
                  @change="updateShop(scope.row)"
                  active-color="#409EFF"
                  inactive-color="#C0CCDA"
                  :active-value="1"
                  :inactive-value="0">
                </el-switch>
                <br>
              </template>
            </el-table-column>
            <el-table-column label="排序" width="150" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.sort }}</span>
              </template>
            </el-table-column>
            <el-table-column label="销量" width="150" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.sale }}</span>
              </template>
            </el-table-column>
            <el-table-column label="审核状态" width="150" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px" v-if="scope.row.verifyStatus==0">未审核</span>
                <span style="margin-left: 10px" v-if="scope.row.verifyStatus==1">审核通知</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.row)">编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>




  </div>
</template>
<script>
</script>
