<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%;">
        <el-table-column align="center" width="95" prop="collectContact.contactMobile" label="联系人手机号"></el-table-column>
        <el-table-column align="center"  width="90"  prop="collectContact.contactName" label="联系人姓名"></el-table-column>
        <el-table-column align="center"  width="95" prop="collectContact.contactRelation" label="联系人关系"></el-table-column>
        <el-table-column align="center"  width="80" prop="collectContact.overdueDay" label="逾期天数"></el-table-column>
        <el-table-column align="center"  width="100" prop="collectContact.sceneTypeStr" label="催收类型"></el-table-column>
        <el-table-column align="center"  width="110" prop="collectContact.state" label="状态" :formatter="collectStatueFormat"></el-table-column>
        <el-table-column align="center" width="150"  prop="collectContact.created" label="联系时间" :formatter="collectDateFormat"></el-table-column>
        <el-table-column align="center"   width="110" prop="collectContact.resultType" label="结果" :formatter="collectResultFormat"></el-table-column>
        <el-table-column align="center"  width="110" prop="collectContact.callSeconds" label="语音时长" :formatter="formatSeconds"></el-table-column>
        <el-table-column align="center"  prop="collectContact.record" 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 BlockHeader from "@/components/byh/componments/blockHeader";
import * as moment from "moment";

export default {
  name: 'UrgeList',
  components: {
    BlockHeader
  },
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    params: {
      type: Object,
      required: true
    },
  },
  data() {
    return {
      form: {
        total: 1,
        current: 1,
        size: 10,
      },
      updateQueDialog: {
        visible: false,
        feedNo: '',
        feedType: '',
        feedStatus: '',
        feedContent: '',
        clientNo: '',
        creater: '',
        finishContent: '',
      },
      data: []
    }
  },
  async created() {
    const params = this.params;
    this.form.clientCell = params.phoneNo;
    //this.form.feedProduct = params.clientProductName;
    this.form.feedProduct = 'GXD';
    this.form.feedSource = 'COLLECT';
    this.form.sort = 'id desc';
    await this.init()
  },
  methods: {
    headerStyle() {
      return "tableHeaderStyle";
    },
    async init() {
      const res = await this.$$post('/feed/feedPageList', this.form);
      const {success, result} = res.data;
      if (success && result !== null) {
        const {records, total} = result
        this.data = records;
        this.form.total = total;
      }
    },
    collectStatueFormat: function (row, column) {
      let status = row.collectContact.state;
      if (status == null || status === '' || status === undefined) {
        return ''
      }
      return this.$enumUtils.toMsg('CollectFeedStatue', status);
    },
    collectDateFormat: function (row, column) {
      let date = row.collectContact.created;
      if (date === undefined || date == null) {
        return ''
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss")
    },
    collectResultFormat: function (row, column) {
      let resultType = row.collectContact.resultType;
      if (resultType == null || resultType == '' || resultType == undefined) {
        return ''
      }
      return this.$enumUtils.toMsg('CollectFeedResult', resultType);
    },
    /*日期*/
    dateFormats: function (row, column) {
      let date = row[column.property]
      if (date === undefined) {
        return ''
      }
      return moment(date).format("YYYY-MM-DD")
    },
    handleClose() {
      this.$emit("handleClose");
    },
    //客服状态
    serviceFormat: function (row, column) {
      let status = row['feedStatus'];
      return this.$enumUtils.toMsg('FeedStatus', status);
    },
    handleCurrentChange(e) {
      this.form.current = e;
      this.init();
    },
    handleSizeChange(e) {
      this.form.size = e
      this.form.current = 1;
      this.init();
    },
    formatSeconds: function (row, column) {
      let callSeconds = row.collectContact.callSeconds;
      if (callSeconds == null || callSeconds == '' || callSeconds == undefined) {
        return ''
      }
      let theTime = parseInt(callSeconds);// 秒
      let middle = 0;// 分
      let hour = 0;// 小时

      if (theTime > 60) {
        middle = parseInt(theTime / 60);
        theTime = parseInt(theTime % 60);
        if (middle > 60) {
          hour = parseInt(middle / 60);
          middle = parseInt(middle % 60);
        }
      }
      let result = "" + parseInt(theTime) + "秒";
      if (middle > 0) {
        result = "" + parseInt(middle) + "分" + result;
      }
      if (hour > 0) {
        result = "" + parseInt(hour) + "小时" + result;
      }
      return result;
    },
  }
}
</script>

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