<template>
  <div class="page-risk-level-list">

    <div class="search">
      <block-header title="搜索"></block-header>
      <el-form size="small" label-suffix=":" :inline="true" :model="form" class="form-inline">
        <el-form-item label="风险等级">
          <el-select clearable v-model="form.riskType">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择时间">
          <el-date-picker
              clearable
              v-model="form.time"
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['12:00:00']">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button
              type="primary"
              @click="onSubmit"
          >
            查询
          </el-button>
          <!--<el-button type="default" @click="onReset">重置</el-button>-->
        </el-form-item>
      </el-form>
    </div>

    <div class="table">
      <block-header 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" prop="clientName" label="姓名"></el-table-column>
        <el-table-column align="center" width="140" prop="riskGmtCreated" :formatter="dateFormats"
                         label="修改日期"></el-table-column>
        <el-table-column align="center" prop="riskType" label="风险等级"></el-table-column>
        <el-table-column align="center" prop="riskContent" label="风险描述"></el-table-column>
        <el-table-column align="center" prop="memo" label="备注"></el-table-column>
      </el-table>
    </div>

    <div class="pages">
      <el-pagination
          background
          @current-change="handleChange"
          :current-page="form.current"
          :page-size="form.size"
          layout="prev, pager, next"
          :total="form.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import BlockHeader from "@/components/byh/componments/blockHeader";
import * as moment from "moment";

export default {
  name: 'RiskInfo',
  components: {
    BlockHeader
  },
  data() {
    return {
      options: [
        {
          value: 'R1',
          label: 'R1'
        }, {
          value: 'R2',
          label: 'R2'
        }, {
          value: 'R3',
          label: 'R3'
        }, {
          value: 'R4',
          label: 'R4'
        }
      ],
      form: {
        current: 1,
        size: 10,
        riskType: "",
        certNo: "",
        endDate: "",
        startDate: "",
        time: '',
        total: 1
      },
      data: []
    }
  },
  async created() {
    await this.init()
  },
  methods: {
    headerStyle() {
      return "tableHeaderStyle";
    },
    async init() {
      const form = this.form;
      //delete form.time
      const res = await this.$$post('/risk/getRiskLogPage', form);
      const {success, result} = res.data;
      if (success && result !== null) {
        const {total, records} = result;
        this.form.total = total;
        this.data = records;
      }
    },
    /*日期*/
    dateFormats: 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");
    },
    handleChange(e) {
      this.form.current = e;
      this.init();
    },
    onSubmit() {
      const {time} = this.form;
      if (time) {
        this.form.startDate = time[0];
        this.form.endDate = time[1];
      } else {
        this.form.startDate = '';
        this.form.endDate = '';
      }

      this.init();
    }
  }
}
</script>

<style lang="less" scoped>
.table {
  margin-bottom: 20px;
}

.pages {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
