<template>
        <div class="check-items">
            <el-row>
                <el-col :span="24">
                    <el-table
                            highlight-current-row
                            :data="data"
                            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%;padding-left: 20px;"
                                        size="mini"
                                        max-height="250"
                                        :header-cell-style="get_row_class">
                                    <el-table-column
                                            prop="operator"
                                            label="操作人"
                                            width="100">
                                    </el-table-column>
                                    <el-table-column
                                            prop="task_node_name"
                                            label="操作环节"
                                            width="100">
                                    </el-table-column>
                                    <el-table-column
                                            prop="next_task_name"
                                            label="目标环节">
                                    </el-table-column>
                                    <el-table-column
                                            label="流转方式">
                                        <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="操作时间"
                                            prop="start_time"
                                            min-width="100">
                                    </el-table-column>
                                    <el-table-column
                                            prop="process_remark"
                                            width="150"
                                            label="备注">
                                            <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' :''}">
                                                详情
                                              </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="序号"
                                width="50">
                            <!-- <el-table-column>
                             </el-table-column>-->
                        </el-table-column>
                        <el-table-column
                                label="项目名称"
                                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'">作废</span>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="node_name"
                                label="项目进度">
                        </el-table-column>
                        <el-table-column
                                prop="operator"
                                label="操作人">
                        </el-table-column>
                        <el-table-column
                                prop="duty_section_name"
                                label="检验科室">
                        </el-table-column>
                        <el-table-column
                                prop="duty_section_xzname"
                                label="检测组"
                        ></el-table-column>
                        <el-table-column
                                prop="duty_person_name"
                                label="检测人"
                        ></el-table-column>
                        <el-table-column
                                prop="conclusion_str"
                                v-if="!hide_conclusion"
                                label="结论"
                        ></el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </div>
</template>

<script>
  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: {
      ElCol,
      ElRow,
      ElPagination,
      ElTableColumn,
      ElTable
    },
    props: {
      data: {
        type: Array,
        default: []
      },
      'hide_conclusion':{
        type: Boolean,
        default: false
      }
    },
    methods: {
      get_error_type_style(errorType) {
        let data = ['198922013160', 'LZFS_ZC'];
        return `color: ${data.includes(errorType) ? '' : 'red'}`;
      },
      get_row_class({row, column, rowIndex, columnIndex}) {
        if (rowIndex === 0) {
          return 'background-color:#f6f6f6';
        }
      }
    }
  };

</script>

<style scoped>
    .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>
