<template>
    <div>
        <div v-if="this.samplesCount > 1" class="sub-flow">
            <div class="flow-title">{{ t(`flowRecord.sample`) }}</div>
            <div class="sample-list-box">
                <el-row>
                    <el-col :span="24">
                        <ul>
                            <li v-for="item in data.sample_data_list"
                                :style="init_sample_style(item)"
                                :id="item.prn" class="sample-item"
                                @click="change_sample_data(item.prn)">
                                <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-row>
            </div>
        </div>
        <div class="check-items">
            <div class="flow-title">{{ t(`flowRecord.item.preview`) }}</div>
            <el-row>
                <el-col :span="24">
                    <el-table
                            rel="singleTable"
                            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
                                            prop="operator"
                                            :label="t(`flowRecord.item.operator`)"
                                            width="100">
                                    </el-table-column>
                                    <el-table-column
                                            prop="task_node_name"
                                            :label="t(`flowRecord.item.node`)"
                                            width="125">
                                    </el-table-column>
                                    <el-table-column
                                            prop="next_task_name"
                                            :label="t(`flowRecord.item.target`)">
                                    </el-table-column>
                                    <el-table-column
                                        v-if="!data.hide_next_task_operator"
                                        prop="next_task_operator"
                                        :label="t(`flowRecord.item.targetPerson`)">
                                    </el-table-column>
                                    <el-table-column
                                            :label="t(`flowRecord.item.way`)">
                                        <template slot-scope="scope">
                                            <div :style="get_error_type_style(scope.row.process_type)">{{
                                                scope.row.process_type_desc }}
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            :label="t(`flowRecord.item.startTime`)"
                                            prop="start_time"
                                            min-width="100">
                                    </el-table-column>
                                    <el-table-column
                                            prop="process_remark"
                                            width="150"
                                            :label="t(`flowRecord.item.remark`)">
                                            <template slot-scope="scope">
                                              <div v-if="scope.row.process_remark && $parent.isRichText(scope.row.process_remark)" @click="$parent.setRemark(scope.row.process_remark)" :style="{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>
                                            </template>
                                    </el-table-column>
                                </el-table>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="index"
                                :label="t(`flowRecord.item.index`)"
                                width="80">
                        </el-table-column>
                        <el-table-column
                                :label="t(`flowRecord.item.name`)"
                                prop="ti_name"
                                width="250%"
                                >
                            <template slot-scope="scope">
                                <div 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.rollback_st ==='YDH'">打回</span> -->
                                        <span class="flowStatus" v-if="scope.row.proc_st==='PROC_ZF'">{{ t(`flowRecord.invalid`) }}</span>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                                width="140"
                                prop="node_name"
                                :label="t(`flowRecord.item.progress`)">
                        </el-table-column>
                        <el-table-column
                                prop="operator"
                                :label="t(`flowRecord.item.operator`)">
                        </el-table-column>
                        <el-table-column
                                prop="duty_section_name"
                                :label="t(`flowRecord.item.laboratory`)">
                        </el-table-column>
                        <el-table-column
                                v-if="data.show_duty_sections"
                                prop="duty_section_xzname"
                                :label="t(`flowRecord.item.group`)"
                        ></el-table-column>
                        <el-table-column
                          prop="duty_person_name"
                          :label="t(`flowRecord.item.inspector`)"
                        ></el-table-column>
                        <el-table-column
                          prop="conclusion_str"
                          v-if="!data.hide_conclusion"
                          :label="t(`flowRecord.item.conclusion`)"
                        ></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>
    </div>
</template>

<script>
  import Locale from 'element-ui-qz/src/mixins/locale';
  import ElInput from 'element-ui-qz/packages/input';
  import ElButton from 'element-ui-qz/packages/button';
  import ElUpload from 'element-ui-qz/packages/upload';
  import ElDialog from 'element-ui-qz/packages/dialog';
  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 {
    mixins: [Locale],
    components: {
      ElInput,
      ElButton,
      ElUpload,
      ElDialog,
      ElCol,
      ElRow,
      ElPagination,
      ElTableColumn,
      ElTable
    },
    data: function() {
      return {
        sample_item_selected_id: '',
        selectedStyle: 'border:2px solid #67BCFF;',
        cl_page_index: 1,
        cl_page_size: 10
      };
    },
    methods: {
      change_sample_data: function(prn) {
        let preSelectedPrn = this.sample_item_selected_id;
        if (preSelectedPrn === '') {
          let preSelectedObj = document.getElementsByClassName('sample-item');
          preSelectedObj[0].setAttribute('style', '');
        } else {
          let preSelectedObj = document.getElementById(preSelectedPrn);
          preSelectedObj && preSelectedObj.setAttribute('style', '');
        }

        let selectedObj = document.getElementById(prn);
        selectedObj.setAttribute('style', this.selectedStyle);

        this.sample_item_selected_id = prn;

        this.cl_page_index = 1;
        this.$emit('getSampleCheckListCallBack', prn);
      },
      init_sample_style: function(item) {
        if (item.prn === this.$parent.child_prn_check) {
          return this.selectedStyle;
        }
      },
      get_row_class({row, column, rowIndex, columnIndex}) {
        if (rowIndex === 0) {
          return 'background-color:#f6f6f6';
        }
      },
      get_error_type_style(errorType) {
        let data = ['198922013160', 'LZFS_ZC'];
        return `color: ${data.includes(errorType) ? '' : 'red'}`;
      },
      refresh_status() {
        let sampleSelectedId = this.sample_item_selected_id;
        if (sampleSelectedId !== '') {
          let preSelectedObj = document.getElementById(sampleSelectedId);
          if (preSelectedObj !== null) {
            preSelectedObj.setAttribute('style', '');
          }
        }

        let sampleItemObjs = document.getElementsByClassName('sample-item');
        if (sampleItemObjs.length > 0) {
          sampleItemObjs[0].setAttribute('style', this.selectedStyle);
        }
        this.sample_item_selected_id = '';
      },
      handle_cl_current_change(val) {
        this.cl_page_index = val;
      },
      handle_cl_size_change(val) {
        this.cl_page_size = val;
      }
    },
    props: {
      data: [Object],
      'samples-count': [Number]
    },
    computed: {
      getCheckListPageOrder() {
        let originalList = this.data.sample_check_list;
        let pageIndex = this.cl_page_index;
        let pageSize = this.cl_page_size;
        if (originalList !== null) {
          let list = originalList.slice((pageIndex - 1) * pageSize, pageIndex * pageSize);
          return list;
        }
      },
      getClDataLength() {
        let originalList = this.data.sample_check_list;
        if (originalList !== null) {
          return originalList.length;
        }
      }
    }
  };

</script>

<style scoped>
    abc {
        background: red;
    }
    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[class="sample-item-list-"]:first-child {
        margin-bottom: 10px;
    } */

    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: 12px; */
        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;
    }
</style>
