<!--
@name: 已托运-修改
@author: 张泽贤
@time: 2022-05-05
-->
<template>
  <p-spin :spinning="spinning">
    <p-card>
      <div slot="title" style="display: flex; align-items: center; cursor: pointer">
        <a-icon type="arrow-left" style="color: #1990ff" @click="back" />
        {{ typeTitle }}
      </div>
      <a-space slot="extra" v-show="editType === 'edit'">
        <p-button type="primary" @click="onSave">保存</p-button>
      </a-space>
      <p-form-model ref="formTarget" :model="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" class="plg-grid-from">
        <a-row>
          <a-col :span="6">
            <p-form-model-item label="订单数">{{ form.shipbillNumber }}</p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="总件数">{{ form.totalPcs }}</p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="总重量">{{ form.totalWeight }}</p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="总体积">{{ form.totalVolume }}</p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="承运方类型">{{ form.carrierTypeName }}</p-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="6">
            <p-form-model-item label="承运商编码" prop="carrierCode">
              <p-search-modal v-model="form.carrierCode" v-bind="$data.$formItems.carrierAttr" @change="(...args) => onFormChange('carrier', ...args)" v-show="editType === 'edit'" />
              <span v-show="editType === 'view'">{{ form.carrierCode }}</span>
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="承运商名称">{{ form.carrierName }}</p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="系统标志">{{ form.carrierSysFlagName }}</p-form-model-item>
          </a-col>
        </a-row>
      </p-form-model>

      <waybillList ref="waybillList" :editType="editType" :editData="editData" :options="options" @update="viewUrl"></waybillList>
    </p-card>
  </p-spin>
</template>

<script>
import * as $formItems from '@/blocks/components/searchModalConfig/index'
import { setQueryFormItmes } from '../js/form'
import { viewUrl, trailer_update } from '../js/api'

import waybillList from './waybillList'

export default {
  components: { waybillList },
  props: {
    editType: {
      type: String,
      default: '',
    },
    editData: {
      type: Object,
      default: () => ({}),
    },
    options: {
      type: Object,
      default: () => ({}),
    },
    mextendedField_list: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    typeTitle() {
      const dictionary = {
        edit: '修改',
        view: '查看',
      }
      return dictionary[this.editType] || this.editType
    },
  },
  data() {
    return {
      $formItems,
      setQueryFormItmes: setQueryFormItmes(this),
      spinning: false,

      form: {
        carrierId: '',
        carrierCode: '',
        carrierName: '',
      },
    }
  },
  mounted() {
    this.viewUrl()
  },
  methods: {
    // 返回
    back() {
      this.$emit('back')
    },
    // 保存
    onSave() {
      if (!this.form.carrierCode) {
        this.$message.error('请选择承运商')
        return false
      }

      this.spinning = true
      trailer_update({ ...this.form })
        .then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.$emit('back')
          } else {
            this.$exception(res)
          }
        })
        .finally(() => {
          this.spinning = false
        })
    },

    onFormChange(name, ...args) {
      if (name === 'carrier') {
        this.form.carrierId = args[2][0].id
        this.form.carrierCode = args[2][0].code
        this.form.carrierName = args[2][0].name
      }
    },

    // 查询
    viewUrl() {
      viewUrl({ id: this.editData.loadingBillId }).then((res) => {
        this.form = { ...res.data }
        delete this.form.sendCarViewDetailByIdDTOS
      })
    },
  },
}
</script>