<!--
  @description: 建设项目-新增
  @author: 肖文龙/郝凤仙
  @routerPath:/buildingProject/buildingProjectAdd
  @date： 2019-12-4 13:26:00
-->
<template>
  <div>
    <!--flowStatus01 待办列表进入 则不显示标题-->
    <div v-if="!flowStatus" class="title title_border p0-16">
      <i class="iconfont icon-fanhui pointer" @click="back" />新增建设项目
    </div>
    <div :class="flowStatus?'main':'p0-16'" class="mt10">
      <!--flowStatus01 待办列表进入 则不显示标题-->
      <div>
        <el-form ref="formData" :model="formData" :rules="rules" :inline-message="true">
          <!--=======================================================建设项目信息=======================================================-->
          <table class="from_table">
            <tr>
              <td>
                <el-form-item ref="projectNo" label="建设项目编码" prop="projectNo" />
              </td>
              <td>
                <gx-input
                  v-model="formData.projectNo"
                  gx-maxlength="varchar500"
                  placeholder="请输入建设项目编码"
                />
              </td>
              <td>
                <el-form-item ref="projectName" label="建设项目名称" prop="projectName" />
              </td>
              <td>
                <gx-input v-model="formData.projectName" placeholder="建设项目名称" gx-maxlength="varchar200" />
              </td>
            </tr>
            <tr>
              <!--建设项目类型-->
              <td>
                <el-form-item ref="constructionProjectType" label="建设项目类型" prop="constructionProjectType" />
              </td>
              <td>
                <el-radio-group v-model="formData.constructionProjectType">
                  <el-radio
                    v-for="(item,index) in constructionProjectTypeList"
                    :key="index"
                    :label="item.typecode"
                  >
                    {{ item.typename }}
                  </el-radio>
                </el-radio-group>
              </td>
              <!--年份-->
              <td v-if="yearIsShow">
                <el-form-item ref="particularYear" label="年份" prop="particularYear" />
              </td>
              <td v-if="yearIsShow">
                <el-date-picker
                  v-model="formData.particularYear"
                  type="year"
                  format="yyyy"
                  placeholder="选择年份"
                />
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item ref="approvalNo" label="批准文号" prop="approvalNo" />
              </td>
              <td>
                <gx-input v-model="formData.approvalNo" placeholder="批准文号" gx-maxlength="varchar200" />
              </td>
              <td>
                <el-form-item ref="projectDeptname" label="所属机构" prop="projectDeptname" />
              </td>
              <td>
                <gx-input
                  v-model="formData.projectDeptname"
                  placeholder="所属机构"
                  style="width: calc(100% - 180px)"
                  disabled
                  gx-maxlength="varchar100"
                />
                <el-button type="primary" @click="subsidiaryOrganDialog.dialog=true">
                  选择
                </el-button>
                <el-button @click="clearAgency()">
                  清空
                </el-button>
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item ref="projectLocation" label="项目地点" prop="projectLocation" />
              </td>
              <td>
                <cascader :region-text="formData.projectLocation" @regionData="regionData" />
              </td>
              <td>
                <el-form-item ref="projectBudget" label="项目总投资（万元）" prop="projectBudget" />
              </td>
              <td>
                <!--金额组件-->
                <money :thousands="true" :money-value="formData" name="projectBudget" />
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item ref="approvalDeptname" label="立项或审批部门" prop="approvalDeptname" />
              </td>
              <td>
                <gx-input v-model="formData.approvalDeptname" placeholder="立项或审批部门" gx-maxlength="varchar200" />
              </td>
              <td>
                <el-form-item ref="projectManagername" label="项目法人" prop="projectManagername" />
              </td>
              <td>
                <gx-input
                  v-model="formData.projectManagername"
                  style="width:90%"
                  placeholder="项目法人"
                  gx-maxlength="varchar200"
                />
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item ref="industryClass" label="行业分类" prop="industryClass" />
              </td>
              <td>
                <el-select
                  v-model="formData.industryClass"
                  placeholder="行业分类"
                  @change="projectIndustryChange"
                >
                  <el-option
                    v-for="(item,index) in industryClassList"
                    :key="index"
                    :label="item.typename"
                    :value="item.typecode"
                  />
                </el-select>
              </td>
              <td>
                <el-form-item ref="projectScale" label="项目规模" prop="projectScale" />
              </td>
              <td colspan="3">
                <gx-input
                  v-model="formData.projectScale"
                  placeholder="项目规模"
                  style="width: 96%"
                  gx-maxlength="varchar200"
                />
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item ref="fundingSource" label="资金来源" prop="fundingSource" />
              </td>
              <td>
                <gx-input v-model="formData.fundingSource" placeholder="资金来源" gx-maxlength="varchar200" />
              </td>
              <td>
                <el-form-item ref="contributionScale" label="出资比例" prop="contributionScale" />
              </td>
              <td>
                <gx-input v-model="formData.contributionScale" placeholder="出资比例" gx-maxlength="varchar200" />
              </td>
            </tr>
            <tr>
              <td> <el-form-item ref="monitorDeptCode" label="行业监管部门" prop="monitorDeptCode" /></td>
              <td>
                <el-select
                  v-model="formData.monitorDeptCode"
                  placeholder="行业监管部门"
                  @change="selectCodeChange($event,'00')"
                >
                  <el-option
                    v-for="(item,index) in monitorDeptCodeTypeList"
                    :key="index"
                    :label="item.typename"
                    :value="item.typecode"
                  />
                </el-select>
              </td>
              <td> <el-form-item ref="proLevelCode" label="项目级别" prop="proLevelCode" /></td>
              <td>
                <el-select
                  v-model="formData.proLevelCode"
                  placeholder="项目级别"
                  @change="selectCodeChange($event,'01')"
                >
                  <el-option
                    v-for="(item,index) in proLevelCodeTypeList"
                    :key="index"
                    :label="item.typename"
                    :value="item.typecode"
                  />
                </el-select>
              </td>
            </tr>
            <tr>
              <td> <el-form-item ref="linkName" label="联系人" prop="linkName" /></td>
              <td>
                <gx-input v-model="formData.linkName" placeholder="联系人" gx-maxlength="varchar200" />
              </td>
              <td><el-form-item ref="linkPhone" label="联系方式" prop="linkPhone" /></td>
              <td> <gx-input v-model="formData.linkPhone" placeholder="联系方式" type="number" gx-maxlength="varchar20" /></td>
            </tr>
            <tr>
              <td>
                <el-form-item
                  ref="projectContent"
                  label="项目内容"
                  prop="projectContent"
                  class="textarea"
                />
              </td>
              <td colspan="3">
                <gx-input
                  v-model="formData.projectContent"
                  :autosize="{ minRows: 4, maxRows: 4 }"
                  type="textarea"
                  gx-maxlength="varchar4000"
                  show-word-limit
                  style="width: 96%"
                />
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="附件" />
              </td>
              <td colspan="3">
                <upload
                  ref="upload"
                  :file-size="fileSize"
                  :data="upLoadData"
                  :auto-upload="true"
                  :auto-delete="true"
                  :title="''"
                  tip-text="请上传项目及其相关附件，大小不超200M"
                />
              </td>
            </tr>
          </table>
        </el-form>
        <!--操作按钮-->
        <div class="but_footer">
          <div class="but_footer-h">
            <div class="but_footer-but">
              <el-button @click="saveData()">
                保存
              </el-button>
              <el-button type="primary" @click="submitConstructionProject('formData')">
                提交审批
              </el-button>
            </div>
          </div>
        </div>
      </div>
      <!-- 所属机构选择弹框 -->
      <subsidiaryOrganDialog
        :dialog-data="subsidiaryOrganDialog"
        @buyersInfo="subsidiaryOrganInfo"
      />
      <!--工作流选择节点组件-->
      <processNode-com
        ref="processNode"
        :process-definition-key="processDefinitionKey"
        @processNodeData="processNodeData"
      />
      <!--工作流流程节点/获取审核用户-->
      <depart-dialog
        ref="departDialog"
        :process-node="processNode"
        @isSingleUser="isSingleUser"
        @processInitData="processInitData"
        @submit="submit"
      />
    </div>
  </div>
</template>

<script>
/* api接口*/
import { saveConstructionProject, getConstructionProjectById, initMultiStageTypeGroup } from '@/api/purchasePlan/taskplan'
/* 公共方法 */
import { characters1_auto, linkerName, phone } from '@/assets/js/validate'
import { randomData } from '@assets/js/utils'// randomData
import workconstant from '@/assets/js/workutils/workconstant'
/* 组件*/
import upload from '@comp/common/updownload/upload' // 上传组件
import cascader from '@comp/common/cascader' // 地区组件
import subsidiaryOrganDialog from './subsidiaryOrgan-dialog' // 所属机构选择弹框
import processNodeCom from '@views/work/processNodeCom'
import departDialog from '@views/work/depart-dialog'
import money from '@comp/common/money/money'
/* 混合开发方法-参数字段*/
import { buildingProjectGroupMixin } from '../../mixins/buildingProjectGroupMixin'// 字典信息
import { buildingProjectMixin } from '../../mixins/buildingProjectMixin'// 建设项目公共方法
import { workCommonMixins } from '@views/work/mixins/workCommonMixins'
export default {
  name: 'BuildingProjectAdd',
  components: {
    upload, // 上传组件
    cascader, // 地区三级联动组件
    subsidiaryOrganDialog, // 所属机构选择弹框组件
    money, // 金额组件
    'processNode-com': processNodeCom, // 工作流节点信息组件
    'depart-dialog': departDialog // 工作流审批人组件
  },
  mixins: [buildingProjectGroupMixin, workCommonMixins, buildingProjectMixin],
  data() {
    return {
      fileSize: 200,
      industryClassList: [], // 行业分类数据
      yearIsShow: false, // 控制年份显示隐藏变量
      processDefinitionKey: '', // 工作流流程id
      fileList: [],
      rules: {
        projectName: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 建设项目名称
        projectDeptname: [{ required: true, message: '请选择', trigger: 'change' }], // 所属机构
        projectLocation: [{ required: true, message: '请选择', trigger: 'change' }], // 项目地点
        industryClass: [{ required: true, message: '请选择', trigger: 'change' }], // 行业分类
        projectScale: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 项目规模
        fundingSource: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 资金来源
        constructionProjectType: [{ required: true }], // 建设项目类型
        particularYear: [{ required: true, message: '请选择', trigger: 'change' }], // 年份
        projectBudget: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 项目总投资
        projectManagername: [{ required: true, validator: linkerName, trigger: 'blur' }], // 项目法人
        proLevelCode: [{ required: true, message: '请选择', trigger: 'change' }], // 项目级别编码
        monitorDeptCode: [{ required: true, message: '请选择', trigger: 'change' }], // 行业监管部门编码
        linkName: [{ required: true, validator: linkerName, trigger: 'blur' }], // 项目法人
        proLevelName: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 项目级别名称
        // monitorDeptName: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 行业监管部门名称
        linkPhone: [{ required: true, validator: phone, trigger: 'blur' }], // 手机号码
        contributionScale: [{ required: true, message: '请输入出资比例', trigger: 'blur' }] // 出资比例
        // projectLocationCode: [{ required: true, validator: phone, trigger: 'blur' }] // 项目地址
      },
      //  委托人选择弹框
      subsidiaryOrganDialog: {
        dialog: false
      }
    }
  },
  watch: {
    'formData.constructionProjectType'(n, o) {
      //  基本建设项目00：没有年份字段;生产运维项目01：有年份字段
      n === '01' ? this.yearIsShow = true : this.yearIsShow = false
    }
  },
  mounted() {
    this.processDefinitionKey = workconstant.buildingProject // 工作流流程key
    this.formData.createUser = this.$store.getters.info.userName // 取出创建人名称
    // buildingProjectId建设项目id有值 为编辑 否则是新增前端生成主键id
    if (this.buildingProjectId) {
      this.upLoadData.bizId = this.buildingProjectId
      this.getConstructionProject()
    } else {
      this.upLoadData.bizId = randomData()
      this.formData.id = this.upLoadData.bizId
    }
    // 获取字典信息
    this.getInitMultiStageTypeGroup()
  },
  methods: {
    // 根据id获取建设项目
    getConstructionProject() {
      getConstructionProjectById(this.buildingProjectId).then(res => {
        this.formData = res.data
      }).catch(() => {
      })
    },
    // 字典信息
    getInitMultiStageTypeGroup() {
      // const projectIndustry = 'pretProjectIndustry'
      const projectIndustry = 'economicIndustry'
      initMultiStageTypeGroup(projectIndustry).then(response => {
        this.industryClassList = response.data.typeList
      })
    },
    // 项目分类选择
    projectIndustryChange(val, child) {
      if (!child) {
        // 当改变父级状态时将子级数据清空
        this.formData.industryInfo = ''
      }
      // 数据强制刷新
      this.$forceUpdate()
    },
    // 行业监管部门 type-00 行业监管部门 type-01 项目级别
    selectCodeChange(val, type) {
      if (type === '00') {
        const arr = this.monitorDeptCodeTypeList.filter((i) => {
          return val === i.typecode
        })
        console.log(arr)
        this.formData.monitorDeptName = arr[0].typename
      } else {
        const arr = this.proLevelCodeTypeList.filter((i) => {
          return val === i.typecode
        })
        this.formData.proLevelName = arr[0].typename
      }
      console.log(this.formData)
    },
    // 所在区域三级联动组件使用
    regionData(regionName, location) {
      const len = location.length
      this.formData.projectLocation = regionName
      if (len === 1) {
        this.formData.projectLocationCode = location[0]
      } else if (len === 2) {
        this.formData.projectLocationCode = location[0] + ',' + location[1]
      } else {
        this.formData.projectLocationCode = location[0] + ',' + location[1] + ',' + location[2]
      }
    },
    // 保存
    saveData() {
      this.formData.useStatus = '00' // 使用状态 00临时,01正式
      this.formData.auditStatus = ''// 审核状态:00待审批  ''为保存
      // 建设项目名称必填校验
      if (!this.formData.projectName) {
        this.$message({
          message: '请先填写建设项目名称',
          type: 'warning'
        })
        this.confirmLoading = false
        return
      }
      this.submit()
    },
    // 提交审批
    submitConstructionProject(formName) {
      this.formData.useStatus = '01' // 使用状态 00临时,01正式
      this.formData.auditStatus = '00'// 审核状态:00待审批  ''为保存
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('是否确定提交？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            confirmButtonClass: 'confirmBtn',
            cancelButtonClass: 'cancelBtn',
            type: 'warning'
          }).then(() => {
            /* buildingProjectConfigType true启动工作流 false普通审核*/
            if (this.buildingProjectConfigType) {
              // 启动工作流
              if (JSON.stringify(this.processNode) !== '{}' && this.processNode.nodeId) {
                this.$refs.departDialog.getUserDepart(this.processNode)
              }
            } else {
              // 直接提交
              this.submit()
            }
          }).catch(() => {
          })
        }
      })
    },
    // 提交调用接口方法（子组件审批流选择审核人员后调用）
    submit() {
      // 提交时添加工作流信息
      if (this.formData.useStatus === '01' && this.buildingProjectConfigType) {
        this.processInitDto.type = '01' // 01：初次提交 02：审核驳回再次提交
        this.formData.processInitDto = this.processInitDto // 审核人信息传回得信息
      }
      saveConstructionProject(this.formData).then(response => {
        this.formData.projectNo = response.data
        // 01提交
        if (this.formData.useStatus === '01') {
          this.submitJumpPage()
        } else {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
        }
      }).catch(() => {
      })
    },
    // 设置提交跳转页面
    submitJumpPage() {
      // 审批流进入flowStatus '01' 跳转回待办列表
      if (this.flowStatus === '01') {
        this.$router.push({ path: '/work/todo' })
      } else {
        this.$message({
          message: '提交成功',
          type: 'success'
        })
        this.back()
      }
    },
    // 提交成功后跳转列表
    submitRouterPath() {

    },
    // 返回按钮
    back() {
      this.$router.push({ path: '/buildingProject/buildingProjectList' })
    },
    /* =======================================================所属机构=======================================================*/
    // 所属机构信息
    subsidiaryOrganInfo(data) {
      this.formData.projectDeptname = data.departName
      this.formData.projectDeptno = data.orgCode
    },
    // 清空按钮
    clearAgency() {
      this.formData.projectDeptname = ''
      this.formData.projectDeptno = ''
    }
  }
}
</script>

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