<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 class="selector">
            <div class="selector-item">
              <div class="selector-item__label">关键词：</div>
              <Input v-model="select.keywords" clearable style="width: 100px;" placeholder="关键字搜索" />
            </div>
            <div class="selector-item">
              <div class="selector-item__label">手机号：</div>
              <Input v-model="select.member_phone" clearable style="width: 100px;" placeholder="手机号搜索" />
            </div>
            <div class="selector-item">
              <div class="selector-item__label">浏览时间：</div>
              <el-date-picker
                    v-model="dateRange"
                    @change='dateChange'
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
            </div>
            <div class="selector-item">
              <div class="selector-item__label">活动分类：</div>
              <Select multiple filterable clearable v-model="select.active_type_id" style="" placeholder="选择活动搜索">
                <Option v-for="item in activeList" :value="item.id">{{item.name}}</Option>
              </Select>
            </div>
           <div class="selector-item">
              <div class="selector-item__label">产品分类：</div>
              <el-cascader ref="typeCas" style="margin-left:10px;width:400px" v-model="typeCas" :options="options"
                :props="props" @change="changeType" @remove-tag="removeType" clearable></el-cascader>
              <!-- <Select filterable clearable v-model="select.product_type_id" style="" placeholder="选择产品搜索">
                <Option v-for="item in productList" :value="item.id">{{item.name}}</Option>
              </Select> -->
            </div>
            <div class="selector-item">
              <el-checkbox v-model="select.product_more">多次浏览产品</el-checkbox>
            </div>
            <div class="selector-item">
              <el-checkbox v-model="select.active_more">多次浏览活动</el-checkbox>
            </div>
            <div class="selector-item">
              <Button type="primary" @click="doSearch">查询</Button>
            </div>
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table :total="total" @pageSizeChange="pageSizeChange" @pageIndexChange="pageChange" :list="list"
      :table-item="table">
      <template slot="btns">
        <div></div>
      </template>

      </xy-table>

  </div>
</template>

<script>
  import {
    activeIndex
  } from '@/api/member'
  import {
    index as activeList
  } from '@/api/activityType'
  import {
    index as getType
  } from "@/api/type"
  import {
    Message
  } from 'element-ui'
  import {
    parseTime
  } from "@/utils"
  export default {
    components: {
    },
    data() {
      return {
        select: {
          pageSize: 10,
          pageIndex: 1,
          keywords: "",
          active_type_id: [],
          product_type_id: [],
          product_more: false,
          active_more:'',
          member_phone:'',
          create_time:'',
          over_time:'',
          browse:1,
        },
        dateRange:[],
        activeList:[],
        typeCas:[],
        options: [],
        props: {
          value: 'id',
          label: 'name',
          multiple: true,
          checkStrictly: true
        },
        total: 0,
        list: [],
        table: [{
            prop: 'name',
            label: '姓名',
            width: 180,
            sortable: false,
            fixed: 'left',
            // customFn: (row) => {
            //   return (<div>{row.name?row.name:(row.wechat_nickname?row.wechat_nickname:'')}</div> )
            //   }
          },
          {
            prop: 'phone',
            label: '电话',
            width: 220
          },
          {
            prop: 'products',
            label: '浏览产品',
            width: 480,
            align:'left',
            customFn:(row)=>{
              if(row.products.length>0){
                return row.products.map((k,index)=> {
                      return(<div><span style={{'color':'red'}}>{k.product_count}次-</span>
                        {k.product?k.product.name:''}
                      </div>)
                })
              }

            }
          },
          {
            prop: 'actives',
            label: '浏览活动',
            width: 480,
            align:'left',
            customFn:(row)=>{
              if(row.actives.length>0){
                return row.actives.map((k,index)=> {
                      return(<div style={{textAlign:'left'}}><span  style={{color:'red'}}>{k.active_count}次-</span>
                        {k.active?k.active.active_name:''}
                      </div>)
                })
              }
            }
          },
          {
            prop: 'due_date',
            label: '预产期',
            width: 200
          },
          {
            prop: 'area',
            label: '所属区域',
            width: 160,
          },
          {
            prop: 'address',
            label: '住址',
            align: 'left',
            minWidth: 300
          },
          {
            prop: 'hospital',
            label: '建卡医院',
            width: 200
          },
          {
            prop: 'promotion',
            label: '推广人员',
            width: 140,
            customFn: (row) => {
              return ( < Tag color = {
                  row.promotion == 1 ? 'success' : 'error'
                } > {
                  row.promotion == 1 ? '是' : '否'
                } </Tag>)
              }
            },
            {
              prop: 'created_at',
              label: '注册日期',
              width: 200,
              fixed:'right',
              formatter: (cell, data, value) => {
                return parseTime(new Date(value), '{y}-{m}-{d}')
              }
            }
          ]
        }
      },
      methods: {
          dateChange(e){
            if(e){
              this.select.create_time = this.dateRange[0]
              this.select.over_time = this.dateRange[1]
            }else{
              this.select.create_time = ''
              this.select.over_time = ''
            }
          },

          pageSizeChange(e) {

            this.select.pageSize = e
            this.doSearch();
          },
          doSearch() {
            this.select.pageIndex = 1
            this.getMembers()
          },
          pageChange(e) {
            this.select.pageIndex = e
            this.getMembers()
          },
          async getActive(){
            const res = await activeList({
              page:1,
              page_size:999
            })
            this.activeList = res
          },
          async getTypes() {
            const res = await getType()
            this.options = res
          },
          changeType(e) {
            let _arr = this.$refs.typeCas.getCheckedNodes()
            let _data = []
            for(var k of _arr){
                _data.push(k.value)
            }
            const result = Array.from(new Set(_data))
            this.select.product_type_id = result
          },
          removeType(e) {
            this.$nextTick(()=>{
              let _arr = this.$refs.typeCas.getCheckedNodes()
              let _data = []
              for(var k of _arr){
                  _data.push(k.value)
              }
              const result = Array.from(new Set(_data))
              this.select.product_type_id = result
            })
          },
          async getMembers() {
            const res = await activeIndex({
              page_size: this.select.pageSize,
              page: this.select.pageIndex,
              keyword: this.select.keywords,
              active_type_id: this.select.active_type_id,
              product_type_id: this.select.product_type_id,
              product_more: this.select.product_more ? 1 : "",
             active_more: this.select.active_more ? 1 : "",
              create_time:this.select.create_time,
              over_time:this.select.over_time,
              member_phone:this.select.member_phone,
              browse:this.select.browse,
            })
            this.total = res.total
            this.list = res.data
          },
        },
        mounted() {
          this.getActive()
          this.getTypes()
          this.getMembers()
        },
        watch:{


        }

    }
</script>

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

    &-item {
      display: flex;
      align-items: center;
      align-content: center;

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

      &__label {
        word-break: keep-all;
      }
    }
  }
  .el-range-editor.el-input__inner{
    height:32px;
    width:250px;
  }
  .el-date-editor{
    ::v-deep .el-range__icon{
      line-height: 26px!important;
    }
    ::v-deep .el-range-separator{
      line-height: 26px!important;
    }
    ::v-deep .el-range__close-icon{
      line-height: 26px!important;
    }
  }
</style>
