<template>
  <div style="padding: 0 20px">
    <div ref="lxHeader">
      <lx-header icon="md-apps" :text="pageTitle" 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">
<Button size="small" type="primary" @click="editorClick(scope.row)"
               style="margin: 0 6px 4px 0">编辑</Button>
            <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>

    <addCommonServiceProduct ref="addClubProduct" @refresh="getClubProduct"></addCommonServiceProduct>

  </div>
</template>

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

import addCommonServiceProduct from '@/views/productService/components/common/addCommonServiceProduct'

  import {
    index as clubIndex
  } from '@/api/productService/commonService'
  export default {
    components: {
      addCommonServiceProduct
    },
    data() {
      return {
        clubs: [],
        clubSelect: {
          pageSize: 10,
          page: 1,
          type: "maternity"
        },

        select: {
          page: 1,
          pageSize: 10,
          keywords: '',
          confinementServices: '',
          state: ''
        },
        pageTitle: "",
        total: 0,
        list: [],
        table: [{
            prop: 'name',
            label: '名称',
            minWidth: 240,
            fixed: 'left',
            align: 'left'
          },
          {
            label: '所属机构',
            prop: 'service.name',
            width: 220,
            align: 'left'
          },
          {
            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,
          type: this.clubSelect.type,
        }, false)
        if (res?.rows?.length === 0) {
          this.$Message.info({
            content: '没有更多机构了',
            duration: 1
          })
          this.clubSelect.page--
        }
        this.clubs.push(...res.data)
      },
      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,
          type:this.clubSelect.type,
        })
        this.total = res.total
        this.list = res.rows
      },

      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()
      this.pageTitle = this.$route.meta.title;
    }

  }
</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>
