<template>
    <div class="bodyBoxs">

        <div class="boxs">
          <el-button type="success" style="margin-bottom: 10px;" @click="showAdd">新增商品</el-button>
          <div style="margin-bottom: 15px;width: 440px">
            <el-input placeholder="商品名称" v-model="search" class="input-with-select">
              <el-select  style="width: 140px;" v-model="state" slot="prepend" placeholder="请选择">
                <el-option label="全部" value="2"></el-option>
                <el-option label="已上架" value="1"></el-option>
                <el-option label="未上架" value="0"></el-option>
              </el-select>
              <el-button slot="append" icon="el-icon-search" @click="getData"></el-button>
            </el-input>
          </div>
          <el-table
            :data="tableData"
            border
            v-loading="loading"
            :row-class-name="tableRowClassName"
            stripe
            style="width: 100%">
            <el-table-column
              prop="id"
              label="编号"
              width="80">
            </el-table-column>
            <el-table-column
              prop="queryClass.className"
              label="分类"
              width="80">
              <template slot-scope="scope">
                  <div slot="reference" class="name-wrapper">
                    <el-tag type="warning" size="medium">{{ scope.row.queryClass.className}}</el-tag>
                  </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="shopName"
              label="商品名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="queryClass.className"
              label="商品图片"
              width="180">
              <template slot-scope="scope">
                <div class="demo-image__preview">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="scope.row.images[0] ? scope.row.images[0] : ''"
                    :preview-src-list="scope.row.images">
                  </el-image>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="score"
              label="所需积分"
              width="80">
            </el-table-column>
            <el-table-column
              prop="stock"
              label="库存"
              width="80">
            </el-table-column>
            <el-table-column
              prop="count"
              label="总库存"
              width="80">
            </el-table-column>
            <el-table-column
              prop="content"
              label="简介"
              width="160"
            >
              <template slot-scope="scope">
                <div slot="reference" class="name-wrapper" style="max-height: 120px">
                  {{scope.row.content}}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="score"
              label="是否上架"
              width="120">
              <template slot-scope="scope">
                  <div slot="reference" class="name-wrapper">
                    <el-tag :type="scope.row.state == 1 ? 'success' : 'danger'" size="medium">{{ scope.row.state == 1 ? '已上架' : '已下架'}}</el-tag>
                  </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="updatedAt"
              label="更新时间">
            </el-table-column>
            <el-table-column
              prop="updatedBy"
              label="更新人">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作">
              <template slot-scope="scope">
                <el-button @click="editShop(scope.row)" type="warning" size="small">编辑</el-button>
                <el-button @click="shopState(scope.row.id,scope.row.state)" type="primary" size="small">{{scope.row.state == 1 ? '下架' : '上架'}}</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 30, 50]"
            :page-size=pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=total>
          </el-pagination>
          <el-dialog :title="title" :visible.sync="dialogFormVisible" :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="商品名称">
                <el-input v-model="form.shopName"></el-input>
              </el-form-item>
              <el-form-item label="商品分类">
                <el-select @change="changes" v-model="form.classId" placeholder="请选择商品分类">
                  <el-option v-for="item in className" :label="item.className" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label='所需积分'>
                <el-input v-model="form.score"></el-input>
              </el-form-item>
              <el-form-item label='总库存'>
                <el-input v-model="form.count"></el-input>
              </el-form-item>
              <el-form-item label='商品简介'>
                <el-input type="textarea" v-model="form.content"></el-input>
              </el-form-item>
              <el-form-item label="图片上传">
                <el-upload
                  class="upload-demo"
                  :action="uploadUrl"
                  :multiple="true"
                  accept="jpg/png"
                  :on-success="upSuccess"
                  :show-file-list="true"
                  :on-remove="onremove"
                  :file-list="fileList"
                  :limit=10
                  list-type="picture">
                  <el-button class="myBtn" style="background:#317caf;color:#fff">选择图片</el-button>
                  <el-tag style="margin-left: 10px" closable type="warning">请上传尺寸为：750x572的商品图片</el-tag>
                  <el-tag style="margin-left: 10px" closable type="warning">请依次，一张一张上传，最多上传10张图片</el-tag>
                </el-upload>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="hidAdd">取 消</el-button>
              <el-button type="primary" @click="submitShop">确 定</el-button>
            </div>
          </el-dialog>
        </div>
    </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import {requestPost} from "@/utils/util";
export default {
  //:file-list="fileList"
    components: { ElImageViewer },
    data(){
        return{
          title:'新增商品',
          fileList:[],
          uploadUrl:'https://jingji-h5.ecps.com.cn//3341_amjjtr3b19iw/index.php?s=imagesUpload',
          formLabelWidth:'120px',
          imageShow:false,
          imagesData:'',
          tableData: [],
          dialogFormVisible:false,
          total:0,
          currentPage4:0,
          loading:false,
          pageSize:5,
          pages:1,
          form: {
            id:0,
            shopName: '',
            classId: '1',
            score:0,
            count:0,
            content:'',
          },
          className:[],
          state:'2',
          search:''
        }
    },
    created(){
        this.getData();
    },
    methods:{
      onremove(res){
        for (var i = 0;i < this.fileList.length; i++){
          if (this.fileList[i].url == res.url){
            this.fileList.splice(i, 1);
            console.log(this.fileList)
          }
        }
      },
      hidAdd(){
        this.dialogFormVisible = false;
        this.getData();
      },
      showAdd(){
        this.title = '新增商品'
        this.dialogFormVisible = true
        this.form.id = 0;
        this.form.shopName = '';
        // this.form.classId = 1;
        this.form.score = '';
        this.form.count = '';
        this.form.content = '';
        this.fileList = [];
      },
      changes(res){
        this.form.classId = res;
        console.log(this.form.classId)
      },
      upSuccess(e){
        if(e.code==0){
          this.fileList.push(e.data)
        }else{
          this.$message(res.message);
        }
      },
      editShop(row){
        this.title = '编辑商品'
        this.form = row
        this.dialogFormVisible = true
        this.fileList = row.queryImages;
      },
      submitShop(){
        this.$api.setShop({
          id:this.form.id,
          shopName: this.form.shopName,
          classId: this.form.classId,
          images:this.fileList,
          score:this.form.score,
          count:this.form.count,
          content:this.form.content,
        }).then((res) => {
          this.dialogFormVisible = false
          if(res.code==0){
            this.$message({
              message: res.message,
              type: 'success'
            });
            this.getData();
          }else{
            this.$message({
              message: res.message,
              type: 'warning'
            });
          }
        })
      },
      shopState(id,type) {
        console.log(type)
        let text = ''
;        if (type == 1){
           text = '下架';
        }else {
           text = '上架';
        }
        this.$confirm('该商品将'+text+', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true;
          this.$api.shopState({
            id: id,
          }).then((res) => {
            if(res.code==0){
              this.$message({
                message: res.message,
                type: 'success'
              });
              this.getData();
            }else{
              this.$message({
                message: res.message,
                type: 'warning'
              });
            }
          }).catch((res) => {
            this.loading = false;
          })
        }).catch(() => {
            this.$message({
              type: 'warning',
              message: '已取消'+text
            });
        });
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
        getData(){
          this.loading = true;
            this.$api.getShopData({
              page: this.pages,
              size: this.pageSize,
              state:this.state,
              search:this.search
            }).then((res) => {
              this.loading = false;
                if(res.code==0){
                  this.className = res.data.className
                  // console.log(this.className)
                  this.tableData = res.data.data.data;
                  this.form.classId = res.data.className[0].id
                  console.log(this.form.classId)
                  this.total = res.data.data.total;
                  this.currentPage4 = res.data.data.current_page;
                }else{
                  this.$message({
                    message: res.message,
                    type: 'success'
                  });
                }
            }).catch((res) => {
              this.loading = false;
            });
        },
      handleSizeChange(val){
        this.pageSize = val;
        this.getData()
      },
      handleCurrentChange(val){
        console.log('点击了');
        this.pages= val;
        this.getData();
      },

    }
}
</script>
<style scoped>
    .bodyBoxs{
        padding: 40px;
    }
    .boxs{
        width: 100%;
        background: #fff;
        border-radius: 15px;
    }
</style>
