<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;">
            <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>
          </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>
