<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>商品列表
    </h2>
    <div class="m-core">
      <div @click="onShopOperation('create')"
           v-permission="'/shopOperation'"
           class='newBand'>添加</div>
      <!-- 搜索类型 -->
      <!-- <el-form :inline="true"
               class="searchForm"
               v-model.trim="searchForm">
        <el-form-item>
          <el-select v-model.trim="searchForm.status"
                     placeholder="工作类型">
            <el-option label="哈哈哈"
                       value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form> -->
      <!-- 查询列表 -->
      <!-- <div class="searchWrap">
        <p>查询条件:</p>
        <div class="searchItem"
             @click="closeSearch(item)"
             v-for="(item,index) in searchLsit">
          {{ item.key }}
          <i class="el-icon-close"></i>
        </div>
      </div> -->
      <!-- 列表 -->
      <div class="tableWrap">
        <el-table :data='tableList'
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">
          <el-table-column align='center'
                           prop="id"
                           label="商品编号">
          </el-table-column>
          <el-table-column align='center'
                           prop="brand"
                           label="品牌">
          </el-table-column>
          <el-table-column align='center'
                           prop="name"
                           label="商品名称">
          </el-table-column>
          <el-table-column align='center'
                           label="商品类型">
            <template slot-scope="scope">
              {{ scope.row.type | shopType }}
            </template>
          </el-table-column>
          <el-table-column align='center'
                           prop="goodsCategoryName"
                           label="商品分类">
          </el-table-column>
          <el-table-column align='center'
                           prop="specification"
                           label="具体型号">
            <template slot-scope="scope">
              <span style="max-height: 64px; display: block;">{{ scope.row.specification }}</span>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           prop="marketPrice"
                           label="商品价格">
          </el-table-column>
          <el-table-column align='center'
                           prop="groupPurchasePrice"
                           label="商品团购价">
          </el-table-column>
          <el-table-column align='center'
                           prop="discountPrice"
                           label="商品采购价">
          </el-table-column>
          <el-table-column align='center'
                           cell-style="padding: 0"
                           label="商品缩略图片">
            <template slot-scope="scope">
              <img class="shopImage"
                   :src="scope.row.image"
                   alt=""
                   srcset="">
            </template>
          </el-table-column>
          <el-table-column align='center'
                           label="商品明细">
            <template slot-scope="scope">
              <div class="shopDesc">
                {{ scope.row.desc }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           width="140px"
                           label="操作">
            <template slot-scope="scope">
              <el-button v-if="scope.row.status == 0"
                         v-permission="'goods/update'"
                         @click="onUpdate(scope.row)"
                         type="text">上架</el-button>
              <el-button v-if="scope.row.status == 0"
                         v-permission="'/shopOperation'"
                         @click="onShopOperation('update', scope.row)"
                         type="text">修改</el-button>
              <el-button v-if="scope.row.status == 1"
                         v-permission="'goods/update'"
                         @click="onUpdate(scope.row)"
                         type="text">下架</el-button>
              <el-button v-if="scope.row.status == 0"
                         v-permission="'goods/del'"
                         @click="onDelete(scope.row)"
                         type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination :total="pageInfo.total"
                    :page.sync="pageInfo.page"
                    :limit.sync="pageInfo.limit"
                    :page-sizes="pageInfo.page_size"
                    @pagination="getList" />
      </div>
    </div>
  </div>
</template>
<script>
import pagination from '@/components/Pagination/index'
import { goodsQuery, goodsUpdate, goodsDelete } from '@/api/businessManager'
import store from '@/store'
export default {
  components: { pagination },
  name: 'shopList',
  data () {
    return {
      organId: null,
      searchForm: {
        status: ''
      },
      searchLsit: [],
      tableList: [],
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
    }
  },
  created () {
    this.init()
  },
  activated () {
    this.init()
  },
  mounted () {

  },
  methods: {
    init () {
      if (this.$route.query.searchForm) {
        this.$route.query.searchForm instanceof Object ? this.searchForm = this.$route.query.searchForm : this.searchForm = JSON.parse(this.$route.query.searchForm);
      }
      if (this.$route.query.pageInfo) {
        this.$route.query.pageInfo instanceof Object ? this.pageInfo = this.$route.query.pageInfo : this.pageInfo = JSON.parse(this.$route.query.pageInfo);
      }
      this.getList()
    },
    onUpdate (row) {
      goodsUpdate({
        id: row.id,
        status: row.status ? 0 : 1
      }).then(res => {
        this.messageTips(row.status ? '下架' : '上架', res)
      })
    },
    onDelete (row) {
      this.$confirm('您确定删除该商品吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        goodsDelete(row.id).then(res => {
          this.messageTips('删除', res)
        })
      }).catch(() => { })

    },
    messageTips (title, res) {
      if (res.code == 200) {
        this.$message.success(title + '成功')
        this.typeStatus = false
        this.getList()
      } else {
        this.$message.error(res.msg)
      }
    },
    getList () {
      goodsQuery({
        organId: this.organId,
        rows: this.pageInfo.limit,
        page: this.pageInfo.page
      }).then(res => {
        if (res.code == 200 && res.data) {
          this.tableList = res.data.rows
          this.pageInfo.total = res.data.total
        }
      })
    },
    onShopOperation (type, row) { // 添加或修改
      let params = {
        type: type
      }
      if (row) {
        params.id = row.id
      }
      let pageInfo = JSON.stringify(this.pageInfo)
      let paramInfo = JSON.stringify(params)
      this.$router.push({
        path: '/shopManager/shopOperation',
        query: { paramInfo, pageInfo }
      })
    }
  }
}
</script>
<style lang="scss">
.shopImage {
  width: 60px;
  height: 60px;
}
.shopDesc {
  max-height: 70px;
  overflow: hidden;
}
</style>