<template>
  <section class="dm-wrap">
    <div class="pb22 clearfix">
      <el-select class="dm-select" clearable="" v-model="listParams.effectType" placeholder="选择时效" @change="search">
          <el-option v-for="(v,i) in effectTypeOption" :key="i" :label="v.label" :value="v.value"></el-option>
      </el-select>
      <el-select class="dm-select" clearable v-model="listParams.marketingType" placeholder="选择营销方式" @change="search">
          <el-option v-for="(v,i) in marketingTypeOptions" :key="i" :label="v.label" :value="v.value"></el-option>
      </el-select>
      <el-select class="dm-select" clearable v-model="listParams.sceneSettingId" placeholder="选择营销场景" @change="search">
        <el-option v-for="item in sceneSettingIdOptions" :key="item.sceneSettingId" :label="item.sceneName" :value="item.sceneSettingId"></el-option>
      </el-select>
      <el-input v-model="listParams.searchName" class="w200" placeholder="输入计划名称" clearable @change="search"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
      <el-button class="fr" type="primary" @click="$router.push('/ecm/add')">新建计划</el-button>
    </div>
    <el-table tooltipEffect="light" :data="tableList" style="width: 100%" v-loading="loading" element-loading-text="拼命加载中" >
      <el-table-column v-for="(v,i) in tableHeader" :fixed="v.fixed" :show-overflow-tooltip="v.tooltip" :width="v.width" :min-width="v.minWidth" :align="v.align" :key="i" :prop="v.prop" :label="v.label" :formatter="v.formatter"></el-table-column>
      <el-table-column label="状态" align="left" min-width="150px" prop="planInfo">
        <template slot-scope="scope" >
          <span type="text" >{{scope.row.planInfo || '--'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="left" width="120px" fixed="right">
        <template slot-scope="scope" >
          <el-button type="text" @click="editData(scope.row)">编辑</el-button>
          <dm-delete v-if="scope.row.putonStatus !== 2" @confirm="delData(scope.row)" tips="是否删除该计划?">
            <el-button type="text">删除</el-button>
          </dm-delete>
        </template>
      </el-table-column>

    </el-table>
    <el-pagination v-show="tableList.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></el-pagination>
  </section>
</template>
<script>
import {loadEcmList,deleteEcm} from '@/service/api/ecmApi.js';
import {sceneSettingList} from '@/service/api/commonApi.js';
const marketingTypeOptions = [{value:'',label:'所有发送类型'},{value:'card',label:'卡券营销'} ,{value:'message',label:'短信营销'} ,{value:'teletext',label:'图文营销'},{value:'text',label:'文本营销'},{value:'teltask',label:'话务'},{value:'image',label:'微信图片'}];
export default {
    name: 'ecm',
    data () {
      return {
        effectTypeOption:[{value:-1,label:'所有时效'},{value:0,label:'实时'},{value:1,label:'定时'}],
        sceneSettingIdOptions:[],
        marketingTypeOptions,
        listParams:{
            effectType:-1,
            marketingType:'',
            sceneSettingId:'',
            searchName:'',
            currentPage:1,
            pageSize:20
        },
        total:0,
        loading:false,
        tableHeader:[
          {label:'计划名称',prop:'ecmPlanName',minWidth:'120',align:'left',fixed:'left'},
          {label:'时效',prop:'effectType',width:'120',align:'left',formatter:function(row){
            return row.effectType?('每天'+row.effectTime+':00'):'实时'
          }},
          {label:'营销方式',prop:'marketingType',width:'120',align:'left',formatter:function(row){
            let result = '';
            marketingTypeOptions.forEach(v => {
              if (v.value === row.marketingType) {
                result = v.label
              }
            })
            return result;
          }},
          {label:'营销场景',prop:'sceneSettingName',width:'100',align:'left'},
          {label:'营销人次',prop:'timesForPeople',width:'80',align:'left'}
        ],
        tableList:[]
      }
    },
    created() {
      this.loadEcmList();
      this.sceneSettingList();
      this.$store.commit('aside_handler',false);
      this.$store.commit('mutations_breadcrumb',[{name:'营销管理',path:''},{name:'智能营销',path:'/ecm'}]);
    },
    methods: {
      search() {
        this.listParams.currentPage = 1;
        this.loadEcmList();
      },
      handleSizeChange(val) {
        this.listParams.pageSize = val;
        this.loadEcmList();
      },
      handleCurrentChange(val) {
        this.listParams.currentPage = val;
        this.loadEcmList();
      },
      async loadEcmList() {
        this.loading = true;
        let res = await loadEcmList(this.listParams);
        console.log(res)
        this.tableList = res.result.result || [];
        this.total = res.result.totalCount;
        this.loading = false;
      },
      //编辑
      editData(row){
        this.$router.push('/ecm/edit/'+row.ecmPlanId)
      },
      async delData(row){
        try {
          let res = await deleteEcm({ecmPlanId:row.ecmPlanId});
          if (res.errorCode === 0) {
            this.$tips({type: 'success',message: '删除成功!'});
            this.loadEcmList();
          } else {
            this.$tips({type: 'error',message: res.message || '删除失败!'});
          }
        } catch (err) {
          this.$tips({type: 'error',message: '删除失败!'});
        }
      },
      async sceneSettingList() {
        let res = await sceneSettingList();
        this.sceneSettingIdOptions = res.result;
        this.sceneSettingIdOptions.unshift({sceneName:'所有营销场景',sceneSettingId:''})
      }
    }
}
</script>

