<template>
  <div class="check-items">
    <badge :badge-id="'samorg_flow_recod_table'" v-if="['showMould', 'showSample', 'showUtensil'].includes(data.showWho)" :title="data.showWho == 'showMould' ? t(`flowRecord.original`) : data.showWho == 'showSample' ? t(`flowRecord.sampleR`) : data.showWho == 'showUtensil' ? t(`flowRecord.instrumentR`) : ''" :titleWidth="data.showWho == 'showMould' ? 116 : 96"></badge>
    <el-row id="samorg_flow_recod_table" show="1">
      <el-input class="searchInput_xy" v-if="data.showSampleSearch && data.samorg_flow_record_list.length>1" clearable style="width: 398px;margin-bottom: 8px;" :placeholder="t(`flowRecord.searchPlaceholder`)" v-model="inputSearch">
        <el-button slot="append">{{t(`flowRecord.query`)}}</el-button>
      </el-input>
      <el-col :span="24" v-if="data.sampleShowCard && data.showWho == 'showSample'" class="cardBox">
          <ul>
            <li v-for="item in getCheckListPageOrder" :style="init_sample_style(item)" :id="item.id" class="sample-item" @click="getPrjList(item)">
              <ul>
                <li class="sample-item-list">
                  <div class="circle">{{ item.sample_name.substring(0, 2) }}</div>
                </li>
                <li class="sample-item-list" style="text-align: left; line-height: 22px;">
                  <ul>
                    <li class="sample-item-list-">
                      <span style="color: #333">{{ item.sample_name }}</span>
                      <i style="color: red">{{ item.proc_st == "PROC_ZF" ? `(${t(`flowRecord.invalid`)})` : '' }} </i>
                    </li>
                    <li class="sample-item-list-">
                      <span>{{ item.sample_no }}</span>
                      <span style="color:red;">{{ item.errorProcess }}</span>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
          <div class="clear"></div>
      </el-col>
      <el-col :span="24" v-else>
        <el-table :default-expand-all="data.expandAll" 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-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' : '' }">
                        {{ t(`flowRecord.item.detail`) }}
                      </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="t(`flowRecord.item.index`)" 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 == 'sample_name'">
                {{ scope.row.sample_name }}
                <span style="color: red">{{ scope.row.proc_st == "PROC_ZF" ? `(${t(`flowRecord.invalid`)})` : '' }} </span>
              </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-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' : '' }">
                  {{ t(`flowRecord.item.detail`) }}
                </div>
                <div v-else>{{ scope.row.process_remark }}</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" v-if="data.showWho != 'showUtensil' && !data.isHideSampleTi">
        <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",
        showLabelTips: this.data.showLabelTips
      },
      itm: new Date().getTime(),
      sample_check: '',
      inputSearch:'',
      getClDataLength:0
    };
  },
  methods: {
    init_sample_style: function (item) {
      if (item.id === this.sample_check) {
        return "border:2px solid #67BCFF;"
      }
    },
    get_error_type_style(errorType) {
      if (errorType !== "LZFS_ZC") {
        return "color:red;";
      }
    },
    getPrjList(row) {
      this.sample_check = row.id || '';
      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_index = 1;
      this.cl_page_size = val;
    }
  },
  props: {
    data: [Object]
  },
  watch:{
    "data.orderId"(){
      this.inputSearch = '';
    },
    inputSearch(){
      this.cl_page_index = 1;
    }
  },
  computed: {
    getCheckListPageOrder() {
      let sampleList = this.data.samorg_flow_record_list.filter(v=>{
        if(!this.inputSearch){
          return v
        }
        return v.sample_no && v.sample_no.toLowerCase().search(this.inputSearch.toLowerCase()) !== -1 || v.sample_name && v.sample_name.search(this.inputSearch) !== -1
      });
      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 = this.data.sampleShowCard && this.data.showWho == 'showSample' ? sampleList : sampleList.slice(
          (pageIndex - 1) * pageSize,
          pageIndex * pageSize
        );
        this.getPrjList(list[0]);
        this.$nextTick(() => {
          if (!this.data.sampleShowCard) {
            this.$refs.heighlightRow.setCurrentRow(list[0]);
          };
        });
        this.getClDataLength = sampleList.length;
        return list;
      }
      this.getClDataLength = 0;
      this.getPrjList({});
    }
  }
};
</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;
}

div.cardBox.el-col.el-col-24 {
  max-height: 190px;
  overflow-y: scroll;
  background-color: #fff;
  padding: 25px 15px;
  margin-bottom: 16px;
  border: 1px solid #eee;
  border-radius: 10px;
}

.cardBox ul,
.cardBox ul li {
  margin: 0;
  list-style-type: none;
}

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

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

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

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

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

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

.cardBox 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;
}
</style>
