<template>
  <div class="flowRecordOrder">
    <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_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">
        <el-row>
          <el-col :span="24">
            <ul class="scroll flow-items-padding" :style="{'white-space':data.overViewMode ? 'break-spaces':'nowrap'}">
              <li
                v-for="(item,index) in main_flow_list"
                :key="index"
                :class="main_flow_item_style(item.type)"
                :style="{'box-shadow':'0 0 12px '+item.thisNode == true?(item.processType == 'LZFS_ZC' ?'#c1e4ff':'#f56c6cb0'):'','padding':data.overViewMode ?'18px 0px':'18px 16px','margin-bottom':data.overViewMode ? '10px':''}"
              >
                <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 :style="data.overViewMode?'padding: 0;padding-right:5px;':'padding: 0 15px'" v-if="item.type == 'time'" :class="main_flow_arrow_style(item.arrowStatus)">
                  <div :style="data.overViewMode?'padding: 0;padding-right:5px;':'padding: 0 15px'" style="height: 18px;">{{item.timeSpan}}</div>
                </div>
              </li>
              <div style="clear: both;"></div>
            </ul>
          </el-col>
        </el-row>

        <badge :badge-id="'main-flow-records'" :title="'流转记录'" :titleWidth="70"></badge>
        <div id="main-flow-records" show="0">
          <el-row>
            <el-col :span="24">
              <el-table
                :data="getMainFlowTranPageOrder"
                style="width: 100%"
                :header-cell-style="get_row_class"
              >
                <el-table-column
                  v-for="(v,i) in columns"
                  :key="i"
                  :width="v.width"
                  :prop="v.prop"
                  :label="v.label"
                >
                  <template slot-scope="scope">
                    <div
                      v-if="v.prop=='process_type_val'"
                      :style="get_error_type_style(scope.row.process_type)"
                    >{{scope.row.process_type_val}}</div>
                    <div v-else-if="v.prop=='start_time'">
                      <div
                        class="date-time-item"
                      >{{ (scope.row.start_time && scope.row.start_time.split(' ')[0]) || '' }}</div>
                      <div
                        class="date-time-item"
                      >{{ (scope.row.start_time && scope.row.start_time.split(' ')[1]) || '' }}</div>
                    </div>
                    <div v-else>{{scope.row[v.prop]}}</div>
                  </template>
                </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, 30, 50, 100, 200, 300]"
              :page-size="mft_page_size"
              :total="main_flow_records_list.length"
              layout="total, sizes, prev, pager, next, jumper"
            ></el-pagination>
          </div>
        </div>
      </div>
      <!-- 样品/原始记录/器具流转记录 -->
      <sampleOriginalFlowRecord
        ref="sampleOriginalRef"
        v-if="data.isShowMould || data.isShowSample || data.isShowUtensil"
        :data="samorg_flow_record_obj"
      ></sampleOriginalFlowRecord>
      <!-- 检项列表 -->
      <prjList ref="prjListRef" v-if="data.isShowTi" :data="prj_flow_record_obj"></prjList>
      <!-- 报告流转记录 -->
      <reportFlowRecord ref="reportRef" v-if="data.isShowReport" :data="report_flow_record_obj"></reportFlowRecord>
    </div>
  </div>
</template>

<script>
import prjList from "./prjList.vue";
import sampleOriginalFlowRecord from "./sampleOriginalFlowRecord.vue";
import reportFlowRecord from "./reportFlowRecord.vue";
import badge from "./badge.vue";
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: "ElFlowRecordOrder",
  components: {
    prjList,
    sampleOriginalFlowRecord,
    reportFlowRecord,
    badge,
    ElCol,
    ElRow,
    ElPagination,
    ElTableColumn,
    ElTable
  },
  data: function() {
    return {
      current_case_prn: null,
      current_main_flow_status: null,
      main_flow_list: [],
      main_flow_records_list: [],
      having_data: true,
      mft_page_index: 1,
      mft_page_size: 10,
      columns: [],
      prj_flow_record_obj: {
        prj_flow_record_list: [],
        prj_flow_record_column: [],
        trans_column: [],
        prjTableId: 'prj_flow_recod_table'
      },
      report_flow_record_obj: {
        report_flow_record_list: [],
        report_flow_record_column: []
      },
      samorg_flow_record_obj: {
        samorg_flow_record_list: [],
        samorg_flow_record_column: [],
        prj_flow_record_column: [],
        showWho: "",
        expandAll:this.data.expandAll
      }
    };
  },
  props: {
    data: {
      type: Object,
      default: () => {
        return {
          showNo: "",
          orderId: "",
          isShowMould: true,
          isShowSample: true,
          isShowReport: true,
          isShowTi: true,
          data_interface: "",
          JID: ""
        };
      }
    }
  },
  computed: {
    getMainFlowTranPageOrder() {
      let originalList = this.main_flow_records_list;
      let pageIndex = this.mft_page_index;
      let pageSize = this.mft_page_size;
      if (originalList && originalList !== null) {
        let list = originalList.slice(
          (pageIndex - 1) * pageSize,
          pageIndex * pageSize
        );
        return list;
      }
    }
  },
  mounted() {
    this.samorg_flow_record_obj.showWho = this.data.isShowSample ? "showSample" : (this.data.isShowMould ? "showMould" : (this.data.isShowUtensil ? "showUtensil" : ''));
    this.samorg_flow_record_obj.expandAll = this.data.expandAll;
    // this.get_all_data();
  },
  methods: {
    refresh_page() {
      this.current_main_flow_status = null;
      this.main_flow_list = [];
      this.main_flow_records_list = [];
      this.having_data = true;
      this.mft_page_index = 1;
      this.columns = [];
      this.prj_flow_record_obj = {
        prj_flow_record_list: [],
        prj_flow_record_column: [],
        trans_column: [],
        prjTableId: 'prj_flow_recod_table'
      };
      this.report_flow_record_obj = {
        report_flow_record_list: [],
        report_flow_record_column: []
      };
      this.samorg_flow_record_obj = {
        samorg_flow_record_list: [],
        samorg_flow_record_column: [],
        prj_flow_record_column: [],
        expandAll:this.data.expandAll,
        showWho: this.data.isShowSample ? "showSample" : (this.data.isShowMould ? "showMould" : (this.data.isShowUtensil ? "showUtensil" : ''))
      };
      if (this.$refs.reportRef) {
        this.$refs.reportRef.cl_page_index = 1;
      }
      if (this.$refs.prjListRef) {
        this.$refs.prjListRef.cl_page_index = 1;
      }
      if (this.$refs.sampleOriginalRef) {
        this.$refs.sampleOriginalRef.cl_page_index = 1;
      }
      this.get_all_data();
    },
    get_row_class({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color:#f6f6f6";
      }
    },
    get_error_type_style(errorType) {
      if (errorType !== "LZFS_ZC") {
        return "color:red;";
      }
    },
    main_flow_item_style(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";
      }
    },
    get_all_data() {
      this.having_data = true;
      this.current_case_prn = this.data.showNo || '---';
      if(this.data.isShowMould && (this.data.isShowSample || this.data.isShowUtensil) ||
      this.data.isShowSample && (this.data.isShowMould || this.data.isShowUtensil) ||
      this.data.isShowUtensil && (this.data.isShowSample || this.data.isShowMould)
      ){
        this.$message.error("【isShowMould】、【isShowSample】、【isShowUtensil】只能三选一展示，请修改配置！");
        return
      }
      let params = Object.assign({}, this.data);
      delete params.data_interface;
      this.$http
        .post(this.data.data_interface, params, {
          emulateJSON: true,
          headers: {
            JID: this.data.JID
          }
        })
        .then(
          function(response) {
            if (!response.data.status) {
              this.having_data = false;
              this.$message.error(response.data.error);
              return;
            }
            // 初始化
            this.main_flow_list = [];
            this.current_main_flow_status = "";
            // 设置表头
            this.columns = response.data.obj.transHeader;
            // 主流程数据
            let data = response.data.obj.mainTrans;
            let tempArray = [];

            for (let i = 0; i < data.length; i++) {

              if (data[i].startTime && data[i].thisNode) {
                this.current_main_flow_status = data[i].nodeName;
              }

              let temp = {
                name: data[i].nodeName,
                flag: data[i].dispOr,
                dhCount: data[i].dhCount,
                fgCount: data[i].fgCount,
                type: "flow",
                date:
                  (data[i].startTime && data[i].startTime.split(" ")[0]) ||
                  "----",
                time:
                  (data[i].startTime && data[i].startTime.split(" ")[1]) ||
                  "----",
                processType: data[i].processType,
                thisNode: data[i].thisNode,
                errorProcess: data[i].errorProcess
              };

              tempArray.push(temp);

              tempArray.push({
                timeSpan: data[i].useTime,
                type: "time",
                arrowStatus: data[i].startTime?1:0
              });
            }

            tempArray.pop();
            this.main_flow_list = tempArray;
            this.main_flow_records_list =
              (response.data.obj.mainTransTable && response.data.obj.mainTransTable.length > 0)
                ? response.data.obj.mainTransTable
                : [];
            if (this.data.isShowMould) {
              // 显示原始记录流转记录
              this.samorg_flow_record_obj.samorg_flow_record_list =
                (response.data.obj.modelTrans && response.data.obj.modelTrans.length > 0)
                  ? response.data.obj.modelTrans
                  : [];
              this.samorg_flow_record_obj.samorg_flow_record_column =
                (response.data.obj.modelTableHeader && response.data.obj.modelTableHeader.length > 0)
                  ? response.data.obj.modelTableHeader
                  : [];
              this.samorg_flow_record_obj.prj_flow_record_column =
                (response.data.obj.tiTableHeader && response.data.obj.tiTableHeader.length > 0)
                  ? response.data.obj.tiTableHeader
                  : [];
              this.samorg_flow_record_obj.trans_column = this.columns;
            }
            if (this.data.isShowSample || this.data.isShowUtensil) {
              // 显示样品/器具流转记录
              this.samorg_flow_record_obj.samorg_flow_record_list =
                (response.data.obj.sampleTrans && response.data.obj.sampleTrans.length > 0)
                  ? response.data.obj.sampleTrans
                  : [];
              this.samorg_flow_record_obj.samorg_flow_record_column =
                (response.data.obj.sampleTableHeader && response.data.obj.sampleTableHeader.length > 0)
                  ? response.data.obj.sampleTableHeader
                  : [];
              this.samorg_flow_record_obj.prj_flow_record_column =
                (response.data.obj.tiTableHeader && response.data.obj.tiTableHeader.length > 0)
                  ? response.data.obj.tiTableHeader
                  : [];
              this.samorg_flow_record_obj.trans_column = this.columns;
            }
            if (this.data.isShowTi) {
              // 显示项目流转记录
              this.prj_flow_record_obj.prj_flow_record_list =
                (response.data.obj.tiList && response.data.obj.tiList.length > 0)
                  ? response.data.obj.tiList
                  : [];
              this.prj_flow_record_obj.prj_flow_record_column =
                (response.data.obj.tiTableHeader && response.data.obj.tiTableHeader.length > 0)
                  ? response.data.obj.tiTableHeader
                  : [];
              this.prj_flow_record_obj.trans_column = this.columns;
            }
            if (this.data.isShowReport) {
              // 显示报告流转记录
              this.report_flow_record_obj.report_flow_record_list =
                (response.data.obj.reportList && response.data.obj.reportList.length > 0)
                  ? response.data.obj.reportList
                  : [];
              this.report_flow_record_obj.report_flow_record_column =
                (response.data.obj.reportTableHeader && response.data.obj.reportTableHeader.length > 0)
                  ? response.data.obj.reportTableHeader
                  : [];
              this.report_flow_record_obj.trans_column = this.columns;
            }
          },
          function(response) {}
        );
    },
    handle_mft_current_change(val) {
      this.mft_page_index = val;
    },
    handle_mft_size_change(val) {
      this.mft_page_size = val;
    }
  },
  watch: {
    data: function() {
      this.get_all_data();
    }
  }
};
</script>

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

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

.nodata-box {
  text-align: center;
}
#main-flow-records[show="0"] {
  display: none!important;
}
#main-flow-records[show="1"] {
  display: block!important;
}
</style>
