<template>
	<div>
		<!-- 标题按钮部分开始 -->
		<div class="tab-header webtop">
			<!-- 标题 -->
			<div>外采申请表详情</div>
			<!-- start 详情按钮 -->
      <div>
        <el-button type="primary" @click="openAgree">同 意</el-button>
        <el-button type="danger" @click="openReject">驳 回</el-button>
        <el-button type="danger" @click="openStop">终 止</el-button>
      </div>
			<!-- end 详情按钮 -->
		</div>
		<!-- 标题按钮部分结束 -->
		<div>
			<el-form ref="form_obj" :model="formobj" label-position="right" class="formadd" >
			<el-row >
				<el-col :span="3" class="tleftb" >申请编号</el-col>
				<el-col :span="5" class="trightb"><el-form-item prop="applicationCode">
          <span>{{ formobj.applicationCode }}</span></el-form-item></el-col>
				<el-col :span="3" class="tleftb">申请人姓名</el-col>
				<el-col :span="5" class="trightb"><el-form-item prop="createByName"><span>{{ formobj.createByName }}</span></el-form-item></el-col>
				<el-col :span="3" class="tleftb">申请日期</el-col>
				<el-col :span="5" class="trightb"><el-form-item prop="applicationDate"><span>{{ formobj.applicationDate }}</span></el-form-item></el-col>
			</el-row>
      <el-row>
				<el-col :span="3" class="tleftb">外采类型</el-col>
				<el-col :span="21" class="trightb">
          <el-form-item prop="externalMiningTypeValue">
            <span v-show="formobj.externalMiningTypeKey==2">政策外采</span>
            <span v-show="formobj.externalMiningTypeKey==1">直接外采</span>
          </el-form-item></el-col>
			</el-row>
			<el-row>
				<el-col :span="3" class="tleftb">采购单位名称</el-col>
				<el-col :span="21" class="trightb"><el-form-item prop="purchasingUnitName"><span>{{ formobj.purchasingUnitName }}</span></el-form-item></el-col>
			</el-row>
			<el-row>
				<el-col :span="3" class="tleftb">车型名称</el-col>
				<el-col :span="21" class="trightb"><el-form-item prop="useOrg"><span>{{ formobj.modelName }}</span></el-form-item></el-col>
			</el-row>
			<el-row>
				<el-col :span="3" class="tleftb">常用配置名称</el-col>
				<el-col :span="21" class="trightb"><el-form-item prop="useOrg"><span>{{ formobj.configName }}</span></el-form-item></el-col>
      </el-row>
        <el-row><el-col :span="3" class="tleftb">采购价格</el-col>
				<el-col :span="9" class="trightb"><el-form-item prop="useOrg"><span>{{ formobj.purchasePrice }}</span></el-form-item></el-col>

				<el-col :span="4" class="tleftb">销售指导价</el-col>
				<el-col :span="8" class="trightb"><el-form-item prop="useOrg"><span>{{ formobj.guidedPrice }}</span></el-form-item></el-col>
        </el-row>
        <el-row>	<el-col :span="3" class="tleftb">厂家合同价</el-col>
				<el-col :span="9" class="trightb"><el-form-item prop="useOrg"><span>{{ formobj.manufactorSettlementPrice }}</span></el-form-item></el-col>

				<el-col :span="4" class="tleftb">台数</el-col>
				<el-col :span="8" class="trightb"><el-form-item prop="useOrg"><span>{{ formobj.num }}</span></el-form-item></el-col>
        </el-row>
        <el-row>	<el-col :span="3" class="tleftb">订金</el-col>
				<el-col :span="9" class="trightb"><el-form-item prop="useOrg"><span>{{ formobj.deposit }}</span></el-form-item></el-col>

				<el-col :span="4" class="tleftb">费用名称</el-col>
				<el-col :span="8" class="trightb"><el-form-item prop="useOrg"><span>{{ formobj.expenseName }}</span></el-form-item></el-col>
        </el-row>
        <el-row>	<el-col :span="3" class="tleftb">费用金额合计</el-col>
				<el-col :span="21" class="trightb"><el-form-item prop="useOrg"><span>{{ formobj.totalExpenseAmount }}</span></el-form-item></el-col>
			</el-row>
        <div class="listcon" v-show="formobj.externalMiningTypeKey==2">
          <div style="border:1px solid #c0c0c0;padding:5px 5px 5px 5px;">
            车辆列表
          </div>
          <el-table  :data="formobj.baseOutsourcingApplicationVehicleDtos" border style="width: 100%"  >‘
            <el-table-column width="60px" label="序号" type="index"   align="center" />
            <el-table-column prop="vinNo" label="车架号" align="center" />
          </el-table>
        </div>
		</el-form>
		</div>
    <!-- 选择待办人 的弹出框-->
    <el-dialog title="填写审批意见"  :visible.sync="nodeDialogVisible" width="80%">
      <el-form label-position="right" class="formadd" >
        <el-row>
          <el-col :span="4" class="tleftb">当前环节</el-col>
          <el-col :span="20" class="trightb">
            <el-form-item prop="purchasingUnitName"><span>{{ formobj.taskName }}->{{ nextNode.name }}</span></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="tleftb">意见</el-col>
          <el-col :span="20" class="trightb">
            <el-input size="small" v-model="formobj.comment" placeholder="审批意见"  class="addinputw" clearable ></el-input>
          </el-col>
        </el-row>
        <div style="text-align:center;margin-top: 20px;">
          <el-button type="primary" size="mini"  @click="agree">确 定</el-button>
          <el-button type="info " size="mini"  @click="closeNodeDialog">取 消</el-button>
        </div>
      </el-form>
    </el-dialog>
    <!-- 选择待办人 的弹出框-->
    <el-dialog title="填写审批意见"  :visible.sync="nodeDialogVisibleForReject" width="80%">
      <el-form label-position="right" class="formadd" >
        <el-row>
          <el-col :span="4" class="tleftb">当前环节</el-col>
          <el-col :span="20" class="trightb">
            <el-form-item prop="purchasingUnitName"><span>{{ formobj.taskName }}->{{ nextNode.name }}</span></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="tleftb">意见</el-col>
          <el-col :span="20" class="trightb">
            <el-input size="small" v-model="formobj.comment" placeholder="审批意见"  class="addinputw" clearable ></el-input>
          </el-col>
        </el-row>
        <div style="text-align:center;margin-top: 20px;">
          <el-button type="primary" size="mini"  @click="reject">确 定</el-button>
          <el-button type="info " size="mini"  @click="closeNodeDialog">取 消</el-button>
        </div>
      </el-form>
    </el-dialog>
	</div>
</template>

<script>
import req from '@/api/baseoutsourcingapplication/baseoutsourcingapplication'
export default {
	name: 'BaseOutsourcingApplicationInfo',
  components: {

  },
	data() {
		return {
      obj:{},
		  //角色sid
      roleSid:"",
		  //选择待办人弹框
      nodeDialogVisible:false,
      nodeDialogVisibleForReject:false,
      //选择用户弹框
      nodeUserDialogVisible:false,
      // 模型xml数据
      xmlData: "",
      //根据角色查询的用户数组
      users:[],
      //选择的用户的姓名
      userName:'',
      //选择的用户sid
      userSid:'',
      taskList: [],
      //获取环节时默认是最后一个环节
      endTask:true,
      startTask:true,
      //下一环节
      nextNode:{},
			formobj: {
        sid: '',
        comment:'',
        applicationCode: '123456', // 申请编号
        createByName: window.sessionStorage.getItem('name'), // 申请人姓名
        applicationDate: '', // 申请日期
        externalMiningTypeKey: '1', // 外采类型key
        externalMiningTypeValue: '', // 外采类型value
        purchasingUnitName: '', // 采购单位名称
        modelSid: '', // 车型sid
        modelName: '', // 车型名称
        configName: '', // 常用配置名称
        configSid: '', // 常用配置sid
        purchasePrice: '', // 采购价格
        guidedPrice: '', // 销售指导价
        manufactorSettlementPrice: '', // 厂家合同价
        num: '0', // 台数
        deposit: '', // 订金
        expenseName: '', // 费用名称
        totalExpenseAmount: '', // 费用金额合计
        orgSid: '', // 部门sid
        orgSidPath: window.sessionStorage.getItem('orgSidPath'),
        baseOutsourcingApplicationVehicleDtos:[],
        businessSid: '',//同意办理列表
        instanceId: '',
        taskId: '',
        taskDefKey: '',
        taskName: '',
        nextNodeSid:'',
        nextUserSid:'',
        userSid: window.sessionStorage.getItem('userSid')
      },
      regectList: { // 驳回列表
        businessSid: '',
        comment: '',
        instanceId: '',
        taskId: '',
        userSid: window.sessionStorage.getItem('userSid')
      },
      stopList: { // 终止列表
        businessSid: '',
        comment: '',
        instanceId: '',
        taskId: '',
        userSid: window.sessionStorage.getItem('userSid')
      }
		}
	},
  created() {
    var one = window.location.href.indexOf('&data') + 6
    const data = window.location.href.substr(one) // url解码unescape()已从web中移除,尽量不使用
    const obj = JSON.parse(decodeURIComponent(data))
    this.obj=obj;
    // ===获取sid
    this.showInfo(obj.businessSid)
    // ===获取参数
    // 同意列表  父级页面传递过来的流程的相关的属性参数
    this.formobj.businessSid =obj.businessSid
    this.formobj.instanceId = obj.instanceId
    this.formobj.taskId = obj.taskId
    this.formobj.taskDefKey = obj.taskDefKey
    this.formobj.taskName = obj.taskName
    // 驳回列表
    this.regectList.businessSid = obj.businessSid
    this.regectList.instanceId = obj.instanceId
    this.regectList.taskId = obj.taskId
    // 终止列表
    this.stopList.businessSid = obj.businessSid
    this.stopList.instanceId = obj.instanceId
    this.stopList.taskId = obj.taskId
    window.parent.postMessage({
      cmd: 'returnHeight',
      params: {
        //告诉父级页面，子页面的弹框高度。
        code: 2,
        data: 600 + 'px'
      }
    }, '*')
  },
	methods: {
	  //关闭弹出框 选择待办人弹框
    closeNodeDialog(){
      this.nodeDialogVisible = false
      this.nodeDialogVisibleForReject=false
    },

    // 终止
    openStop() {
      this.$confirm('是否确认执行终止操作', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.handleStop()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消终止'
          })
        })
    },
    // 驳回
    openReject() {
          req.getPreviousNodesForReject(this.formobj).then(resp=>{
            if (resp.success) {
              var arr= resp.data;
              //循环获取当前环节的下一个环节信息
              var startTask=arr[0].startTask;
              if(startTask){
                alert('当前环节不能驳回!');
                return;
              }
              this.nextNode=arr[0]
              this.nodeDialogVisibleForReject = true
            }
          });
    },
    // 同意
    openAgree() {
      //查验下一环节要用到，流程定义的id
      req.getNextNodesForSubmit(this.formobj).then(resp=>{
        if (resp.success) {
         var arr= resp.data;
          this.nextNode=arr[0]
          this.nodeDialogVisible = true
        }
      });

    },
		handleReturn() {
			this.$emit('doback')
		},
		showInfo(sid) {
      this.$nextTick(() => {
        this.$refs['form_obj'].clearValidate()
      })
      const _this = this
				req
					.fetchBySid(sid)
					.then(resp => {
						if (resp.success) {
							const vdata = resp.data
							_this.formobj.applicationCode = vdata.applicationCode // 申请编号
							_this.formobj.createByName = vdata.createByName // 申请人姓名
							_this.formobj.applicationDate = vdata.applicationDate // 申请日期
							_this.formobj.externalMiningTypeKey = vdata.externalMiningTypeKey // 外采类型key
							_this.formobj.externalMiningTypeValue = vdata.externalMiningTypeValue // 外采类型value
							_this.formobj.purchasingUnitSid = vdata.purchasingUnitSid // 采购单位sid
							_this.formobj.purchasingUnitName = vdata.purchasingUnitName // 采购单位名称
							_this.formobj.modelSid = vdata.modelSid // 车型sid
							_this.formobj.modelName = vdata.modelName // 车型名称
							_this.formobj.configName = vdata.configName // 常用配置名称
							_this.formobj.purchasePrice = vdata.purchasePrice // 采购价格
						 	_this.formobj.guidedPrice = vdata.guidedPrice // 销售指导价
							_this.formobj.manufactorSettlementPrice = vdata.manufactorSettlementPrice // 厂家合同价
							_this.formobj.num = vdata.num // 台数
							_this.formobj.deposit = vdata.deposit // 订金
							_this.formobj.expenseName = vdata.expenseName // 费用名称
							_this.formobj.totalExpenseAmount = vdata.totalExpenseAmount // 费用金额合计
							_this.formobj.orgSid = vdata.orgSid // 部门sid
              _this.formobj.baseOutsourcingApplicationVehicleDtos = vdata.baseOutsourcingApplicationVehicleVos
						}
					})
				.catch(e => {
					_this.formobj = {}
				})
		},
    reject(){
      if(this.formobj.comment==''){
        alert('请填写审批意见!');
      }
      this.handleReject();
    },
    //同意任务
   agree() {
      if(this.formobj.comment==''){
        alert('请填写审批意见!');
      }
      //意见
     //下一环节的用户sid
     //调用后台接口流转
    req.agreeTask(this.formobj).then((response) => {
      if (response.code === '200') {
       this.nodeDialogVisible=false;
       //子页面向父级页面传递值
        window.parent.postMessage({
          cmd: 'returnHeight',
          params: {
            //操作成功，告诉父级页面关闭弹框
            code: 1
          }
        }, '*')
      } else {
        this.$notify({
          title: '提示',
          message: '执行失败',
          type: 'error',
          duration: 2000
        })
      }
    })
   },
    /** 驳回任务 */
    handleReject() {
      this.regectList.comment = this.formobj.comment
      req.rejectTask(this.regectList).then((response) => {
        if (response.code === '200') {
          this.$notify({
            title: '提示',
            message: '执行成功',
            type: 'success',
            duration: 2000
          })
          this.nodeDialogVisible=false;
          window.parent.postMessage({
            cmd: 'returnHeight',
            params: {
              code: 1
            }
          }, '*')
          // this.refreshIt()
        } else {
          this.$notify({
            title: '提示',
            message: '执行失败',
            type: 'error',
            duration: 2000
          })
        }
      })
    } ,
    /** 终止任务 */
    handleStop() {
      this.stopList.comment = this.comment
      req.breakTask(this.stopList).then((response) => {
        if (response.code === '200') {
          this.$notify({
            title: '提示',
            message: '执行成功',
            type: 'success',
            duration: 2000
          })
          this.nodeDialogVisible=false;
          window.parent.postMessage({
            cmd: 'returnHeight',
            params: {
              code: 1,
              data: document.body.scrollHeight + 'px'
            }
          }, '*')
          // this.refreshIt()
        } else {
          this.$notify({
            title: '提示',
            message: '执行失败',
            type: 'error',
            duration: 2000
          })
        }
      })
    }
	}
}
</script>

<style scoped>
.tleftb{
  font-size: 12px;
}
.trightb{
  font-size: 12px;
}

.box-card {
  width: 100%;
  margin-bottom: 20px;
}
</style>
