/*
 *@description:流程审批详情
 *@author: hudw
 *@date: 2022-06-14 10:49:34
*/
<template>
  <div class="pages" style="position: relative">
    <a-page-header style="background-color: #fff" :bordered="false" class="card-panel">
      <a-space slot="extra">
        <p-button @click="back">取消</p-button>
      </a-space>
      <a-space slot="title">
        <a-icon type="arrow-left" @click="back(record && record.id)" :style="{ color: '#08c' }" />
        {{ ['', '我发起的', '待我审批的', '我已处理的'][+tabKey] + subTitle + title }}
        <!-- {{'approvalType:'+ approvalType }} -->
      </a-space>
      <div style="min-height: calc(60%); overflow-y: auto">
        <a-skeleton :loading="loading" active :paragraph="{ rows: 10 }">
          <orderDetailsView v-if="approvalType === 3" v-bind="$props" :record="approvalType === 3 ? detailForApprovalDTO : undefined" :st="st" v-on="$listeners" ref="grid_3" />
          <p-grid-form v-else-if="[1,2].includes(approvalType)" ref="grid" selfUpdate :items="formItems" :span="6" :labelCol="{ span: 6 }" :wrapperCol="{ span: 16 }" >

             <!-- 承运商证件查看 -->
             <template   v-if="approvalType===2" >
             <updateFormModal v-action:carrierCredentials ref="updateFormModal" :visible.sync="visible"  :view="3"  :title="'查看证件'" />
             <a-divider v-action:carrierCredentials orientation='left'>证件质料</a-divider>
              <p-table
              v-action:carrierCredentials
              :pagination="false"
              :id="$route.meta.menuId + '_card'"
              v-if="detailForApprovalDTO"
              style="width:100%"
              :scroll="{x:true}"
              :rowSelectType="false"
              :autoLoad="false"
              :dataSource="detailForApprovalDTO.paperDTOList"
              :columns="detailForApprovalDTO.columns"
              ></p-table>
            </template>

          </p-grid-form>
          <!-- <p-grid-form v-show="approvalType !== 3" ref="grid" selfUpdate :items="formItems" :span="6" :labelCol="{ span: 6 }" :wrapperCol="{ span: 16 }" /> -->

          <!-- 调度查看 -->
          <schedulingView v-else-if="[4,5,9,10].includes(approvalType)" ref="schedule" :approvalType="approvalType" :record="detailForApprovalDTO" :options="options"></schedulingView>
          <returnOrder v-else-if="[11,12].includes(approvalType)" ref="returnOrderFlag" :approvalType="approvalType" :record="detailForApprovalDTO" :options="options"></returnOrder>
          <!-- <returnOrderFlag v-else-if="approvalType === 12" ref="returnOrderFlag" :approvalType="approvalType" :record="detailForApprovalDTO" :options="options"></returnOrderFlag> -->
        </a-skeleton>
      </div>
    </a-page-header>
    <a-page-header style="min-height: calc(40% - 10px); margin-top: 10px; background-color: #fff" title="审批流程" :sub-title="subTitle">
      <a-space v-if="!loading && tabKey === '1'" slot="extra">
        <p-button type="primary" v-action:btnRetract :disabled="btnBackDisabled" @clickSync="btnRetract">撤回</p-button>
        <p-button type="primary" v-action:btnInvalid :disabled="btnDisabled" @clickSync="btnInvalid">作废</p-button>
        <p-button type="primary" :disabled="st === 1" @clickSync="btnSubmit">提交</p-button>
      </a-space>
      <a-skeleton :loading="loading" active :paragraph="{ rows: 10 }">
        <a-row :gutter="20">
          <a-col :span="12">
            <p-card class="card-panel" title="审批节点" :bodyStyle="{ minHeight: '400px' }">
              <p-table
                :id="$route.meta.menuId + '_bus_detail'"
                :autoLoad="false"
                rowSelectFixed
                :scroll="{ x: '100%' }"
                ref="bus_detail"
                bordered
                row-key="_row_count"
                :columns="bus_detail_columns"
                :pagination="false"
                :remoteUrl="{ url: get_bus_detail_url, method: 'post' }"
                dragle
                :rowSelectType="false"
                v-on="$listeners"
                :dataSource="nodeSelDTOList"
              >
                <template slot="operation" slot-scope="text, record">
                  <a href="javascript:;" @click.stop="show_info_item(record)">查看</a>
                  <a-divider type="vertical" />
                  <a href="javascript:;" @click.stop="update_item(record)">修改</a>
                  <a-divider type="vertical" />
                  <a href="javascript:;" @click.stop="delete_item(record)">删除</a>
                </template>
              </p-table>
            </p-card>
          </a-col>
          <a-col :span="12">
            <p-card class="card-panel" title="审核历史" :bodyStyle="{ minHeight: '400px' }">
              <p-table
                :id="$route.meta.menuId + 'bus_log'"
                :autoLoad="false"
                rowSelectFixed
                :scroll="{ x: '100%' }"
                ref="bus_log"
                bordered
                row-key="_row_count"
                :columns="bus_log_columns"
                :pagination="false"
                :remoteUrl="{ url: get_bus_log_url, method: 'post' }"
                dragle
                :dataSource="logDTOList"
                :rowSelectType="false"
                v-on="$listeners"
              >
                <template slot="operation" slot-scope="text, record">
                  <a href="javascript:;" @click.stop="show_info_item(record)">查看</a>
                  <a-divider type="vertical" />
                  <a href="javascript:;" @click.stop="update_item(record)">修改</a>
                  <a-divider type="vertical" />
                  <a href="javascript:;" @click.stop="delete_item(record)">删除</a>
                </template>
              </p-table>
            </p-card>
          </a-col>

          <a-col :span="24" v-if="tabKey === '2'">
            <p-card title="审核" style="margin-top: 10px">
              <p-grid-form selfUpdate :items="approveItems" :onValuesChange="onValuesChange" ref="approveGird" :labelCol="{ span: 2 }" :wrapperCol="{ span: 10 }" />
            </p-card>
          </a-col>
        </a-row>
      </a-skeleton>
    </a-page-header>
  </div>
</template>
<script>
import {
  shipbillView,
  trailer_get_approval_info,
  sendcar_get_approval_info,
  carrierView,
  cargoView,
  approvalSubmit,
  invalid,
  retract,
  submit,
  get_bus_detail_url,
  get_bus_log_url,
  vehicle_register_get_approval_info,
  getApprovalInfo,
  shipbillViewUrl,
  pending_receipt_approval_info,
  pending_orig_receipt_approval_info,
  shipbillEventback_getApprovalInfo,
} from '../../api'
import { setBusColumns, certificateColumns } from './tableConfig.js'

export default {
  name: 't-details',
  // import schedule from '@/blocks/components/scheduling/schedule/index.vue'
  components: {
    updateFormModal: () => import(/* webpackChunkName: "components-papersUpdateModal" */ '@/blocks/components/papersUpdateModal/index.updateFormModal.vue'),
    orderDetailsView: () => import(/* webpackChunkName: "components-viewFormContent" */ '@/blocks/components/orderView/formDetails/viewFormContent.vue'),
    schedulingView: () => import(/* webpackChunkName: "scheduling-schedulingView" */ '../scheduling/schedulingView.vue'),
    returnOrderFlag: () => import(/* webpackChunkName: "[request]" */ '../returnOrderFlag/returnOrderFlag.index.vue'),
    returnOrder: () => import(/* webpackChunkName: "[request]" */ '../returnOrder/returnOrder.index.vue'),
  },
  props: {
    st: {
      type: Number,
      default: 0 /**0=不显示,1=查看,2=新建,3=修改,4=复制 */,
    },
    options: {
      //字典
      type: Object,
    },
    record: {
      //当前行数据
      type: Object,
    },
    mainId: {
      //主表ID
      type: null,
    },
    formItems: {
      //主表ID
      type: Array,
    },
    tabKey: {
      type: null,
      //1 我发起的,2 待我审批的,3 我已处理的
    },

    approvalType: {
      type: null,
      //  APPROVAL_FLOW_TYPE：1 货主审核 2 承运商审核 3订单审核"
    },
  },
  computed: {
    btnBackDisabled() {
      if (this.record) {
        const { status } = this.record
        if (status === 3 || status === 7 || status === 6) return true
        return false
      }
      return true
    },
    btnDisabled() {
      //  1发起申请 2驳回 3撤回 4提交 5审核中 6作废 7审核完成
      if (this.record) {
        const { status } = this.record
        if (status === 7 || status === 6) return true
        return false
      }
      return true
    },
  },
  watch: {
    st(va) {
      if (va > 0) {
        let _this = this
        const { id, approvalObjectId, status } = this.record
        this.loading = true
        switch (this.approvalType) {
          case 1: //查货主详情
            _this.subTitle = '货主'
            return cargoView(this, { approvalBusinessId: id, cargoOwnerId: approvalObjectId }).then((response) => {
              _this.loading = false

              if (response.success) {
                const { approvalNodeSelDTOList, cargoOwnerDetailForApprovalDTO, approvalLogDTOList } = response.data
                cargoOwnerDetailForApprovalDTO.approvalBusinessId = id
                cargoOwnerDetailForApprovalDTO.cargoOwnerId = approvalObjectId
                _this.detailForApprovalDTO = cargoOwnerDetailForApprovalDTO
                const { province, city, district, provinceName, cityName, districtName } = cargoOwnerDetailForApprovalDTO
                let provinceCityDistrict = [province, city, district]
                _this.nodeSelDTOList = approvalNodeSelDTOList
                _this.logDTOList = approvalLogDTOList
                if (va === 1) {
                  provinceCityDistrict = [provinceName, cityName, districtName].filter((item) => item && item)
                  provinceCityDistrict = provinceCityDistrict.join('-')
                }
                _this.$nextTick(() => {
                  _this.$refs.grid.form.setFieldsValue({ ..._this.detailForApprovalDTO, provinceCityDistrict })
                })
              }
            })
          case 2:
            _this.subTitle = '承运商'
            return carrierView(this, { approvalBusinessId: id, carriersId: approvalObjectId }).then((response) => {
              _this.loading = false

              if (response.success) {
                const { carrierApprovalLogDTOList, carrierApprovalNodeDTOList, ..._data } = response.data
                const { province, city, district, provinceName, cityName, districtName } = _data
                _data.approvalBusinessId = id
                _data.carriersId = approvalObjectId
                let provinceCityDistrict = [province, city, district]
                _this.nodeSelDTOList = carrierApprovalNodeDTOList
                _this.logDTOList = carrierApprovalLogDTOList
                _data.columns=certificateColumns(_this)
                _this.detailForApprovalDTO = _data

                if (va === 1) {
                  provinceCityDistrict = [provinceName, cityName, districtName].filter((item) => item && item)
                  provinceCityDistrict = provinceCityDistrict.join('-')
                }
                _this.$nextTick(() => {
                  _this.$refs.grid.form.setFieldsValue({ ..._this.detailForApprovalDTO, provinceCityDistrict })
                })
              }
            })
          case 3:
            _this.subTitle = '订单'
            return shipbillView(this, { approvalBusinessId: id, shipbillId: approvalObjectId }).then((response) => {
              if (response.success) {
                const { shipbillDetailApprovalDTOList, shipbillApprovalNodeDTOList, shipbillApprovalLogDTOList, ..._data } = response.data
                _this.nodeSelDTOList = shipbillApprovalNodeDTOList
                _this.logDTOList = shipbillApprovalLogDTOList
                _data.shipbillId = approvalObjectId
                return _this.getView(_data.shipbillId).then((response) => {
                  _this.loading = false
                  if (response.success) {
                    response.data.approvalBusinessId = id
                    _this.detailForApprovalDTO= response.data
                  } else {
                    _this.$exception(response)
                  }
                })
              }
            })
          case 4:
            _this.subTitle = '调度'
            return sendcar_get_approval_info(this, { approvalBusinessId: id, loadingBillId: approvalObjectId }).then((response) => {
              _this.loading = false
              if (response.success) {
                const { shipbillInfoDTOList, shipbillApprovalNodeDTOList, shipbillApprovalLogDTOList, ..._data } = response.data
                _this.nodeSelDTOList = shipbillApprovalNodeDTOList
                _this.logDTOList = shipbillApprovalLogDTOList
                _data.approvalBusinessId = id
                _data.loadingBillId = approvalObjectId
                _data.approvalObjectId = approvalObjectId
                _this.detailForApprovalDTO = _data
                _this.detailForApprovalDTO.shipbillInfoDTOList = shipbillInfoDTOList
                _this.detailForApprovalDTO.columns = certificateColumns(_this)

              }
            })
          case 5:
            _this.subTitle = '承运商调度'
            return trailer_get_approval_info(this, { approvalBusinessId: id, loadingBillId: approvalObjectId }).then((response) => {
              _this.loading = false
              if (response.success) {
                const { shipbillInfoDTOList, shipbillApprovalNodeDTOList, shipbillApprovalLogDTOList, ..._data } = response.data

                _this.nodeSelDTOList = shipbillApprovalNodeDTOList
                _this.logDTOList = shipbillApprovalLogDTOList
                _data.approvalBusinessId = id
                _data.loadingBillId = approvalObjectId
                _data.approvalObjectId = approvalObjectId
                _this.detailForApprovalDTO = _data
                _this.detailForApprovalDTO.shipbillInfoDTOList = shipbillInfoDTOList
              }
            })
          case 9:
            _this.subTitle = '自提登记'
            return vehicle_register_get_approval_info(this, { approvalBusinessId: id, shipbillId: approvalObjectId }).then((response) => {
              _this.loading = false
              if (response.success) {
                const { shipbillInfoDTOList, shipbillApprovalNodeDTOList, shipbillApprovalLogDTOList, ..._data } = response.data

                _this.nodeSelDTOList = shipbillApprovalNodeDTOList
                _this.logDTOList = shipbillApprovalLogDTOList
                _data.approvalBusinessId = id
                _data.shipbillId = approvalObjectId
                _data.approvalObjectId = approvalObjectId
                _this.detailForApprovalDTO = _data
                _this.detailForApprovalDTO.shipbillInfoDTOList = shipbillInfoDTOList
              }
            })
          case 10:
            _this.subTitle = '提货审批'
            return getApprovalInfo(this, { approvalBusinessId: id, approvalObjectId: approvalObjectId, status: status }).then((response) => {
              _this.loading = false
              if (response.success) {
                const { shipbillInfoDTOList, shipbillApprovalNodeDTOList, shipbillApprovalLogDTOList, ..._data } = response.data
                _this.nodeSelDTOList = shipbillApprovalNodeDTOList
                _this.logDTOList = shipbillApprovalLogDTOList
                _data.approvalBusinessId = id
                _data.shipbillId = approvalObjectId
                _data.approvalObjectId = approvalObjectId
                _this.detailForApprovalDTO = _data
                _this.detailForApprovalDTO.shipbillInfoDTOList = shipbillInfoDTOList
              }
            })
          case 11:
            _this.subTitle = '待回单审批'
            return pending_receipt_approval_info(this, { approvalBusinessId: id, approvalObjectId }).then((response) => {
              if (response.success) {
                let { shipbillApprovalLogDTOList, shipbillApprovalNodeDTOList, shipbillId } = response.data;
                _this.nodeSelDTOList = shipbillApprovalNodeDTOList
                _this.logDTOList = shipbillApprovalLogDTOList
                return _this.getView(shipbillId).then(response => {
                  _this.loading = false
                  if (response.success) {
                    _this.detailForApprovalDTO = {
                      approvalBusinessId: id,
                      approvalObjectId:approvalObjectId,
                      shipbillInfoDTOList:response.data,
                      shipbillId
                    }

                  }
                })
              }
            }
          )
          case 12:
            _this.subTitle = '待正本回单审批'
            return pending_orig_receipt_approval_info(this, { approvalBusinessId: id, approvalObjectId }).then((response) => {
              if (response.success) {
                let { shipbillApprovalLogDTOList, shipbillApprovalNodeDTOList, shipbillId } = response.data;
                _this.nodeSelDTOList = shipbillApprovalNodeDTOList
                _this.logDTOList = shipbillApprovalLogDTOList
                return _this.getView(shipbillId).then(response => {
                  _this.loading = false
                  if (response.success) {
                    _this.detailForApprovalDTO = {
                      approvalBusinessId: id,
                      approvalObjectId:approvalObjectId,
                      shipbillInfoDTOList:response.data,
                      shipbillId
                    }
                  }
                })
              }
            }
          )
          case 13:
            _this.subTitle = '事件上传审批'
            return shipbillEventback_getApprovalInfo(this, { approvalBusinessId: id, approvalObjectId: approvalObjectId, status: status }).then((response) => {
              _this.loading = false
              if (response.success) {
                const { shipbillInfoDTOList, shipbillApprovalNodeDTOList, shipbillApprovalLogDTOList, ..._data } = response.data
                _this.nodeSelDTOList = shipbillApprovalNodeDTOList
                _this.logDTOList = shipbillApprovalLogDTOList
                _data.approvalBusinessId = id
                _data.shipbillId = approvalObjectId
                _data.approvalObjectId = approvalObjectId
                _this.detailForApprovalDTO = _data
                _this.detailForApprovalDTO.shipbillInfoDTOList = shipbillInfoDTOList
              }
            })
        }
      }
    },
  },
  data() {
    return {
      visible:false,
      loading: false,
      nodeSelDTOList: [],
      detailForApprovalDTO: {},
      logDTOList: [],
      get_bus_detail_url,
      get_bus_log_url,
      remoteBefore: {},
      approveItems: setBusColumns(this, 'approve'),
      subTitle: '',
      bus_detail_columns: setBusColumns(this, 'bus_detail'),
      bus_log_columns: setBusColumns(this, 'bus_log'),
      confirmLoading: false,
      title: '审批',
    }
  },
  mounted() {},
  methods: {
    getView(shipbillId) {
      this.loading = true
      let _this = this
      return this.axios({ url: shipbillViewUrl, method: 'post', data: { shipbillId } })
    },
    btnInvalid() {
      //作废
      invalid(this, +this.record.approvalFlowType, this.detailForApprovalDTO)
    },
    btnRetract() {
      //撤回
      retract(this, +this.record.approvalFlowType, this.detailForApprovalDTO)
    },
    btnSubmit() {
      let gridForm = this.form()
      //提交
      if (this.approvalType === 3) {
        gridForm = this.$refs.grid_3.form()
      }

      if (gridForm) {
        gridForm.validateFieldsAndScroll((error, value) => {
        if (!error) {
          delete value.provinceCityDistrict
          if (this.approvalType === 3) {
            value = this.$refs.grid_3.returnFormValue(value)
            console.log(value)
          }
          return submit(this, +this.record.approvalFlowType, { ...this.detailForApprovalDTO, ...value })
        }
       })
      } else {

        return submit(this, +this.record.approvalFlowType,this.detailForApprovalDTO)

      }

    },
    onValuesChange({ form }, values) {
      let key = Object.keys(values)[0]
      const { result } = values

      if (result) {
        if (result !== 4) {
          form.setItemProps('approvalOpinion', {
            required: true,
          })
        } else {
          form.setItemProps('approvalOpinion', {
            required: false,
          })
        }
      }
    },
    getFieldsValue() {
      return this.form()?.getFieldsValue()??null
    },
    form() {
      return this.$refs?.grid?.form??null
    },

    resluteApproveGird() {
      let form = this.$refs.approveGird.form
      form.validateFieldsAndScroll((error, value) => {
            if (!error) {
              const { cargoOwnerId, id } = this.detailForApprovalDTO
              value.approvalBusinessId = this.record.id
              value.approvalId = this.record.approvalId
              value.approvalObjectName = this.record.approvalObjectName
              value.nextApproverNodeId = this.record.nextApproverNodeId
              value.nextApproverRoleId = this.record.nextApproverRoleId
              value.nextApproverRoleName = this.record.nextApproverRoleName
              value.nextApproverUserId = this.record.nextApproverUserId
              value.nextApproverUserName = this.record.nextApproverUserName
              value.nodeApprovalType = this.record.nodeApprovalType
              value.nodeApproverType = this.record.nodeApproverType
              console.log(this.detailForApprovalDTO)
              console.log(this.approvalType)
              switch (this.approvalType) {
                case 1: //查货主详情
                  value.cargoOwnerId = cargoOwnerId
                case 2: //查承运商详情
                  value.carriersId = id
                case 3: //查订单详情
                  value.approvalObjectId = this.record.approvalObjectId
                case 4: //调度单详情
                  value.approvalObjectId = this.record.approvalObjectId
                case 5: //承运商调度单详情
                  value.approvalObjectId = this.record.approvalObjectId
                case 9: //自提登记详情
                  value.approvalObjectId = this.record.approvalObjectId
                case 10: //提货审批详情
                  value.approvalObjectId = this.record.approvalObjectId
                case 11: //回单审批详情
                  value.approvalObjectId = this.record.approvalObjectId
                case 12: //正本回单审批详情
                  value.approvalObjectId = this.record.approvalObjectId
                case 13: //事件上传审批详情
                  value.approvalObjectId = this.record.approvalObjectId
              }
              switch (this.tabKey) {
                case '1': //我发起的
                case '2': //我审批的
                  value.nextApprovalOrder = this.record.nextApprovalOrder
                case '3':
                //我已处理的
              }

              approvalSubmit(this, +this.approvalType, value)
            }
          })
    },
     // @审核提交
    approvalSubmit(event) {

      let gridForm = this.form()
      if (gridForm) {
          gridForm.validateFieldsAndScroll((error, value) => {
          if (!error) {
            this.resluteApproveGird()
          }
      })
      } else {
        this.resluteApproveGird()

      }

    },
    back(id, isReload = false) {
      this.nodeSelDTOList = []
      this.detailForApprovalDTO = null
      this.logDTOList = []
      this.$emit('back', id, isReload)
    },
  },
}
</script>
<style lang='less'>
.card-panel {
  &.ant-card {
    &.full-body-flex {
      .ant-card-body {
        display: flex;
        flex-direction: column;
      }
    }
    //  max-height: 480px;
    display: flex;
    flex-direction: column;
    .ant-card-body {
      overflow-y: auto;
      flex: 1;
    }
  }
}
</style>