<template>
  <div class="app-container">
    <div v-show="viewState == 1">
      <!--标题按钮部分开始-->
      <div class="tab-header webtop">
        <!--标题-->
        <div>{{ viewTitle }}</div>
        <!--start 添加修改按钮-->
        <div>
          <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
        </div>
      </div>
      <!--标题按钮部分结束-->
      <!--Start 新增修改部分-->
      <div class="listconadd">
        <div class="titwu"><span>厂家采购</span></div>
        <el-form ref="form_obj" :model="formobj" :rules="rules" class="formaddcopy02">
          <el-row class="rowStyle">
            <el-col :span="6" class="colOneStyle">
              <div class="span-sty spanOneWidth"><span>分公司:</span></div>
              <el-form-item><span class="addinputInfo addinputOne">{{ formobj.createOrgName }}</span></el-form-item>
            </el-col>
            <el-col :span="6" class="colOneStyle">
              <div class="span-sty spanOneWidth"><span>采购系统:</span></div>
              <el-form-item><span class="addinputInfo addinputOne">{{ formobj.orgDeptName }}</span></el-form-item>
            </el-col>
            <el-col :span="6" class="colOneStyle">
              <div class="span-sty spanOneWidth"><span>申请人:</span></div>
              <el-form-item><span class="addinputInfo addinputOne">{{ formobj.createByName }}</span></el-form-item>
            </el-col>
            <el-col :span="6" class="colOneStyle">
              <div class="span-sty spanOneWidth"><span>申请日期:</span></div>
              <el-form-item><span class="addinputInfo addinputOne">{{ formobj.applicationDate }}</span></el-form-item>
            </el-col>
          </el-row>
          <el-row class="rowStyle">
            <el-col :span="8" class="colStyle">
              <div class="span-sty spanOneWidth"><span>采购类型:</span></div>
              <el-form-item><span class="addinputInfo addinputOne">{{ formobj.applyType }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="colStyle">
              <div class="span-sty spanOneWidth"><span>采购原因:</span></div>
              <el-form-item><span class="addinputInfo addinputOne">{{ formobj.schedulingType }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="colStyle">
              <div class="span-sty spanOneWidth"><span>订金付款备注:</span></div>
              <el-form-item><span class="addinputInfo addinputOne">{{ formobj.payRemarks }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="rowStyle">
            <el-col :span="16" class="colStyle">
              <div class="span-sty spanOneWidth"><span>备注:</span></div>
              <el-form-item><span class="addinputInfo addinputOne">{{ formobj.remarks }}</span></el-form-item>
            </el-col>
            <el-col :span="8" class="colStyle">
              <div class="span-sty spanOneWidth" v-show="formobj.schedulingType === '储备'"><span>销售经理:</span></div>
              <el-form-item v-show="formobj.schedulingType === '储备'"><span class="addinputInfo addinputOne">{{ formobj.userNames }}</span></el-form-item>
            </el-col>
          </el-row>
          <div class="title">
            <div>排产车型列表</div>
          </div>
          <el-table :key="tableKey" :data="formobj.busVehicleApplyDetailList" :index="index" border style="width: 100%" show-summary :summary-method="getSummaries">
            <el-table-column fixed width="110px" label="序号" type="index" :index="index + 1" align="center"/>
            <el-table-column label="车型" align="center" width="250">
              <template slot-scope="scope">
                <span>{{ scope.row.vehicleName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="常用配置" align="left" header-align="center" width="400">
              <template slot-scope="scope">
                <span>{{ scope.row.configName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="内部编码" align="center" width="200">
              <template slot-scope="scope">
                <span>{{ scope.row.insideCode }}</span>
              </template>
            </el-table-column>
            <el-table-column label="排产数量" align="center" width="130">
              <template slot-scope="scope">
                <span>{{ scope.row.quantity }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="applyForDeposit" label="申请订金" align="center" width="150">
              <template slot-scope="scope" prop="applyForDeposit">
                <span>{{ scope.row.applyForDeposit }}</span>
              </template>
            </el-table-column>
            <el-table-column label="厂家合同价" align="center" width="150">
              <template slot-scope="scope">
                <span>{{ scope.row.contractPrice }}</span>
              </template>
            </el-table-column>
            <el-table-column label="销售指导价" align="center" width="150">
              <template slot-scope="scope">
                <span>{{ scope.row.saleGuPrice }}</span>
              </template>
            </el-table-column>
            <el-table-column label="厂家回款通路" align="center" width="200">
              <template slot-scope="scope">
                <span>{{ scope.row.actualPay }}</span>
              </template>
            </el-table-column>
            <el-table-column label="备注" header-align="center" width="200">
              <template slot-scope="scope">
                <span>{{ scope.row.remarks }}</span>
              </template>
            </el-table-column>
            <el-table-column label="上装信息" header-align="center" width="100" align="center">
              <template slot-scope="scope">
                <el-button v-show="scope.row.busVehicleApplySz !== null" type="primary" size="small" @click="handleLook(scope.row.busVehicleApplySz)">查看</el-button>
              </template>
            </el-table-column>
            <el-table-column label="上装销售指导价" align="center" width="200">
              <template slot-scope="scope">
                <span>{{ scope.row.guidePrice }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </div>
    </div>
    <!--End 添加修改部分-->
    <shangzhuangpeizhiInfo v-show="viewState == 2" ref="divInfo" @doback="closePage"/>
  </div>
</template>

<script>
import req from '@/api/supplychain/busvehicleapply'
import shangzhuangpeizhiInfo from '../../../views/supplychain/cheliangpaichan/shangzhuangselect/shangzhuangpeizhiInfo'

export default {
  name: 'cheliangpaichanInfo',
  components: {
    shangzhuangpeizhiInfo
  },
  data() {
    return {
      viewState: 1,
      viewTitle: '',
      index: 0,
      tableKey: 0,
      // 下拉框
      isRead: false,
      // 表单数据
      formobj: {
        sid: '', // 一条数据的sid
        createByDeptSid: '',
        createBySid: '', // 用户人sid
        createByName: '', // 制单人
        applicationCode: '', // 申请编号
        applicationDate: '', // 申请日期
        schedulingType: '', // 排产类型
        schedulingTypeKey: '',
        remarks: '', // 备注
        currentAmount: '', // 当前订金金额
        salesSid: '', // 销售订单sid 可为空，只有客户订单时才有
        instanceId: '', // 流程实例ID
        taskId: '', // 任务ID
        createOrgSid: '',
        createOrgName: '',
        busVehicleApplyDetailList: []
      },
      rules: {},
      submitdisabled: false
    }
  },
  methods: {
    showInfo(sid, row) {
      this.$nextTick(() => {
        this.$refs['form_obj'].clearValidate()
      })
      this.viewTitle = '厂家采购详情'
      console.log('编辑回显', sid)
      req.fetchBySid(sid).then((resp) => {
        const data = resp.data
        this.formobj = data
      }).catch((e) => {
        this.formobj = row
      })
    },
    // 返回（===既判断）
    handleReturn(isreload) {
      if (isreload === 'true') this.$emit('reloadlist')
      this.formobj.schedulingType = '' // 排产类型
      this.formobj.schedulingTypeKey = ''
      this.formobj.remarks = '' // 备注
      this.formobj.currentAmount = ''
      this.formobj.applicationCode = ''
      this.formobj.applicationDate = ''
      this.formobj.createBySid = ''
      this.formobj.createByName = ''
      this.formobj.taskId = ''
      this.formobj.instanceId = ''
      this.formobj.createOrgSid = ''
      this.formobj.createOrgName = ''
      this.formobj.busVehicleApplyDetailList = []
      this.$refs['form_obj'].resetFields()
      this.$emit('doback')
    },
    handleLook(row) {
      this.viewState = 2
      this.$refs['divInfo'].showInfo(row)
    },
    // 合计
    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 === 'applyForDeposit') {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] += ''
          this.formobj.currentAmount = sums[index] += ''
        } else {
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] += ''
            this.amount = sums[index] += ''
          } else {
            sums[index] = ''
          }
        }
      })
      return sums
    },
    closePage() {
      this.viewState = 1
    }
  }
}
</script>

<style scoped>
.spanOneWidth {
  border-right: 0px !important;
  width: 150px !important;
}
.addinputOne {
  margin-left: 150px !important;
}
.rowStyle {
  border-left: 0px;
}
.colStyle {
  border-right: 0px !important;
  border-bottom: 0px !important;
}
.colOneStyle {
  border-right: 0px !important;
}
</style>

