<template>
  <el-dialog title="新增项目" :visible.sync="open" width="600px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="130px">
      <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" filterable>
          <el-option v-for="(item, index) in techUserOptions" :key="index" :value="item.userId" :label="item.nickName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="财务员分配" prop="finUserId">
        <el-select v-model="form.finUserId" filterable>
          <el-option v-for="(item, index) in finUserOptions" :key="index" :value="item.userId" :label="item.nickName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否跨年项目" prop="overYearFlag">
        <el-radio-group v-model="form.overYearFlag">
          <el-radio v-for="(item, index) in yesOrNoOptions" :key="index" :label="item.dictValue">{{item.dictLabel}}</el-radio>
        </el-radio-group>
      </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-item label="项目开始时期" prop="projectStartDate">
          <el-date-picker
                v-model="form.projectStartDate"
                type="date"
                placeholder="选择开始日期" :picker-options="startPickerOptions" value-format="yyyy-MM-dd" format="yyyy-MM-dd">
              </el-date-picker>
        </el-form-item>
        <el-form-item label="项目结束日期" prop="projectEndDate">
          <el-date-picker
                v-model="form.projectEndDate"
                type="date"
                placeholder="选择结束日期" :picker-options="endPickerOptions" value-format="yyyy-MM-dd" format="yyyy-MM-dd">
              </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"
  import { yesOrNoOptions } from "@/utils/dataFormat"
  export default {
    data () {
      return {
        open: false,
        disabled: false,
        techUserOptions: [],
        finUserOptions: [],
        userType: '',
        yesOrNoOptions: yesOrNoOptions,
        form: {
          projectNo: '',
          projectName: '',
          projectYear: '',
          techUserId: '',
          finUserId: '',
          overYearFlag: 1,
          projectStartDate: '',
          projectEndDate: ''
        },
        rules: {
          projectNo: [
            {required: true, message: '请输入项目编号', trigger: 'blur'},
            {max: 100, message: '最多输入100个字符', trigger: 'blur' }
          ],
          projectName: [
            {required: true, message: '请输入项目名称', trigger: 'blur'},
            {max: 100, message: '最多输入100个字符', trigger: 'blur' }
          ],
          projectYear: [
            {required: true, message: '请输入项目年份', trigger: 'change'}
          ],
          techUserId: [
            {required: true, message: '请选择技术员', trigger: 'change'}
          ],
          finUserId: [
            {required: true, message: '请选择财务员', trigger: 'change'}
          ],
          overYearFlag: [
            {required: true, message: '请选择是否跨年', trigger: 'change'}
          ],
          projectStartDate: [
            {required: true, message: '请选择项目开始时间', trigger: 'change'}
          ],
          projectEndDate: [
            {required: true, message: '请选择项目结束时间', trigger: 'change'}
          ]
        },
        startPickerOptions: {
          disabledDate: (time) => {
            if (!this.form.projectEndDate) {
              return false
            }
            return time.getTime() > new Date(this.form.projectEndDate).getTime()
          }
        },
        endPickerOptions: {
          disabledDate: (time) => {
            if (!this.form.projectStartDate) {
              return false
            }
            return time.getTime() < new Date(this.form.projectStartDate).getTime()
          }
        },
      }
    },
    computed: {
      scopeId() {
        return this.$store.state.user.scopeId
      }
    },
    methods: {
      init() {
        this.open = true;
        this.getFinUserData()
        this.getTechUserData()
        this.resetForm("form");
      },
      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>
