<!--
@name: 费用科目-编辑页
@author: 张泽贤
@time: 2022-08-02
@doc: 
-->
<template>
  <p-spin :spinning="spinning">
    <p-card>
      <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 type="primary" @click="onSave">保存</p-button>
      </div>
    </p-card>
    <p-card>
      <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="expenseCode">
              <div v-if="type === 'view'">{{ form.expenseCode }}</div>
              <p-input v-model="form.expenseCode" :disabled="type === 'edit'" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="费用科目名称" prop="expenseName">
              <div v-if="type === 'view'">{{ form.expenseName }}</div>
              <p-input v-model="form.expenseName" :disabled="type === 'edit'" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="费用类型" prop="expenseClassify">
              <div v-if="type === 'view'">{{ form.expenseClassifyName }}</div>
              <p-select v-model="form.expenseClassify" :options="options.EXPENSE_CLASSIFY" allowClear v-else />
            </p-form-model-item>
          </a-col>
        </a-row>
      </p-form-model>
    </p-card>
  </p-spin>
</template>

<script>
import { View, Save, Update } from '../js/api'

export default {
  props: {
    type: {
      type: String,
      default: '',
    },
    editId: {
      type: String,
      default: '',
    },
    options: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    typeTitle() {
      const dictionary = {
        add: '新增',
        edit: '编辑',
        view: '查看',
        copy: '复制',
      }
      return dictionary[this.type] || this.type
    },
  },
  data() {
    return {
      spinning: false,

      form: {},
      rules: {
        expenseCode: [{ required: true, message: '费用科目编码不能为空', trigger: 'blur' }],
        expenseName: [{ required: true, message: '费用科目名称不能为空', trigger: 'blur' }],
        expenseClassify: [{ required: true, message: '费用类型不能为空', trigger: 'change' }],
      },
    }
  },
  mounted() {
    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
        })
    },
  },
}
</script>

<style lang="less" scoped>
.border {
  border: 1px solid #e8e8e8;
}
</style>