<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 clearable v-model="select.keywords" style="width: 200px; margin-right: 10px" placeholder="关键字搜索" />
            <xy-selectors @search="getClubProduct">
              <template v-slot:selected>
                <div style="display: flex;padding: 0 0 10px 20px;">
                  <span style="padding-right: 6px">当前搜索条件：</span>
                  <div v-if="select.confinementServices">
                    <el-tag effect="light" size="small" closable @close="select.confinementServices = ''">
                      {{select.confinementServices.name}}
                    </el-tag>,
                  </div>
                  <div v-if="select.state === 0 || select.state === 1">
                    <el-tag effect="light" size="small" closable @close="select.state = ''">
                      {{select.state === 0 ? '有效' : '无效'}}
                    </el-tag>
                  </div>
                </div>
              </template>

              <template>
                <div class="select-content-item">
                  <div class="select-content-item-label">
                    所属会所
                  </div>
                  <div>
                    <el-select size="small" clearable :value="select.confinementServices ? select.confinementServices.name : ''" style="width: 220px;" placeholder="请选择所属月子会所" @change="e => select.confinementServices = e">
                      <Scroll :on-reach-bottom="loadMoreClub">
                        <el-option v-for="item in clubs" :value="item" :key="item.id" :label="item.name">
                        </el-option>
                      </Scroll>
                    </el-select>
                  </div>
                </div>

                <div class="select-content-item">
                  <div class="select-content-item-label">
                    状态
                  </div>
                  <div>
                    <el-radio v-model="select.state" :label="0">未启用</el-radio>
                    <el-radio v-model="select.state" :label="1">启用</el-radio>
                    <el-radio v-model="select.state" label="">全部</el-radio>
                  </div>
                </div>
              </template>
            </xy-selectors>

            <Button type="primary" @click="getClubProduct">查询</Button>
            <Button type="primary" style="margin-left: 10px" @click="$refs['addClubProduct'].type = 'add',$refs['addClubProduct'].isShow = true">新增</Button>
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table
      :total="total"
      :list="list"
      :table-item="table"
      @pageSizeChange="e => select.pageSize = e"
      @pageIndexChange="pageChange">
      <template v-slot:btns>
        <el-table-column fixed="right" label="操作" :width="130" align="left" header-align="center">
          <template slot-scope="scope">
            <Poptip trigger="hover" transfer placement="bottom">
              <Button ghost size="small" type="primary" style="margin: 0 6px 4px 0">编辑</Button>

              <div slot="content" style="display:flex;flex-direction: column">
                <Button size="small" type="primary" @click="editorClick(scope.row)" style="margin: 0 6px 4px 0">产品编辑</Button>
                <Button size="small" type="primary"  style="margin: 0 6px 4px 0" @click="comboClick(scope.row)">产品套餐</Button>
                <Button size="small" type="primary"  style="margin: 0 6px 4px 0" @click="picClick(scope.row)">产品图片</Button>
              </div>
            </Poptip>

            <Poptip confirm transfer title="确认要删除吗" @on-ok="destroyProduct(scope.row)">
              <Button ghost size="small" type="primary" style="margin: 0 6px 4px 0">删除</Button>
            </Poptip>
          </template>
        </el-table-column>
      </template>
    </xy-table>

    <addClubProduct ref="addClubProduct" @refresh="getClubProduct"></addClubProduct>
    <addProductCombo ref="addProductCombo"></addProductCombo>
    <addProductPic ref="addProductPic"></addProductPic>
  </div>
</template>

<script>
import {index,destroy} from '@/api/clubProduct'
import { parseTime } from '@/utils'
import { Message } from 'element-ui'

import addClubProduct from '@/views/productService/components/confinement/addClubProduct'
import addProductCombo from '@/views/productService/components/confinement/addProductCombo'
import addProductPic from '@/views/productService/components/confinement/addProductPic'
import { index as clubIndex } from '@/api/confinementClub'
export default {
  components:{
    addClubProduct,
    addProductCombo,
    addProductPic
  },
  data() {
    return {
      clubs:[],
      clubSelect:{
        pageSize:10,
        page:1
      },

      select:{
        page:1,
        pageSize:10,
        keywords:'',
        confinementServices:'',
        state:''
      },

      total:0,
      list:[],
      table:[
        {
          prop:'name',
          label:'名称',
          minWidth: 240,
          fixed:'left',
          align:'left'
        },
        {
          label:'所属会所',
          prop:'service.name',
          width: 220,
          align:'left'
        },
        {
          label:'产品信息',
          width: 300,
          align:'left',
          customFn:(row)=>{
            return (
              <div>
                <div>房间朝向：{row.room_orientation}</div>
                <div>房间面积：{row.room_area}(平方米)</div>
                <div>房间价格：{row.price}(元)</div>
              </div>
            )
          }
        },
        {
          label:'特色标签',
          width: 260,
          align:'left',
          prop:'featured_label',
          customFn:(row) => {
            return (
              <div>
                {
                  row.featured_label ?
                    row.featured_label?.split(',').map(item => {
                      return <el-tag type="border" style={{'margin':'0 6px 4px 0'}}>{item}</el-tag>
                    }) :  <div style={{'text-align':'center'}}>无</div>
                }
              </div>
            )
          }
        },
        {
          label:'排序',
          width: 150,
          prop:'sort_number'
        },
        {
          label:'提交人',
          width: 200,
          prop:'admin.name'
        },
        {
          label:'提交日期',
          prop:'created_at',
          width: 200,
          formatter:(cell,data,value)=>{
            return parseTime(new Date(value),'{y}-{m}-{d}')
          }
        }
      ]
    }
  },
  methods: {
    async getClubs(){
      const res = await clubIndex({
        page:this.clubSelect.page,
        page_size:this.clubSelect.pageSize,
      },false)
      if(res?.rows?.length === 0){
        this.$Message.info({
          content:'没有更多会所了',
          duration:1
        })
        this.clubSelect.page --
      }
      this.clubs.push(...res.rows)
    },
    loadMoreClub(){
      this.clubSelect.page ++
      this.getClubs()
    },

    pageChange(e){
      this.select.page = e
      this.getClubProduct()
    },

    async getClubProduct(){
      const res = await index({
        keyword:this.select.keywords,
        page:this.select.page,
        page_size:this.select.pageSize,
        confinement_services_id:this.select.confinementServices.id,
        state:this.select.state
      })
      this.total = res.total
      this.list = res.rows
      console.log(res)
    },

    destroyProduct(row){
      destroy({id:row.id}).then(res => {
        Message({
          type:'success',
          message:'删除月子产品成功'
        })
        this.getClubProduct()
      })
    },
    editorClick(row){
      this.$refs['addClubProduct'].type = 'editor'
      this.$refs['addClubProduct'].id = row.id
      this.$refs['addClubProduct'].isShow = true
    },
    comboClick(row){
      this.$refs['addProductCombo'].id = row.id
      this.$refs['addProductCombo'].isShow = true
    },
    picClick(row){
      this.$refs['addProductPic'].id = row.id
      this.$refs['addProductPic'].isShow = true
    }
  },
  mounted() {
    this.getClubProduct()
    this.getClubs()
  }

}
</script>

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

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

    padding: 0 20px;
  }
}

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

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