<template>
  <div class="app-container">
    <div v-show="viewState== 1">
      <!--标题按钮部分开始-->
      <div class="tab-header webtop">
        <!--标题-->
        <div>{{ viewTitle }}</div>
        <!--start 添加修改按钮-->
        <div>
          <el-button type="primary" size="small" :disabled="submitdisabled" @click="save()">保存
          </el-button>
          <el-button type="primary" size="small" @click="submitVehicleApply()">提交
          </el-button>
          <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
        </div>
      </div>
      <!--标题按钮部分结束-->
      <!--Start 新增修改部分-->
      <div class="listconadd">
        <div class="wlInfo"><span>车辆未售买断申请</span></div>
        <el-form ref="form_obj" :model="formobj" :rules="rules" label-position="top">
          <el-row>
            <el-col :span="4">
              <span>申请日期:</span>
            </el-col>
            <el-col :span="8">
              <span style="margin-left: 5px">{{ formobj.createTime }}</span>
            </el-col>
            <el-col :span="4">
              <span>申请人:</span>
            </el-col>
            <el-col :span="8">
              <span style="margin-left: 5px">{{ formobj.applicationName }}</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="el-form-item-right">
              <span>买断原因:</span>
            </el-col>
            <el-col :span="20">
              <el-form-item>
                <el-input v-model="formobj.reason" type="textarea" :autosize="{ minRows: 1, maxRows: 10}" resize="none" clearable style="width: 30%"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="tableStyle">
          <div style="margin-left: 5px;font-weight: bold">车辆列表</div>
          <div style="margin-left: 15px">
            <el-button type="primary" size="mini" icon="el-icon-plus" @click="addCommodity()">选择车辆</el-button>
          </div>
        </div>
        <el-table :key="tableKey" :data="formobj.detailsList" :index="index" border style="width: 100%">
          <el-table-column fixed width="80px" label="序号" type="index" :index="index + 1" align="center"/>
          <el-table-column fixed prop="name" label="操作" width="100px" align="center" header-align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="dataDelete(scope.$index, formobj.detailsList[scope.$index])">删除
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="车架号" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.vinNo }}</span>
            </template>
          </el-table-column>
          <el-table-column label="车型" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.modelName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="入库日期" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.inboundDate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="入库价" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.inboundPrice }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--End 添加修改部分-->
    <!--选择车型和常用配置-->
    <vehicle v-show="viewState == 2" ref="divVehicle" @backData="backData" @doback="closePage"/>
  </div>
</template>

<script>
import req from '@/api/weishoumaiduan/unsold'
import vehicle from './vehicle.vue'

export default {
  name: 'weishoumaiduanAdd',
  components: {
    vehicle
  },
  data() {
    return {
      viewTitle: '',
      viewState: 1,
      index: 0,
      tableKey: 0,
      // 表单数据
      formobj: {
        sid: '', // 一条数据的sid
        applicationName: '',
        createTime: '',
        reason: '',
        userSid: '',
        instanceId: '', // 流程实例ID
        taskId: '', // 任务ID
        detailsList: []
      },
      rules: {},
      submitdisabled: false
    }
  },
  methods: {
    // 获取制单日期
    newDate() {
      let date = new Date()
      let year = date.getFullYear() // 年
      let month = date.getMonth() + 1 // 月
      let day = date.getDate() // 日
      if (month < 10) {
        month = '0' + month
      }
      if (day < 10) {
        day = '0' + day
      }
      this.formobj.createTime = year + '-' + month + '-' + day
    },
    // 明细表添加一行数据
    addCommodity() {
      this.viewState = 2
      this.$refs['divVehicle'].showData(this.formobj.detailsList)
    },
    // 明细表删除一行数据
    dataDelete(index, row) {
      this.formobj.detailsList.splice(index, 1)
    },
    showAdd() {
      this.newDate()
      this.$nextTick(() => {
        this.$refs['form_obj'].clearValidate()
      })
      this.formobj.applicationName = window.sessionStorage.getItem('name')
      this.formobj.userSid = window.sessionStorage.getItem('userSid')
      this.viewTitle = '【新增】车辆未售买断申请'
    },
    showEdit(row) {
      this.$nextTick(() => {
        this.$refs['form_obj'].clearValidate()
      })
      this.viewTitle = '【编辑】车辆未售买断申请'
      console.log('编辑回显', row.sid)
      req.fetchBySid(row.sid).then((resp) => {
        this.formobj = resp.data
        this.formobj.instanceId = resp.data.procInstId
      }).catch((e) => {
        this.formobj = row
      })
    },
    // 车型常用配置列表--新增确定返回的数据
    backData(value) {
      this.viewState = 1
      if (value.length > 0) {
        value.forEach((e) => {
          this.formobj.detailsList.push({
            inboundDate: e.priceDate,
            inboundPrice: e.priced,
            modelName: e.vehicleAlias,
            vinNo: e.vinNo
          })
        })
      }
    },
    save() {
      this.$refs['form_obj'].validate((valid) => {
        if (valid) {
          this.submitdisabled = true
          req.saveOrUpdate(this.formobj).then((resp) => {
            this.submitdisabled = false
            if (resp.success) {
              this.$message({
                showClose: true,
                type: 'success',
                message: resp.msg
              })
              this.handleReturn('true')
            }
          }).catch(() => {
            this.submitdisabled = false
          })
        } else {
          return false
        }
      })
    },
    submitVehicleApply() {
      req.submitVehicleApply(this.formobj).then((res) => {
        if (res.success) {
          this.$message({
            showClose: true,
            type: 'success',
            message: '提交成功'
          })
          this.handleReturn('true')
        } else {
          this.$message({
            showClose: true,
            type: 'error',
            message: '提交失败'
          })
        }
      })
    },
    // 返回（===既判断）
    handleReturn(isreload) {
      if (isreload === 'true') this.$emit('reloadlist')
      // 表单数据
      this.formobj = {
        sid: '', // 一条数据的sid
        applicationName: '',
        createTime: '',
        reason: '',
        instanceId: '', // 流程实例ID
        taskId: '', // 任务ID
        userSid: '',
        detailsList: []
      }
      this.$refs['form_obj'].resetFields()
      this.$refs['divVehicle'].getList()
      this.$emit('doback')
    },
    closePage() {
      this.viewState = 1
    }
  }
}
</script>

<style scoped>
.wlInfo {
  text-align: center;
  font-size: 28px;
  line-height: 90px;
}
.tableStyle {
  background-color: #FFFFFF;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border: 1px solid #dfe4ed;
  height: 40px;
}
/deep/ .el-col-4 {
  text-align: right;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px !important;
  font-weight: 600;
}
/deep/ .el-col-8 {
  text-align: left;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px !important;
  font-weight: 600;
}

.icon {
  color: #e84026;
  margin-right: 4px;
}
</style>

