<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="项目id" prop="projectId">
        <el-select v-model="form.projectId" clearable filterable remote reserve-keyword placeholder="请输入项目编号"
          :remote-method="remoteMethod" :loading="loading" style="width: 400px;">
          <el-option v-for="project in projectList" :key="project.projectId"
            :label="project.projectNumber + '-' + project.projectName" :value="project.projectId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="人员成本" prop="staffCost">
        <el-input v-model="form.staffCost" placeholder="请输入人员成本" />
      </el-form-item>
      <el-form-item label="车辆成本" prop="carCost">
        <el-input v-model="form.carCost" placeholder="请输入车辆成本" />
      </el-form-item>
      <el-form-item label="设备成本" prop="deviceCost">
        <el-input v-model="form.deviceCost" placeholder="请输入设备成本" />
      </el-form-item>
      <el-form-item label="间接成本" prop="fixCost">
        <el-input v-model="form.fixCost" placeholder="请输入间接成本" />
      </el-form-item>
      <el-form-item label="预结算额" prop="settleExpense">
        <el-input v-model="form.settleExpense" placeholder="请输入预结算额" />
      </el-form-item>
      <el-form-item label="外协费用" prop="outExpense">
        <el-input v-model="form.outExpense" placeholder="请输入外协费用" />
      </el-form-item>
      <el-form-item label="经营费用" prop="businessExpense">
        <el-input v-model="form.businessExpense" placeholder="请输入经营费用" />
      </el-form-item>
      <el-form-item label="税费成本" prop="taxExpense">
        <el-input v-model="form.taxExpense" placeholder="请输入税费成本" />
      </el-form-item>
      <el-form-item label="车船租赁" prop="rentExpense">
        <el-input v-model="form.rentExpense" placeholder="请输入车船租赁" />
      </el-form-item>
      <el-form-item label="其他费用" prop="otherExpense">
        <el-input v-model="form.otherExpense" placeholder="请输入其他费用" />
      </el-form-item>
      <el-form-item label="外协费用备注" prop="outRemark">
        <el-input v-model="form.outRemark" placeholder="请输入外协费用备注" />
      </el-form-item>
      <el-form-item label="经营管理备注" prop="businessRemark">
        <el-input v-model="form.businessRemark" placeholder="请输入经营管理备注" />
      </el-form-item>
      <el-form-item label="税费成本备注" prop="taxRemark">
        <el-input v-model="form.taxRemark" placeholder="请输入税费成本备注" />
      </el-form-item>
      <el-form-item label="车船租赁备注" prop="rentRemark">
        <el-input v-model="form.rentRemark" placeholder="请输入车船租赁备注" />
      </el-form-item>
      <el-form-item label="其他费用备注" prop="otherRemark">
        <el-input v-model="form.otherRemark" placeholder="请输入其他费用备注" />
      </el-form-item>
      <el-form-item label="直接成本" prop="directExpense">
        <el-input v-model="form.directExpense" placeholder="请输入直接成本" />
      </el-form-item>
      <el-form-item label="预算总额" prop="totalBudget">
        <el-input v-model="form.totalBudget" placeholder="请输入预算总额" />
      </el-form-item>
      <el-form-item label="编制人" prop="compiler">
        <el-input v-model="form.compiler" placeholder="请输入编制人" />
      </el-form-item>
      <el-form-item label="审核人" prop="auditor">
        <el-input v-model="form.auditor" placeholder="请输入审核人" />
      </el-form-item>
    </el-form>
    <el-dialog title="选择项目" :visible.sync="prOpen" width="70%" append-to-body>
      <choose-project @chooseProject="confirmProject"></choose-project>
    </el-dialog>
  </div>
</template>

<script>
import { listBudget, getBudget, delBudget, addBudget, updateBudget } from "@/api/oa/budget/budget";
import { listProject } from '@/api/oa/project/project';
import ChooseProject from '../../flowable/form/components/chooseProject.vue';
export default {
  components: {
    ChooseProject
  },
  props: {
    form: {
      type: Object
    }
  },
  data() {
    return {
      // 表单校验
      rules: {
      },
      prOpen: false,
      chooseProject: {},
      projectList: []
    }
  },
  methods: {
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.budgetId != null) {
            updateBudget(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addBudget(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    remoteMethod(val) {
      listProject({
        pageNum: 1,
        pageSize: 20,
        projectNumber: val
      }).then(res => {
        this.projectList = res.rows;
      })
    },
    confirmProject() {
      if (val.length == 1) {
        this.prOpen = false;
        this.chooseProject = val[0];
        this.$set(this.form, 'projectId', val[0].projectId)
        this.isSelect = true;
      } else {
        this.$message.error("项目只能选择一个！");
        return;
      }
    }
  },
}
</script>

<style lang="scss" scoped></style>