<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" placeholder="关键词" clearable style="width: 200px;margin-right: 10px;"/>
            <Button type="primary"  @click="$refs['addAd'].isShow = true,$refs['addAd'].type = 'add'"  style="margin-right: 10px;">新增</Button>
            <Button type="primary" @click="getAds" style="margin-right: 10px;">搜索</Button>
            <xy-selectors @search="getAds" @reset="resetSelect">
              <template v-slot:selected>
                <div style="display: flex;padding: 0 0 10px 20px;">
                  <span style="padding-right: 6px">当前搜索条件：</span>
                  <div v-if="select.name">
                    <el-tag effect="light" size="small" closable @close="select.name = ''">
                      {{select.name}}
                    </el-tag>,
                  </div>
                  <div v-if="select.system">
                    <el-tag effect="light" size="small" closable @close="select.system = ''">
                      {{select.system.label}}
                    </el-tag>,
                  </div>
                  <div v-if="select.createDate[0] || select.createDate[1]">
                    <el-tag effect="light" size="small" closable @close="select.createDate = []">
                      {{select.createDate[0]}} - {{select.createDate[1]}}
                    </el-tag>,
                  </div>
                  <div v-if="select.isEffect === 0 || select.isEffect === 1">
                    <el-tag effect="light" size="small" closable @close="select.isEffect = ''">
                      {{select.isEffect === 0 ? '有效' : '无效'}}
                    </el-tag>
                  </div>
                </div>
              </template>

              <template>
                <div class="select-content-item">
                  <div class="select-content-item-label" style="display: flex;flex-wrap: wrap">
                    发布系统
                  </div>
                  <div>
                    <template v-for="(item,index) in systems">
                      <el-tag :effect="select.system.value == item.value ? 'dark' : 'plain'" @click="select.system = item">{{item.label}}</el-tag>
                    </template>
                  </div>
                </div>

                <div class="select-content-item">
                  <div class="select-content-item-label">
                    创建时间
                  </div>
                  <DatePicker :value="select.createDate" style="width: 220px;" transfer placeholder="选择创建日期" type="daterange" placement="bottom" @on-change="(e)=> select.createDate = e "></DatePicker>
                </div>

                <div class="select-content-item">
                  <div class="select-content-item-label">
                    是否有效
                  </div>
                  <div>
                    <el-radio v-model="select.isEffect" :label="1">有效</el-radio>
                    <el-radio v-model="select.isEffect" :label="0">无效</el-radio>
                    <el-radio v-model="select.isEffect" label="">全部</el-radio>
                  </div>
                </div>
              </template>
            </xy-selectors>
          </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>

<!--    <div style="display: flex;justify-content: flex-end;">-->
<!--      <Page :total="total" show-elevator @on-change="pageChange"/>-->
<!--    </div>-->

    <!--    新增-->
    <add-ad ref="addAd" :systems="systems" @refresh="getAds"></add-ad>
  </div>
</template>

<script>
import {index,destroy} from "@/api/ad"
import {getparameter} from '@/api/system/dictionary'
import {parseTime} from '@/utils'

import addAd from './components/addAd'
import { Message } from 'element-ui'
export default {
  components:{
    addAd
  },
  data() {
    return {
      systems:[],
      select:{
        pageSize:10,
        pageIndex:1,
        name:'',
        system:'',
        createDate:[],
        isEffect:''
      },

      total:0,
      list:[],
      table:[
        {
          label:'图片',
          sortable:false,
          width:260,
          align:'left',
          customFn:(row)=>{
            if(row.pic){
              return (<el-image style={{'height':'120px'}} src={row.pic} fit='scale-down'></el-image>)
            }else{
              return (<div>暂无图片</div>)
            }
          }
        },
        {
          label:'活动名称',
          sortable:false,
          width: 180,
          align:'left',
          prop:'name',
          fixed:'left'
        },
        {
          label:'发布系统',
          width: 180,
          prop:'origin_system_detail.value'
        },
        {
          label:'活动跳转',
          sortable:false,
          minWidth: 300,
          align:'left',
          prop:'action'
        },
        {
          label:'类型',
          width: 120,
          prop:'type',
          formatter:(cell,data,value)=>{
            switch (value){
              case 0:
                return '首页轮播图'
                break;
              case 1:
                return '商品轮播图'
                break;
              default:
                return '未知'
            }
          }
        },
        {
          label:'排序',
          width: 100,
          prop:'sort'
        },
        {
          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>{parseTime(new Date(row.valid_time_begin),'{y}-{m}-{d}')} ~ {parseTime(new Date(row.valid_time_over),'{y}-{m}-{d}')}</div>)
          }
        },
        {
          label:'创建人/创建时间',
          width: 220,
          customFn:(row)=>{
            return (<div>{row.admin.name} / {parseTime(new Date(row.created_at),'{y}-{m}-{d}')}</div>)
          }
        }
      ],
    }
  },
  methods: {
    test(){
      console.log(11)
    },
    //获取类型
    async getSystem(){
      let res = await getparameter({number:'system'})
      this.systems = res.detail.map(item => {
        return {
          label:item.value,
          value:item.id
        }
      })
    },
    async getAds(){
      const res = await index({
        name:this.select.name,
        origin_system:this.select.system.value,
        page_size:this.select.pageSize,
        create_begin:this.select.createDate[0],
        create_over:this.select.createDate[1],
        page:this.select.pageIndex,
        valid_time:this.select.isEffect,
      })
      this.list = res.data
      this.total = res.total
    },

    resetSelect(){
      this.select = {
        pageSize:10,
        pageIndex:1,
        name:'',
        system:'',
        createDate:[],
        effectiveDate:[]
      }
    },
    pageChange(e){
      this.select.pageIndex = e
      this.getAds()
    },

    editorShow(row){
      this.$refs['addAd'].type = 'editor'
      this.$refs['addAd'].id = row.id
      this.$refs['addAd'].isShow = true
    },
    deleteAd(row){
      destroy({id:row.id}).then(res => {
        Message({
          type:'success',
          message:'删除成功'
        })
        this.getAds()
      })
    }
  },
  mounted() {
    this.getSystem()
    this.getAds()
  }

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