<!--
@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">保存</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="itemCategoryCode">
              <div v-if="type === 'view'">{{ form.itemCategoryCode }}</div>
              <p-input v-model="form.itemCategoryCode" :disabled="type === 'edit'" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="商品品类名称" prop="itemCategoryName">
              <div v-if="type === 'view'">{{ form.itemCategoryName }}</div>
              <p-input v-model="form.itemCategoryName" :disabled="type === 'edit'" v-else />
            </p-form-model-item>
          </a-col>
            <!-- @ApiModelProperty(value = "所属货主ID") private Long cargoOwnerId; @ApiModelProperty(value = "所属货主编码") private String cargoOwnerCode; @ApiModelProperty(value = "所属货主名称") private String cargoOwnerName; -->

            <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="itemCategoryLevel">
              <div v-if="type === 'view'">{{ getLabelFromValue(form.itemCategoryLevel, options.ITEM_CATEGORY_LEVEL) }}</div>
              <p-select v-model="form.itemCategoryLevel" :options="options.ITEM_CATEGORY_LEVEL" allowClear v-else />
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="6">
            <p-form-model-item label="上级商品品类编码" prop="fatherItemCategoryCode">
              <div v-if="type === 'view'">{{ form.fatherItemCategoryCode }}</div>
              <p-search-modal v-model="form.fatherItemCategoryCode" v-bind="categoryAttr" @change="(...args) => onFormChange('itemCategory', ...args)" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="上级商品品类名称" prop="fatherItemCategoryName">
              <div>{{ form.fatherItemCategoryName }}</div>
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="类目级别" prop="fatherItemCategoryLevel">
              <div v-if="type === 'view'">{{ getLabelFromValue(form.fatherItemCategoryLevel, options.ITEM_CATEGORY_LEVEL) }}</div>
              <p-select v-model="form.fatherItemCategoryLevel" :options="options.ITEM_CATEGORY_LEVEL" disabled 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>
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 { getLabelFromValue } from '@/blocks/utils/index.js'

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 categoryAttr
    },
  },
  data() {
    return {
      spinning: false,
      $formItems,

      form: {
        cargoOwnerName: '',

      },
      rules: {
        itemCategoryCode: [{ required: true, message: '商品编码不能为空', trigger: 'blur' }],
        itemCategoryName: [{ required: true, message: '商品名称不能为空', trigger: 'blur' }],
        cargoOwnerName: [{ required: true, message: '所属货主不能为空', trigger: 'change' }],
        departmentName: [{ required: true, message: '部门不能为空', trigger: 'change' }],
        itemCategoryLevel: [{ required: true, message: '类目级别不能为空', trigger: 'change' }],
      },
    }
  },
  mounted() {
    this.form = { ...this.editData }
    // 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: {
    getLabelFromValue,
    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 : '')
      } else if (name === 'itemCategory') {
        this.$set(this.form, 'fatherItemCategoryId', args[1] ? args[2][0].itemCategoryId : '')
        this.$set(this.form, 'fatherItemCategoryCode', args[1] ? args[2][0].itemCategoryCode : '')
        this.$set(this.form, 'fatherItemCategoryName', args[1] ? args[2][0].itemCategoryName : '')
        this.$set(this.form, 'fatherItemCategoryLevel', 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>