<template>
  <el-main class="bg_white" style="min-height: calc( 100% - 80px )">
    <el-row class="title_box">
      <el-col :span="24"><div class="title">产品列表</div></el-col>
    </el-row>
    <!--搜索-->
    <div class="searchBox p-l-24 p-t-24 p-r-24">
      <el-row>
        <el-col :span="20" class="search-form">
          <el-form ref="form" :inline="true" :model="query_form">
            <el-form-item label="产品分类" prop="category_id">
              <el-cascader 
                v-model="query_form.category_id"
                :options="data.cateList"
                :props="{
                  expandTrigger: 'hover',
                  value: 'id',
                  label: 'name',
                  children: 'children'
                }"
                clearable
                @change="changeCate"
                @remove-tag="changeCate"
                />
            </el-form-item>
            <el-form-item label="品牌" prop="brand_id">
              <el-select v-model="query_form.brand_id" clearable @change="getList">
                <el-option :label="item.name" :value="item.id" v-for="(item, index) in data.brandList" :key="index"/>
              </el-select>
            </el-form-item>
            <el-form-item label="上架状态" prop="status">
              <el-select v-model="query_form.status" clearable @change="getList">
                <el-option :label="item.name" :value="item.id" v-for="(item, index) in data.statusList" :key="index"/>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="name">
              <el-input v-model="query_form.name" style="width: 300px;" placeholder="请输入产品名称/SPU/SKU" clearable @clear="getList"></el-input>
            </el-form-item>
            <el-button type="primary" class="search_button" @click="getList" size="default">搜索</el-button>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <!--搜索-->
    <!---产品列表-->
    <div class="table">
      <el-table :data="data.list" border fit highlight-current-row>
        <el-table-column align="center" prop="id" label="ID" width="95"></el-table-column>
        <el-table-column label="主图" prop="imimageg" align="center" width="120">
          <template #default="scope">
            <el-image style="width: 50px; height: 50px;" :src="scope.row.image" />
          </template>
        </el-table-column>
        <el-table-column label="品牌" prop="brand_name" width="160"></el-table-column>
        <el-table-column label="分类名称" prop="category_name"></el-table-column>
        <el-table-column label="产品名称" prop="name"></el-table-column>
        <el-table-column label="SPU" prop="spu" width="240" align="center"></el-table-column>
        <el-table-column label="更新时间" prop="create_time" align="center"></el-table-column>
        <el-table-column label="状态" align="center" width="120">
          <template #default="scope">
            <el-switch
              v-model="scope.row.status"
              class="ml-2"
              :active-value=1
              :inactive-value=0
              @change="changeStatus(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="150" label="操作" prop="" align="center">
          <template #default="scope">
            <el-button title="编辑" type="text" size="default" @click="toDetail(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="m-t-20 m-b-20"
        :current-page="query_form.page"
        :page-sizes="[10, 20, 30]"
        :page-size="query_form.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data.count"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        small>
      </el-pagination>
    </div>
    <!---产品列表-->
  </el-main>
</template>
<script>
import { reactive, onMounted, ref } from 'vue'
import { useRouter} from 'vue-router';
import { useStore } from 'vuex'
import Request from '@/utils/request.js'
import { ElMessage, ElLoading } from 'element-plus'
export default {
  name: 'goodsEdit',
  setup() {
    let data = reactive({
      count: 0,
      language_id: 0,
      cdn: '',
      list: [],
      cateList: [],
      brandList: [],
      loading: false,
      statusList: [
        {
          id: 0,
          name: '未上架'
        },
        {
          id: 1,
          name: '已上架'
        }
      ]
    })
    let query_form = reactive({
      page: 1,
      size: 10,
      language_id: 0,
      category_id: '',
      brand_id: '',
      name: ''
    })
    
    //实例化请求
    const request = new Request()
    let router = useRouter()
    let store =  useStore()

    onMounted(() => {
      data.language_id = store.state.user.language.id
      data.cdn = store.state.user.cdn
      getList()
      getSelectList()
    })

    const getList = () =>{
      data.list = []
      query_form.language_id = data.language_id
      request.get('v1/product', query_form).then(res=>{
        if(res.status == 200){
          data.count = res.data.count
          if (res.data.data.length > 0) {
            let result = res.data.data
            result.forEach(item => {
              item.image = data.cdn + item.image
            });
            data.list = result
          }
        } else {
          ElMessage({
            type: 'error',
            message: res.message
          })
        }
      })
    }
    const handleSizeChange = (size) => {
      query_form.size = size
      getList()
    }

    const handleCurrentChange = (page) => {
      query_form.page = page
      getList()
    }
    //分类选择
    const changeCate = (val) => {
      //末级分类id
      query_form.category_id = val != null && val.length>0 ? val[val.length - 1] : ''
      getList()
    }
    //下拉列表数据
    const getSelectList = () => {
      request.get('v1/category', {language_id: data.language_id}).then(res=>{
        if(res.status == 200){
          data.cateList = res.data
        } else {
          ElMessage({
            type: 'error',
            message: res.message
          })
        }
      })
      request.get('v1/brand').then(res=>{
        if(res.status == 200){
          data.brandList = res.data
        } else {
          ElMessage({
            type: 'error',
            message: res.message
          })
        }
      })
    }
    //修改状态
    const changeStatus = (row) => {
      request.post('v1/product/change_status', {id: row.id,status: row.status}).then(res => {
        if(res.status == 200){
          ElMessage({
            type: 'success',
            message: res.message
          })
          getList()
        } else {
          ElMessage({
            type: 'error',
            message: res.message
          })
        }
      })
    }

    const toDetail = (row) => {
      router.push({
        path: '/product/editProduct',
        query: {
          id: row.id,
        },
      })
    }

    return {
      data,
      query_form,
      getList,
      getSelectList,
      toDetail,
      handleSizeChange,
      handleCurrentChange,
      changeStatus,
      changeCate
    }
  }
}
</script>
<style scoped>
.searchBox ::v-deep(.el-form-item) {
  margin-bottom: 0 !important;
}
</style>
