<template>
  <a-card :bordered="false">
    <a-row type="flex">
      <a-col span="4">
        <a-menu class="menu-cont" :selectedKeys="selectedKeys" mode="inline" @click="handleClick">
          <a-menu-item v-for="item in menuList" :key="item.goodsTypeNo" :title="item.name">
            {{ item.name }}
          </a-menu-item>
          <a-empty v-if="menuList.length==0" class="noData" />
        </a-menu>
      </a-col>
      <a-col span="1"></a-col>
      <a-col span="19">
        <s-table
          ref="table"
          size="default"
          :showPagination="false"
          :scroll="{y:600}"
          :rowKey="(record) => record.id"
          :columns="columns"
          :data="loadData"
          bordered>
          <!-- 操作 -->
          <template slot="action" slot-scope="text, record, index">
            <a-icon
              title="下移"
              v-if="index != list.length-1"
              :style="{ fontSize: '18px', color: '#e29b29', cursor: 'pointer',padding:'0 10px' }"
              @click="changeSort(index,record,0)"
              type="arrow-down" />
            <a-icon
              title="上移"
              v-if="index != 0"
              :style="{ fontSize: '18px', color: '#e29b29',cursor: 'pointer', padding:'0 10px' }"
              @click="changeSort(index,record,1)"
              type="arrow-up" />
            <span v-if="list.length===1">--</span>
          </template>
        </s-table>
      </a-col>
    </a-row>
  </a-card>

</template>

<script>
import {
  STable,
  VSelect
} from '@/components'
import {
  goodsUpdateSort, goodsType, goodsListQuery
} from '@/api/goods.js'
export default {
  name: 'GoodsList',
  components: {
    STable,
    VSelect
  },
  data () {
    return {
      pageNo: 1,
      pageSize: 10,
      menuList: [], // 菜单列表
	  selectedKeys: [], // 当前选中的菜单key
      itemId: '', // 要编辑的租户id
      // 表头
      columns: [{
        title: '序号',
        dataIndex: 'no',
        width: 70,
        align: 'center'
      },
      {
        title: '商品名称',
        dataIndex: 'name',
        width: 200,
        align: 'center'
      },
      {
        title: '商品价格(乐豆)',
        width: 200,
        dataIndex: 'originalGold',
        align: 'center'
      },
      {
        title: '库存数量',
        dataIndex: 'inventoryQty',
        width: 120,
        align: 'center',
        customRender: (text) => {
          return text || '0'
        }
      },
      {
        title: '操作',
        width: 200,
        align: 'center',
        scopedSlots: {
          customRender: 'action'
        }
      }
      ],
      list: [], // 列表数据
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        console.log(parameter, 'parameter')
        if (this.selectedKeys.length) {
          const queryParams = {
            goodsTypeNo: this.selectedKeys[0],
            state: 1,
            orderBy: 'goods.SORT DESC'
          }
          return goodsListQuery(queryParams).then(res => {
			  this.list = res.data || []
			  for (let i = 0; i < res.data.length; i++) {
			    const _item = res.data[i]
			    _item.no = i + 1
			  }
			  return res.data
          })
        } else {
          return new Promise((resolve) => {
            const data = []
            resolve(data)
          })
        }
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getGoodsType()
    })
  },
  methods: {
    // menu菜单切换
    handleClick (item) {
      console.log(item, 'kkkkkkkkkk')
	  this.selectedKeys = [item.key]
	  this.$refs.table.refresh(true)
    },
    // 获取分类数据
    getGoodsType () {
      goodsType({ state: 1 }).then(res => {
		  console.log(res, 'rrrrrrrrrr')
        if (res.status == 200) {
          this.menuList = res.data
		  this.selectedKeys = [res.data[0].goodsTypeNo]
		  this.$refs.table.refresh(true)
        } else {
          this.menuList = []
        }
      })
    },
    // 上移 下移 排序 index:下标  item:数据  type：类型 0 下移 1 上移
    changeSort (index, item, type) {
      const indexThat = type === 0 ? index + 1 : index - 1
      const params = [{
        'id': item.id,
        'sort': item.sort
      },
      {
        'id': this.list[indexThat].id,
        'sort': this.list[indexThat].sort
      }
      ]
      goodsUpdateSort(params).then(res => {
        if (res.status == 200) {
          this.$refs.table.refresh()
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>
<style scoped="true">
	.menu-cont {
		height: 100%;
	}
	.noData {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>
