<template>
  <div>
    <div style="font-size:18px;margin-bottom: 15px;">
      <a href="#" @click="prev" style="text-decoration:none;font-size: 14px;">
        <icon-svg name="jiantou" style="width: 1.2em;height: 1.2em;position: relative;top: 0.3em;"></icon-svg>
        返回
      </a>
      <span style="display: inline-block;margin: 0 15px;color: #D9D9D9;">|</span>
      <span>商品列表</span>
    </div>
    <div style="margin:2% 0;display: inline-block;">
      <span>商品标题：</span>
      <el-input style="width: 150px;" @keydown.enter.native="select" clearable placeholder="请输入商品标题" v-model="title">
      </el-input>&nbsp;&nbsp;&nbsp;&nbsp;
      <span>商品类型：</span>
      <el-select v-model="classifyId" class="margin15" placeholder="请选择商品类型" style="width:200px;"
        @change="handleChange()">
        <el-option v-for="(item,index) in classDatas" :key="index" :label="item.classifyName" :value="item.classifyId">
        </el-option>
      </el-select>&nbsp;&nbsp;&nbsp;&nbsp;
      <span>商品状态：</span>
      <el-select v-model="status" placeholder="请选择商品状态" style="width:150px;" @change="select(status)">
        <el-option v-for="item in statusmain" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
    <div style="display: inline-block;">
      <el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="select">查询</el-button>
      <el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="cleans">重置</el-button>
      <el-button style='margin-left:15px;' :disabled="!isAuth('shopsListSm:add')" size="mini" type="primary"
        icon="document" @click="addShop">添加</el-button>
    </div>
    <el-table v-loading="tableDataLoading" :data="tableData.list">
      <el-table-column fixed prop="goodsId" label="编号" width="80">
      </el-table-column>
      <el-table-column fixed prop="goodsCover" label="商品封面图">
        <template slot-scope="scope">
          <img :src="scope.row.goodsCover" alt="" width="60" height="60">
        </template>
      </el-table-column>
      <el-table-column fixed prop="goodsCover" label="商品图" width="150">
        <template slot-scope="scope">
          <!-- <img :src="scope.row.goodsCover" alt="" width="60" height="60"> -->
          <div v-for="(item,index) in scope.row.goodsPicture" :key="index" style="display: inline-block; margin: 3px;">
            <el-popover placement="top-start" title="" trigger="hover">
              <img style="width: 50px; height: 50px" :src="item" alt="" slot="reference">
              <img style="width: 300px; height: auto" :src="item" alt="">
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="classifyName" label="商品类型">
        <template slot-scope="scope">
          <span v-if="scope.row.classifyName == null">暂无分类</span>
          <span v-else>{{scope.row.classifyName}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="goodsName" label="商品标题" width="200">
      </el-table-column>
      <el-table-column prop="goodsDescribe" label="商品描述" width="300">
      </el-table-column>
      <el-table-column prop="originalMoney" label="商品原价">
        <template slot-scope="scope">
          <span>{{scope.row.originalMoney | numFilter}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="inventory" label="库存" width="180">
        <template slot-scope="scope">
          <span>{{scope.row.inventory}}</span>
          <div style="position: relative;display: inline-block;">
            <el-input style="width: 160px;" @keydown.enter.native="kcselect(scope.row,scope.row.kucun)" clearable placeholder="请输入修改库存" v-model="scope.row.kucun">
            </el-input>
            <span @click="kcselect(scope.row,scope.row.kucun)" style="position: absolute;right: 18px;top:8px;">
              <icon-svg name="bianji" class="site-sidebar__menu-icon"></icon-svg>
            </span>
          </div>
      
        </template>
      </el-table-column>
      <el-table-column prop="goodsMoney" label="商品折扣价">
        <template slot-scope="scope">
          <span>{{scope.row.goodsMoney | numFilter}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="packMoney" label="打包费">
        <template slot-scope="scope">
          <span>{{scope.row.packMoney | numFilter}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="goodsLabel" label="标签">
      </el-table-column>
      <el-table-column prop="salesVolume" label="商品销量">
      </el-table-column>
      <el-table-column prop="status" label="商品状态">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.gsrStatus" @change="change(scope.row.gsrStatus,scope.row.goodsId)"
            :active-value="openValue" :inactive-value="closeValue" active-color="#13ce66" inactive-color="#ff4949">
          </el-switch>
        </template>
        <!-- <template slot-scope="scope">
          <span style="color: #4f9dec;cursor: pointer;" v-if="scope.row.status === 0 ">上架</span>
          <span style="color: #4f9dec;cursor: pointer;" v-if="scope.row.status === 1 ">下架</span>
        </template> -->
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="160">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" :disabled="!isAuth('shopsListSm:delete')" @click="shopdeletes(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center;margin-top: 10px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10,  20, 30, 50, 100]"
        :page-size="size" :current-page="page" layout="total,sizes, prev, pager, next,jumper"
        :total="tableData.totalCount">
      </el-pagination>
    </div>
    <el-dialog :visible.sync="dialogFormVisible" center title="商品列表">
      <div style="margin:2% 0;display: inline-block;">
        <span>商品标题：</span>
        <el-input style="width: 150px;" @keydown.enter.native="select" clearable placeholder="请输入商品标题" v-model="title1">
        </el-input>&nbsp;&nbsp;&nbsp;&nbsp;
        <!-- <span>商品类型：</span>
        <el-select v-model="classifyId" class="margin15" placeholder="请选择商品类型" style="width:200px;"
          @change="handleChange()">
          <el-option v-for="(item,index) in classDatas" :key="index" :label="item.classifyName"
            :value="item.classifyId">
          </el-option>
        </el-select>&nbsp;&nbsp;&nbsp;&nbsp;
        <span>商品状态：</span>
        <el-select v-model="status" placeholder="请选择商品状态" style="width:150px;" @change="select(status)">
          <el-option v-for="item in statusmain" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>&nbsp;&nbsp;&nbsp;&nbsp; -->
      </div>
      <div style="display: inline-block;">
        <el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="select1">查询</el-button>
        <el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="cleans1">重置</el-button>
        <el-button style='margin-left:15px;' :disabled="!isAuth('shopsListSm:add')" size="mini" type="primary"
          icon="document" @click="add(1)">添加</el-button>
      </div>
      <el-table v-loading="tableDataLoading1" :data="tableData1.list" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column fixed prop="goodsId" label="编号" width="80">
        </el-table-column>
        <el-table-column fixed prop="goodsName" label="商品标题" width="200">
        </el-table-column>
        <el-table-column prop="goodsCover" label="商品封面图">
          <template slot-scope="scope">
            <img :src="scope.row.goodsCover" alt="" width="60" height="60">
          </template>
        </el-table-column>
        <el-table-column prop="goodsCover" label="商品图" width="150">
          <template slot-scope="scope">
            <!-- <img :src="scope.row.goodsCover" alt="" width="60" height="60"> -->
            <div v-for="(item,index) in scope.row.goodsPicture" :key="index"
              style="display: inline-block; margin: 3px;">
              <el-popover placement="top-start" title="" trigger="hover">
                <img style="width: 50px; height: 50px" :src="item" alt="" slot="reference">
                <img style="width: 300px; height: auto" :src="item" alt="">
              </el-popover>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="goodsName" label="商品类型">
          <template slot-scope="scope">
            <span v-if="scope.row.classifyName == null">暂无分类</span>
            <span v-else>{{scope.row.classifyName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="goodsDescribe" label="商品描述" width="300">
        </el-table-column>
        <el-table-column prop="originalMoney" label="商品原价">
          <template slot-scope="scope">
            <span>{{scope.row.originalMoney | numFilter}}</span>
          </template>
        </el-table-column>
        
        <el-table-column prop="goodsMoney" label="商品折扣价">
          <template slot-scope="scope">
            <span>{{scope.row.goodsMoney | numFilter}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="packMoney" label="打包费">
          <template slot-scope="scope">
            <span>{{scope.row.packMoney | numFilter}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="goodsLabel" label="标签">
        </el-table-column>
        <el-table-column prop="salesVolume" label="商品销量">
        </el-table-column>
        <el-table-column prop="status" label="商品状态">
          <template slot-scope="scope">
            <span style="color: #4f9dec;cursor: pointer;" v-if="scope.row.status === 0 ">上架</span>
            <span style="color: #4f9dec;cursor: pointer;" v-if="scope.row.status === 1 ">下架</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" :disabled="!isAuth('shopsListSm:add')" @click="add(scope.row)">添加
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center;margin-top: 10px;">
        <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
          :page-sizes="[10, 20, 30,50,100]" :page-size="size1" :current-page="page1"
          layout="total,sizes, prev, pager, next,jumper" :total="tableData1.totalCount">
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        openValue: 0,
        closeValue: 1,
        size: 10,
        page: 1,
        size1: 10,
        page1: 1,
        pagelist: [],
        id: '',
        img: '',
        title: '',
        title1:'',
        type: '',
        typeId: '',
        readonly: true,
        merchants: '',
        price: '',
        memberPrice: '',
        originalPrice: '',
        sales: '',
        status: '',
        status2: '',
        descrition: '',
        totalnum: 0,
        imgUrl: '',
        linkUrl: '',
        classifyId: '',
        classDatas: [],
        statusmain: [{
            value: '',
            label: '全部'
          },
          {
            value: 0,
            label: '上架'
          },
          {
            value: 1,
            label: '下架'
          }
        ],
        statusmain2: [{
            value: 1,
            label: '上架'
          },
          {
            value: 2,
            label: '下架'
          }
        ],
        formLabelWidth: '200px',
        tableDataLoading: false,
        dialogFormVisible:false,
        tableDataLoading1: false,
        dialogFormVisible1:false,
        dialogFormVisible2: false,
        dialogFormVisible3: false,
        typeDatas: [],
        advertData: [],
        tableData: {},
        tableData1: [],
        shopId: '',
        xuanze:[],
      }
    },
    filters: {
      numFilter(value) {
        let realVal = ''
        if (!isNaN(value) && value !== '') {
          // 截取当前数据到小数点后三位
          let tempVal = parseFloat(value).toFixed(3)
          realVal = tempVal.substring(0, tempVal.length - 1)
        } else {
          realVal = '--'
        }
        return realVal
      }
    },
    methods: {
      handleChange(value) {
        this.shopSelect()
      },

      handleAvatarSuccess(file) {
        this.img = file.data;
      },
      handleSizeChange(val) {
        this.size = val;
        this.shopSelect()
      },
      handleCurrentChange(val) {
        this.page = val;
        this.shopSelect()
      },
      handleSizeChange1(val) {
        this.size1 = val;
        this.shopSelect1()
      },
      handleCurrentChange1(val) {
        this.page1 = val;
        this.shopSelect1()
      },
      //搜索
      select() {
        this.page = 1
        this.shopSelect()
      },
      // 重置
      cleans() {
        this.page = 1
        this.title = ''
        this.status = ''
        this.classifyId = ''
        this.shopSelect()
      },
      //搜索
      select1() {
        this.page = 1
        this.shopSelect1()
      },
      // 重置
      cleans1() {
        this.page = 1
        this.title1 = ''
        this.shopSelect1()
      },
      //添加商品
      addShop() {
        this.shopSelect1()
        this.dialogFormVisible = true
      },
      // 选择商品
       handleSelectionChange(val) {
        console.log('选择商品',val)
        var arr = []
        var data = {}
        if(val.length>0){
          for(var i in val){
            data.shopId = this.shopId
            data.goodsId = val[i].goodsId
            arr.push(data)
          }
        }
        this.xuanze = arr
      },
      add(row) {
        var goodsShopRelevancyList = []
        var datas = {}
        if(row==1){

          goodsShopRelevancyList = this.xuanze
          console.log('多个添加商品',goodsShopRelevancyList)
        }else{
          datas.shopId = this.shopId
          datas.goodsId = row.goodsId
          goodsShopRelevancyList.push(datas)
          console.log('单个添加商品',goodsShopRelevancyList)

        }
        if(goodsShopRelevancyList.length==0){
          this.$notify({
            title: '提示',
            duration: 1800,
            message: '请选择商品',
            type: 'warning'
          });
          return
        }
        this.$http({
          url: this.$http.adornUrl('admin/goodsShop/addGoodsByShopId'),
          method: 'post',
          data: this.$http.adornData(
            goodsShopRelevancyList)
        }).then(({
          data
        }) => {
          if(data.code==0){
            this.$message({
              message: '添加成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.shopSelect()
              }
            })
            this.xuanze = []
            this.dialogFormVisible = false
          }else{
            this.$message({
              message: data.msg,
              type: 'warning',
              duration: 1500,
              onClose: () => {
              }
            })
          }

        })
      },
      // 修改商品
      shopUpdates(index, rows) {
        this.$router.push({
          path: '/shopAmend',
          query: {
            goodsId: rows.goodsId
          }
        });
      },
      // 删除商品
      shopdeletes(row) {
        this.$confirm(`确定删除此条信息?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('admin/goodsShop/deleteGoodsByShopId'),
            method: 'post',
            params: this.$http.adornParams({
              'shopId': this.shopId,
              'goodsId':row.goodsId
            })
          }).then(({
            data
          }) => {
            this.$message({
              message: '删除成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.shopSelect()
              }
            })
          })
        }).catch(() => {})
      },
      // 获取商铺商品数据
      shopSelect() {
        let page = this.page
        this.tableDataLoading = true
        this.$http({
          url: this.$http.adornUrl('admin/goodsShop/selectGoodsByShopId'),
          method: 'get',
          params: this.$http.adornParams({
            'page': page,
            'limit': this.size,
            'goodsName': this.title,
            'classifyId': this.classifyId,
            'status': this.status,
            'shopId': this.shopId
          })
        }).then(({
          data
        }) => {
          this.tableDataLoading = false
          for (var i in data.data.list) {
            if (data.data.list[i].goodsPicture) {
              data.data.list[i].goodsPicture = data.data.list[i].goodsPicture.split(',')
            }

          }
          let returnData = data.data;

          this.tableData = returnData
          this.totalnum = returnData.totalCount
        })
      },
      // 获取添加的商品数据
      shopSelect1() {
        let page = this.page1
        this.tableDataLoading1 = true
        this.$http({
          url: this.$http.adornUrl('admin/goodsShop/selectGoodsByNotShopId'),
          method: 'get',
          params: this.$http.adornParams({
            'page': page,
            'limit': this.size1,
            'goodsName': this.title1,
            'shopId': this.shopId
          })
        }).then(({
          data
        }) => {
          this.tableDataLoading1 = false
          for (var i in data.data.list) {
            if (data.data.list[i].goodsPicture) {
              data.data.list[i].goodsPicture = data.data.list[i].goodsPicture.split(',')
            }
          }
          let returnData = data.data;
          this.tableData1 = returnData
          this.totalnum = returnData.totalElements
        })
      },
      // 商品分类
      dataSelect() {
        this.tableDataLoading = true
        this.$http({
          url: this.$http.adornUrl('admin/goods/selectAllClassify'),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({
          data
        }) => {
          this.tableDataLoading = false
          let returnData = data.data;
          this.classDatas = returnData
        })
      },
      // 返回上一级
      prev() {
        this.$router.back()
      },
      // 状态
      change(status, goodsId) {
        this.$http({
          url: this.$http.adornUrl('admin/goodsShop/soldOutOrPutaway'),
          method: 'post',
          params: this.$http.adornParams({
            'shopId':this.shopId,
            'goodsId':goodsId,
            'status':status
          })
        }).then(({
          data
        }) => {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.shopSelect()
            }
          })
        })
      },
      // 修改库存
      kcselect(row,kucun){
        console.log('修改库存',row,kucun)
        this.$http({
          url: this.$http.adornUrl('admin/goodsShop/updateGoodsByShopId'),
          method: 'post',
          data: this.$http.adornData({
            'goodsId':row.goodsId,
            'shopId':this.shopId,
            'inventory':kucun
          })
        }).then(({
          data
        }) => {
          if(data.code==0){
            this.$message({
              message: '修改成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.shopSelect()
              }
            })
            this.xuanze = []
            this.dialogFormVisible = false
          }else{
            this.$message({
              message: data.msg,
              type: 'warning',
              duration: 1500,
              onClose: () => {
              }
            })
          }

        })

      },
    },
    mounted() {
      this.shopId = this.$route.query.shopId
      this.shopSelect()
      this.dataSelect()
    }
  };
</script>

<style>

</style>
