<template>
  <div class="check-items">
    <badge
      :badge-id="'samorg_flow_recod_table'"
      v-if="data.showWho=='showMould'"
      :title="'原始记录流转记录'"
      :titleWidth="116"
    ></badge>
    <badge
      :badge-id="'samorg_flow_recod_table'"
      v-if="data.showWho=='showSample'"
      :title="'样品流转记录'"
      :titleWidth="90"
    ></badge>
    <el-row id="samorg_flow_recod_table" show="1">
      <el-col :span="24">
        <el-table
          highlight-current-row
          ref="heighlightRow"
          :data="getCheckListPageOrder"
          style="width: 100%"
          :header-cell-style="get_row_class"
          @row-click="getPrjList"
        >
          <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>{{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.samorg_flow_record_column"
            :key="i"
            :prop="v.prop"
            :label="v.label"
            :width="v.width"
          >
            <template slot-scope="scope">
              <div v-if="v.prop=='sample_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.sample_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=='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.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-col :span="24" class="samplePrjBox">
        <prjList ref="prjList" :data="prj_flow_record_obj" :key="itm"></prjList>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import prjList from "./prjList.vue";
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: {
    prjList,
    badge,
    ElCol,
    ElRow,
    ElPagination,
    ElTableColumn,
    ElTable
  },
  data: function() {
    return {
      cl_page_index: 1,
      cl_page_size: 10,
      prj_flow_record_obj: {
        prj_flow_record_list: [],
        prj_flow_record_column: this.data.prj_flow_record_column,
        trans_column: this.data.trans_column,
        prjTableId: "sampOrg_prj_id"
      },
      itm:new Date().getTime()
    };
  },
  methods: {
    get_error_type_style(errorType) {
      if (errorType !== "LZFS_ZC") {
        return "color:red;";
      }
    },
    getPrjList(row) {
      this.prj_flow_record_obj.prj_flow_record_list =
        row.tiList && row.tiList.length > 0 ? row.tiList : [];
        // 刷新样品的检项
        this.itm = new Date().getTime();
    },
    get_row_class({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color:#f6f6f6";
      }
    },
    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 sampleList = this.data.samorg_flow_record_list;
      let pageIndex = this.cl_page_index;
      let pageSize = this.cl_page_size;
      this.prj_flow_record_obj.prj_flow_record_column = this.data.prj_flow_record_column;
      this.prj_flow_record_obj.trans_column = this.data.trans_column;
      if (sampleList.length > 0) {
        let list = sampleList.slice(
          (pageIndex - 1) * pageSize,
          pageIndex * pageSize
        );
        this.getPrjList(list[0]);
        this.$nextTick(() => {
          this.$refs.heighlightRow.setCurrentRow(list[0]);
        });
        return list;
      }
      this.getPrjList({});
      this.$nextTick(() => {
        this.$refs.heighlightRow.setCurrentRow();
      });
    },
    getClDataLength() {
      return this.data.samorg_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;
}
#samorg_flow_recod_table[show="0"],
#sampOrg_prj_id[show="0"] {
  display: none;
}
#samorg_flow_recod_table[show="1"],
#sampOrg_prj_id[show="1"] {
  display: block;
}
/deep/.samplePrjBox .check-items .badge > table {
  display: none;
}
.samplePrjBox .check-items {
  border: none;
  padding: 15px 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
/deep/.samplePrjBox .check-items > .el-row {
  margin-bottom: 0;
}
.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>
