<template>
  <el-card class="send-log-container">
    <div class="top">
      <el-select
        v-model="status"
        placeholder="请选择发送状态"
        size="medium"
        clearable
        style="width: 200px;margin-right:20px"
      >
        <el-option v-for="item in statusArr" :key="item.key" :label="item.label" :value="item.key"/>
      </el-select>
      <el-button type="primary" size="medium" v-show="status===0&&tableData.length" @click="sendHandle(0)">批量发送</el-button>
      <el-input 
        v-model="Keywords" 
        placeholder="请输入邮箱" 
        prefix-icon="el-icon-search"
        size="medium"
        @input="()=>{page_no = 1;getLogList();}"
        clearable
      />
    </div>

     <el-table
				border
				:data="tableData"
				v-loading="listLoading"
				element-loading-text="加载中..."
				style="margin-top: 40px"
			>
				<el-table-column
					v-for="item in tableColums"
					:key="item.label"
					:label="item.label"
					:width="item.widthsty"
					:min-width="item.minwidthsty"
					:sortable="item.sortable"
					align="center"
					:prop="item.key"
				>
					<template slot-scope="{row}">
							<div v-if="item.key==='SendStatus'">
                <span :class="statusMap[row.SendStatus].className">{{statusMap[row.SendStatus].name}}</span>
                <el-button type="primary" size="mini" v-if="row.SendStatus===0" @click="sendHandle(row.SendId)">重新发送</el-button>
              </div>

              <div v-else-if="item.key==='Source'">{{row[item.key]===1?'阿里云':'腾讯云'}}</div>

							<span v-else>{{ row[item.key] || '' }}</span>
						</template>
				</el-table-column>
				<div slot="empty" style="padding: 100px 0">
					<img src="~@/assets/img/cus_m/nodata.png" alt="" style="display:block;width:128px;height:128px;margin: 0 auto;">
					<span>暂无日志</span>
				</div>
			</el-table>

      <el-col :span="24" class="toolbar">
        <m-page
					:page_no="page_no"
					:pageSize="10"
					:total="total"
					@handleCurrentChange="pageChange"
				/>
      </el-col>
  </el-card>
</template>

<script>
import mPage from '@/components/mPage.vue'
import { logInterface } from '@/api/modules/reportEnApi'
export default {
  components: { mPage },
  data() {
    return {
      status: '',
      Keywords:'',
      report_id: this.$route.query.id,
      statusArr: [
        { label: '失败',key:0 },
        { label: '成功',key:1 },
        { label: '已发送',key:-1 },
      ],

      statusMap: {
        1: { name: '发送成功',className: 'successty' },
        '0': { name: '发送失败',className: 'deletesty' },
        '-1': { name: '已发送',className: 'warnsty' },
      },

      listLoading: false,
      tableData: [],
      page_no: 1,
      total: 0,
      tableColums:[
        {
					label: '发送状态',
					key: 'SendStatus'
				},
        {
					label: '发件邮箱类型',
					key: 'Source'
				},
        {
					label: '收件地址',
					key: 'Email'
				},
        {
					label: '详情',
					key: 'ResultMsg'
				},
        {
					label: '创建时间',
					key: 'CreateTime'
				},
      ],
    }
  },

  watch: {
    status() {
      this.page_no = 1;
      this.getLogList()
    }
  },

  methods: {
    getLogList() {
      this.listLoading = true;
      let params = {
        CurrentIndex: this.page_no,
        PageSize: 10,
        ReportId: Number(this.report_id),
        SendStatus: this.status,
        Keywords:this.Keywords,
        ReportType:this.$route.query.type?Number(this.$route.query.type):0
      }
			logInterface.logList(params).then(res => {
        if( res.Ret!==200 )return

        const { Data } = res;
        this.tableData = Data.List || [];
        this.total=parseInt(Data.Paging.Totals);
        this.listLoading = false;
			});
    },

    pageChange(page) {
      this.page_no = page;
      this.getLogList();
    },

    /* 发送  */
    sendHandle(SendId=0)  {
      logInterface.resend({
        SendId,
        ReportId: Number(this.report_id)
      }).then(res => {
        if(res.Ret !== 200) return
        this.$message.success(res.Msg);

        this.getLogList();
      })
    }

  },

  mounted() {
    this.getLogList();
  }
}
</script>

<style lang="scss" scoped>
.send-log-container {
  min-height: calc(100vh - 120px);
  .top{
      display: flex;
      justify-content: flex-start;
      .el-input{
        margin-left: auto;
        width: 275px;
      }
  }
}
</style>