<template>
    <div>
        <div v-if="!having_data" class="nodata-box">
            <img src="../images/nodata.jpg"/>
        </div>
        <div v-else class="el-flow-record-new">
            <el-row>
                <el-col :span="24">
                    <!-- <div class="status-bar">受理单号：{{current_case_prn}}</div> -->
                    <div class="status-bar">当前状态：<span class="status">{{current_main_flow_status}}</span></div>
                    <div class="status-bar" style="float: right;color:#67BCFF; cursor: pointer;" @click="refresh_page">
                        刷新数据
                    </div>
                </el-col>
            </el-row>
            <div class="main-flow">
                <div class="flow-title">委托单流转记录</div>
                <el-row>
                    <el-col :span="24" style="width: 100%;overflow-x: auto;">
                        <!--<el-button type="primary" @click="test">主要按钮</el-button>-->
                        <!--<div class="scroll-box">-->
                        <ul class="flow-items-padding" style="display: flex;padding-bottom: 20px;" :style="{'width':flow_list.length * 227 +'px'}">
                            <div v-for="(item,i) in flow_list" :key="i" style="margin-top: 10px;">
                                <li :style="item.thisNode == true ? (item.processType == 'LZFS_ZC' ? 'box-shadow: 0 0 12px #c1e4ff;' : 'box-shadow: 0 0 12px #f56c6cb0;') : ''" class="flow-item" :title="item.nodeName ? item.nodeName : '----'">
                                    <div style="position: relative;">
                                        <div style="position:absolute; height: 18px;right: -10px;top: -10px;color: white;line-height: 18px;font-style: 12px;">
                                            <span v-if="item.dhCount && item.dhCount > 0" style=" background: red; width:18px;height: 18px;display: inline-block;border-radius:18px;">{{item.dhCount}}</span>
                                        </div>
                                        <div v-if="i===0">
                                            <img src="../images/icon-ywsl-high.png" v-if="item.thisNode == true"/>
                                            <img src="../images/icon-ywsl-gray.png" v-else/>
                                        </div>
                                        <div v-else>
                                            <img src="../images/icon-bgqf-high.png" v-if="item.thisNode == true"/>
                                            <img src="../images/icon-bgqf-gray.png" v-else/>
                                        </div>
                                        <div style="width:87px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.nodeName ? item.nodeName : '----'}}</div>
                                        <div>{{item.startTime ? item.startTime.split(' ')[0] : '----'}}</div>
                                        <div>{{item.startTime ? item.startTime.split(' ')[1] : '----'}}</div>
                                    </div>
                                </li>
                                <li v-if="i + 1 != flow_list.length" class="flow-direct">
                                    <div :class="item.useTime?'arrow-line-high':'arrow-line-gray'" :title="item.useTime ? item.useTime : '----'">
                                        <div>{{item.useTime ? item.useTime.split('小时')[0] + '小时' : '----'}}</div>
                                        <div>{{item.useTime ? item.useTime.split('分钟')[0].split('小时')[1] + '分钟' : '----'}}</div>
                                        <div>{{item.useTime ? item.useTime.split('分钟')[1] : '----'}}</div>
                                    </div>
                                </li>
                                <div style="clear: both;"></div>
                            </div>
                        </ul>
                        <!--</div>-->
                    </el-col>
                </el-row>
                <div>
                  <div class="badge" style="margin-bottom: 29px">
                    <table style="width: 100%;" >
                        <tr>
                            <td style="width: 70px;font-weight: bold;">流转记录</td>
                            <td>
                                <span style="display: inline-block; border-top: 1px solid #eee; width: 100%;padding-left: 20px"></span>
                            </td>
                            <td style="width: 130px; text-align: right">
                                <i style="color:#409eff" :class="operation?'el-icon-arrow-down':'el-icon-arrow-up'"></i>
                                <a href="javascript:void(0)" @click="operation=!operation">收起/展开</a>
                            </td>
                        </tr>
                    </table>
                  </div>
                  <div v-show="operation">
                      <el-row>
                        <el-col :span="24">
                            <el-table
                                    :data="sampleFlowTransList"
                                    style="width: 100%" :header-cell-style="get_row_class">
                                <el-table-column
                                        prop="operate_name"
                                        label="操作人">
                                </el-table-column>
                                <el-table-column
                                        prop="operate_node_name"
                                        label="操作环节">
                                </el-table-column>
                                <el-table-column
                                        prop="target_node_name"
                                        label="目标环节">
                                </el-table-column>
                                <el-table-column
                                        label="流转方式">
                                    <template slot-scope="scope">
                                        <div :style="get_error_type_style(scope.row.flow_idea)">{{
                                            scope.row.flowIdeaDesc }}
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="create_time_str" 
                                        label="操作时间"
                                        min-width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="remark"
                                        width="150"
                                        label="备注">
                                </el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>
                    <div class="block">
                        <el-pagination
                                @size-change="handle_mft_size_change"
                                @current-change="handle_mft_current_change"
                                :current-page="mft_page_index"
                                :page-sizes="[10, 15, 20, 25]"
                                :page-size="mft_page_size"
                                :total="getMftDataLength"
                                layout="total, sizes, prev, pager, next, jumper">
                        </el-pagination>
                    </div>
                  </div>
                </div>
            </div> 
        </div>
    </div>
</template>

<script>
  import ElInput from 'element-ui-qz/packages/input';
  import ElButton from 'element-ui-qz/packages/button';
  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 {
    name: 'ElFlowRecordNew',
    components: {
      ElInput,
      ElButton,
      ElCol,
      ElRow,
      ElPagination,
      ElTableColumn,
      ElTable
    },
    data: function() {
      return {
        current_case_prn: null,
        flow_list: [],
        sampleFlowTransList: [],
        current_main_flow_status: null,
        having_data: true,
        operation: true,
        mft_page_index: 1,
        mft_page_size: 10,
        getMftDataLength: 0
      };
    },
    props: {
      data: {
        type: Object, default: () => {
          return {
            id: '',
            data_interface: '',
            JID: ''
          };
        }
      }
    },
    watch: {
      data: function() {
        this.get_data();
        this.get_data2(1, 10);
      }
    },
    methods: {
      get_data: function() {
        this.$http.post(this.data.data_interface + 'getTaskNodes', {
          id: this.data.id,
          JID: this.data.JID
        }, {
          emulateJSON: true
        }).then(function(response) {
            if(response.data.obj && response.data.obj.length>0){
                this.having_data = true;
                let flowList = [];
                response.data.obj.forEach(element => {
                    if(element.dispOr === 0){
                      this.current_main_flow_status = element.currentSt;
                    }else{
                       flowList.push(element);
                    }
                });
                this.flow_list =flowList;
            }else{
             this.having_data = false;
             this.flow_list = [];   
            }
        }, function(response) {
          console.log(response);
        });
      },
      get_data2: function(page,size) {
        this.$http.post(this.data.data_interface + 'getSampleFlowTrans', {
          id: this.data.id,
          pageNo: page,
          pageSize: size,
          JID: this.data.JID
        }, {
          emulateJSON: true
        }).then(function(response) {
            this.sampleFlowTransList = response.data.list;
            this.mft_page_index = response.data.currentPage;
            this.getMftDataLength = response.data.allRow;
        }, function(response) {
          console.log(response);
        });
      },
      refresh_page(){
        this.get_data();
        this.get_data2(this.mft_page_index,this.mft_page_size);
      },
      get_error_type_style(errorType) {
        if (errorType === 'N') {
          return 'color:red;';
        }
      },
      handle_mft_current_change(val) {
        this.mft_page_index = val;
        this.get_data2(val,this.mft_page_size);
      },
      handle_mft_size_change(val) {
        this.mft_page_size = val;
        this.get_data2(this.mft_page_index,val);
      },
      get_row_class({row, column, rowIndex, columnIndex}) {
        if (rowIndex === 0) {
          return 'background-color:#f6f6f6';
        }
      },
    }
  };
</script>

<style scoped>
    .status-bar {
        display: inline-block;
        margin-right: 20px;
    }

    .status-bar:last-child {
        margin-right: 0;
    }

    .nodata-box {
        text-align: center;
    }
</style>
