<template>
  <div>
    <el-form class="dm-form__wrap" ref="form" :model="info" 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">{{ formatDateTimeByType(info.createTime, 'yyyy-MM-dd-HH-mm-ss') }}</span>
        </el-col>
        <el-col :span="16">
          <span class="primary-font-color">导入条数：</span>
          <span class="regular-font-color">{{ info.importCount }}</span>
        </el-col>
        <el-col :span="8">
          <span class="primary-font-color">发送时间：</span>
          <span class="regular-font-color">{{ formatDateTimeByType(info.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">{{ info.sendCount }}</span>
        </el-col>
        <el-col :span="8">
          <span class="primary-font-color">计费条数：</span>
          <span class="regular-font-color">{{ info.totalFeeNum }}</span>
        </el-col>
        <el-col :span="8">
          <span class="primary-font-color">模板名称：</span>
          <span class="regular-font-color">{{ info.smsTitle }}</span>
          <!-- (ID:{{ info.gicSmsTemplateId }}) -->
        </el-col>
        <el-col :span="8">
          <span class="primary-font-color">模板类型：</span>
          <span class="regular-font-color">{{ info.sendType === 0 ? '普通短信' : '营销短信' }}</span>
        </el-col>
        <!-- <el-col :span="8">
          <span class="primary-font-color">营销场景：</span>
          <span class="regular-font-color">{{ info.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;">{{ info.smsContent }}</span>
        </el-col>
      </el-row>
    </el-form>
    <section class="dm-form__wrap">
      <h3 class="dm-title__label">
        提交记录
        <div class="layout--tips" style="margin-top:0;width:400px;display:inline-block;margin-left:20px">
          <i class="el-icon-info"></i>
          当天的短信提交记录数据可在隔天下载完整内容
        </div>
      </h3>
      <div class="clearfix pb22">
        <!-- <el-select class="dm-select" v-model="listParams.sendStatus" placeholder="选择发送状态" @change="smsSmportPlanLogPage"> <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.search" class="w200" placeholder="客户昵称/手机号/卡号" clearable @change="smsSmportPlanLogPage"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
        <el-select class="dm-select" v-model="listParams.sendStatus" placeholder="全部提交状态" @change="smsSmportPlanLogPage" clearable> <el-option v-for="(v, i) in sendStatusOptions" :key="i" :label="v.label" :value="v.value"></el-option></el-select>
        <el-button icon="iconfont icon-icon_yunxiazai fz14" type="primary" class="fr" v-if="$getButtonLimit($buttonCode.marketingMessageImportDownload)" :limit-code="$buttonCode.marketingMessageImportDownload" @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="filterAvatar(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">
          <template slot-scope="{ row }">
            <div v-if="v.formatter" v-html="v.formatter(row)"></div>
            <span v-else>{{ row[v.prop] || '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column :min-width="80" align="left" label="错误信息" prop="errorMsg" show-overflow-tooltip>
          <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 style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%" v-else type="text" @click="errorCodeShow = true">{{ scope.row.errorMsg }}</el-button> -->
            <span style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%" v-else type="text">{{ scope.row.errorMsg }}</span>
          </template>
        </el-table-column>
        <el-table-column :min-width="100" align="left" label="上报时间" prop="backTime">
          <template slot-scope="scope">
            <p v-if="scope.row.backTime" class="cell-time">
              {{ formatDateTimeByType(scope.row.backTime, 'yyyy-MM-dd-HH-mm-ss', true).y }}<br /><span>{{ formatDateTimeByType(scope.row.backTime, 'yyyy-MM-dd-HH-mm-ss', true).h }}</span>
            </p>
            <span v-else>--</span>
          </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 && 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>
      <dm-pagination hide-on-single-page v-show="messageList.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></dm-pagination>
    </section>
    <error-code-dialog :show.sync="errorCodeShow"></error-code-dialog>
    <vue-gic-export-excel :dialogVisible.sync="dialogVisible" :dataArr="messageList" :type="2" :excelUrl="excelUrl" :params="params" :projectName="projectName"></vue-gic-export-excel>
  </div>
</template>
<script>
// import { getSmsImportPlanDetail, saveImportSmsPlan, importSmsSendPhone, downloadOImportSmsTemp } from '@/service/api/messageApi.js';
import { getSmsImportPlanDetail, smsSmportPlanLogPage, exportSmsImportPlanLog } from '@/service/api/messageApi.js';
import { formatDateTimeByType } from '@/utils/index.js';
import errorCodeDialog from './errorCode';
import filterAvatar from '@/mixins/filterAvater.js';
export default {
  mixins: [filterAvatar],
  data() {
    return {
      formatDateTimeByType,
      info: {
        searchParams: '',
        memberType: 0
      },
      messageList: [],
      messageLoading: false,
      messageHeader: [
        { label: '手机号码', prop: 'telephone', minWidth: '120', align: 'left' },
        {
          label: '提交状态',
          prop: 'sendStatus',
          minWidth: '80',
          align: 'left',
          formatter: function(row) {
            let status = row.sendStatus * 1;
            let statucClass;
            let text;
            switch (status) {
              case 0:
                statucClass = 'dm-status--success';
                text = '提交成功';
                break;
              case 1:
                statucClass = 'dm-status--info';
                text = '未提交';
                break;
              default:
                statucClass = 'dm-status--error';
                text = '提交失败';
                break;
            }
            return `<span class='${statucClass}'><span class="vertical-middle">${text}</span></span>`;
          }
        },
        {
          label: '回执状态',
          prop: 'backStatus',
          minWidth: '80',
          align: 'left',
          formatter: function(row) {
            // eslint-disable-next-line
            return row.backStatus === 0 && row.backTime === null ? '--' : (row.backStatus ? '接收成功' : '接收失败')
          }
        }
      ],
      listParams: {
        sendStatus: '', // 0成功，1未发送，2失败
        smsImportPlanId: this.$route.params.id,
        search: '',
        currentPage: 1,
        pageSize: 20
      },
      total: 0,
      sendStatusOptions: [{ value: 0, label: '提交成功' }, { value: 1, label: '未提交' }, { value: 2, label: '提交失败' }], // eslint-disable-line
      errorCodeShow: false,
      // 人群筛选器可传参数
      sceneValue: '', // 场景值
      projectName: 'marketing', // 当前项目名
      dialogVisible: false,
      excelUrl: '', // 下载数据的地址
      params: {} // 传递的参数
    };
  },
  created() {
    this.$store.commit('mutations_breadcrumb', [{ name: '营销管理', path: '' }, { name: '短信营销', path: '/message' }, { name: '导入发送列表', path: '/message/import-send' }, { name: '导入发送详情', path: '' }]); // eslint-disable-line
    this.getSmsImportPlanDetail(this.$route.params.id);
    this.smsSmportPlanLogPage();
  },
  computed: {
    asideShow() {
      return this.$store.state.marketing.asideShow;
    }
  },
  components: {
    errorCodeDialog
  },
  methods: {
    async getSmsImportPlanDetail(id) {
      let params = { smsImportPlanId: id };
      let res = await getSmsImportPlanDetail(params);
      this.info = res.result || {};
    },
    async smsSmportPlanLogPage() {
      this.messageLoading = true;
      let res = await smsSmportPlanLogPage(this.listParams);
      this.messageList = res.result.result || [];
      this.total = res.result.totalCount;
      this.messageLoading = false;
    },
    handleSizeChange(val) {
      this.listParams.pageSize = val;
      this.smsSmportPlanLogPage();
    },
    handleCurrentChange(val) {
      this.listParams.currentPage = val;
      this.smsSmportPlanLogPage();
    },
    exportExcel() {
      this.dialogVisible = true;
      this.excelUrl = exportSmsImportPlanLog;
      this.params = {
        smsImportPlanId: this.listParams.smsImportPlanId,
        sendStatus: this.listParams.sendStatus,
        search: this.listParams.search,
        requestProject: 'marketing'
      };
    }
  }
};
</script>

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