<template>
 <div>
    <el-form class="dm-form__wrap" ref="form" :model="dialogData" label-width="90px">
      <h3 class="dm-title__label">基本信息</h3>
      <el-row>
        <el-col :span="8">
          <el-form-item label="发送时间：">
            <span class="primary-font-color fz13" >{{dialogData.sendTime | dateFormat}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发送人数：">
            <span class="primary-font-color fz13" >{{dialogData.sendCount}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发送条数：">
            <span class="primary-font-color fz13" >{{dialogData.sendSuccess}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="模板名称：">
            <span class="primary-font-color fz13" >{{dialogData.templateName}}(ID:{{dialogData.templateId}})</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="模板类型：">
            <span class="primary-font-color fz13" >{{dialogData.sendType===0?'普通短信':'营销短信'}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="营销场景：">
            <span class="primary-font-color fz13" >{{dialogData.sceneSettingName}}</span>
          </el-form-item>
        </el-col>
          <el-col :span="24">
          <el-form-item label="短信模板：">
            <p class="primary-font-color fz13" style="max-width: 100%;overflow: auto;">{{dialogData.templateContent}}</p>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="dm-form__wrap">
      <div class="clearfix pb22">
        <el-select class="dm-select" v-model="listParams.sendStatus" placeholder="选择发送状态" @change="LoadMessageDetailList">
          <el-option v-for="(v,i) in sendStatusOptions" :key="i" :label="v.label" :value="v.value"></el-option></el-select>
        <el-input v-model="listParams.memberName" class="w200" placeholder="会员昵称/手机号/卡号" clearable @change="LoadMessageDetailList"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
        <el-button type="primary" class="fr"  @click="exportExcel">下载Excel <i class="iconfont icon-icon_yunxiazai fz14"></i></el-button>
      </div>
      <el-table tooltipEffect="light" :data="messageList" style="width: 100%" v-loading="messageLoading">
          <el-table-column :width="150"  align="left" label="会员信息">
            <template slot-scope="scope">
              <div class="sms-table_info">
                <img class="vertical-middle" :src="scope.row.thirdImgUrl" alt="" srcset="">
                <div class="inline-block vertical-middle">
                  <p class="fz14">{{scope.row.memberName}}</p>
                  <p class="fz12 gray">{{scope.row.nickname}}</p>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column v-for="(v,i) in messageHeader" :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 :width="80"  align="left" label="错误码" prop="errorMsg">
            <template slot-scope="scope">
                <span v-if="scope.row.errorMsg== -1">--</span>
                <span v-else-if="scope.row.backStatus=='--' && scope.row.sendStatus!==2">--</span>
                <el-button v-else type="text" @click="errorCodeShow = true">{{scope.row.errorMsg}}</el-button>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" :min-width="150"  align="left" label="短信内容" prop="remark"></el-table-column>
      </el-table>
      <el-pagination v-show="messageList.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>
    </div>
    <error-code-dialog :show.sync="errorCodeShow"></error-code-dialog>
  </div>
</template>
<script>
import {LoadMessageDetail,LoadMessageDetailList,exportSmsExcel,url} from '@/service/api/messageApi.js';
import {formateDateTimeByType} from '@/utils/index.js'
import errorCodeDialog from './errorCode'
  export default {
    data() {
      return {
            dialogData:{},
            messageList:[],
            messageLoading:false,
            messageHeader:[
                {label:'手机号码',prop:'telephone',width:'120',align:'left'},
                {label:'回执状态',prop:'sendStatus',width:'80',align:'left',formatter:function(row){
                  return row.sendStatus === 0 ? '成功':(row.sendStatus === 1 ? '未发送' : '失败')
                }},
                {label:'上报时间',prop:'backTime',width:'100', tooltip:true,align:'left',formatter:function(row){
                  return formateDateTimeByType(row.backTime,'yyyy-MM-dd-HH-mm-ss');
                }},
                {label:'发送状态',prop:'backStatus',width:'80',align:'left',formatter:function(row){
                  return row.backStatus === 0 ? '接收失败' : (row.backStatus?'接收成功' : '--')
                }}],
            listParams:{
              sendStatus:'',
              smsId:'',
              memberName:'',
              currentPage:1,	//是	Number	当前页面
              pageSize:20 //是	Number	每页显示条数
            },
            total:0,
            sendStatusOptions:[{value:'',label:'所有状态'},{value:0,label:'成功'},{value:1,label:'未发送'},{value:2,label:'失败'}],
            errorCodeShow:false
      };
    },
    created() {
      this.$store.commit('mutations_breadcrumb',[{name:'营销管理',path:''},{name:'短信营销',path:'/message'},{name:'短信群发',path:'/message/record'},{name:'短信群发详情',path:''}]);
      this.LoadMessageDetail(this.$route.params.id);
      this.listParams.smsId = this.$route.params.id;
      this.LoadMessageDetailList();
    },
    computed: {
      asideShow() {
        return this.$store.state.marketing.asideShow
      }
    },
    components:{
      errorCodeDialog
    },
    methods: {
      async LoadMessageDetail(id) {
          let params = {smsId:id}
          let res = await LoadMessageDetail(params);
          console.log(res)
          this.dialogData = res.result || {};
      },
      async LoadMessageDetailList() {
        this.messageLoading = true;
        let res = await LoadMessageDetailList(this.listParams);
        this.messageList = res.result.result || [];
        this.total = res.result.totalCount;
        this.messageLoading = false;
      },
      handleSizeChange(val) {
        this.listParams.pageSize = val;
        this.LoadMessageDetailList();
      },
      handleCurrentChange(val) {
        this.listParams.currentPage = val;
        this.LoadMessageDetailList();
      },
      exportExcel() {
        let data = {smsId:this.listParams.smsId,sendStatus:this.listParams.sendStatus,memberName:this.listParams.memberName}
        exportSmsExcel(data).then(res => {
          console.log(res);
          const fileName = res.result;
          const downLoadUrl = url + res.result;
          window.location = downLoadUrl;
        })
      }
    },
    filters: {
      dateFormat: function (value) {
        return formateDateTimeByType(value,'yyyy-MM-dd-HH-mm-ss');
      }
    }
  };
</script>
