<template>
  <div class="check-items">
    <badge :badge-id="'report_flow_recod_table'" :title="this.data.isShowUtensil ? '证书流转记录':'报告流转记录'" :titleWidth="90"></badge>
    <el-row id="report_flow_recod_table" show="1">
      <el-col :span="24">
        <el-table
          highlight-current-row
          :data="getCheckListPageOrder"
          style="width: 100%"
          :header-cell-style="get_row_class"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table
                :data="props.row.transList"
                style="width: 100%;"
                size="mini"
                max-height="250"
                :header-cell-style="get_row_class"
              >
                <el-table-column
                  v-for="(v,i) in data.trans_column"
                  :key="i"
                  :prop="v.prop"
                  :label="v.label"
                  :width="v.width"
                >
                  <template slot-scope="scope">
                    <div
                      v-if="v.prop=='process_type_val'"
                      :style="get_error_type_style(scope.row.process_type)"
                    >
                      {{
                      scope.row.process_type_val }}
                    </div>
                    <div v-else-if="v.prop=='create_time'">
                      <div
                        class="date-time-item"
                      >{{ (scope.row.start_time && scope.row.start_time.split(' ')[0]) || '' }}</div>
                      <div
                        class="date-time-item"
                      >{{ (scope.row.start_time && scope.row.start_time.split(' ')[1]) || '' }}</div>
                    </div>
                    <div v-else-if="v.prop=='process_remark'">
                      <div v-if="scope.row.process_remark && $parent.isRichText(scope.row.process_remark)" @click="$parent.setRemark(scope.row.process_remark)" :style="{height: '46px','line-height': '46px',color:['198922013160', 'LZFS_ZC'].includes(scope.row.process_type) ? '' : 'red','cursor': scope.row.process_remark ? 'pointer' :''}">
                        详情
                      </div>
                      <div v-else>{{scope.row.process_remark}}</div>
                    </div>
                    <div v-else>{{scope.row[v.prop]}}</div>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column type="index" label="序号" width="50"></el-table-column>
          <el-table-column
            v-for="(v,i) in data.report_flow_record_column"
            :key="i"
            :prop="v.prop"
            :label="v.label"
            :width="v.width"
          >
            <template slot-scope="scope">
              <div v-if="v.prop=='report_no'" style="position: relative">
                <div
                  class="countItem"
                  :style="(scope.row.dhCount && scope.row.dhCount > 0) || (scope.row.fgCount && scope.row.fgCount > 0) ? 'color:red' : ''"
                >
                  <span>{{scope.row.report_no}}</span>
                  <i
                    style="background: red;"
                    v-if="scope.row.dhCount && scope.row.dhCount > 0"
                  >{{scope.row.dhCount}}</i>
                  <i
                    style="background: green"
                    v-if="scope.row.fgCount && scope.row.fgCount > 0"
                  >{{scope.row.fgCount}}</i>
                </div>
              </div>
              <div v-else-if="v.prop=='create_time'">
                <div
                  class="date-time-item"
                >{{ (scope.row.create_time && scope.row.create_time.split(' ')[0]) || '' }}</div>
                <div
                  class="date-time-item"
                >{{ (scope.row.create_time && scope.row.create_time.split(' ')[1]) || '' }}</div>
              </div>
              <div v-else>{{scope.row[v.prop]}}</div>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handle_cl_size_change"
            @current-change="handle_cl_current_change"
            :current-page="cl_page_index"
            :page-sizes="[10, 15, 20, 25, 30, 50, 100, 200, 300]"
            :page-size="cl_page_size"
            :total="getClDataLength"
            layout="total, sizes, prev, pager, next, jumper"
          ></el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import badge from "./badge.vue";
import ElRow from "element-ui-qz/packages/row";
import ElCol from "element-ui-qz/packages/col";
import ElPagination from "element-ui-qz/packages/pagination";
import ElTableColumn from "element-ui-qz/packages/table-column";
import ElTable from "element-ui-qz/packages/table";

export default {
  components: {
    badge,
    ElCol,
    ElRow,
    ElPagination,
    ElTableColumn,
    ElTable
  },
  data: function() {
    return {
      cl_page_index: 1,
      cl_page_size: 10
    };
  },
  methods: {
    get_row_class({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color:#f6f6f6";
      }
    },
    get_error_type_style(errorType) {
      if (errorType !== "LZFS_ZC") {
        return "color:red;";
      }
    },
    handle_cl_current_change(val) {
      this.cl_page_index = val;
    },
    handle_cl_size_change(val) {
      this.cl_page_size = val;
    }
  },
  props: {
    data: [Object]
  },
  computed: {
    getCheckListPageOrder() {
      let prjList = this.data.report_flow_record_list;
      let pageIndex = this.cl_page_index;
      let pageSize = this.cl_page_size;
      if (prjList.length > 0) {
        let list = prjList.slice(
          (pageIndex - 1) * pageSize,
          pageIndex * pageSize
        );
        return list;
      }
    },
    getClDataLength() {
      return this.data.report_flow_record_list.length;
    }
  }
};
</script>

<style scoped>
.el-flow-record .flow-title {
  font-size: 14px;
  color: #3e3a39;
  padding: 0;
  padding-bottom: 10px;
  font-weight: 700;
  display: block;
  text-align: left;
}
#report_flow_recod_table[show="0"] {
  display: none;
}
#report_flow_recod_table[show="1"] {
  display: block;
}
.countItem i {
  display: inline-block;
}
.countItem i {
  width: 18px;
  height: 18px;
  line-height: 18px;
  border-radius: 18px;
  text-align: center;
  font-size: 12px;
  color: white;
  font-style: normal;
  margin-left: 4px;
}
.countItem .flowStatus {
  margin-left: 5px;
  color: red;
}
</style>
