<template>
  <el-dialog title="新增项目" :visible.sync="open" width="500px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="90px">
      <el-form-item label="项目编号" prop="projectNo">
        <el-input v-model="form.projectNo"></el-input>
      </el-form-item>
      <el-form-item label="项目名称" prop="projectName">
        <el-input v-model="form.projectName"></el-input>
      </el-form-item>
      <el-form-item label="项目年份" prop="projectYear">
        <el-date-picker v-model="form.projectYear" placeholder="选择项目年份" type="year" value-format="yyyy"></el-date-picker>
      </el-form-item>
      <el-form-item label="技术员分配" prop="techUserId">
        <el-select v-model="form.techUserId">
          <el-option v-for="(item, index) in techUserOptions" :key="index" :value="item.userId" :label="item.userName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="财务员分配" prop="finUserId">
        <el-select v-model="form.finUserId">
          <el-option v-for="(item, index) in finUserOptions" :key="index" :value="item.userId" :label="item.userName"></el-option>
        </el-select>
      </el-form-item>
        <el-form-item label="项目日期" prop="projectTime">
          <el-date-picker v-model="form.projectTime" placeholder="选择日期" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" :disabled="disabled" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {addProjectApi, listUserListApi} from "@/api/enterprise/project/project"
  import { listUserApi } from "@/api/enterprise/employee/employee"
  export default {
    data () {
      return {
        open: false,
        disabled: false,
        techUserOptions: [],
        finUserOptions: [],
        userType: '',
        form: {
          projectNo: '',
          projectName: '',
          projectYear: '',
          techUserId: '',
          finUserId: '',
          projectStartDate: '',
          projectEndDate: '',
          projectTime: [],
        },
        rules: {
          checkStatus: [
            {required: true, message: '请选择审核结果', trigger: 'change'}
          ],
          serviceTime: [
            {required: true, message: '请设置服务时间段', trigger: 'change'}
          ]
        }
      }
    },
    computed: {
      scopeId() {
        return this.$store.state.user.scopeId
      }
    },
    methods: {
      init() {
        this.open = true;
        this.getFinUserData()
        this.getTechUserData()
      },
      getFinUserData() {
        //财务
        let params = {userType: 'ENT_FIN'}
        listUserListApi(params).then(res => {
          if(res.code == 200) {
            this.finUserOptions = res.data.records
          }
        })
      },
      getTechUserData() {
        //技术
        let params = {userType: 'ENT_TECH'}
        listUserListApi(params).then(res => {
          if(res.code == 200) {
            this.techUserOptions = res.data.records
          }
        })
      },
      submitForm() {
        this.form.entId = this.scopeId
        this.$refs.form.validate(valid => {
          if (valid) {
            this.disabled = true
            addProjectApi(this.form).then(res => {
              this.disabled = false;
              if(res.code == 200) {
                this.$message({
                  message: '新增成功',
                  type: 'success'
                });
              }
              this.open = false;
              this.$emit('refreshData');
            })
          }
        })
      },
      cancel() {
        this.open = false
      },
    },
    watch: {
      "form.projectTime"(val) {
        if(this.form.projectTime) {
          this.form.projectStartDate = this.form.projectTime[0]
          this.form.projectEndDate = this.form.projectTime[1]
        }else {
          this.form.projectStartDate = ''
          this.form.projectEndDate = ''
        }
      }
    }
  }
</script>

<style>
</style>
