<template>
 <div>
    <el-form class="dm-form__wrap" ref="form" :model="messageInfo" label-width="90px">
      <h3 class="dm-title__label">基本信息</h3>
      <el-row :gutter="20" class="message-detail__label">
          <el-col :span="8">
            <span class="primary-font-color">发送时间：</span>
            <span class="regular-font-color">{{formateDateTimeByType(messageInfo.sendTime,'yyyy-MM-dd-HH-mm-ss')}}</span>
          </el-col>
          <el-col :span="8">
            <span class="primary-font-color">发送人数：</span>
            <span class="regular-font-color">{{messageInfo.sendCount}}</span>
          </el-col>
          <el-col :span="8">
            <span class="primary-font-color">发送条数：</span>
            <span class="regular-font-color">{{messageInfo.countNum}}</span>
          </el-col>
          <el-col :span="8">
            <span class="primary-font-color">模板名称：</span>
            <span class="regular-font-color">{{messageInfo.templateName}}(ID:{{messageInfo.templateId}})</span>
          </el-col>
          <el-col :span="8">
            <span class="primary-font-color">模板类型：</span>
            <span class="regular-font-color">{{messageInfo.sendType===0?'普通短信':'营销短信'}}</span>
          </el-col>
          <el-col :span="8">
            <span class="primary-font-color">营销场景：</span>
            <span class="regular-font-color">{{messageInfo.sceneSettingName}}</span>
          </el-col>
          <el-col :span="24">
            <span class="primary-font-color">短信模板：</span>
            <span class="regular-font-color" style="max-width: 100%;overflow: auto;line-height:2;">{{messageInfo.templateContent}}</span>
          </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 icon="iconfont icon-icon_yunxiazai fz14" type="primary" class="fr"  @click="exportExcel"> 下载Excel</el-button>
      </div>
      <el-table tooltipEffect="light" :data="messageList" style="width: 100%" v-loading="messageLoading">
          <el-table-column min-width="150"  align="left" label="会员信息">
            <template slot-scope="scope">
              <div class="sms-table_info">
                <img class="table__avatar--40 vertical-middle" :src="scope.row.thirdImgUrl" alt="" srcset="">
                <div class="inline-block vertical-middle">
                  <p class="table-name--ellipsis">{{scope.row.memberName}}</p>
                  <p class="fz13 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 :min-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="false" :min-width="150"  align="left" label="短信内容" prop="remark">
            <template slot-scope="scope">
              <el-popover class="item" trigger="hover" width="300" v-if="scope.row.remark.length>10" :content="scope.row.remark" placement="top-start">
                <span slot="reference" class="ellipsis">{{scope.row.remark}}</span>
              </el-popover>
              <span v-else>{{scope.row.remark}}</span>
            </template>

          </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 {
        formateDateTimeByType,
        messageInfo:{},
        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',minWidth:'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:this.$route.params.id,
          memberName:'',
          currentPage:1,
          pageSize:20
        },
        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.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.messageInfo = 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;
        })
      }
    }
  };
</script>


<style lang="scss" scoped>
.message-detail__label {
  /deep/ .el-col {
    margin: 0 0 16px;
    line-height: 22px;
  }
}
</style>
