<template>
    <div>
        <div v-if="!having_data" class="nodata-box">
            <img src="../images/nodata.jpg"/>
        </div>
        <div v-else class="el-flow-record">
            <el-row>
                <el-col :span="24">
                    <div class="status-bar">编号：{{current_main_flow_sampleNo}}</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="get_all_data">
                        刷新数据
                    </div>
                </el-col>
            </el-row>
            <div class="main-flow">
                <div class="flow-title">委托单流转记录</div>
                <el-row>
                    <el-col :span="24">
                        <ul class="scroll flow-items-padding">
                            <li v-for="item in main_flow_list"
                                :id="item.prn"
                                :class="main_flow_item_style(item.type)"
                                :clickAble="getClickAble(item)"
                                :style="item.thisNode == true ? (item.prevProcessType == '198922080024' ? 'border: 1px solid red' : item.prevProcessType == '198922138768' ? 'border: 1px solid green' : '') : ''"
                                >
                                <div v-if="item.type == 'flow'" 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>
                                        <span v-if="item.fgCount && item.fgCount > 0" style=" background: green; width:18px;height: 18px;display: inline-block;border-radius:18px;margin-left:2px;">{{item.fgCount}}</span>
                                    </div>
                                    <div v-if="item.flag == 1">
                                        <img src="../images/icon-ywsl-high.png"
                                             v-if="item.date != '----' || item.thisNode == true"/>
                                        <img src="../images/icon-ywsl-gray.png" v-else/>
                                    </div>
                                    <div v-else-if="item.flag == 2">
                                        <img src="../images/icon-htps-high.png"
                                             v-if="item.date != '----' || item.thisNode == true"/>
                                        <img src="../images/icon-htps-gray.png" v-else/>
                                    </div>
                                    <div v-else-if="item.flag == 7">
                                        <img src="../images/icon-bgbz-high.png"
                                             v-if="item.date != '----' || item.thisNode == true"/>
                                        <img src="../images/icon-bgbz-gray.png" v-else/>
                                    </div>
                                    <div v-else-if="item.flag == 8">
                                        <img src="../images/icon-bgsh-high.png"
                                             v-if="item.date != '----' || item.thisNode == true"/>
                                        <img src="../images/icon-bgsh-gray.png" v-else/>
                                    </div>
                                    <div v-else-if="item.flag == 9">
                                        <img src="../images/icon-bgqf-high.png"
                                             v-if="item.date != '----' || item.thisNode == true"/>
                                        <img src="../images/icon-bgqf-gray.png" v-else/>
                                    </div>
                                    <div v-else-if="item.flag == -1">
                                        <img src="../images/icon-rwfp-high.png"
                                             v-if="item.date != '----' || item.thisNode == true"/>
                                        <img src="../images/icon-rwfp-gray.png" v-else/>
                                    </div>
                                    <div v-else>
                                        <img src="../images/icon-bgqf-high.png"
                                             v-if="item.date != '----' || item.thisNode == true"/>
                                        <img src="../images/icon-bgqf-gray.png" v-else/>
                                    </div>
                                    <div>{{item.name}}</div>
                                    <div style="color:red;">{{item.errorProcess}}</div>
                                    <div>{{item.date}}</div>
                                    <div>{{item.time}}</div>
                                </div>
                                <div v-if="item.type == 'time'" :class="main_flow_arrow_style(item.arrowStatus)">
                                    <div style="height: 18px;">{{item.timeSpan}}</div>
                                </div>
                            </li>

                            <div style="clear: both;"></div>
                        </ul>
                    </el-col>
                </el-row>
                <badge :content-box-id="main_flow_records_id"></badge>
                <div id="main-flow-records" show="1">
                    <el-row>
                        <el-col :span="24">
                            <el-table
                                    :data="main_flow_records_list"
                                    style="width: 100%" :header-cell-style="get_row_class">
                                <el-table-column
                                        prop="operator"
                                        label="操作人">
                                </el-table-column>
                                <el-table-column
                                        prop="task_node_name"
                                        label="操作环节">
                                </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="操作时间"
                                        min-width="120">
                                    <template slot-scope="scope">
                                        <div class="date-time-item">{{ scope.row.date }}</div>
                                        <div class="date-time-item">{{ scope.row.time }}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="process_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>

            <childFlow :data="getCheckListPageOrder"></childFlow>
            <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]"
                        :page-size="cl_page_size"
                        :total="cl_page_total"
                        layout="total, sizes, prev, pager, next, jumper">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
  import childFlow from './child-flow.vue';
  import badge from './badge.vue';
  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 {
    name: 'ElFlowRecordNew1',
    components: {
      childFlow,
      badge,
      ElInput,
      ElButton,
      ElUpload,
      ElDialog,
      ElCol,
      ElRow,
      ElPagination,
      ElTableColumn,
      ElTable
    },
    data: function() {
      return {
        having_data: true,
        current_main_flow_sampleNo: null,
        current_main_flow_status: null,
        getCheckListPageOrder: [],
        main_flow_records_list: [],
        main_flow_list: [],
        cl_page_index: 1,
        cl_page_total: 0,
        cl_page_size: 10,
        main_flow_records_id: 'main-flow-records',
        mft_page_index: 1,
        mft_page_size: 10,
        getMftDataLength: 0
      };
    },
    props: {
      data: {
        type: Object, default: () => {
          return {
            sampleNo: '',
            sampleId: '',
            data_interface: '',
            JID: ''
          };
        }
      }
    },
    methods: {
      handle_mft_current_change(val) {
        this.mft_page_index = val;
        this.get_main_flow_records();
      },
      handle_mft_size_change(val) {
        this.mft_page_size = val;
        this.get_main_flow_records();
      },
      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'}`;
      },
      create_list_for_date_time: function(list) {
        if (list === null ||
          list.length === null) {
          return list;
        }
        let tempList = [];
        for (let i = 0; i < list.length; i++) {
          let item = list[i];
          let arr = list[i].start_time.split(' ');
          item.date = arr[0];
          item.time = arr[1];
          tempList.push(item);
        }
        return tempList;
      },
      get_main_flow_records: function() {
        this.$http.post(this.data.data_interface + 'getTransListBySampleId', {
          sampleId: this.data.sampleId,
          JID: this.data.JID,
          pageNo: this.mft_page_index,
          pageSize: this.mft_page_size
        }, {
          emulateJSON: true,
          headers: {
            JID: this.data.JID
          }
        }).then(function(response) {
          let created_list = this.create_list_for_date_time(response.body.list);
          this.main_flow_records_list = created_list;
          this.getMftDataLength = response.body.allRow;
        }, function(response) {});
      },
      format: function(date, fmt) {
        let o = {
          'M+': date.getMonth() + 1, // 月份
          'd+': date.getDate(), // 日
          'h+': date.getHours(), // 小时
          'm+': date.getMinutes(), // 分
          's+': date.getSeconds(), // 秒
          'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
          'S': date.getMilliseconds() // 毫秒
        };
        if (/(y+)/.test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
        }
        for (var k in o) {
          if (new RegExp('(' + k + ')').test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
          }
        }
        return fmt;
      },
      getClickAble: function(item) {
        if ((item.type === 'flow' && item.date !== '----') ||
          (item.type === 'flow' && item.thisNode)) {
          return 0;
        } else {
          return 1;
        }
      },
      create_flow_data: function(data) {
        if (!data || !data.length) {
          this.having_data = false;
        } else {
          this.having_data = true;
        }

        let tempArray = [];

        for (let i = 0; i < data.length; i++) {
          let startTimePre = '----';
          let startTimeLast = '----';
          let timeSpan = '----';
          let arrowStatus_ = 0;

          if (data[i].startTime !== undefined) {
            let startTime = new Date(data[i].startTime);
            startTimePre = this.format(startTime, 'yyyy-MM-dd');
            startTimeLast = this.format(startTime, 'hh:mm:ss');
          }
          if (data[i].thisNode) {
            this.current_main_flow_status = data[i].descp;
          }

          let temp = {
            name: data[i].descp,
            flag: data[i].disp_or,
            dhCount: data[i].dhCount,
            fgCount: data[i].fgCount,
            prevProcessType: data[i].prevProcessType,
            prn: data[i].prn,
            date: startTimePre,
            time: startTimeLast,
            type: 'flow',
            processType: data[i].processType,
            oth_id: data[i].oth_id,
            thisNode: data[i].thisNode,
            errorProcess: data[i].errorProcess
          };

          if (data[i + 1] !== undefined &&
            data[i + 1].startTime !== undefined && data[i].startTime !== undefined) {
            timeSpan = new Date(data[i + 1].startTime) - new Date(data[i].startTime);
            let tempArray = (timeSpan / 1000 / 60 / 60).toString().split('.');
            timeSpan = tempArray[0] + '时' + Math.ceil(parseFloat('0.' + tempArray[1]) * 60) + '分';
            if (new Date(data[i].startTime) > new Date(data[i + 1].startTime)) {
              timeSpan = '----';
            }
          }

          if (data[i].startTime !== undefined) {
            arrowStatus_ = 1;
          }

          tempArray.push(temp);
          tempArray.push({
            timeSpan: timeSpan,
            type: 'time',
            arrowStatus: arrowStatus_
          });
        }
        tempArray.pop();
        this.main_flow_list = tempArray;
      },
      get_sample_check_list: function() {
        this.$http.post(this.data.data_interface + 'getTestItemsBySampleId', {
          pageNo: this.cl_page_index,
          pageSize: this.cl_page_size || 10,
          sampleId: this.data.sampleId,
          JID: this.data.JID
        }, {
          emulateJSON: true,
          headers: {
            JID: this.data.JID
          }
        }).then(function(response) {
          this.getCheckListPageOrder = this.create_sample_check_list(response.data.list);
          this.cl_page_total = response.data.allRow;
        }, function(response) {
          console.log(response);
        });
      },
      get_main_flow: function() {
        this.$http.post(this.data.data_interface + 'getListNodeBySampleId', {
        // this.$http.post('https://192.168.2.215:31800/lcgl-prj/taskTrans/getListNodeBySampleId', {
          sampleId: this.data.sampleId,
          JID: this.data.JID
        }, {
          emulateJSON: true,
          headers: {
            JID: this.data.JID
          }
        }).then(function(response) {
          this.create_flow_data(response.data.list);
        }, function(response) {
          console.log(response);
        });
      },
      main_flow_item_style: function(val) {
        if (val === 'flow') {
          return 'flow-item';
        } else {
          return 'flow-direct';
        }
      },
      main_flow_arrow_style: function(val) {
        if (val === 0) {
          return 'arrow-line-gray';
        } else {
          return 'arrow-line-high';
        }
      },
      handle_cl_current_change(val) {
        this.cl_page_index = val;
        this.get_sample_check_list();
      },
      handle_cl_size_change(val) {
        this.cl_page_size = val;
        this.get_sample_check_list();
      },
      create_sample_check_list: function(list) {
        if (list === null) {
          return list;
        }
        let tempList = [];
        for (let i = 0; i < list.length; i++) {
          let item = list[i];
          item.index = i + 1;
          tempList.push(item);
        }
        return tempList;
      },
      get_all_data() {
        this.get_main_flow();
        this.get_sample_check_list();
        this.get_main_flow_records();
      }
    },
    watch: {
      data: function() {
        this.get_all_data();
        this.current_main_flow_sampleNo = this.data.sampleNo;
      }
    }
  };
</script>

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

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

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