<template>
  <div class="app-container">
    <div v-show="viewState == 1">
      <div class="tab-header webtop">
        <!--标题-->
        <div>{{ viewTitle }}</div>
        <!--start 添加修改按钮-->
        <div>
          <el-button type="danger" size="small" @click="openRevoke()">撤回</el-button>
        </div>
      </div>
      <div class="">
        <el-form ref="form_obj" :model="formobj" class="formaddcopy02">
          <el-row class="rowStyle">
            <el-col :span="24" class="colStyle">
              <div><span style="font-size: 16px">金额单位：元</span></div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="span-sty">销售合同编号</div>
              <el-form-item><span class="addinputInfo" style="color: #0294D7;cursor: pointer" @click="lookSales(formobj.saleOrderSid)">{{ formobj.contractNo }}</span></el-form-item>
            </el-col>
            <el-col :span="16">
              <div class="span-sty">车型</div>
              <el-form-item><span class="addinputInfo">{{ formobj.modelName }}</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.vinNo }}</span></el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="span-sty"><span>{{ formobj.isGdk === '0' ? '单台加装配置金额' : '单台销售让利金额' }}</span></div>
              <el-form-item><span class="addinputInfo">{{ formobj.money }}</span></el-form-item>
            </el-col>
            <el-col :span="12">
              <div class="span-sty"><span>{{ formobj.isGdk === '0' ? '合计加装配置金额' : '合计销售让利金额' }}</span></div>
              <el-form-item><span class="addinputInfo">{{ formobj.totalMoney }}</span></el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="formobj.isGdk === '0'">
            <el-col :span="8">
              <div class="span-sty">单台应收手续费</div>
              <el-form-item><span class="addinputInfo">{{ formobj.ysMoney }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty">单台实收手续费</div>
              <el-form-item><span class="addinputInfo">{{ formobj.ssMoney }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty">单台手续费差额</div>
              <el-form-item><span class="addinputInfo">{{ commissionmargin() }}</span></el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="formobj.isGdk === '0'">
            <el-col :span="8">
              <div class="span-sty">应收手续费合计</div>
              <el-form-item><span class="addinputInfo">{{ ysTotal() }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty">实收手续费合计</div>
              <el-form-item><span class="addinputInfo">{{ ssTotal() }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty">手续费差额合计</div>
              <el-form-item>
                <span class="addinputInfo">{{ sxTotal() }}</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>
          <el-row>
            <el-col :span="24">
              <div class="span-sty">附件</div>
              <el-form-item>
                <el-image style="width: 150px; height: 150px" class="addinputInfo" v-for="(item, index) in formobj.fjImages" :key="index" :src="item" :preview-src-list="formobj.fjImages"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <dingdanInfo ref="divInfo" v-show="viewState == 2" @doback="resetState"/>
  </div>
</template>

<script>
import { fetchDetailsBySid, revokeProcess } from '@/api/valuablecustomer/valuablecustomer'
import dingdanInfo from '../publicPage/dingdanInfo'

export default {
  name: 'ValuableCustomerYiBan',
  components: {
    dingdanInfo
  },
  data() {
    return {
      viewTitle: '',
      viewState: 1,
      image_list1: [],
      formobj: {
        applyDeptName: '',
        applyDeptSid: '',
        billNo: '',
        busSid: '',
        busSource: '',
        contractNo: '',
        createByName: '',
        createBySid: '',
        fjImages: [],
        isGdk: '',
        modelName: '',
        modelSid: '',
        money: '',
        num: '',
        totalMoney: '',
        orgSidPath: '',
        remarks: '',
        saleOrderSid: '',
        sid: '',
        ssMoney: '',
        useOrgName: '',
        useOrgSid: '',
        vinNo: '',
        vinSid: '',
        ysMoney: ''
      },
      // 环节所需参数
      linkByParameter: {
        businessSid: '',
        comment: '',
        instanceId: '',
        taskId: '',
        orgSidPath: '',
        taskDefKey: '',
        userSid: ''
      }
    }
  },
  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.userSid = window.sessionStorage.getItem('userSid')
    // 加载表单数据
    this.showInfo(obj.businessSid)
  },
  mounted() {
    window.parent.postMessage({
      cmd: 'returnHeight',
      params: {
        // 告诉父级页面，子页面的弹框高度。
        code: 2,
        data: 500 + 'px'
      }
    }, '*')
  },
  methods: {
    showInfo(sid) {
      this.viewTitle = '价值客户备案申请详情'
      fetchDetailsBySid(sid).then((res) => {
        if (res.success) {
          this.formobj = res.data
        }
      })
    },
    // 单台手续费差额
    commissionmargin() {
      var aa = ''
      if (this.formobj.ssMoney !== '' && this.formobj.ssMoney !== null && this.formobj.ssMoney !== undefined && this.formobj.ssMoney !== '0') {
        aa = parseFloat(this.formobj.ysMoney) - parseFloat(this.formobj.ssMoney)
      }
      return aa
    },
    // 应收手续费合计
    ysTotal() {
      var ys = ''
      if (this.formobj.isGdk === '0' && this.formobj.ysMoney !== '') {
        ys = parseFloat(this.formobj.ysMoney) * parseFloat(this.formobj.num)
      }
      return ys
    },
    // 实收手续费合计
    ssTotal() {
      var ss = ''
      if (this.formobj.isGdk === '0' && this.formobj.ssMoney !== '' && this.formobj.ssMoney !== null && this.formobj.ssMoney !== undefined && this.formobj.ssMoney !== '0') {
        ss = parseFloat(this.formobj.ssMoney) * parseFloat(this.formobj.num)
      }
      return ss
    },
    // 实收手续费合计
    sxTotal() {
      var sx = ''
      if (this.formobj.isGdk === '0' && this.formobj.ssMoney !== '' && this.formobj.ssMoney !== null && this.formobj.ssMoney !== undefined && this.formobj.ssMoney !== '0') {
        sx = (parseFloat(this.formobj.ysMoney) - parseFloat(this.formobj.ssMoney)) * parseFloat(this.formobj.num)
      }
      return sx
    },
    lookSales(sid) {
      this.viewState = 2
      this.$refs['divInfo'].showInfo({ sid: sid })
    },
    resetState() {
      this.viewState = 1
    },
    /** 确认撤回任务 */
    openRevoke() {
      this.$confirm('是否确认执行撤回操作', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleRevoke()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消撤回'
        })
      })
    },
    /** 撤回任务 */
    handleRevoke() {
      revokeProcess(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>
.rowStyle {
  border-left: 0px;
}
.colStyle {
  border-right: 0px !important;
  text-align: right;
}
.span-sty {
  width: 140px !important;
}
.addinputInfo {
  margin-left: 130px !important;
}
</style>
