<template>
  <div class="app-container">

    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-card>
            <div slot="header" class="card-title">新建报价单</div>
            <el-form-item label="所属人" prop="number">
                <el-radio-group v-model="form.type">
                  <el-radio label="1">发件人</el-radio>
                  <el-radio label="1">收件人</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-descriptions :column="3" :size="size" border>
                <el-descriptions-item label="发货人">
                    <el-input v-model="form.a" placeholder=""></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="发货人">
                    李东升
                </el-descriptions-item>
                <el-descriptions-item label="手机号">
                    13800138000
                </el-descriptions-item>
                <el-descriptions-item label="发货人公司">
                    13800138000
                </el-descriptions-item>
                <el-descriptions-item label="客户来源">
                    谷歌
                </el-descriptions-item>
                <el-descriptions-item label="社交软件">
                    facebook
                </el-descriptions-item>
                <el-descriptions-item label="联系地址">
                    facebook
                </el-descriptions-item>
                
            </el-descriptions>
            <el-descriptions :column="3" :size="size" border>
                <el-descriptions-item label="收货人">
                    <el-input v-model="form.a" placeholder=""></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="收货人">
                    李东升
                </el-descriptions-item>
                <el-descriptions-item label="手机号">
                    13800138000
                </el-descriptions-item>
                <el-descriptions-item label="收货人公司">
                    13800138000
                </el-descriptions-item>
                <el-descriptions-item label="客户来源">
                    谷歌
                </el-descriptions-item>
                <el-descriptions-item label="社交软件">
                    facebook
                </el-descriptions-item>
                <el-descriptions-item label="联系地址">
                    facebook
                </el-descriptions-item>
            </el-descriptions>
            <el-descriptions :column="3" :size="size" border>
                <el-descriptions-item label="始发城市">
                    <el-input v-model="form.a" placeholder=""></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="目的城市">
                    <el-input v-model="form.a" placeholder=""></el-input>
                </el-descriptions-item>
                
            </el-descriptions>
        </el-card>
        <el-card  class="mt-10">
            <div slot="header" class="card-title">
                <div class="card-name">商品信息</div>
                <el-button type="primary" size="mini" icon="el-icon-plus" @click="productList.push({})"></el-button>
            </div>
            <el-table :data="productList" border>
              <el-table-column label="序号">
                <template slot-scope="scope">
                    {{scope.$index + 1}}
                </template>
              </el-table-column>
            </el-table>
        </el-card>
        <el-form-item label="报价单号" prop="number">
          <el-input v-model="form.number" placeholder="请输入报价单号" />
        </el-form-item>
        <el-form-item label="订单ids" prop="orderIds">
          <el-input v-model="form.orderIds" placeholder="请输入订单ids" />
        </el-form-item>
        <el-form-item label="订单编号" prop="orderNo">
          <el-input v-model="form.orderNo" placeholder="请输入订单编号" />
        </el-form-item>
        <el-form-item label="客户id，发货人" prop="consignorId">
          <el-input v-model="form.consignorId" placeholder="请输入客户id，发货人" />
        </el-form-item>
        <el-form-item label="收货人id" prop="consigneeId">
          <el-input v-model="form.consigneeId" placeholder="请输入收货人id" />
        </el-form-item>
        <el-form-item label="唛头" prop="marks">
          <el-input v-model="form.marks" placeholder="请输入唛头" />
        </el-form-item>
        <el-form-item label="报关类别：我司全代：1，自单代报：2，混合报关：3" prop="customsType">
          <el-select v-model="form.customsType" placeholder="请选择报关类别：我司全代：1，自单代报：2，混合报关：3">
            <el-option label="请选择字典生成" value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="始发地" prop="departureId">
          <el-input v-model="form.departureId" placeholder="请输入始发地" />
        </el-form-item>
        <el-form-item label="始发地信息" prop="departure">
          <el-input v-model="form.departure" placeholder="请输入始发地信息" />
        </el-form-item>
        <el-form-item label="目的地" prop="objectiveId">
          <el-input v-model="form.objectiveId" placeholder="请输入目的地" />
        </el-form-item>
        <el-form-item label="目的地信息" prop="objective">
          <el-input v-model="form.objective" placeholder="请输入目的地信息" />
        </el-form-item>
        <el-form-item label="预计结束时间" prop="stopTime">
          <el-date-picker clearable v-model="form.stopTime" type="date" value-format="yyyy-MM-dd" placeholder="选择预计结束时间" />
        </el-form-item>
        <el-form-item label="控货" prop="control">
          <el-radio-group v-model="form.control">
            <el-radio label="1">请选择字典生成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="竞争对手" prop="competitor">
          <el-input v-model="form.competitor" placeholder="请输入竞争对手" />
        </el-form-item>
        <el-form-item label="重要程度" prop="importance">
          <el-input v-model="form.importance" placeholder="请输入重要程度" />
        </el-form-item>
        <el-form-item label="价格有效期开始" prop="startTime">
          <el-date-picker clearable v-model="form.startTime" type="date" value-format="yyyy-MM-dd" placeholder="选择价格有效期开始" />
        </el-form-item>
        <el-form-item label="价格有效期结束" prop="endTime">
          <el-date-picker clearable v-model="form.endTime" type="date" value-format="yyyy-MM-dd" placeholder="选择价格有效期结束" />
        </el-form-item>
        <el-form-item label="交货方式：FOB(离岸价)，CIF(到岸价)，CNF(成本加运费)，EXW(出厂价)" prop="tradeType">
          <el-select v-model="form.tradeType" placeholder="请选择交货方式：FOB(离岸价)，CIF(到岸价)，CNF(成本加运费)，EXW(出厂价)">
            <el-option label="请选择字典生成" value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="交货港口、地点" prop="tradeAdress">
          <el-input v-model="form.tradeAdress" placeholder="请输入交货港口、地点" />
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="form.remarks" placeholder="请输入备注" />
        </el-form-item>
        <el-form-item label="状态：取消报价：0，特价审批中：1，需求确认：2跟进中：3，赢单：4，输单：5，报价完成：6" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio label="1">请选择字典生成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="取消报价前状态" prop="oldStatus">
          <el-radio-group v-model="form.oldStatus">
            <el-radio label="1">请选择字典生成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="报价关联客户，发货人：1，收货人：2" prop="relation">
          <el-input v-model="form.relation" placeholder="请输入报价关联客户，发货人：1，收货人：2" />
        </el-form-item>
        <el-form-item label="报价关联客户id" prop="relationId">
          <el-input v-model="form.relationId" placeholder="请输入报价关联客户id" />
        </el-form-item>
        <el-form-item label="佣金类型：0 无 1 明佣 2 暗佣 3 明+暗 " prop="commissionType">
          <el-select v-model="form.commissionType" placeholder="请选择佣金类型：0 无 1 明佣 2 暗佣 3 明+暗 ">
            <el-option label="请选择字典生成" value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="入仓类型类型" prop="warehousingType">
          <el-select v-model="form.warehousingType" placeholder="请选择入仓类型类型">
            <el-option label="请选择字典生成" value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="原因" prop="reason">
          <el-input v-model="form.reason" placeholder="请输入原因" />
        </el-form-item>
        <el-form-item label="预计费用清单" prop="estCost">
          <el-input v-model="form.estCost" placeholder="请输入预计费用清单" />
        </el-form-item>
        <el-form-item label="站内信状态，0未发送，1已发送" prop="sendstatus">
          <el-radio-group v-model="form.sendstatus">
            <el-radio label="1">请选择字典生成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
        </el-form-item>
      </el-form>
  </div>
</template>

<script>
import { createOffer, updateOffer, deleteOffer, getOffer, getOfferPage, exportOfferExcel } from "@/api/ecw/offer";

export default {
  name: "OfferEdit",
  components: {
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 是否显示弹出层
      /* dateRangeStopTime: [],
      dateRangeStartTime: [],
      dateRangeEndTime: [],
      dateRangeCreateTime: [], */
      productList:[], // 商品信息
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        number: [{ required: true, message: "报价单号不能为空", trigger: "blur" }],
        consignorId: [{ required: true, message: "客户id，发货人不能为空", trigger: "blur" }],
        consigneeId: [{ required: true, message: "收货人id不能为空", trigger: "blur" }],
        sendstatus: [{ required: true, message: "站内信状态，0未发送，1已发送不能为空", trigger: "blur" }],
      }
    };
  },
  created() {
    
  },
  methods: {
    
    /** 表单重置 */
    reset() {
      this.form = {
        offerId: undefined,
        number: undefined,
        orderIds: undefined,
        orderNo: undefined,
        consignorId: undefined,
        consigneeId: undefined,
        marks: undefined,
        customsType: undefined,
        departureId: undefined,
        departure: undefined,
        objectiveId: undefined,
        objective: undefined,
        stopTime: undefined,
        control: undefined,
        competitor: undefined,
        importance: undefined,
        startTime: undefined,
        endTime: undefined,
        tradeType: undefined,
        tradeAdress: undefined,
        remarks: undefined,
        status: undefined,
        oldStatus: undefined,
        relation: undefined,
        relationId: undefined,
        commissionType: undefined,
        warehousingType: undefined,
        reason: undefined,
        estCost: undefined,
        sendstatus: undefined,
      };
      this.resetForm("form");
    },
    
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (!valid) {
          return;
        }
        // 修改的提交
        if (this.form.offerId != null) {
          updateOffer(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.open = false;
            this.getList();
          });
          return;
        }
        // 添加的提交
        createOffer(this.form).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.open = false;
          this.getList();
        });
      });
    },
    
  }
};
</script>
<style lang="scss" scoped>
.card-title{
    font-size: 18px;
    display: flex;
    .card-name{
        flex: 1;
    }
}
.mt-10{
    margin-top: 10px;
}
</style>