<template>
  <div class="flowRecordSample">
    <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">{{ t(`flowRecord.number`) }}：{{current_case_prn}}</div>
          <div class="status-bar">
            {{ t(`flowRecord.currStatus`) }}：
            <span class="status">{{current_main_flow_status}}</span>
          </div>
          <div
            class="status-bar"
            style="float: right;color:#67BCFF; cursor: pointer;"
            @click="refresh_page"
          >{{ t(`flowRecord.refreshData`) }}</div>
        </el-col>
      </el-row>
      <!-- 主流程 -->
      <div class="main-flow">
        <el-row>
          <el-col :span="24">
            <ul :class="`${data.isConcise ? 'flow-concise ':''}scroll flow-items-padding`">
              <li
                v-for="(item,index) in main_flow_list"
                :key="index"
                :class="main_flow_item_style(item.type)"
                :style="item.thisNode == true ? (item.processType == 'LZFS_ZC' ? 'box-shadow: 0 0 12px #c1e4ff;' : 'box-shadow: 0 0 12px #f56c6cb0;') : ''"
              >
                <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 v-if='data.isConcise==undefined || !data.isConcise'>{{item.date}}</div>
                  <div v-if='data.isConcise==undefined || !data.isConcise'>{{item.time}}</div>
                </div>
                <div v-if="item.type == 'time'" :class='main_flow_arrow_style(item.arrowStatus)'>
                  <div style='height: 18px;'>{{(data.isConcise==undefined || !data.isConcise)?item.timeSpan:''}}</div>
                </div>
              </li>
              <div style='clear: both;'></div>
            </ul>
          </el-col>
        </el-row>

        <badge :badge-id="'main-flow-records'" :title="t(`flowRecord.badgeTitle`)" :titleWidth="70"></badge>
        <div id='main-flow-records' :show="!data.openMainFlowTable ? 0 : 1">
          <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-if="v.prop=='process_remark'">
                      <div v-if="scope.row.process_remark && isRichText(scope.row.process_remark)" @click="setRemark(scope.row.process_remark)" :style="{height: '46px',color:['198922013160', 'LZFS_ZC'].includes(scope.row.process_type) ? '' : 'red','cursor': scope.row.process_remark ? 'pointer' :''}">
                        {{ t(`flowRecord.item.detail`) }}
                      </div>
                      <div v-else>{{scope.row.process_remark}}</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='getMftDataLength'
              layout='total, sizes, prev, pager, next, jumper'
            ></el-pagination>
          </div>
        </div>
      </div>
      <!-- 检项列表 -->
      <prjList v-if="!data.hidePrjTable" :data='prj_flow_record_obj'></prjList>
      <el-dialog
        fullscreen
        :title="t(`flowRecord.remarkDetail`)"
        :visible.sync="detailMarkVisible"
        :close-on-click-modal="false"
        append-to-body
      >
      <div v-html="detailMark" style="overflow: auto;"></div>
    </el-dialog>
    </div>
  </div>
</template>

<script>
import prjList from './prjList.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: 'ElFlowRecordSample',
  components: {
    prjList,
    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: []
      },
      detailMarkVisible:false,
      detailMark:''
    };
  },
  props: {
    data: {
      type: Object,
      default: () => {
        return {
          showNo: '', // 编号
          sampleId: true,
          orderId: true,
          data_interface: '',
          JID: '',
          isConcise: false, // 主流程是否用简洁版
          openMainFlowTable: false//是否展开主流程的table：不配置的话是折叠--任务19101
        };
      }
    }
  },
  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;
      }
    },
    getMftDataLength() {
      let originalList = this.main_flow_records_list;
      if (originalList !== null) {
        return originalList.length;
      }
    }
  },
  mounted() {
    // this.get_all_data();
  },
  methods: {
    isRichText(text){
      return text && text.indexOf('<p')==0 && text.endsWith('</p>');
    },
    setRemark(html){
      this.detailMarkVisible = true;
      this.detailMark = html;
    },
    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: []
      };
      this.$children.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.current_case_prn = this.data.showNo || '---';
      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.having_data = true;
            // 初始化
            this.main_flow_list = [];
            this.current_main_flow_status = '';
            // 设置表头
            this.columns = response.data.obj.transHeader;
            // 主流程数据
            let data = response.data.obj.sampleTrans;
            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.sampleTransTable && response.data.obj.sampleTransTable.length > 0)
                ? response.data.obj.sampleTransTable
                : [];
            // 显示项目流转记录
            if(!this.data.hidePrjTable){
              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;
            }
          },
          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;
}
.flow-concise img{
  width: 38px;
  height: 38px;
}
ul.flow-concise li[class=flow-item]{
  padding:12px 5px;
}
ul.flow-concise li[class=flow-direct]{
  padding: 8px;
  padding-top: 3%;
}
ul.flow-concise li[class=flow-direct] div:first-child{
  padding: 0;
}
</style>
