<template>
  <div style="padding: 0 20px">
    <div ref="lxHeader">
      <lx-header :icon="routeIcon" :text="routeTitle" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <div slot="content"></div>
        <slot>
          <div style="display:flex;">
            <Input v-model="select.name" placeholder="关键词" clearable style="width: 200px;margin-right: 10px;"/>
            <Button type="primary"  @click="$refs['addForm'].isShow = true,$refs['addForm'].type = 'add'"  style="margin-right: 10px;">新增</Button>
            <Button type="primary" @click="serachList" style="margin-right: 10px;">搜索</Button>
           </div>
        </slot>
      </lx-header>
    </div>

    <xy-table
      :list="list"
      :table-item="table"
      :total="total"
      @pageSizeChange="e => select.pageSize = e"
      @pageIndexChange="pageChange"
      @editor="editorShow"
      @delete="deleteAd">

    </xy-table>

    <!--    新增-->
    <add ref="addForm" @refresh="getList"></add>
  </div>
</template>

<script>
import {index,destroy} from "@/api/marketing/service"
import {parseTime} from '@/utils'

import add from './components/addService.vue'
import { Message } from 'element-ui'
export default {
  components:{
    add
  },
  data() {
    return {
      routeTitle:"",
      routeIcon:"",
      select:{
        pageSize:10,
        pageIndex:1,
      },

      total:0,
      list:[],
      table:[
        {
          label:'微信',
          sortable:false,
          width:260,
          align:'left',
          customFn:(row)=>{
            if(row.wechat_code){
              return (<el-image style={{'height':'120px','width':'100%'}} src={row.wechat_code} fit='scale-down'></el-image>)
            }else{
              return (<div>暂无图片</div>)
            }
          }
        },
        {
          label:'姓名',
          sortable:false,
          width: 120,
          align:'left',
          prop:'name',
          fixed:'left'
        },
        {
          label:'昵称',
          sortable:false,
          width: 120,
          align:'left',
          prop:'nickname',
          fixed:'left'
        },
        {
          label:'电话',
          sortable:false,
          minWidth: 120,
          align:'left',
          prop:'link'
        },
        {
          label:'排序',
          width: 100,
          prop:'sort_number'
        },
        {
          label:'状态',
          width: 100,
          customFn:(row)=>{
            return (
              <div>
                <Tag color={row.state == 1 ? 'green' : 'blue'}>{row.state == 1 ? '启用' : '未启用'}</Tag>
              </div>
            )
          }
        },
        {
          label:'创建人/创建时间',
          width: 220,
          customFn:(row)=>{
            return (<div>{row.admin.name} / {parseTime(new Date(row.created_at),'{y}-{m}-{d}')}</div>)
          }
        }
      ],
    }
  },
  methods: {

    serachList(){
      this.resetSelect();
      this.getList();
    },
    async getList(){
      const res = await index({
        page_size:this.select.pageSize,
        page:this.select.pageIndex
      })
      this.list = res.data
      this.total = res.total
    },
    resetSelect(){
      this.select = {
        pageSize:10,
        pageIndex:1
      }
    },
    pageChange(e){
      this.select.pageIndex = e
      this.getList()
    },

    editorShow(row){
      this.$refs['addForm'].type = 'editor'
      this.$refs['addForm'].id = row.id
      this.$refs['addForm'].isShow = true
    },
    deleteAd(row){
      destroy({id:row.id}).then(res => {
        Message({
          type:'success',
          message:'删除成功'
        })
        this.getList()
      })
    }
  },
  mounted() {
    this.routeTitle=this.$route.meta.title;
    this.routeIcon=this.$route.meta.icon;
    this.getList()
  }

}
</script>

<style scoped lang="scss">
.selects {
  display: flex;
  flex-wrap: wrap;

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

    margin-top: 6px;
    &-label{
      white-space: nowrap;

      padding: 0px 6px;
    }
  }
}

.select-content-item{
  display: flex;
  align-items: center;

  margin-bottom: 10px;
  &-label{

    padding: 0 20px;
  }
}

$primaryColor: #bf617c;
::v-deep .ivu-alert-success{
  color:#fff;
  border-color: $primaryColor !important;
  background: rgba(213, 120, 145, 0.8) !important;

  margin: auto 0;
  margin-right: 10px;
}
::v-deep .ivu-icon-ios-close:before{
  color: #fff;
}
</style>
