<!--
  @description: 采购人/代理机构-委托代理合同-新增
  @author: 肖文龙/郝凤仙
  @routerPath:/consignContract/consignContractAdd
  @date： 2019-11-28 10:28:19
-->
<template>
  <div :class="flowStatus?'main':'p0-16'">
    <!--flowStatus false 待办列表进入 则不显示标题-->
    <section v-if="!flowStatus" class="title">
      <i class="iconfont icon-fanhui pointer" @click="back" />
      新增委托合同
    </section>
    <el-form ref="form" :model="formData" :rules="rules" :inline-message="true">
      <!--=======================================================委托合同信息=======================================================-->
      <div class="page-title">
        1. 委托合同基本信息
      </div>
      <table class="from_table">
        <tr>
          <td>
            <el-form-item ref="contractNo" label="委托合同编码" />
          </td>
          <td>
            <gx-input
              v-model="formData.contractNo"
              disabled
              gx-maxlength="varchar50"
              placeholder="委托合同编码自动生成"
            />
          </td>
          <td>
            <el-form-item ref="contractName" label="委托合同名称" prop="contractName" />
          </td>
          <td>
            <gx-input v-model="formData.contractName" gx-maxlength="varchar50" placeholder="委托合同名称" />
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item ref="contractType" label="委托合同类型" prop="contractType" />
          </td>
          <td>
            <el-select v-model="formData.contractType" placeholder="请选择" style="width: 100%">
              <el-option
                v-for="item in contractTypeList"
                :key="item.typecode"
                :label="item.typename"
                :value="item.typecode"
              />
            </el-select>
          </td>
          <td>
            <el-form-item ref="chargedObject" label="收费对象" prop="chargedObject" />
          </td>
          <td>
            <el-radio-group v-model="formData.chargedObject">
              <el-radio v-for="(item,index) in chargedObjectList" :key="index" :label="item.typecode">
                {{ item.typename }}
              </el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item ref="chargeType" label="服务费收取方式" prop="chargeValue" />
          </td>
          <td colspan="3">
            <el-select v-model="formData.chargeType" placeholder="请选择" class="fl" style="width: 39%">
              <el-option
                v-for="item in serviceChargeList"
                :key="item.typecode"
                :label="item.typename"
                :value="item.typecode"
              />
            </el-select>
            <div v-if="formData.chargeType=='00'" class="fl ml">
              <el-input v-model="formData.chargeValue" style="width:50%" maxlength="50" />
              <span>%（标准累进制后的打折率）</span>
            </div>
            <div v-if="formData.chargeType=='01'" class="fl ml">
              <money :money-value="formData" :unit-stust="true" name="chargeValue" />
            </div>
            <div v-if="formData.chargeType=='02'" class="fl ml">
              <el-input v-model="formData.chargeValue" style="width:50%" maxlength="50" />%
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item ref="takeEffectDate" label="合同生效日期" prop="takeEffectDate" />
          </td>
          <td>
            <el-date-picker
              v-model="formData.takeEffectDate"
              :format="elValueFormatDate"
              :value-format="elValueSaveFormat"
              type="date"
              placeholder="选择日期"
            />
          </td>
          <td>
            <el-form-item label="单标段最低服务费（元）" prop="minCharge" />
          </td>
          <td>
            <money :money-value="formData" :thousands="true" width="calc(100% - 37px)" name="minCharge" />
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item ref="signDate" label="合同签约日期" prop="signDate" />
          </td>
          <td>
            <el-date-picker
              v-model="formData.signDate"
              :format="elValueFormatDate"
              :value-format="elValueSaveFormat"
              type="date"
              placeholder="选择日期"
            />
          </td>
          <td>
            <el-form-item ref="endDate" label="合同结束日期" prop="endDate" />
          </td>
          <td>
            <el-date-picker
              v-model="formData.endDate"
              :format="elValueFormatDate"
              :value-format="elValueSaveFormat"
              type="date"
              placeholder="选择日期"
            />
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item
              ref="content"
              label="合同主要内容"
              prop="content"
              class="textarea"
            >
              <el-popover
                placement="top-start"
                popper-class="hint"
                offset="5"
                trigger="hover"
                content="填写服务费收取情况和其他特殊条款说明"
              >
                <el-button slot="reference" type="info" class="prompt">
                  <i class="iconfont icon-qm" />
                </el-button>
              </el-popover>
            </el-form-item>
          </td>
          <td colspan="3">
            <gx-input
              v-model="formData.content"
              :autosize="{ minRows: 4, maxRows: 4 }"
              type="textarea"
              gx-maxlength="varchar4000"
              show-word-limit
              style="width: 96%"
            />
          </td>
        </tr>
      </table>
      <!--=======================================================委托人信息=======================================================-->
      <div class="page-title">
        2. 委托人信息
      </div>
      <table class="from_table">
        <tr>
          <td>
            <el-form-item ref="consignorName" label="委托人" prop="consignorName" />
          </td>
          <td colspan="3">
            <gx-input
              v-model="formData.consignorName"
              placeholder="委托人"
              style="width:calc(100% - 180px)"
              gx-maxlength="varchar50"
              disabled
            />
            <el-button type="primary" class="ml10 choose" @click="consignorDialog.dialog=true">
              选择
            </el-button>
            <el-button @click="clearAgency()">
              清空
            </el-button>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="委托人联系人" />
          </td>
          <td>
            <gx-input
              v-model="formData.consignorLinkman"
              placeholder="委托人联系人"
              gx-maxlength="varchar200"
            />
          </td>
          <td>
            <el-form-item label="委托人部门" />
          </td>
          <td>
            <gx-input v-model="formData.consignorDepartment" gx-maxlength="varchar36" placeholder="委托人部门" />
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="委托人固定电话" prop="consignorPhone" />
          </td>
          <td>
            <gx-input
              v-model="formData.consignorPhone"
              placeholder="委托人固定电话"
              gx-maxlength="varchar50"
            />
          </td>
          <td>
            <el-form-item ref="location" label="委托人手机" prop="consignorMobile" />
          </td>
          <td>
            <gx-input v-model="formData.consignorMobile" gx-maxlength="varchar50" placeholder="委托人手机" />
          </td>
        </tr>
      </table>
      <!--=======================================================代理机构信息=======================================================-->
      <div class="page-title">
        3. 代理机构信息
      </div>
      <table class="from_table">
        <tr>
          <td>
            <el-form-item ref="tenderAgent" label="招标代理机构" prop="tenderAgent" />
          </td>
          <td colspan="3">
            <gx-input v-model="formData.tenderAgent" gx-maxlength="varchar50" placeholder="招标代理机构" style="width: 96%" />
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="代理机构联系人" />
          </td>
          <td>
            <gx-input
              v-model="formData.tenderAgentLinkeman"
              placeholder="代理机构联系人"
              gx-maxlength="varchar50"
            />
          </td>
          <td>
            <el-form-item label="代理机构部门" />
          </td>
          <td>
            <gx-input v-model="formData.tenderAgentDepartment" gx-maxlength="varchar50" placeholder="代理机构部门" />
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="代理机构固定电话" prop="tenderAgentPhone" />
          </td>
          <td>
            <gx-input
              v-model="formData.tenderAgentPhone"
              placeholder="代理机构固定电话"
              gx-maxlength="varchar50"
            />
          </td>
          <td>
            <el-form-item ref="tenderAgentMobile" label="代理机构手机" prop="tenderAgentMobile" />
          </td>
          <td>
            <gx-input v-model="formData.tenderAgentMobile" gx-maxlength="varchar50" placeholder="代理机构手机" />
          </td>
        </tr>
      </table>
      <!--=======================================================附件信息=======================================================-->
      <div class="page-title">
        4. 附件信息
      </div>
      <table class="from_table">
        <tr class="singleRow">
          <td>
            <el-form-item label="附件" prop="accessory" />
          </td>
          <td colspan="3">
            <upload
              ref="upload"
              :data="upLoadData"
              :file-list="fileList"
              :auto-upload="true"
              :auto-delete="true"
              :limit="5"
              title=""
              :file-size="fileSize"
              tip-text="请上传合同文本及其他文件（不超过5个），不要超过100M。"
            />
          </td>
        </tr>
        <tr class="singleRow">
          <td>
            <el-form-item label="最终合同附件" prop="contractAccseeoryFile" />
          </td>
          <td colspan="3">
            <upload
              ref="upload"
              :file-size="fileSize"
              :data="upLoadDataLast"
              :file-list="fileListLast"
              :auto-upload="true"
              :auto-delete="true"
              :limit="5"
              title=""
              tip-text="请上传合同文本及其他文件（不超过5个），不要超过100M。"
            />
          </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="submitConstract('form')">
            提交审批
          </el-button>
        </div>
      </div>
    </div>
    <!-- 委托人选择弹框 -->
    <consignorDialog :dialog-data="consignorDialog" @buyersInfo="consignorInfo" />
    <!--工作流选择节点组件-->
    <processNode-com
      ref="processNode"
      :process-definition-key="processDefinitionKey"
      @processNodeData="processNodeData"
    />
    <!--工作流流程节点/获取审核用户-->
    <depart-dialog
      ref="departDialog"
      :process-node="processNode"
      @isSingleUser="isSingleUser"
      @processInitData="processInitData"
      @submit="submit"
    />
  </div>
</template>

<script>
/* 公共常用方法*/
import { checkNum, characters1_auto, phone, checkLinktel } from '@/assets/js/validate'// phone
import { randomData } from '@assets/js/utils'
import workconstant from '@/assets/js/workutils/workconstant'
/* api接口*/
import { saveConstract, getContract } from '@/api/purchasePlan/taskplan'

/* 混合开发方法-参数字段*/
import { ListMixin } from '@/mixins/ListMixin'// 分页
import { consignContractMixin } from '../../mixins/consignContractMixin'// 委托合同公共方法
import { workCommonMixins } from '@views/work/mixins/workCommonMixins'
/* 组件*/
import upload from '@comp/common/updownload/upload'
import consignorDialog from './consignor-dialog'
import money from '@comp/common/money/money'
import processNodeCom from '@views/work/processNodeCom'
import departDialog from '@views/work/depart-dialog'
export default {
  name: 'ConsignContractAdd',
  components: {
    upload, // 上传组件
    consignorDialog,
    money, // 金额组件
    'processNode-com': processNodeCom, // 工作流节点信息组件
    'depart-dialog': departDialog // 工作流审批人组件
  },
  mixins: [ListMixin, consignContractMixin, workCommonMixins],
  data() {
    return {
      fileSize: 100,
      fileList: [], // 附件
      fileListLast: [], // 最终附件上传
      processDefinitionKey: '', // 工作流流程id
      rules: {
        contractType: [{ required: true, message: '请选择', trigger: 'change' }], // 委托合同类型
        chargedObject: [{ required: true, message: '请选择', trigger: 'change' }], // 收费对象
        chargeValue: [{ required: true, message: '不能为空', trigger: 'blur' }], //  服务费收取方式
        contractName: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 委托合同名称
        takeEffectDate: [{ required: true, message: '请选择', trigger: 'change' }], // 合同生效日期
        endDate: [{ required: true, message: '请选择', trigger: 'change' }], // 合同结束日期
        signDate: [{ required: true, message: '请选择', trigger: 'change' }], // 合同签约日期
        minCharge: [{ required: true, validator: checkNum, trigger: 'blur' }], // 单标段最低服务费（元）
        content: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 合同主要内容
        consignorName: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 委托人
        consignorPhone: [{ required: true, validator: checkLinktel, trigger: 'blur' }], // 委托人固定电话
        consignorMobile: [{ required: false, validator: phone, trigger: 'blur' }], // 委托人手机
        tenderAgent: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 招标代理机构
        tenderAgentPhone: [{ required: true, validator: checkLinktel, trigger: 'blur' }], // 代理机构固定电话
        tenderAgentMobile: [{ required: false, validator: phone, trigger: 'blur' }] // 代理机构手机

      },
      //  委托人选择弹框
      consignorDialog: {
        dialog: false
      }
    }
  },
  mounted() {
    this.processDefinitionKey = workconstant.consignContract // 工作流流程key
    // consignContractId id有值 为编辑 否则是新增前端生成主键id
    if (this.consignContractId) {
      // 附件
      this.upLoadData.bizId = this.consignContractId
      // 最终合同附件
      this.upLoadDataLast.bizId = this.consignContractId
      this.getContractDetail()
    } else {
      const info = this.$store.state.user.info // 当前登录用户信息
      this.upLoadData.bizId = randomData()
      this.formData.id = this.upLoadData.bizId
      this.upLoadDataLast.bizId = this.upLoadData.bizId
      this.formData.tenderAgent = info.companyName
      this.formData.tenderAgentId = info.companyId
      this.formData.createUserName = this.$store.getters.info.userName
      this.formData.createUser = this.$store.getters.info.id
    }
  },
  methods: {
    // 根据ID查询单个合同信息
    getContractDetail() {
      getContract(this.consignContractId).then(res => {
        this.formData = res.data
        this.formData.id = this.consignContractId
      })
    },
    // 保存
    saveData() {
      // 委托合同名称必填校验
      if (!this.formData.contractName) {
        this.$message({
          message: '请先填写委托合同名称',
          type: 'warning'
        })
        this.confirmLoading = false
        return
      }
      this.formData.isOperation = '00' // 业务操作 保存:00 提交:01
      this.submit()
    },
    // 提交审批
    submitConstract(formName) {
      this.formData.isOperation = '01' // 业务操作 保存:00 提交:01
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('是否确定提交？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            confirmButtonClass: 'confirmBtn',
            cancelButtonClass: 'cancelBtn',
            type: 'warning'
          }).then(() => {
            /* consignorConfigType true启动工作流 false普通审核*/
            if (this.consignorConfigType) {
              // 启动工作流
              if (JSON.stringify(this.processNode) !== '{}' && this.processNode.nodeId) {
                this.$refs.departDialog.getUserDepart(this.processNode)
              }
            } else {
              // 直接提交
              this.submit()
            }
          }).catch(() => {
          })
        }
      })
    },
    // 提交调用接口方法（子组件审批流选择审核人员后调用）
    submit() {
      // 提交时添加工作流信息
      if (this.formData.isOperation === '01' && this.consignorConfigType) {
        this.processInitDto.type = '01' // 01：初次提交 02：审核驳回再次提交
        this.formData.processInitDto = this.processInitDto // 审核人信息传回得信息
      }
      const data = {
        ...this.formData
      }
      // 合同生效时间
      if (data.takeEffectDate) {
        data.takeEffectDate = this.$Moment(data.takeEffectDate).format(this.momentSaveFormat)
      }
      // 合同结束时间
      if (data.endDate) {
        data.endDate = this.$Moment(data.endDate).format(this.momentSaveFormat)
      }
      // 合同签约时间
      if (data.signDate) {
        data.signDate = this.$Moment(data.signDate).format(this.momentSaveFormat)
      }
      saveConstract(data).then(response => {
        this.formData.contractNo = response.data // 委托合同编码
        // 01提交
        if (this.formData.isOperation === '01') {
          this.submitJumpPage()
        } else {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
        }
      }).catch(() => {
      })
    },
    // 设置提交跳转页面
    submitJumpPage() {
      // 审批流进入flowStatus true 跳转回待办列表
      if (this.flowStatus) {
        this.$router.push({ path: '/work/todo' })
      } else {
        this.$message({
          message: '提交成功',
          type: 'success'
        })
        this.back()
      }
    },
    // 返回按钮
    back() {
      this.$router.push('/consignContract/consignContractList')
    },
    /* =======================================================委托人=======================================================*/
    // 委托人信息
    consignorInfo(data) {
      this.formData.consignorName = data.departName
      this.formData.consignorNo = data.orgCode
      this.formData.consignorDepartment = data.departName
      this.formData.consignorUserId = data.id
      this.formData.consignorLinkman = data.linkerName
      this.formData.consignorMobile = data.mobilePhone
      this.formData.consignorPhone = data.mobilePhone
    },
    // 清空按钮
    clearAgency() {
      this.formData.consignorName = ''
      this.formData.consignorNo = ''
      this.formData.consignorDepartment = ''
      this.formData.consignorUserId = ''
      this.formData.consignorLinkman = ''
      this.formData.consignorMobile = ''
      this.formData.consignorPhone = ''
    }
  }
}
</script>

<style lang="less" scoped>
  .ml{
    margin-left:-25px;
  }
</style>
