<template>
  <div style="padding: 0 20px">
    <div ref="lxHeader">
      <lx-header icon="md-apps" text="产品与服务管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <div slot="content"></div>
        <slot>
          <div style="display: flex">
            <Input v-model="select.name" style="width: 200px;margin-right: 10px;" placeholder="产品名称搜索" />
            <xy-selectors @search="getProducts">
              <template>
                <div class="select-content-item">
                  <div class="select-content-item-label">所属商户</div>
                  <div>
                    <Select clearable v-model="select.merchantId" style="width: 140px;" placeholder="所属商户">-->
                      <Scroll :on-reach-bottom="loadMoreMerchant">
                        <Option v-for="item in merchants" :value="item.id" :key="item.id">
                          {{item.name}}
                        </Option>
                      </Scroll>
                    </Select>
                  </div>
                </div>

                <div class="select-content-item">
                  <div class="select-content-item-label">
                    状态
                  </div>
                  <div>
                    <el-radio v-model="select.state" label="inactive">未启用</el-radio>
                    <el-radio v-model="select.state" label="active">启用</el-radio>
                    <el-radio v-model="select.state" label="">全部</el-radio>
                  </div>
                </div>

                <div class="select-content-item">
                  <div class="select-content-item-label">
                    类别
                  </div>
                  <div>
                    <el-cascader
                      clearable
                      placeholder="类别选择"
                      style="width: 170px;" size="small"
                      :options="types" :show-all-levels="false"
                      :props="{value:'id',label:'title',expandTrigger:'hover'}"
                      @change="e => select.productTypeId = e.at(-1)">
                    </el-cascader>
                  </div>
                </div>
              </template>
            </xy-selectors>
            <Button type="primary" @click="searchProducts">查询</Button>
            <Button type="primary" @click="$refs['addProduct'].isShow = true,$refs['addProduct'].type = 'add'" style="margin-left: 10px;">新增</Button>
          </div>
<!--          <div class="selector">-->
<!--            <div class="selector-item">-->
<!--              <div class="selector-item__label">产品名称：</div>-->
<!--              <Input v-model="select.name" style="width: 200px;" placeholder="产品名称搜索" />-->
<!--            </div>-->
<!--            <div class="selector-item">-->
<!--              <div class="selector-item__label">所属商户：</div>-->
<!--              <Select clearable v-model="select.merchantId" style="width: 140px;" placeholder="所属商户">-->
<!--                <Scroll :on-reach-bottom="loadMoreMerchant">-->
<!--                  <Option v-for="item in merchants" :value="item.id" :key="item.id">-->
<!--                    {{item.name}}-->
<!--                  </Option>-->
<!--                </Scroll>-->
<!--              </Select>-->
<!--            </div>-->
<!--            <div class="selector-item">-->
<!--              <div class="selector-item__label">状态选择：</div>-->
<!--              <Select clearable style="width: 130px;" clearable placeholder="状态选择" v-model="select.state">-->
<!--                <Option v-for="item in [{value:'active',label:'已上架'},{label:'已下架',value:'inactive'}]" :value="item.value">{{item.label}}</Option>-->
<!--              </Select>-->
<!--            </div>-->
<!--            <div class="selector-item">-->
<!--              <div class="selector-item__label">类别选择：</div>-->
<!--              <el-cascader-->
<!--                clearable-->
<!--                placeholder="类别选择"-->
<!--                style="width: 170px;"-->
<!--                size="small"-->
<!--                :options="types"-->
<!--                :show-all-levels="false"-->
<!--                :props="{value:'id',label:'title',expandTrigger:'hover'}"-->
<!--                @change="e => select.productTypeId = e.at(-1)">-->
<!--              </el-cascader>-->
<!--            </div>-->
<!--            <div class="selector-item">-->
<!--              <Button type="primary" @click="getProducts">查询</Button>-->
<!--            </div>-->
<!--            <div class="selector-item">-->
<!--              <Button type="primary" @click="$refs['addProduct'].isShow = true,$refs['addProduct'].type = 'add'">新增</Button>-->
<!--            </div>-->
<!--          </div>-->
        </slot>
      </lx-header>
    </div>

    <xy-table :total="total" :list="list" :table-item="table"  @pageSizeChange="pageSizeChange" @pageIndexChange="pageChange">
      <template v-slot:btns>
        <el-table-column fixed="right" label="操作" width="300" header-align="center">
          <template slot-scope="scope">
            <Button type="primary" size="small" @click="editorShow(scope.row.id,'editor')">编辑</Button>
            <Button type="primary" size="small" style="margin-left: 10px;" @click="editorShow(scope.row.id,'copy')">复制新增</Button>
            <Poptip
              transfer
              confirm
              title="确认要删除吗？"
              @on-ok="deleteProduct(scope.row)">
              <Button type="primary" style="margin-left: 10px;" size="small" ghost>删除</Button>
            </Poptip>
            <el-switch
              style="margin-left: 10px;"
              :value="scope.row.state_name == '已上架' ? true : false"
              active-color="#BF617C"
              inactive-color="#E5E5E5"
              :active-text="scope.row.state_name == '已上架' ? '已上架' : '已下架'"
              @change="stateChange(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
      </template>
    </xy-table>


    <addProduct ref="addProduct" :types="types" @refresh="getProducts"></addProduct>
  </div>
</template>

<script>
import {index as typeIndex} from '@/api/type'
import {index,toggleActive,destroy} from '@/api/product'
import {index as merchantIndex} from "@/api/merchant"

import addProduct from '@/views/productService/components/addProduct'
import { Message } from 'element-ui'
export default {
  components:{
    addProduct
  },
  data() {
    return {
      select:{
        pageIndex:1,
        pageSize:10,
        name:'',
        merchantId:'',
        productTypeId:'',
        state:''
      },

      total:0,
      list:[],
      table:[
        {
          prop:'name',
          label:'名称',
          width:260,
          align:'left',
          fixed:'left'
        },
        {
          prop:'product_type.name',
          label:'类别',
          width: 180
        },
        {
          prop:'merchant.username',
          label:"所属商家",
          width: 280
        },
        {
          prop: "price",
          label:"单价",
          width: 160,
          align:'right'
        },
        {
          prop:"fee",
          label:"平台佣金",
          width: 160,
          align:'right'
        },
        {
          prop:'sharing',
          label: '分享金',
          width: 160,
          align:'right'
        },
        {
          prop:'start_time',
          label:'上架时间',
          width: 220
        },
        {
          prop: 'end_time',
          label:"下架时间",
          width: 220
        },
        {
          prop:'sortnumber',
          label:'同级排序',
          width: 130
        },
        {
          prop: 'state_name',
          label: '状态',
          customFn:(row)=>{
            if(row.state_name == '已上架'){
              return (<div style="color: green">{row.state_name}</div>)
            }else{
              return (<div style="color: red">{row.state_name}</div>)
            }
          }
        }
      ],

      types:[],//板块
      merchants:[],//商户选择
      merchantSelect:{
        pageIndex:1,
        pageSize:10
      }
    }
  },
  methods: {
    pageSizeChange(e){
      this.select.pageSize=e;
this.searchProducts();
    },

    searchProducts(){

        this.select.pageIndex = 1
        this.getProducts()
    },
    pageChange(e){
      this.select.pageIndex = e
      this.getProducts()
    },

    stateChange(row){
      toggleActive({id:row.id}).then(res => {
        row.state_name = row.state_name == '已上架' ? '已下架' : '已上架'
      })
    },
    deleteProduct(row){
      destroy({id:row.id}).then(res => {
        Message({
          type:'success',
          message:'删除成功'
        })
        this.getProducts()
      })
    },
    editorShow(id,type){
      this.$refs['addProduct'].type = type;
      this.$refs['addProduct'].id = id;
      this.$refs['addProduct'].isShow = true;
    },

    async getProducts(){
      const res = await index({
        page_size:this.select.pageSize,
        page:this.select.pageIndex,
        name:this.select.name,
        merchant_id:this.select.merchantId,
        product_type_id:this.select.productTypeId,
        state:this.select.state
      })
      this.total = res.total
      this.list = res.rows
    },

    async getTypes(){
      const res = await typeIndex()
      let hasChild = (array) => {
        array.map(item => {
          if(item.children.length > 0){
            hasChild(item.children)
          }else{
            item.children = ''
          }
        })
      }
      hasChild(res)
      this.types = res
    },
    async getMerchant(){
      const res = await merchantIndex({
        page:this.merchantSelect.pageIndex,
        page_size:this.merchantSelect.pageSize
      },false)
      if(res.data.length == 0){
        this.$Message.info({
          content:'没有更多商户了',
          duration:1
        })
        this.merchantSelect.pageIndex --
      }
      this.merchants.push(...res.data)
    },
    loadMoreMerchant(){
      this.merchantSelect.pageIndex++
      this.getMerchant()
    }
  },
  mounted() {
    this.getTypes()
    this.getMerchant()
    this.getProducts()
  }
}
</script>

<style scoped lang="scss">
.select-content-item{
  display: flex;
  align-items: center;

  margin-bottom: 10px;
  &-label{
    width: 110px;

    padding: 0 20px;
  }
}
.selector{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  &-item{
    display: flex;
    align-items: center;

    margin-top: 6px;
    margin-right: 10px;

    &__label{
      word-break: keep-all;
    }
  }
}

::v-deep .ivu-select-dropdown{
}
::v-deep .ivu-scroll-container{
  height: 180px !important;
  &::after{
    content: '加载更多..';
    text-align: center;
    font-size: 10px;
    color: rgb(160,160,160);
    background: #fff;
    zoom: 0.8;

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
</style>
