<template>
  <div class="app-container">

    <div class="filter-container">
      <el-input
        v-model="listQuery.keyword"
        size="small"
        placeholder="请输入关键词"
        clearable
        class="filter-item"
        style="width: 200px;margin-left: 10px;"
      />
      <el-button-group style="margin-left: 10px;">
        <el-button
          size="small"
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="search"
        >
          搜索
        </el-button>
        <el-button
          size="small"
          class="filter-item"
          type="primary"
          icon="el-icon-refresh"
          @click="refresh"
        >
          重置
        </el-button>
      </el-button-group>
      <el-button
        size="small"
        class="filter-item"
        type="primary"
        icon="el-icon-plus"
        style="margin-left: 10px;"
        @click="add"
      >
        新增
      </el-button>
    </div>

    <el-row :gutter="24" class="row-container">
      <el-col :span="4" style="height: 100%;">
        <el-tree
          default-expand-all
          :data="categoryList"
          node-key="categoryId"
          :props="defaultProps"
          @node-click="handleNodeClick"
        >
             <span class="custom-tree-node" slot-scope="{ node, data }">
               <span :class="listQuery.categoryId==data.categoryId?'info-text':''" > {{ node.label }}</span>
             </span>
        </el-tree>
      </el-col>
      <el-col :span="20" style="height: 100%;">
        <el-table
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          height="100%"
          class="table-container"
          highlight-current-row
        >

          <el-table-column
            label="序号"
            width="150"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.$index+1 }}
            </template>
          </el-table-column>

          <el-table-column
            label="分类名"
            width="160"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.categoryName }}
            </template>
          </el-table-column>

          <el-table-column
            label="商品名"
            width="160"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.productName }}
            </template>
          </el-table-column>

          <el-table-column
            label="商品金额"
            width="160"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.productAmount }}
            </template>
          </el-table-column>

          <el-table-column
            label="商品会员金额"
            width="160"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.productMemberAmount }}
            </template>
          </el-table-column>

          <el-table-column
            label="商品图片"
            width="160"
            align="center"
          >
            <template slot-scope="scope">
              <img v-if="scope.row.productImage" :src=" baseUrl  + scope.row.productImageUrl" class="avatar" style="width: 40px;height: 40px;">
            </template>
          </el-table-column>

          <el-table-column
            label="库存数量"
            width="160"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.productCount }}
            </template>
          </el-table-column>

          <el-table-column
            label="提成金额"
            width="160"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.pushAmount }}
            </template>
          </el-table-column>

          <el-table-column
            label="提成比例"
            width="160"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.pushPercent }}
            </template>
          </el-table-column>

          <el-table-column
            label="0正常 1下架"
            width="160"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.productStatus }}
            </template>
          </el-table-column>

          <el-table-column
            label="门店名"
            width="160"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.shopName }}
            </template>
          </el-table-column>

          <el-table-column
            label="创建人"
            width="160"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.createName }}
            </template>
          </el-table-column>

          <el-table-column
            label="创建时间"
            width="160"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.createTime }}
            </template>
          </el-table-column>

          <el-table-column
            label="修改人"
            width="160"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.updateName }}
            </template>
          </el-table-column>

          <el-table-column
            label="修改时间"
            width="160"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.updateTime }}
            </template>
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
            width="200"
            align="center"
          >
            <template slot-scope="scope">
              <el-button-group>
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  size="mini"
                  @click="edit(scope)"
                >
                  修改
                </el-button>
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  @click="del(scope)"
                  v-hasPerms="'product:del'"
                >
                  删除
                </el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.limit"
          @pagination="fetchData"
        />
      </el-col>
    </el-row>



    <add-form ref="addForm" @ok="addOk"  />
    <edit-form ref="editForm" @ok="editOk"  />

  </div>
</template>

<script>
  import {getCategoryList} from "@/api/business/category/category";
  import {getProductPage,deleteProduct} from "@/api/business/product/product";
  import {deepClone,success} from "@/utils";

  import confirm from "@/utils/confirm";
  import Pagination from '@/components/Pagination'
  import addForm from "@/views/business/product/addProduct";
  import editForm from "@/views/business/product/editProduct";

  export default {
    name: 'product',
    components: {addForm,editForm,Pagination},
    data() {
      return {
        total: 0,
        list: [],
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 50,
          categoryId: '',
          keyword: ''
        },
        defaultProps: {
          id: 'categoryId',
          label: 'categoryName',
        },
        temp: {},
        categoryList: []
      }
    },
    created() {
      this.fetchData()
      this.getCategoryList()
    },
    methods: {
      getCategoryList(){
        getCategoryList().then(res => {
          this.categoryList = res.data
        })
      },
      handleNodeClick(e){
        this.listQuery.categoryId =  e.categoryId
        this.fetchData()
      },
      search() {
        this.fetchData()
      },
      refresh() {
        this.listQuery = this.$options.data().listQuery
        this.fetchData()
      },
      fetchData() {
        this.listLoading = true
        getProductPage(this.listQuery).then(response => {
          const { records, total } = response.data
          this.list = records
          this.total = total
          this.listLoading = false
        })
      },
      add(){
        this.$refs.addForm.open(this.listQuery.categoryId)
      },
      addOk(){
        this.fetchData()
      },
      edit(scope) {
        const temp = deepClone(scope.row)
        this.$refs.editForm.open(temp)
      },
      editOk(){
        this.fetchData()
      },
      del(scope) {
        confirm("确定要删除吗？").then(res=>{
          if(res){
            deleteProduct(scope.row.productId).then(response => {
              console.log(response)
              success('删除成功')
              this.fetchData()
            })
          }
        })
      },
    }
  }
</script>

<style scoped>

</style>
