<template>
  <div class="app-container">
    <div class="tab-header webtop">
      <div>费用详情</div>
      <div>
        <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
      </div>
    </div>
    <div class="listconadd">
      <el-form ref="dataForm" :model="formobj" class="formaddcopy02">
        <div class="wlInfo"><span>费用申请</span></div>
        <el-row>
          <el-col :span="12">
            <div class="span-sty spanOneWidth"><span>申请日期</span></div>
            <el-form-item><span class="addinputInfo addinputwOne">{{ formobj.createTime }}</span></el-form-item>
          </el-col>
          <el-col :span="12">
            <div class="span-sty spanOneWidth"><span>申请人</span></div>
            <el-form-item><span class="addinputInfo addinputwOne">{{ formobj.name }}</span></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="span-sty spanOneWidth"><span>费用类型</span></div>
            <el-form-item><span class="addinputInfo addinputwOne">{{ formobj.costTypeValue }}</span></el-form-item>
          </el-col>
          <el-col :span="12">
            <div class="span-sty spanOneWidth"><span>费用名称</span></div>
            <el-form-item><span class="addinputInfo addinputwOne">{{ formobj.costTitleValue }}</span></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="span-sty spanOneWidth"><span>申请费用(元)</span></div>
            <el-form-item><span class="addinputInfo addinputwOne">{{ formobj.cost }}</span></el-form-item>
          </el-col>
          <el-col :span="12">
            <div class="span-sty spanOneWidth"><span>使用方式</span></div>
            <el-form-item><span class="addinputInfo addinputwOne">{{ formobj.useTypeValue }}</span></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="span-sty spanOneWidth"><span>备注</span></div>
            <el-form-item><span class="addinputInfo addinputwOne">{{ formobj.remarks }}</span></el-form-item>
          </el-col>
        </el-row>
        <div v-show="formobj.isVeh == 1">
          <div class="headline">涉及车辆</div>
          <el-row>
            <el-col :span="24">
              <div class="span-sty spanOneWidth"><span>是否出门</span></div>
              <el-form-item><span class="addinputInfo addinputwOne">{{ formobj.isOutDoor }}</span></el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="span-sty spanOneWidth"><span>车架号</span></div>
              <el-form-item><span class="addinputInfo addinputwOne">{{ formobj.vinNo }}</span></el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import req from '@/api/anruifinmanagement/expense'

export default {
  name: 'feiyongshenqingInfo',
  data() {
    return {
      formobj: {},
      ceshi: '1'
    }
  },
  methods: {
    handleReturn() {
      this.formobj = {}
      this.$emit('doback')
    },
    showInfo(row) {
      req.fetchBySid(row.sid).then((resp) => {
        this.formobj = resp.data
        if (this.formobj.vinNoList.length > 0) {
          this.formobj.vinNo = this.formobj.vinNoList.join(',')
        }
      }).catch((e) => {
        this.formobj = row
      })
      console.log('这里是详情回显', row)
    }
  }
}
</script>

<style scoped>
.wlInfo {
  padding-bottom: 40px;
  font-size: 24px;
  border-bottom: 1px solid #edf1f7;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}
.spanOneWidth {
  width: 110px !important;
}
.addinputwOne {
  margin-left: 120px !important;
}
.headline{
  height: 40px;
  padding: 10px;
  font-weight: bold;
  font-size: 20px;
  background-color: #0294d7;
  text-align: left;
  color: #ffffff;
}
</style>
