<template>
  <div>
    <edit-header :title="title">
      <el-button plain @click="cancel" icon="el-icon-close" size="small">取 消</el-button>
      <el-button type="primary" plain @click="submitForm" icon="el-icon-check" size="small" :loading="submitLoading">提 交</el-button>
    </edit-header>
    <div class="app-container">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" v-loading="loading">
        <el-row>
          <form-col :span="span" label="项目名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入项目名称" />
          </form-col>
          <form-col :span="span" label="项目金额" prop="amount">
            <el-input-number 
              v-model="form.amount" 
              placeholder="请输入项目金额" 
              controls-position="right" 
              :step="0.01" 
              style="width: calc(100% - 2em)"
              /> 元
          </form-col>
          <form-col :span="span" label="客户" prop="customerId">
            <customer-input v-model="form.customerId" :text.sync="form.customerName"/>
          </form-col>
          <form-col :span="span" label="到期时间" prop="expireTime">
            <el-date-picker clearable
              style="width: 100%;"
              v-model="form.expireTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择到期时间">
            </el-date-picker>
          </form-col>
          <form-col :span="span" label="负责人" prop="ownerId">
            <user-select v-model="form.ownerId" />
          </form-col>
          <form-col :span="span" label="跟进人" prop="followId">
            <user-select v-model="form.followId" />
          </form-col>
          <form-col :span="24" label="备注" prop="remark">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
          </form-col>
          <form-col :span="24" label="附件" prop="attaches">
            <image-upload v-model="form.attaches" />
          </form-col>
        </el-row>
      </el-form>
    </div>
  </div>
  
</template>

<script>
import { getProject, addProject, updateProject } from "@/api/bst/project";
import FormCol from "@/components/FormCol/index.vue";
import EditHeader from "@/components/EditHeader/index.vue";
import CustomerInput from "@/components/Business/Customer/CustomerInput.vue";
import UserSelect from "@/components/Business/User/UserSelect.vue";
export default {
  name: "ProjectEdit",
  components: { FormCol, EditHeader, UserSelect, CustomerInput },
  dicts: ['project_status'],
  data() {
    return {
      loading: false,
      submitLoading: false,
      span: 6,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        name: [
          { required: true, message: "项目名称不能为空", trigger: "blur" }
        ],
      }
    };
  },
  computed: {
    title() {
      return this.$route.params.id ? '编辑项目' : '新增项目';
    }
  },
  created() {
    const id = this.$route.params.id;
    if (id) {
      this.getInfo(id);
    } else {
      this.reset();
    }
  },
  methods: {
    /** 获取详细信息 */
    getInfo(id) {
      this.loading = true;
      getProject(id).then(response => {
        this.form = response.data;
      }).finally(() => {
        this.loading = false;
      });
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        no: null,
        name: null,
        createTime: null,
        expireTime: null,
        operationTime: null,
        ownerId: null,
        followId: null,
        amount: null,
        receivedAmount: null,
        operationAmount: null,
        status: null,
        remark: null,
        attaches: null,
        customerId: null
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            this.submitLoading = true;
            updateProject(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.goBack();
            }).finally(() => {
              this.submitLoading = false;
            });
          } else {
            this.submitLoading = true;
            addProject(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.goBack();
            }).finally(() => {
              this.submitLoading = false;
            });
          }
        }
      });
    },
    // 取消按钮
    cancel() {
      this.goBack();
    },
    // 返回按钮
    goBack() {
      this.$tab.closeBack();
    }
  }
};
</script>

<style lang="scss" scoped>
.bottom-control {
  margin-top: 20px;
  text-align: center;
}
</style>