<template>
  <div class="corePersonnel administrative-punishment">
    <head-form-new title="行政处罚" :form-data="formData" :query-params="queryParams" :total="tableDataTotal" :isExcel="true"
      @handle-search="handleSearch" />
    <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
    <tables v-if="!isSkeleton" :indexFixed="true" :tableData="tableData" :forData="forData" :tableDataTotal="tableDataTotal"
      :queryParams="queryParams" @handle-current-change="handleCurrentChange">
      <template slot="punishReason" slot-scope="scope">
        <span :class="[isOverHiddenFlag(scope.data.width, showList, scope.index, 0, scope.row.punishReason)?'cell-span':'']"
          :style="{'-webkit-line-clamp': 5}">
          <div v-html="scope.row.punishReason"></div>
          <span v-if="isOverHiddenFlag(scope.data.width, showList, scope.index, 0, scope.row.punishReason)" @click="changeShowAll(scope.index, 0)"
            class="more">...<span>更多</span></span>
        </span>
      </template>
    </tables>

  </div>
</template>

<script>
import mixin from '../mixins/mixin';
import {
  penalizePage,
  penalizeReasonType
} from '@/api/detail/party-a/riskInformation';
import skeleton from '../component/skeleton';
export default {
  name: 'Punish',
  mixins: [mixin],
  components: {
    skeleton
  },
  props: ['companyId'],
  data() {
    return {
      queryParams: {
        cid: this.companyId,
        pageNum: 1,
        pageSize: 20
      },
      forData: [
        { label: '处罚原因', prop: 'punishReason', slot: true, fixed: true, width: '508' },
        { label: '决定日期', prop: 'punishBegin', width: '105' },
        { label: '处罚结果', prop: 'punishResult', width: '264' },
        { label: '处罚文书号', prop: 'fileNum', width: '240' },
        { label: '处罚机关', prop: 'office', width: '264' },
        { label: '处罚结束日期', prop: 'punishEnd', width: '110' },
      ],
      formData: [
        { type: 1, fieldName: 'penalizeReasonType', value: '', placeholder: '处罚类别', options: [] },
        { type: 3, fieldName: 'keys', value: '', placeholder: '请输入关键词', options: [] },
      ],
      //列表
      tableLoading: false,
      tableData: [],
      tableDataTotal: 0,
      showList: [],
      isSkeleton: true
    };
  },
  created() {
    this.handleQuery();
    this.penalizeReasonTypeData();
  },
  computed: {

  },
  methods: {
    handleQuery(params) {
      let data = params ? params : this.queryParams;
      this.isSkeleton = true;
      penalizePage(data).then((res) => {
        this.tableData = res.rows;
        this.tableDataTotal = res.total;
        this.isSkeleton = false;
      });
    },
    penalizeReasonTypeData() {
      penalizeReasonType({ cid: this.queryParams.cid }).then((res) => {
        let data = res.data;
        if (data.length > 0) {
          for (var i = 0; i < data.length; i++) {
            this.formData[0].options.push({
              name: data[i].punishType + '（' + data[i].count + '）',
              value: data[i].punishTypeId,
            });
          }
        }
      });
    },
    changeShowAll(row, column) {
      this.showList.push({
        row: row,
        column: column
      });
    },
    isOverHiddenFlag(data, showList, row, column, value) {
      if (value && String(value).length > this.getLenth(data)) {
        return !showList.some(item => item.row == row && item.column == column);
      } else {
        return false;
      }
    },
    getLenth(data) {
      return Math.floor(data / 12) * 5;
    },
  }
}
</script>
<style lang="scss" scoped>
.corePersonnel {
  background: #ffffff;
  border-radius: 4px;
  padding: 16px;
  input {
    border: 1px solid #efefef;
  }
  ::v-deep .el-form-item {
    margin-right: 8px !important;
  }

  .query-box {
    margin: 10px 0 20px;
  }
  .cell-span {
    display: inline-block;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    cursor: pointer;

    > span {
      display: inline-block;
      width: 37px;
      position: absolute;
      right: 0;
      bottom: 0;
      background-color: #fff;
      z-index: 1;
    }
  }
}

.administrative-punishment {
  @import "@/assets/styles/search-common.scss";
}
</style>
