<template>
  <div class="check-items">
    <badge :badge-id="data.prjTableId" :title="this.data.isShowUtensil ? '实际器具流转记录':'检项流转记录'" :titleWidth="this.data.isShowUtensil ? 114 : 90"></badge>
    <el-row :id="data.prjTableId" 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=='start_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>{{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.prj_flow_record_column" :key="i" :prop="v.prop" :label="v.label" :width="v.width">
            <template slot-scope="scope">
              <div v-if="v.prop=='ti_name'" style="position: relative">
                <div
                  class="countItem"
                  :style="(scope.row.dhCount && scope.row.dhCount > 0) || (scope.row.fgCount && scope.row.fgCount > 0) ? 'color:red' : ''"
                >
                  <span v-html="scope.row.ti_name"></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>
                  <span class="flowStatus" v-if="scope.row.proc_st==='PROC_ZF'">作废</span>
                </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.prj_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.prj_flow_record_list.length;
    }
  }
};
</script>

<style scoped>
ul,
ul li {
  margin: 0;
  list-style-type: none;
}

ul li[class="sample-item"] {
  float: left;
  padding: 10px;
  margin-right: 15px;
}

ul li[class="sample-item-list"] {
  float: left;
}

ul li[class="sample-item-list"]:first-child {
  margin-right: 15px;
}

ul li .sample-item-list- {
  float: none;
  min-width: 120px;
}

ul li[class="sample-item-list-"] span:last-child {
  float: right;
}

ul li[class="sample-item-list-"] span:first-child {
  float: left;
}

ul li[class="sample-item-list-"] span {
  color: #9fa0a0;
  font-size: 14px;
}

.circle {
  width: 44px;
  height: 44px;
  line-height: 44px;
  border-radius: 50px;
  background-color: #67bcff;
  text-align: center;
  color: #fff;
}

/* .countItem span, */
.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;
}
.el-flow-record .flow-title {
  font-size: 14px;
  color: #3e3a39;
  padding: 0;
  padding-bottom: 10px;
  font-weight: 700;
  display: block;
  text-align: left;
}
#prj_flow_recod_table[show="0"] {
  display: none;
}
#prj_flow_recod_table[show="1"] {
  display: block;
}
</style>
