<template>
  <div id="content-container" :class="{'expand-right': expandRight}">
    <!--Page Title-->
    <div id="page-title">
      <h1 class="page-header text-overflow">添加周报填报</h1>
    </div>
    <!--End page title-->

    <!--Breadcrumb-->
    <!--<ol class="breadcrumb">-->
    <!--<li><a href="#">Home</a></li>-->
    <!--<li><a href="#">Layouts</a></li>-->
    <!--<li class="active">Demo</li>-->
    <!--</ol>-->
    <!--End breadcrumb-->

    <!--Page content-->
    <div class="page-content">
      <div class="panel">
        <div class="panel-body">
          <el-form :model="formModel" label-width="100px" ref="formName">
            <el-form-item label="部门" prop="deptId">
              <el-select class="form-input" filterable placeholder="请选择" v-model="formModel.deptId" :disabled="true">
                <el-option
                  v-for="subItem in orgOptions"
                  :key="subItem.model"
                  :label="subItem.label"
                  :value="subItem.model"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="姓名" prop="userId">
              <el-select class="form-input" filterable placeholder="请选择" :disabled="true"
                         v-model="formModel.userInfoId">
                <el-option
                  v-for="subItem in userInfoOption"
                  :key="subItem.model"
                  :label="subItem.label"
                  :value="subItem.model"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="项目编号" prop="projectNo">
              <el-input
                class="form-input"
                placeholder="请输入内容"
                v-model="formModel.projectNo"
              >
              </el-input>
            </el-form-item>

            <!--            :rules="[-->
            <!--            {projectName: true, message: '项目名称不能为空'}]"-->
            <el-form-item label="项目名称" prop="projectName">
              <el-input
                class="form-input"
                placeholder="请输入内容"
                v-model="formModel.projectName"
              >
              </el-input>
            </el-form-item>
            <!--            <el-form-item label="证明人" prop="witness" :rules="[-->
            <!--                          {required: true, message: '证明人不能为空'}]" v-if="formModel.reimburseCategory !== 'medical'">-->
            <!--              <el-select class="form-input" filterable placeholder="请选择" v-model="formModel.witness">-->
            <!--                <el-option-->
            <!--                  v-for="subItem in formWitnessData"-->
            <!--                  :key="subItem.model"-->
            <!--                  :label="subItem.label"-->
            <!--                  :value="subItem.model"-->
            <!--                  :disabled="subItem.disabled"-->
            <!--                >-->
            <!--                </el-option>-->
            <!--              </el-select>-->
            <!--            </el-form-item>-->

            <!--            <el-form-item label="预算种类" prop="selectBudgetCategoryId" :rules="[-->
            <!--                          {required: true, message: '预算种类不能为空'}]">-->
            <!--              <el-cascader-->
            <!--                      :options="budgetCategory"-->
            <!--                      v-model="formModel.selectBudgetCategoryId"-->
            <!--                      class="form-input"-->
            <!--              ></el-cascader>-->
            <!--            </el-form-item>-->

            <!--            <el-form-item label="报销事由" prop="reason" :rules="[-->
            <!--                          {required: true, message: '报销事由不能为空'}]">-->
            <!--              <el-input-->
            <!--                      class="form-input"-->
            <!--                      placeholder="请输入内容"-->
            <!--                      v-model="formModel.reason"-->
            <!--              >-->
            <!--              </el-input>-->
            <!--            </el-form-item>-->
            <!--明细-->
            <!--              <div class="form-item-border" v-for="(item, index) in formModel.reimburseDetail" @click="reimburseClick(index)">-->
            <!--            :rules="[-->
            <!--            {required: true, message: '工作量不能为空'}, { type: 'number', message: '工作量必须为数字值'}]"-->
            <el-form-item label="工作量(人日)" prop="workload">
              <el-input
                class="form-input"
                placeholder="请输入内容"
                v-model.number="formModel.workload"
                @change="moneyChange"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="本周进展" prop="thisWeek">
              <el-input
                class="form-input"
                placeholder="请输入内容"
                v-model="formModel.thisWeek"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="下周计划" prop="nextWeek">
              <el-input
                class="form-input"
                placeholder="请输入内容"
                v-model="formModel.nextWeek"
              >
              </el-input>
            </el-form-item>
            <!--              </div>-->
            <el-form-item>
              <div style="float: right">
                <el-button @click="cancel()" type="default">取消</el-button>
                <el-button @click="save('formName')" type="primary" :disabled="!isSave">保存</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <!--End Page content-->
  </div>
</template>

<script>
import DataForm from '../../../components/form/DataForm.vue'
import DataTable from '../../../components/DataTable.vue'
import Api from '../../../server/index.js'
import app from '../../../assets/js/common/app.js'
import {getItem} from '../../../config/mUtils.js'
import {baseUrl} from '../../../config/env.js'

export default {
  beforeRouteEnter (to, from, next) {
    next(function (vm) {
      global.getMenuIndex(vm)
    })
  },
  data () {
    return {
      ext: {},
      thisWeek: '',
      nextWeek: '',
      userId: '',
      workload: '',
      projectName: '',
      money: '',
      projectNo: '',
      expandRight: false,
      app: app,
      actionUrl: `${baseUrl}/api/common/file-upload`,     // 上传路径
      baseUrl: baseUrl,
      formModel: {
        userInfoId: '',
        witness: '',
        deptId: '',
        reimburseCategory: '',   // 报销种类
        reason: '',         // 报销事由
        selectBudgetCategoryId: [],   // 预算种类
        total: 0,
        reimburseDetail: [
          {
            time: '',
            money: '',
            moneyDetail: '',
            hasBill: '',     // 是否有发票
            fileList: [],     // 文件列表
          }
        ]  // 报销详情
      },
      formWitnessData: [],   // 证明人数据源
      orgOptions: [],
      userInfoOption: [],
      isSave: true,
      budgetCategory: [],    // 预算种类层级
      reimburseIndex: 0      // 点击哪个报销明细做个标记
    }
  },
  created () {
    this.init()
    this.getBudgetCategory()
    this.getAllPeople()
  },
  computed: {},
  methods: {
    init () {
      let orgIdArr = JSON.parse(getItem('orgIdData'))
      this.formModel.deptId = orgIdArr[orgIdArr.length - 1]
      this.formModel.userInfoId = getItem('userInfoId')
      let orgName = getItem('orgNameStr')
      this.orgOptions.push({
        label: orgName,
        model: this.formModel.deptId
      })
      this.userInfoOption.push({
        label: getItem('userName'),
        model: getItem('userInfoId')
      })
    },
    getBudgetCategory () {
      Api.Common.getBudgetCategory().then(result => {
        if (result.status === 0) {
          console.log(result)
          this.budgetCategory = this.assembleOrgData(result.data)
        } else {
          this.$message.error(`${result.msg}`)
        }
      })
    },
    //请求所有人员
    getAllPeople () {
      Api.PersonnelManagement.personListNew(1, 10000).then((result) => {
        if (result.status === 0) {
          for (let i = 0; i < result.data.ls.length; i++) {
            let people = result.data.ls[i]
            this.formWitnessData.push({
              model: people.id,
              label: people.personName,
              disabled: people.id === getItem('userInfoId')
            })
          }
        } else {
          this.$message.error(`${result.msg}`)
        }
      })
    },
    //递归组装部门级联选择器数据源
    assembleOrgData (source) {
      let dest = []
      for (let i = 0; i < source.length; i++) {
        let org = {
          value: source[i].id,
          parentId: source[i].parentId,
          label: source[i].name,
          depth: source[i].depth
        }
        if (source[i].childList && source[i].childList.length > 0) {
          org['children'] = this.assembleOrgData(source[i].childList)
        }
        dest.push(org)
      }
      return dest
    },
    addFile () {
      this.formModel.reimburseDetail.push({
        time: '',
        money: '',
        moneyDetail: '',
        hasBill: '',     // 是否有发票
        fileList: []     // 文件列表
      })
    },
    deleteFile (index) {
      if (this.formModel.reimburseDetail.length === 1) {
        this.$message.warning('报销明细不能为空！')
        return false
      }
      this.formModel.reimburseDetail.splice(index, 1)
    },
    // 上传附件
    handleFileRemove (file, fileList) {
      console.log(fileList)
      setTimeout(() => {
        this.formModel.reimburseDetail[this.reimburseIndex].fileList = []

        for (let i = 0; i < fileList.length; i++) {
          this.formModel.reimburseDetail[this.reimburseIndex].fileList.push({
            name: fileList[i].name,
            url: fileList[i].url
          })
        }
      }, 10)
    },
    handleFileSuccess (res, file, fileList) {
      if (res.status === 0) {
        this.formModel.reimburseDetail[this.reimburseIndex].fileList.push({
          name: file.name,
          url: file.response.data.url
        })
      } else {
        this.$message.error(`${res.msg}`)
      }
      console.log(this.formModel.reimburseDetail[this.reimburseIndex].fileList)
    },
    reimburseClick (index) {
      this.reimburseIndex = index
      console.log(index)
    },
    cancel () {
      this.$router.go(-1)
    },
    save (formName) {
      console.log('formName', formName)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            projectWeeklyAddReq: {
              projectWeekly: {
                userId: this.formModel.userInfoId,
                thisWeek: this.formModel.thisWeek,
                nextWeek: this.formModel.nextWeek,
                workload: this.formModel.workload,
                deptId: this.formModel.deptId
              },
              ext: {
                projectName: this.formModel.projectName,
                projectNo: this.formModel.projectNo,
                deptName: this.orgOptions[0].label,
                userName: this.userInfoOption[0].label
              }
            }
          }
          this.isSave = false
          Api.ProjectManagements.addWeekly(data.projectWeeklyAddReq).then(result => {
            this.isSave = true
            if (result.status === 0) {
              this.$message.success('添加成功！')
              this.$router.push({name: 'WeeklyClaimApply'})
            } else {
              this.$message.error(result.data)
            }
          })
          console.log(data)
        } else {
          console.log('error submit!!')
          return false
        }
      })

    },
    moneyChange () {
      let total = 0
      for (let i = 0; i < this.formModel.reimburseDetail.length; i++) {
        if (this.formModel.reimburseDetail[i].money === '' || !this.formModel.reimburseDetail[i].money) {
          total += 0
        } else {
          total += Number(this.formModel.reimburseDetail[i].money)
        }
      }
      this.formModel.total = total.toFixed(2)
    }
  },
  components: {
    DataTable, DataForm
  }
}
</script>

<style scoped lang="less" rel="stylesheet/less">
.expand-right {
  @media (min-width: 768px) {
    padding-left: 0 !important;
  }
}

.page-content {
  padding: 15px;
}

</style>
