/*
 *@description:查看
 *@author: hudw
 *@date: 2022-04-26 16:41:46
*/
<template>
  <p-card v-if="display" ref="card" class="full-card-panel" :bordered="false" :loading="loading">
    <a-space slot="title" v-if="showHeader">
      <a-icon type="arrow-left" @click="back" :style="{ color: '#08c' }" />
      查看订单信息</a-space
    >
    <a-tabs v-model="activeKey" :tabBarStyle="{ height: '100%' }">
      <a-tab-pane :key="1" tab="订单信息">
        <a-divider v-if="processEnums.length > 0" orientation="left">自有流程配置</a-divider>
        <div v-if="processEnums.length > 0" class="process-view">
          <div class="process-view-item" v-for="(item, index) in processEnums" :key="index">
            <div class="processTitle">{{ item.title }}</div>
            <div :class="{ processBox: true, processBoxChecked: item.groupcode1 === '1'||item.checked2 }">
              {{ item.label }}
            </div>
            <div v-if="item.checkboxValue" class="processCheckbox">
              <p-checkbox v-model="item.checked" readOnly>{{ item.checkboxLabel }}</p-checkbox>
            </div>
            <div v-if="item.checkboxValue2" class="processCheckbox">
              <p-checkbox v-model="item.checked2" readOnly>{{ item.checkboxLabel2 }}</p-checkbox>
            </div>
            <div v-if="item.checkboxValue3" class="processCheckbox">
              <p-checkbox v-model="item.checked3" readOnly>{{ item.checkboxLabel3 }}</p-checkbox>
            </div>
          </div>
        </div>
        <a-divider v-if="carrierFlowConfig && carrierFlowConfig.length > 0" orientation="left">承运商流程配置</a-divider>
        <div v-if="carrierFlowConfig && carrierFlowConfig.length > 0" class="process-view">
          <div class="process-view-item" v-for="(item, index) in carrierFlowConfig" :key="index">
            <div class="processTitle">{{ item.title }}</div>
            <div :class="{ processBox: true, processBoxChecked: item.groupcode1 === '1' }">
              {{ item.label }}
            </div>
            <div v-if="item.checkboxValue" class="processCheckbox">
              <p-checkbox v-model="item.checked" readOnly>{{ item.checkboxLabel }}</p-checkbox>
            </div>
            <div v-if="item.checkboxValue2" class="processCheckbox">
              <p-checkbox v-model="item.checked2" readOnly>{{ item.checkboxLabel2 }}</p-checkbox>
            </div>
            <div v-if="item.checkboxValue3" class="processCheckbox">
              <p-checkbox v-model="item.checked3" readOnly>{{ item.checkboxLabel3 }}</p-checkbox>
            </div>
          </div>
        </div>

        <viewFormContent v-if="display" ref="form" v-bind="$attrs" v-on="$listeners" :goodsTableColumn="goodsTableColumn" :record="dataView">
          <slot></slot>
        </viewFormContent>
      </a-tab-pane>
      <a-tab-pane :key="2" tab="节点跟踪">
        <nodeTracking v-if="shipbillId && activeKey === 2" :editId="shipbillId"></nodeTracking>
      </a-tab-pane>
      <a-tab-pane :key="3" tab="订单轨迹">
        <orderPath v-if="shipbillId && activeKey === 3" :ids="[shipbillId]" @getLineList="getLineList"></orderPath>
      </a-tab-pane>
      <a-tab-pane :key="4" tab="温度监控">
        <tempMonitor :ids="[shipbillId]"></tempMonitor>
      </a-tab-pane>
      <a-tab-pane :key="5" tab="操作日志">
        <operationLog v-if="shipbillId && activeKey === 5" :editId="shipbillId"></operationLog>
      </a-tab-pane>
      <p-tab-pane :key="6" tab="途径点">
        <p-table
          v-if="shipbillId && activeKey === 6"
          ref="pointTable"
          dragle
          bordered
          row-key="gpsDate"
          :id="$route.meta.menuId + '_pointList'"
          :scroll="{ x: true }"
          :columns="point_columns"
          :data-source.sync="pointDataSource"
          :remote-url="pointRemoteUrl"
          :remoteData="pointParams"
          :rowSelectType="false"
        >
        </p-table>
      </p-tab-pane>
      <p-tab-pane :key="7" tab="报警">
        <p-table
          v-if="shipbillId && activeKey === 7"
          ref="alertTable"
          dragle
          bordered
          row-key="shipbillId"
          :id="$route.meta.menuId + '_alertList'"
          :scroll="{ x: true }"
          :columns="alert_columns"
          :data-source.sync="alertDataSource"
          :remote-url="alertRemoteUrl"
          :remoteData="alertParams"
          :rowSelectType="false"
        >
        </p-table>
      </p-tab-pane>
    </a-tabs>
  </p-card>
</template>
<script>
import viewFormContent from './formDetails/viewFormContent.vue';
import nodeTracking from './modules/nodeTracking.vue';
import operationLog from './modules/operationLog.vue';
import { mainViewUrl, alertRemoteUrl } from './api.js';
import orderPath from './orderPath/index.orderPath.vue';
import tempMonitor from './tempMonitor/index.tempMonitor.vue';
import { setPointColumns, setAlertColumns } from './tableConfig.js';

export default {
  inheritAttrs: false,
  components: { orderPath, tempMonitor, viewFormContent, nodeTracking, operationLog },
  props: {
    record: {
      type: Object,
    },
    showHeader: {
      type: Boolean,
      default:true
    },
    goodsTableColumn: {
      type: Array,
    },
  },
  data() {
    return {
      processEnums: [], // 进度list
      carrierFlowConfig: null, //承运商流程
      processNoCheckEnums: [], // 进度中默认不选中的list

      // 自有流程配置
      FLOW_CONFIG_ZY: [
        { title: '订单管理', label: '新增', value: 'Add', groupcode1: '1', checkboxValue: 'AddCommit', checkboxLabel: '新增后自动提交', checked: false },
        { title: '订单管理', label: '提交', value: 'Commit', groupcode1: '1', checkboxValue: 'CommitReview', checkboxLabel: '提交后自动审核', checked: false },
        {
          title: '待审核',
          label: '审核',
          value: 'Review',
          groupcode1: '1',
          checkboxValue2: 'ReviewDispatch',
          checkboxLabel2: '运单匹配唯一承运方自动调度',
          checked2: false,
          checkboxValue: 'ReviewSplit',
          checkboxLabel: '调用拆分策略',
          checked: false,
        },
        { title: '运输计划', label: '计划', value: 'TransportPlan', groupcode1: '2', checkboxValue: 'TransportPlan', checkboxLabel: '是否开启计划', checked: false },
        { title: '待调度', label: '调度', value: 'Dispatch', groupcode1: '1', checkboxValue: 'DispatchCheck', checkboxLabel: '调度后自动审核', checked: false },
        { title: '已派车/已托运', label: '调度审核', value: 'Check', groupcode1: '1' },
        { title: '待预约', label: '预约', value: 'Appointment', groupcode1: '2', checkboxValue: 'Appointment', checkboxLabel: '开启预约', checked: false, checkboxValue2: 'AppointmentTakeNumAndCallNum',
          checkboxLabel2: '是否开启取号叫号',
          checked2: false },
        { title: '待理货', label: '理货', value: 'ArrangeGoods', groupcode1: '2', checkboxValue: 'ArrangeGoods', checkboxLabel: '开启理货', checked: false },
        { title: '待装卸', label: '装卸', value: 'LoadUnLoad', groupcode1: '2', checkboxValue: 'LoadUnLoad', checkboxLabel: '开启装卸', checked: false },
        { title: '待装卸', label: '装车扫描', value: 'Scanning', groupcode1: '2', checkboxValue: 'Scanning', checkboxLabel: '开启装车扫描', checked: false },
        { title: '待提货/提货确认/拣货出库/整车直发', label: '启运登记', value: 'SendOff', groupcode1: '1' },
        { title: '待送达/入库在途/出库在途/整车直发', label: '送达确认', value: 'ArriveConfirm', groupcode1: '1' },
        { title: '', label: '签收', value: 'SignIn', groupcode1: '2', checkboxValue: 'SignIn', checkboxLabel: '开启签收', checked: false },
      ],

      // 自提流程配置
      FLOW_CONFIG_ZT: [
        { title: '订单管理', label: '新增', value: 'Add', groupcode1: '1', checkboxValue: 'AddCommit', checkboxLabel: '新增后自动提交', checked: false },
        { title: '订单管理', label: '提交', value: 'Commit', groupcode1: '1', checkboxValue: 'CommitReview', checkboxLabel: '提交后自动审核', checked: false },
        { title: '待审核', label: '审核', value: 'Review', groupcode1: '1' },
        { title: '待自提', label: '自提车辆登记', value: 'SelfPickUpVehReg', groupcode1: '2', checkboxValue: 'SelfPickUpVehReg', checkboxLabel: '自提车辆登记', checked: false },
        { title: '待预约', label: '预约', value: 'Appointment', groupcode1: '2', checkboxValue: 'Appointment', checkboxLabel: '开启预约', checked: false,    checkboxValue2: 'AppointmentTakeNumAndCallNum',
          checkboxLabel2: '是否开启取号叫号',
          checked2: false, },
        { title: '待理货', label: '理货', value: 'ArrangeGoods', groupcode1: '2', checkboxValue: 'ArrangeGoods', checkboxLabel: '开启理货', checked: false },
        { title: '待装卸', label: '装卸', value: 'LoadUnLoad', groupcode1: '2', checkboxValue: 'LoadUnLoad', checkboxLabel: '开启装卸', checked: false },
        { title: '待装卸', label: '装车扫描', value: 'Scanning', groupcode1: '2', checkboxValue: 'Scanning', checkboxLabel: '开启装车扫描', checked: false },
        { title: '待自提', label: '自提确认', value: 'SelfPickUpConfirm	', groupcode1: '1' },
      ],
      // 承运商流程配置
      FLOW_CONFIG_CYS: [
        {
          title: '订单管理',
          label: '接单',
          value: 'Receive',
          groupcode1: '1',
          checkboxValue: 'RejectReceive',
          checkboxLabel: '承运商开启接单拒绝',
          checked: false,
          checkboxValue2: 'ReceiveCommit',
          checkboxLabel2: '接单后自动提交',
          checked2: false,
        },
        { title: '订单管理', label: '提交', value: 'Commit', groupcode1: '1', checkboxValue: 'CommitReview', checkboxLabel: '提交后自动审核', checked: false },
        { title: '待审核', label: '审核', value: 'Review', groupcode1: '1' },
        { title: '待调度', label: '调度', value: 'Dispatch', groupcode1: '1', checkboxValue: 'DispatchCheck', checkboxLabel: '调度后自动审核', checked: false },
        { title: '已派车/已托运', label: '调度审核', value: 'Check', groupcode1: '1', checkboxValue: '', checkboxLabel: '' },
        { title: '待预约', label: '预约', value: 'Appointment', groupcode1: '2', checkboxValue: 'Appointment', checkboxLabel: '开启预约', checked: false,    checkboxValue2: 'AppointmentTakeNumAndCallNum',
          checkboxLabel2: '是否开启取号叫号',
          checked2: false },
        { title: '待理货', label: '理货', value: 'ArrangeGoods', groupcode1: '2', checkboxValue: 'ArrangeGoods', checkboxLabel: '开启理货', checked: false },
        { title: '待装卸', label: '装卸', value: 'LoadUnLoad', groupcode1: '2', checkboxValue: 'LoadUnLoad', checkboxLabel: '开启装卸', checked: false },
        { title: '待装卸', label: '装车扫描', value: 'Scanning', groupcode1: '2', checkboxValue: 'Scanning', checkboxLabel: '开启装车扫描', checked: false },
        { title: '待提货/提货确认/拣货出库/整车直发', label: '启运登记', value: 'SendOff', groupcode1: '1' },
        { title: '待送达/入库在途/出库在途/整车直发', label: '送达确认', value: 'ArriveConfirm', groupcode1: '1' },
      ],

      ...this.$attrs,
      activeKey: 1,
      shipbillId: '',
      dataView: null,
      loading: false,

      point_columns: setPointColumns(this),
      pointDataSource: [],
      pointRemoteUrl: '',
      pointParams: {},

      alert_columns: setAlertColumns(this),
      alertDataSource: [],
      alertRemoteUrl,
      alertParams: {},
      display:false
    };
  },
  mounted() {},
  watch: {
    activeKey() {
      this.$nextTick(() => {
        this.$refs.card.updateScrollbar()

      })
    },
    record(value) {
      this.display = true

      // if (this.$el.style.display == 'none') return;

      if (!value) {
        this.shipbillId = '';
        this.$refs?.form?.init(1, value);
        return;
      }
      if(!value.shipbillId) return
      this.getView(value.shipbillId);
      this.alertParams = {
        shipBillId: value.shipbillId,
      };
    },
  },
  computed: {},
  methods: {
    back() {
      this.activeKey = 1;
      if (this.$refs.form) {
        this.$refs.form.back(this.record && this.record.id, false);
      } else {
        this.$emit('back', 'mainTable', this.record && this.record.id, false);
      }
    },
    getView(shipbillId) {
      this.loading = true;
      let _this = this;
      this.carrierFlowConfig = null;
      this.processEnums = [];
      this.display=true
      return this.axios({ url: mainViewUrl, method: 'post', data: { shipbillId } }).then((response) => {
        this.loading = false;
        if (response.success) {
          this.shipbillId = shipbillId;
          this.dataView = response.data;
          const { deliveryMethodTypeName, flowConfig, carrierFlowConfig } = this.dataView;
          let flowConfigList = null,
            carrierFlowList = null;

          if (flowConfig) {
            flowConfigList = flowConfig;
            let FLOW_CONFIG = this.FLOW_CONFIG_ZY;
            if (deliveryMethodTypeName.indexOf('自提') > -1) {
              FLOW_CONFIG = this.FLOW_CONFIG_ZT;
            }
            this.processEnums = FLOW_CONFIG.map((_item) => {
              let item = { ..._item };
              if (flowConfigList.includes(item.checkboxValue)) {
                item.groupcode1 = '1';
                item.checked = true;
              }
              if (flowConfigList.includes(item.checkboxValue2)) {
                item.checked2 = true;
              }
              return item;
            });
            // this.processEnums.forEach((item) => {
            //   if (flowConfigList.includes(item.checkboxValue)) {
            //     item.groupcode1 = '1';
            //     item.checked = true;
            //   }
            //   if (flowConfigList.includes(item.checkboxValue2)) {
            //     item.checked2 = true;
            //   }
            // });
          }
          //承运商
          if (carrierFlowConfig) {
            this.carrierFlowConfig = this.FLOW_CONFIG_CYS.map((_item) => {
              let item = { ..._item };

              if (carrierFlowConfig.includes(item.value)) {
                item.groupcode1 = '1';
              } else {
                item.groupcode1 = '2';
              }
              if (carrierFlowConfig.includes(item.checkboxValue)) {
                item.checked = true;
              }
              if (carrierFlowConfig.includes(item.checkboxValue2)) {
                item.checked2 = true;
              }
              return item;
            });
          }
          // carrierFlowConfig.forEach((item) => {
          //   if (flowConfigList.includes(item.checkboxValue)) {
          //     item.groupcode1 = '1';
          //     item.checked = true;
          //   }
          //   if (flowConfigList.includes(item.checkboxValue2)) {
          //     item.checked2 = true;
          //   }
          // });

          // this.$refs.form.init(3, _this.dataView);
        } else {
          this.$exception(response)
        }
      });
    },
    form() {
      if (this.$refs.form.$refs[this.formName]) {
        return this.$refs.form.$refs[this.formName].form;
      }
      return undefined;
    },

    reload(args) {
      return this.$refs.form.$refs.table.reload(args);
    },

    getLineList(list) {
      this.pointDataSource = list;
    },
  },
};
</script>
<style lang='less'>
.process-view {
  display: flex;
  font-size: 12px;
  justify-content: space-between;

  .process-view-item {
    display: block;
    flex: 1;
    padding-right: 8px;
  }
  .processTitle {
    height: 40px;
    display: flex;
    align-items: center;
    font-weight: 700;
  }

  .processCheckbox {
    display: block;
    align-items: flex-start;
    padding-top: 10px;
    width: 100%;
    .ant-checkbox {
      top: 0;
    }
  }

  .processBox {
    height: 40px;
    line-height: 40px;
    padding-left: 5px;
    background: url('./img/processBox.png');
    background-size: auto 40px;
    background-repeat: no-repeat;
  }

  .processBoxChecked {
    background: url('./img/processBoxChecked.png');
    background-size: auto 40px;
    background-repeat: no-repeat;
    color: darkslategrey;
  }
}
</style>