<template>
  <div class="app-container">
    <div v-show="viewState == 1">
      <div class="tab-header webtop">
        <div>{{ viewTitle }}</div>
        <div>
          <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
        </div>
      </div>
      <div class="listconadd">
        <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"><span>发起部门</span></div>
              <el-form-item><span class="addinputInfo">{{ formobj.initiateDeptName }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty"><span>发起人</span></div>
              <el-form-item><span class="addinputInfo">{{ formobj.initiatePeoName }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty"><span>发起日期</span></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"><span>合同编号</span></div>
              <el-form-item><span class="addinputInfo">{{ formobj.contractNo }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty"><span>客户名称</span></div>
              <el-form-item><span class="addinputInfo">{{ formobj.customerName }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty"><span>销售类型</span></div>
              <el-form-item><span class="addinputInfo">{{ formobj.saleTypeValue }}</span></el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="span-sty"><span>主车车架号</span></div>
              <el-form-item><span class="addinputInfo">{{ formobj.zcVinNo }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty"><span>挂车车架号</span></div>
              <el-form-item><span class="addinputInfo">{{ formobj.gcVinNo }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty"><span>业务状态</span></div>
              <el-form-item><span class="addinputInfo">{{ formobj.businessState }}</span></el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="span-sty"><span>开票单位</span></div>
              <el-form-item><span class="addinputInfo">{{ formobj.invoiceTitle }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty"><span>开票类型</span></div>
              <el-form-item><span class="addinputInfo">{{ formobj.billTypeValue }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <div class="span-sty"><span>销售合同价</span></div>
              <el-form-item><span class="addinputInfo">{{ formobj.oneBillMoney }}</span></el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <div class="span-sty"><span>开票名称</span></div>
              <el-form-item><span class="addinputInfo">{{ formobj.openTickName }}</span></el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-button type="primary" size="mini" @click="handleHGZ">合格证</el-button>
                <el-button type="primary" size="mini" @click="handleXSDD">销售订单</el-button>
                <el-button type="primary" size="mini" @click="handleKPQK">款票情况</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="span-sty"><span>开票信息</span></div>
              <el-form-item><span class="addinputInfo">{{ formobj.openTickRemarks }}</span></el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="span-sty"><span>备注</span></div>
              <el-form-item><span class="addinputInfo">{{ formobj.remarks }}</span></el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <!-- 查看合格证图片 -->
    <el-dialog :visible.sync="dialogVisible">
      <el-image v-for="(item, index) in formobj.hgzFiles" :key="index" :src="item" :preview-src-list="formobj.hgzFiles"/>
    </el-dialog>
    <!-- 查看销售订单 -->
    <xiaoshoudingdanInfo v-show="viewState == 2" ref="divXiao" @doback="resetState"/>
    <!-- 查看款票情况 -->
    <paymentticket v-show="viewState == 3" ref="divPay" @doback="resetState"/>
  </div>
</template>

<script>
import req from '@/api/guache/guachechuku'
import xiaoshoudingdanInfo from '../../examinePage/chukushenhe/relation/xiaoshoudingdanInfo'
import paymentticket from '../../examinePage/chukushenhe/relation/paymentticket'

export default {
  name: 'GuaCheChuKuAdd',
  components: {
    xiaoshoudingdanInfo,
    paymentticket
  },
  data() {
    return {
      viewTitle: '',
      viewState: 1,
      dialogVisible: false,
      submitdisabled: false,
      formobj: {
        sid: '',
        initiateDeptSid: '',
        initiateDeptName: '',
        createBySid: '',
        createTime: '',
        initiatePeoName: '',
        contractNo: '',
        customerSid: '',
        customerName: '',
        saleTypeKey: '',
        saleTypeValue: '',
        zcSid: '',
        zcVinNo: '',
        gcSid: '',
        gcVinNo: '',
        hgzFiles: [],
        businessState: '',
        invoiceTitle: '',
        billTypeKey: '',
        billTypeValue: '',
        oneBillMoney: '',
        openTickRemarks: '',
        billNo: '',
        orderSid: '',
        orgSidPath: '',
        useOrgSid: '',
        useOrgName: '',
        nodeState: '',
        nodeSid: '',
        procDefId: '',
        procInstSid: '',
        taskId: '',
        openTickName: '',
        openTickSid: ''
      }
    }
  },
  methods: {
    showInfo(row) {
      this.viewTitle = '挂车出库申请详情'
      req.fetchBySid(row.sid).then((res) => {
        if (res.success) {
          this.formobj = res.data
        }
      })
    },
    handleHGZ() {
      if (this.formobj.hgzFiles.length > 0) {
        this.dialogVisible = true
      }
    },
    handleXSDD() {
      const parmas = {
        sid: this.formobj.orderSid
      }
      this.viewState = 2
      this.$refs['divXiao'].showInfo(parmas)
    },
    handleKPQK() {
      const kpqk = {
        vinSid: this.formobj.zcSid
      }
      this.viewState = 3
      this.$refs['divPay'].showInfo(this.formobj.contractNo, kpqk)
    },
    resetState() {
      this.viewState = 1
    },
    handleReturn() {
      this.formobj = {
        sid: '',
        initiateDeptSid: '',
        initiateDeptName: '',
        createBySid: '',
        createTime: '',
        initiatePeoName: '',
        contractNo: '',
        customerSid: '',
        customerName: '',
        saleTypeKey: '',
        saleTypeValue: '',
        zcSid: '',
        zcVinNo: '',
        gcSid: '',
        gcVinNo: '',
        hgzFiles: [],
        businessState: '',
        invoiceTitle: '',
        billTypeKey: '',
        billTypeValue: '',
        oneBillMoney: '',
        openTickRemarks: '',
        billNo: '',
        orderSid: '',
        orgSidPath: '',
        useOrgSid: '',
        useOrgName: '',
        nodeState: '',
        nodeSid: '',
        procDefId: '',
        procInstSid: '',
        taskId: '',
        openTickName: '',
        openTickSid: ''
      }
      this.$emit('doback')
    }
  }
}
</script>

<style scoped>
.span-sty {
  width: 120px !important;
}
.addinputInfo {
  margin-left: 110px !important;
}
</style>
