<template>
  <div>
    <!-- <div style="margin:2% 0;display: inline-block;">
      <span>商铺名称：</span>
      <el-input style="width: 150px;" @keydown.enter.native="select" clearable placeholder="请输入商铺名称" v-model="shopName1">
      </el-input>&nbsp;&nbsp;&nbsp;&nbsp;
    </div> -->
    <div style="float: right;margin-right:2%;">
     <el-button icon="document" size="mini" style="margin: 10px 0;"
        type="primary" @click="addNotice">添加分类</el-button>
    </div>
    <el-table v-loading="tableDataLoading" :data="typeDatas.records" row-key="id">
      <el-table-column label="编号" prop="classifyId">
      </el-table-column>
      <el-table-column label="商铺名称" prop="shopName">
      </el-table-column>
      <el-table-column label="名称" prop="classifyName">
      </el-table-column>
			<el-table-column prop="sort" label="排序">
			  <template slot-scope="scope">
			    <el-input-number size="small" v-model="scope.row.sort" :min="0" @change="paixuS(scope.row)">
			    </el-input-number>
			  </template>
			</el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button size="mini" type="primary"
            @click="updates(scope.$index, scope.row)">修改
          </el-button>
          <el-button size="mini" type="danger" @click="deletes(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加分类 -->
    <el-dialog :visible.sync="dialogFormVisible" center :title="titles">
      <!-- <div style="margin-bottom: 10px;">
        <span style="width: 200px;display: inline-block;text-align: right;">商铺名称：</span>
        <el-input v-model="shopName" placeholder="请输入分类名称" style="width:50%;" disabled></el-input>
      </div> -->
      <div style="margin-bottom: 10px;">
        <span style="width: 200px;display: inline-block;text-align: right;">分类名称：</span>
        <el-input v-model="classifyName" placeholder="请输入分类名称" style="width:50%;"></el-input>
      </div>
	  <div style="margin-bottom: 10px;">
	    <span style="width: 200px;display: inline-block;text-align: right;">分类排序：</span>
	    <el-input v-model="sort" placeholder="请输入分类排序" style="width:50%;"></el-input>
	  </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="releasNoticeTo()">确 定</el-button>
      </div>
    </el-dialog>
    <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" :total="typeDatas.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        size: 10,
        page: 1,
        shopId:'',
        classifyId: '',
        classifyName: '',
        shopName:'',
        tableDataLoading: false,
        dialogFormVisible: false,
        typeDatas: [],
        titles: '添加',
        shopName1:'',
        shopIdDatas:[],
		sort:0,
      }
    },
    methods: {
      handleCurrentChange(val) {
        this.page = val
        this.dataSelect()
      },

      handleSizeChange(val) {
        this.size = val
        this.classifySelect()
      },

      // 添加分类弹框
      addNotice() {
        this.dialogFormVisible = true
        this.titles = '添加'
        this.classifyId = ''
        this.classifyName = ''
        // this.shopId = ''
        this.shopName = ''
        this.page=1;
		this.sort = 0
        this.classifySelect()
      },
      // 添加分类
      releasNoticeTo() {
        if (this.classifyName == '') {
          this.$notify({
            title: '提示',
            duration: 1800,
            message: '请输入分类名称',
            type: 'warning'
          })
          return
        }
        if (this.titles == '添加') {
          var url = 'admin/goods/insertClassify'
        }
        if (this.titles == '修改') {
          var url = 'admin/goods/updateClassify'
        }
        this.$http({
          url: this.$http.adornUrl(url),
          method: 'post',
          data: this.$http.adornData({
            'classifyId': this.classifyId,
            'classifyName': this.classifyName,
            'shopId':this.shopId,
			'sort':this.sort
          })
        }).then(({
          data
        }) => {
          this.dialogFormVisible = false
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {

              this.dataSelect()
            }
          })
        })
      },
      // 修改弹框
      updates(index, rows) {
        this.classifyId = rows.classifyId
        this.classifyName = rows.classifyName
        this.shopId = rows.shopId
        this.shopName = rows.shopName
		this.sort = rows.sort
        this.titles = '修改'
        this.dialogFormVisible = true

      },

      // 删除分类
      deletes(row) {
        this.$confirm(`确定删除此条信息?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('admin/goods/deleteClassify'),
            method: 'get',
            params: this.$http.adornParams({
              'classifyId': row.classifyId
            })
          }).then(({
            data
          }) => {
            this.$message({
              message: '删除成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.dataSelect()
              }
            })
          })
        }).catch(() => {})

      },
      // 获取分类数据
      dataSelect() {
        // this.tableDataLoading = true
        // this.$http({
        //   url: this.$http.adornUrl('admin/goods/selectAllClassify'),
        //   method: 'get',
        //   params: this.$http.adornParams({
        //     'shopName':this.shopName1,
        //     'page':this.page,
        //     'limit':this.size
        //   })
        // }).then(({
        //   data
        // }) => {

        //   this.tableDataLoading = false
        //   let returnData = data.data
        //   this.typeDatas = returnData
        // })
				this.shopId = this.$cookie.get('shopId')
				this.tableDataLoading = true
				this.$http({
				  url: this.$http.adornUrl('admin/goods/selectAllClassify'),
				  method: 'get',
				  params: this.$http.adornParams({
				    'shopId': this.shopId,
				    'page': this.page,
				    'limit': this.size
				  })
				}).then(({
				  data
				}) => {
				  this.tableDataLoading = false
				  let returnData = data.data
				  this.typeDatas = returnData
				  this.classDatas = returnData
				})
      },
      //输入触发搜索
      select(){
        this.page=1
        this.dataSelect()
      },
	  // 分类排序
	  paixuS(row) {
	    this.$http({
	      url: this.$http.adornUrl('admin/goods/updateClassify'),
	      method: 'post',
	      data: this.$http.adornData({
	        'classifyId': row.classifyId,
	        'sort': row.sort
	      })
	    }).then(({
	      data
	    }) => {
	      if (data.code == 0) {
	        this.$message({
	          message: '操作成功',
	          type: 'success',
	          duration: 1500,
	          onClose: () => {
	            this.dataSelect()
	          }
	        })
	      } else {
	        this.$message({
	          message: data.msg,
	          type: 'error',
	          duration: 1500,
	          onClose: () => {}
	        })
	      }
	    })
	  },
    },
    mounted() {
      this.dataSelect()
    }
  }
</script>

<style>

</style>
