<template>
  <div class="app-container">
    <div class="tab-header webtop">
      <div>调拨详情</div>
      <div>
        <el-button type="primary" size="small" @click="openCountersign('加签')">加 签</el-button>
        <el-button type="primary" size="small" @click="openAgree('同意')">同 意</el-button>
        <el-button type="danger" size="small" @click="openReject('驳回')">驳 回</el-button>
        <el-button type="danger" size="small" @click="openStop('终止')">终 止</el-button>
      </div>
    </div>
    <div class="">

      <el-form ref="form_obj" :model="formobj" class="formaddcopy02">

        <el-row style="border-top: 1px solid #e0e3eb">

          <el-col :span="8">
            <div class="span-sty">申请人</div>
            <el-form-item><span class="addinputInfo">{{ formobj.createByName }}</span></el-form-item>
          </el-col>
          <el-col :span="8">
            <div class="span-sty">申请部门</div>
            <el-form-item><span class="addinputInfo">{{ formobj.deptName }}</span></el-form-item>
          </el-col>
          <el-col :span="8">
            <div class="span-sty">申请日期</div>
            <el-form-item><span class="addinputInfo">{{ formobj.createTime }}</span></el-form-item>
          </el-col>
        </el-row>

        <el-row>

          <el-col :span="8">
            <div class="span-sty">调出站</div>
            <el-form-item><span class="addinputInfo">{{ formobj.outPlatName }}</span></el-form-item>
          </el-col>
          <el-col :span="5">
            <div class="span-sty">调入站</div>
            <el-form-item><span class="addinputInfo">{{ formobj.inOrgName }}</span></el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item><span style="width: 100%;">{{ formobj.inPlatName }}</span></el-form-item>
          </el-col>
          <el-col :span="8">
            <div class="span-sty">经办人</div>
            <el-form-item><span class="addinputInfo">{{ formobj.confirmName }}</span></el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <div class="span-sty">备注</div>
            <el-form-item><span class="addinputInfo">{{ formobj.remarks }}</span></el-form-item>
          </el-col>
        </el-row>


        <div class="title titleOne">
          <div>调拨商品列表</div>
        </div>

        <el-table :data="formobj.wmsInventoryAllocateBillDetailNewList" :index="index" border style="width: 100%;"
          show-summary :summary-method="getSummaries">
          <el-table-column fixed width="60" label="序号" type="index" :index="index + 1" align="center" />
          <el-table-column prop="goodsID" label="商品ID" align="center" />
          <el-table-column prop="goodsSpuName" label="商品名称" align="center" />
          <el-table-column prop="goodsSkuCode" label="商品编码" align="center" />
          <el-table-column prop="goodsSkuOwnSpec" label="型号" align="center" />
          <el-table-column prop="unit" label="单位" align="center" />
          <el-table-column prop="warehouseName" label="仓库" width="150" align="center" />
          <el-table-column prop="warehouseArea" label="仓库" width="150" align="center" />
          <el-table-column prop="warehouseRackCode" label="库位" align="center" />
          <el-table-column prop="stockCount" label="库存数量" align="center" />
          <el-table-column prop="markUpRatio" label="加价比例" align="center" />
          <el-table-column prop="requAmount" label="调拨单价" align="center" />
          <el-table-column prop="count" label="调拨数量" align="center" />
          <el-table-column prop="amount" label="调拨金额" align="center" width="100" />
        </el-table>
      </el-form>
    </div>


    <!-- 选择待办人 的弹出框-->
    <el-dialog title="填写审批意见" :visible.sync="nodeDialogVisible" width="80%">
      <el-form class="formadd">
        <el-row v-show="countersignLink" style="border-top: 1px solid #e0e3eb">
          <el-col :span="4" class="tleftb">
            <span class="icon">*</span>加签人员:
          </el-col>
          <el-col :span="20">
            <el-form-item>
              <el-select v-model="countersign.assignee" placeholder="请选择" filterable>
                <el-option v-for="item in options" :key="item.userSid" :label="item.staffName" :value="item.userSid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-show="currentLink" style="border-top: 1px solid #e0e3eb">
          <el-col :span="4" class="tleftb">
            <span>当前环节:</span>
          </el-col>
          <el-col :span="20">
            <el-form-item><span>{{ current.taskName }}->{{ nextNode.name }}</span></el-form-item>
          </el-col>
        </el-row>
        <el-row :class="{rowClass:!currentLink}">
          <el-col :span="4" class="tleftb">
            <span>意见:</span>
          </el-col>
          <el-col :span="20">
            <el-form-item><el-input size="small" v-model="dialogList.comment" placeholder="审批意见" class="addinputw"
                type="textarea" :autosize="{ minRows: 1, maxRows: 10}" clearable></el-input></el-form-item>
          </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="nodeDialogVisible = false">取 消</el-button>
        </div>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
  import req from '@/api/storage/allocation.js'
  import {
    selectStaffListss
  } from '@/api/Common/dictcommons'
  export default {
    data() {
      return {
        index: 0,
        formobj: {},
        options: [],
        operation: '', // 点击操作按钮
        dialogList: {
          comment: ''
        },
        startTask: true,
        current: {
          taskDefKey: '',
          taskName: '' // 当前环节名称
        },
        nextNode: {}, // 下一环节
        nodeDialogVisible: false,
        currentLink: true,
        countersignLink: false,
        // 环节所需参数
        linkByParameter: {
          businessSid: '',
          comment: '',
          instanceId: '',
          taskId: '',
          orgSidPath: '',
          taskDefKey: '',
          userSid: ''
        },
        // 加签按钮所需参数
        countersign: {
          taskId: '',
          assignee: '',
          userSid: '',
          instanceId: '',
          views: ''
        }
      }
    },
    created() {
      console.log('url:' + window.location.href)
      var one = window.location.href.indexOf('&data') + 6
      const data = window.location.href.substr(one) // url解码unescape()已从web中移除,尽量不使用
      const obj = JSON.parse(decodeURIComponent(data))
      console.log('iframe页面获取的obj:', obj)
      // 点击（同意、终止、驳回、驳回）操作时所需的参数
      this.linkByParameter.businessSid = obj.businessSid
      this.linkByParameter.instanceId = obj.instanceId
      this.linkByParameter.taskId = obj.taskId
      this.linkByParameter.taskDefKey = obj.taskDefKey
      // this.linkByParameter.orgSidPath = window.sessionStorage.getItem('orgSidPath')
      this.linkByParameter.userSid = window.sessionStorage.getItem('userSid')
      this.current.taskDefKey = obj.taskDefKey
      this.current.taskName = obj.taskName
      // 加签参数
      this.countersign.taskId = obj.taskId
      this.countersign.userSid = window.sessionStorage.getItem('userSid')
      this.countersign.instanceId = obj.instanceId
      // 加载表单数据
      this.showInfo(obj.businessSid)
    },
    mounted() {
      window.parent.postMessage({
        cmd: 'returnHeight',
        params: {
          // 告诉父级页面，子页面的弹框高度。
          code: 2,
          data: 400 + 'px'
        }
      }, '*')
    },
    methods: {
      // 合计
      getSummaries(param) {
        const {
          columns,
          data
        } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计'
            return
          }
          const values = data.map(item => Number(item[column.property]))
          if (column.property === 'count') {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] += ''
          } else if (column.property === 'amount') {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] += ''
          }
        })
        return sums
      },


      showInfo(sid) {
        this.$nextTick(() => {
          this.$refs['form_obj'].clearValidate()
        })
        req.init(sid).then((res) => {
          if (res.success) {
            this.formobj = res.data
          }
        })
        selectStaffListss().then((res) => {
          if (res.success) {
            this.options = res.data
          }
        })
      },

      // 加签
      openCountersign(val) {
        this.operation = val
        this.currentLink = true
        this.countersignLink = true
        this.dialogList.comment = ''
        req.getNextNodesForSubmit({
          taskDefKey: this.current.taskDefKey,
          businessSid: this.linkByParameter.businessSid
        }).then((resp) => {
          if (resp.success) {
            var arr = resp.data
            this.nextNode = arr[0]
            this.nodeDialogVisible = true
          }
          this.submitdisabled = false
        })
      },
      // 同意
      openAgree(val) {
        this.operation = val
        this.currentLink = true
        this.countersignLink = false
        this.dialogList.comment = '同意'
        req.getNextNodesForSubmit({
          taskDefKey: this.current.taskDefKey,
          businessSid: this.linkByParameter.businessSid
        }).then((resp) => {
          if (resp.success) {
            var arr = resp.data
            this.nextNode = arr[0]
            this.nodeDialogVisible = true
          }
          this.submitdisabled = false
        })
      },
      // 驳回
      openReject(val) {
        this.operation = val
        this.currentLink = true
        this.countersignLink = false
        this.dialogList.comment = ''
        req.getPreviousNodesForReject({
          taskDefKey: this.current.taskDefKey,
          businessSid: this.linkByParameter.businessSid
        }).then((resp) => {
          if (resp.success) {
            var arr = resp.data
            this.nextNode = arr[0]
            this.nodeDialogVisible = true
          }
          this.submitdisabled = false
        })
      },
      // 终止
      openStop(val) {
        this.operation = val
        this.currentLink = false
        this.countersignLink = false
        this.dialogList.comment = ''
        this.nodeDialogVisible = true
      },
      reject() {
        if (this.operation === '同意') {
          this.handleAgree()
        } else if (this.operation === '驳回') {
          if (this.dialogList.comment === '') {
            this.$message({
              showClose: true,
              type: 'error',
              message: '请填写审批意见'
            })
          } else {
            this.handleReject()
          }
        } else if (this.operation === '终止') {
          if (this.dialogList.comment === '') {
            this.$message({
              showClose: true,
              type: 'error',
              message: '请填写审批意见'
            })
          } else {
            this.handleStop()
          }
        } else if (this.operation === '加签') {
          this.handleCountersign()
        }
      },
      /** 加签 */
      handleCountersign() {
        if (this.countersign.assignee === '') {
          this.$message({
            showClose: true,
            type: 'error',
            message: '请选择加签人员'
          })
          return
        }
        if (this.dialogList.comment === '') {
          this.$message({
            showClose: true,
            type: 'error',
            message: '请填写审批意见'
          })
          return
        }
        this.countersign.views = this.dialogList.comment
        req.delegate(this.countersign).then((response) => {
          if (response.success) {
            this.$notify({
              title: '提示',
              message: '执行成功',
              type: 'success',
              duration: 2000
            })
            this.nodeDialogVisible = false
            // 子页面向父级页面传递值
            window.parent.postMessage({
              cmd: 'returnHeight',
              params: {
                // 操作成功，告诉父级页面关闭弹框
                code: 1
              }
            }, '*')
          }
        })
      },
      /** 同意任务 */
      handleAgree() {
        this.linkByParameter.comment = this.dialogList.comment
        req.complete(this.linkByParameter).then((response) => {
          if (response.success) {
            this.$notify({
              title: '提示',
              message: '执行成功',
              type: 'success',
              duration: 2000
            })
            this.nodeDialogVisible = false
            // 子页面向父级页面传递值
            window.parent.postMessage({
              cmd: 'returnHeight',
              params: {
                // 操作成功，告诉父级页面关闭弹框
                code: 1
              }
            }, '*')
          }
        })
      },
      /** 驳回任务 */
      handleReject() {
        this.linkByParameter.comment = this.dialogList.comment
        req.reject(this.linkByParameter).then((response) => {
          if (response.success) {
            this.$notify({
              title: '提示',
              message: '执行成功',
              type: 'success',
              duration: 2000
            })
            this.nodeDialogVisible = false
            // 子页面向父级页面传递值
            window.parent.postMessage({
              cmd: 'returnHeight',
              params: {
                // 操作成功，告诉父级页面关闭弹框
                code: 1
              }
            }, '*')
          }
        })
      },
      /** 终止任务 */
      handleStop() {
        this.linkByParameter.comment = this.dialogList.comment
        req.breakProcess(this.linkByParameter).then((response) => {
          if (response.success) {
            this.$notify({
              title: '提示',
              message: '执行成功',
              type: 'success',
              duration: 2000
            })
            this.nodeDialogVisible = false
            // 子页面向父级页面传递值
            window.parent.postMessage({
              cmd: 'returnHeight',
              params: {
                // 操作成功，告诉父级页面关闭弹框
                code: 1
              }
            }, '*')
          }
        })
      }

    }
  }
</script>

<style scoped>
  .span-sty {
    width: 130px !important;
  }

  .addinputInfo {
    margin-left: 120px !important;
  }

  .rowClass {
    border-top: 1px solid #E0E3EB;
  }
</style>
