<!--
@name: 商品管理-编辑页
@author: 张泽贤
@time: 2022-09-15
@doc: PROLOG_UPCloudSolutionForTMS__v1.2.1_基础数据_1.2.1.doc
-->
<template>
  <p-card class="full-card-panel">
    <a-space slot="title" style="display: flex; align-items: center; cursor: pointer">
      <a-icon type="arrow-left" style="color: #1990ff" @click="back" />
      商品管理-{{ typeTitle }}
    </a-space>
    <div slot="extra" v-show="type !== 'view'">
      <p-button :disabled="spinning" type="primary" @click="onSave" v-action:saveSubmit>保存</p-button>
    </div>
    <p-spin :spinning="spinning">
      <p-form-model ref="ruleForm" class="plg-grid-from" :model="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" :rules="rules">
        <a-divider orientation="left">基本信息</a-divider>
        <a-row>
          <a-col :span="6">
            <p-form-model-item label="商品编码" prop="itemCode">
              <div v-if="type === 'view'">{{ form.itemCode }}</div>
              <p-input v-model="form.itemCode" :disabled="type === 'edit'" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="商品名称" prop="itemName">
              <div v-if="type === 'view'">{{ form.itemName }}</div>
              <p-input v-model="form.itemName" :disabled="type === 'edit'" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="所属货主" prop="cargoOwnerName">
              <div v-if="type === 'view'">{{ form.cargoOwnerName }}</div>
              <p-search-modal v-model="form.cargoOwnerName" v-bind="$data.$formItems.consignorAttr" @change="(...args) => onFormChange('consignor', ...args)" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="部门" prop="departmentName">
              <div v-if="type === 'view'">{{ form.departmentName }}</div>
              <departmenTree :departmentId="form.departmentId" @getDepartment="getDepartment" v-else></departmenTree>
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="6">
            <p-form-model-item label="商品品类" prop="itemCategoryName">
              <div v-if="type === 'view'">{{ form.itemCategoryName }}</div>
              <p-search-modal v-model="form.itemCategoryName" v-bind="categoryAttr" @change="(...args) => onFormChange('itemCategory', ...args)" :disabled="!form.cargoOwnerId" v-else />
            </p-form-model-item>
          </a-col>
          <!-- <a-col :span="6">
            <p-form-model-item label="商品品类名称" prop="itemCategoryName">
              <div>{{ form.itemCategoryName }}</div>
            </p-form-model-item>
          </a-col> -->
          <a-col :span="6">
            <p-form-model-item label="包装类型" prop="packType">
              <div v-if="type === 'view'">{{ form.packTypeName }}</div>
              <p-select v-model="form.packType" :options="options.PACK_TYPE" allowClear v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="货物温层" prop="cargoThermosphere">
              <div v-if="type === 'view'">{{ form.cargoThermosphereName }}</div>
              <p-select v-model="form.cargoThermosphere" :options="options.CARGO_THERMOSPHERE" allowClear v-else />
            </p-form-model-item>
          </a-col>

          <a-col :span="6">
            <p-form-model-item label="默认存放仓库" prop="branchName">
              <div v-if="type === 'view'">{{ form.branchName }}</div>
              <p-search-modal v-model="form.branchName" v-bind="$data.$formItems.branchAttr" @change="(...args) => onFormChange('branch', ...args)" v-else />
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="6">
            <p-form-model-item label="长(mm)" prop="length">
              <div v-if="type === 'view'">{{ form.length }}</div>
              <p-input-number v-model="form.length" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="宽(mm)" prop="width">
              <div v-if="type === 'view'">{{ form.width }}</div>
              <p-input-number v-model="form.width" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="高(mm)" prop="heigth">
              <div v-if="type === 'view'">{{ form.heigth }}</div>
              <p-input-number v-model="form.heigth" v-else />
            </p-form-model-item>
          </a-col>

          <a-col :span="6">
            <p-form-model-item label="库存件数" prop="inventoryPcs">
              <div v-if="type === 'view'">{{ form.inventoryPcs }}</div>
              <p-input-number v-model="form.inventoryPcs" v-else />
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="6">
            <p-form-model-item label="重量(kg)" prop="weight">
              <div v-if="type === 'view'">{{ form.weight }}</div>
              <p-input-number v-model="form.weight" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="体积(m³)" prop="volume">
              <div v-if="type === 'view'">{{ form.volume }}</div>
              <p-input-number v-model="form.volume" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="货值" prop="cargoValue">
              <div v-if="type === 'view'">{{ form.cargoValue }}</div>
              <p-input-number v-model="form.cargoValue" v-else />
            </p-form-model-item>
          </a-col>

          <a-col :span="6">
            <p-form-model-item label="暂存位" prop="stagingLocation">
              <div v-if="type === 'view'">{{ form.stagingLocation }}</div>
              <p-input v-model="form.stagingLocation" v-else />
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="6">
            <p-form-model-item label="批准文号" prop="symbol">
              <div v-if="type === 'view'">{{ form.symbol }}</div>
              <p-input v-model="form.symbol" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="批准文号有效期" prop="symbolExpirationDate">
              <div v-if="editType === 'view'">{{ form.symbolExpirationDate }}</div>
              <p-date-picker v-model="form.symbolExpirationDate" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" style="width: 100%" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="温控区间（上限）" prop="temperatureCtlUpperLimit">
              <div v-if="type === 'view'">{{ form.temperatureCtlUpperLimit }}</div>
              <p-input-number  :min='-99999999' v-model="form.temperatureCtlUpperLimit" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="温控区间（下限）" prop="temperatureCtlLowerLimit">
              <div v-if="type === 'view'">{{ form.temperatureCtlLowerLimit }}</div>
              <p-input-number :min='-99999999' v-model="form.temperatureCtlLowerLimit" v-else />
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="6">
            <p-form-model-item label="上市许可持有人" prop="licensor">
              <div v-if="type === 'view'">{{ form.licensor }}</div>
              <p-input v-model="form.licensor" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="规格" prop="capacity">
              <div v-if="type === 'view'">{{ form.capacity }}</div>
              <p-input v-model="form.capacity" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="件包装数" prop="packSize">
              <div v-if="type === 'view'">{{ form.packSize }}</div>
              <p-input-number v-model="form.packSize" :precision="0" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="剂型" prop="doseType">
              <div v-if="type === 'view'">{{ form.doseTypeName }}</div>
              <p-select v-model="form.doseType" :options="options.ITEM_DOSE_TYPE" allowClear v-else />
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="6">
            <p-form-model-item label="生产厂家" prop="factory">
              <div v-if="type === 'view'">{{ form.factory }}</div>
              <p-input v-model="form.factory" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="产地" prop="origin">
              <div v-if="type === 'view'">{{ form.origin }}</div>
              <p-input v-model="form.origin" v-else />
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <p-form-model-item label="备注" prop="memo" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
              <div v-if="type === 'view'">{{ form.memo }}</div>
              <p-input v-model="form.memo" v-else />
            </p-form-model-item>
          </a-col>
        </a-row>

        <a-divider orientation="left" v-if="mextendedField_list.length">扩展属性</a-divider>
        <extendedField :mextendedField_list="mextendedField_list" :type="type" :form="form"></extendedField>
      </p-form-model>
    </p-spin>
  </p-card>
</template>

<script>
// @ApiModelProperty(value = "温控区间（上限）") private BigDecimal temperatureCtlUpperLimit; @ApiModelProperty(value = "温控区间（下限）") private BigDecimal temperatureCtlLowerLimit;

import * as $formItems from '@/blocks/components/searchModalConfig/index';
import departmenTree from '@/blocks/components/formConfig/index.departmenTree.multiple.vue';
import extendedField from '@/blocks/extendedField/index.vue';

import { Save, Update } from '../js/api.js';

export default {
  components: { departmenTree, extendedField },
  props: {
    type: {
      type: String,
      default: '',
    },
    editData: {
      type: Object,
      default: () => ({}),
    },
    options: {
      type: Object,
      default: () => ({}),
    },
    mextendedField_list: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    typeTitle() {
      const dictionary = {
        add: '新增',
        edit: '编辑',
        view: '查看',
        copy: '复制',
      };
      return dictionary[this.type] || this.type;
    },
    categoryAttr() {
      let categoryAttr = $formItems.categoryAttr;
      categoryAttr.targetValueKey = 'itemCategoryCode';
      return Object.assign({ remoteData: { cargoOwnerId: this.form.cargoOwnerId } }, categoryAttr);
    },
  },
  data() {
    return {
      spinning: false,
      $formItems,

      form: {
        itemCode: '',
        itemName: '',
        cargoOwnerId: '',
        cargoOwnerCode: '',
        cargoOwnerName: '',
        departmentName: '',
        temperatureCtlUpperLimit: 0,
        temperatureCtlLowerLimit: 0,
        itemCategoryId: '',
        itemCategoryCode: '',
        itemCategoryName: '',
        itemCategoryLevel: '',
        branchId: '',
        branchCode: '',
        branchName: '',
        symbol: '',
        symbolExpirationDate: '',
        licensor: '',
        capacity: '',
        packSize: undefined,
        doseType: '',
        factory: '',
        origin: '',
      },
      rules: {
        itemCode: [{ required: true, message: '商品编码不能为空', trigger: 'blur' }],
        itemName: [{ required: true, message: '商品名称不能为空', trigger: 'blur' }],
        cargoOwnerName: [{ required: true, message: '所属货主不能为空', trigger: 'change' }],
        departmentName: [{ required: true, message: '部门不能为空', trigger: 'change' }],
      },
    };
  },
  mounted() {
    this.form = { ...this.editData };
    if (this.type === 'copy') {
      this.form.itemCode = '';
      this.form.itemName = '';
      this.form.departmentId = '';
      this.form.departmentCode = '';
      this.form.departmentName = '';
    }
    // if (this.editId) {
    //   this.spinning = true
    //   View({ id: this.editId })
    //     .then((res) => {
    //       if (res.success) {
    //         this.form = { ...res.data }
    //       } else {
    //         this.$exception(res)
    //       }
    //     })
    //     .finally(() => {
    //       this.spinning = false
    //     })
    // }
  },
  methods: {
    back() {
      this.$emit('back');
    },

    // 保存
    onSave() {
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) return;
        if (this.type === 'add' || this.type === 'copy') this.onMethod(Save);
        if (this.type === 'edit') this.onMethod(Update);

        return;
      });
    },
    onMethod(method) {
      let params = { ...this.form };

      this.spinning = true;
      method(params)
        .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 === 'consignor') {
        this.$set(this.form, 'cargoOwnerId', args[1] ? args[2][0].cargoOwnerId : '');
        this.$set(this.form, 'cargoOwnerCode', args[1] ? args[2][0].cargoOwnerCode : '');
        this.$set(this.form, 'cargoOwnerName', args[1] ? args[2][0].cargoOwnerName : '');
        this.$set(this.form, 'itemCategoryId', '');
        this.$set(this.form, 'itemCategoryCode', '');
        this.$set(this.form, 'itemCategoryName', '');
        this.$set(this.form, 'itemCategoryLevel', '');
      } else if (name === 'itemCategory') {
        this.$set(this.form, 'itemCategoryId', args[1] ? args[2][0].itemCategoryId : '');
        this.$set(this.form, 'itemCategoryCode', args[1] ? args[2][0].itemCategoryCode : '');
        this.$set(this.form, 'itemCategoryName', args[1] ? args[2][0].itemCategoryName : '');
        this.$set(this.form, 'itemCategoryLevel', args[1] ? args[2][0].itemCategoryLevel : '');
      } else if (name === 'branch') {
        this.$set(this.form, 'branchId', args[1] ? args[2][0].id : '');
        this.$set(this.form, 'branchCode', args[1] ? args[2][0].code : '');
        this.$set(this.form, 'branchName', args[1] ? args[2][0].name : '');
      }
    },

    // 部门
    getDepartment(value) {
      this.form.departmentId = value.departmentId;
      this.form.departmentCode = value.departmentCode;
      this.form.departmentName = value.departmentName;
    },
  },
};
</script>

<style lang="less">
.ant-input-number {
  width: 100%;
}
</style>