<template>
  <div class="page-dialog">
    <div class="tables">
      <block-header :title="title"></block-header>
      <el-table
        border
        size="mini"
        :highlight-current-row="true"
        :header-row-class-name="headerStyle"
        :data="data"
        stripe
        style="width: 100%"
        :default-sort="{ prop: 'sendTime', order: 'descending' }"
      >
        <el-table-column
          align="center"
          prop="bizNo"
          width="160"
          label="ID/编号"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="smsType"
          label="短信类型"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="content"
          width="350"
          label="短信内容"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="sendStateStr"
          label="发送结果"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="memo"
          label="备注"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="sendTime"
          width="150"
          :formatter="dateFormat"
          label="发送时间"
        ></el-table-column>
      </el-table>
    </div>
    <div class="pages">
      <el-pagination
          background
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :current-page.sync="form.current"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="form.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="form.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import * as moment from "moment";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    params: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      form: {
        current: 1,
        size: 10,
        total:1,
        cell:"",
        productName:""
      },
      data: [],
    };
  },
  async created() {
    const params = this.params;
    // console.log(params,'手机号');
    this.form.cell = params.phoneNo;
    this.form.productName = params.clientProductName;
    await this.init();
  },
  methods: {
    headerStyle() {
      return "tableHeaderStyle";
    },
    async init() {
      const res = await this.$$post("/detail/getSmsInfo", this.form);
      const { success, result } = res.data;
      if (success && result !== null) {
        this.data = result.data;
        this.form.total = result.total;
      }
    },
     /*日期*/
    dateFormat: function (row, column) {
      let date = row[column.property]
      if (date === undefined) {
        return ''
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss")
    },
    handleClose() {
      this.$emit("handleClose");
    },
      handleCurrentChange(e) {
      this.form.current = e;
      this.init();
    },
    handleSizeChange(e) {
      this.form.size = e
      this.form.current = 1;
      this.init();
    },
  },
};
</script>

<style>
.tables {
  margin-bottom: 20px;
}
.pages {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>