<template>
  <div class="container">
    <el-row>
      <el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="24">
        <el-form
          ref="form"
          :model="projectFrom"
          label-width="120px"
          :rules="rules"
        >
          <el-form-item label="项目名称" prop="projectName">
            <el-input v-model="projectFrom.projectName"></el-input>
          </el-form-item>
          <el-form-item label="项目编号" prop="projectNumber">
            <el-input v-model="projectFrom.projectNumber"></el-input>
          </el-form-item>
          <el-form-item label="项目合同金额" prop="projectAmount">
            <el-input v-model="projectFrom.projectAmount"></el-input>
          </el-form-item>
          <el-form-item label="项目总收入" prop="projectIncome">
            <el-input v-model="projectFrom.projectIncome" disabled></el-input>
          </el-form-item>
          <el-form-item label="项目总支出" prop="projectExpend">
            <el-input v-model="projectFrom.projectExpend" disabled></el-input>
          </el-form-item>
          <el-form-item label="项目总报销" prop="projectExpense">
            <el-input v-model="projectFrom.projectExpense" disabled></el-input>
          </el-form-item>
          <el-form-item label="项目合作方" prop="projectPartyb">
            <el-input v-model="projectFrom.projectPartyb" ></el-input>
          </el-form-item>
          <el-form-item label="项目时间" prop="timeSlot">
            <el-date-picker
              v-model="projectFrom.timeSlot"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="time"
            >
            </el-date-picker>
          </el-form-item>
          
         

          <el-form-item label="项目详情" prop="projectInformation">
            <el-input  type="textarea" :autosize="{ minRows: 4, maxRows: 6}" placeholder="请输入内容" v-model="projectFrom.projectInformation" ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="success" icon="el-icon-upload2" @click="submitForm()">提交</el-button>
            <el-button type="info" icon="el-icon-refresh-left" @click="resetForm()">重置信息</el-button>
            <el-button  @click="back()">返回</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {update,selectByProjectId} from '@/api/project'
import { money,account_password_valid } from "@/utils/myValidate";
export default {
  data() {
    return {
      projectFrom: {
        projectName: null,
        projectNumber: null,
        projectAmount: null,
        projectIncome: 0,
        projectExpend: 0,
        projectExpense:0,
        projectStartTime: null,
        projectEndTime: null,
        projectFile: null,
        userId: null,
        companyId: null,
        projectPartyb:null,
        projectInformation:null,
        timeSlot: null,
      },
      rules: {
        projectName: [
          { required: true, message: "请输入项目名称", trigger: "blur" },
        ],
        projectNumber: [
          { validator: account_password_valid, trigger: "blur" }
        ],
        projectAmount: [
          {
            required: true,
            message: "请输入项目合同金额（起始金额）",
            trigger: "blur",
          },
          {
            validator: money,
            trigger: "change"
          }
        ],
        timeSlot: [
          { required: true, message: "请选择日期", trigger: "change" },
        ],
       
        projectPartyb:[{
          required: true,
          message: "请输入项目合作方",
          trigger: "blur",
        }]
      },

    };
  },
  computed: {
    projectId() {
      return this.$route.query.id;
    },
  },
  created() {
    this.getProject()
  },
  methods: {
    //查询项目信息
    getProject(){
      selectByProjectId({projectId:this.projectId}).then((res)=>{
        if(res.success){
          res.data.timeSlot = [res.data.projectStartTime,res.data.projectEndTime]
          this.projectFrom = res.data
        }else{
          this.$message.error(res.msg)
          this.back()
        }
      }).catch((errpr)=>{
        this.$message.error("查询数据错误")
        this.back()
      })
    },
    //时间处理
    time(val) {
      console.log("123123")
      if (val == null) {
        this.projectFrom.projectStartTime = null;
        this.projectFrom.projectEndTime = null;
      } else {
        this.projectFrom.projectStartTime = this.timestampToTime(val[0]);
        this.projectFrom.projectEndTime = this.timestampToTime(val[1]);
      }
    },
   
    //重置数据
    resetForm(){
      this.$refs.form.resetFields()
    },
    //提交数据
    submitForm(){
      //第一步校验数据完整性
      this.$refs.form.validate((valid)=>{
        if(valid){
          update(this.projectFrom).then((res)=>{
            if(res.success){
              this.$message.success("修改成功")
              this.$store.dispatch('tagsView/delView', this.$route)
              this.$router.push("/projectList")
            }else{
              this.$message.error(res.msg)
            }
          }).catch((error)=>{
            this.$message.error("插入失败")
          })
        }
      })
    },
    //返回
    back(){
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.push("/projectList")
    },
    //时间处理
    timestampToTime(date) {
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    }
  },
};
</script>

<style scoped>
.container {
  padding: 10px;
}
</style>