<template>
  <div class="app-container">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" style="margin-bottom:40px">
        <div class="bj-divider">
          <div class="left"> 
                <span class="default-text">三方订单基本信息</span>
                <div class="button"></div>
                <span class="tips"></span>
            </div>
        </div>
        <el-row>
          <el-col :span="9">
              <el-form-item  label-width="100px" label="三方订单号" prop="outerOrderNo"  style="margin-right:20px">
                 <el-input v-model="form.outerOrderNo" placeholder="请输入三方订单号" />
              </el-form-item>
          </el-col>
          <el-col :span="9">
              <el-form-item label-width="140px" label="三方订单下单时间" prop="orderTime" >
                <el-date-picker clearable size="small" style="width:100%"
                  v-model="form.orderTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择">
                </el-date-picker>
              </el-form-item>
          </el-col>
           <el-col :span="9">
                <el-form-item label-width="100px" label="销售渠道" prop="channelType"  style="margin-right:20px">
                    <el-select  style="width:100%"  @change="channelChange" v-model="form.channelType" :placeholder="storePlaceholder" clearable size="small">
                      <el-option
                            v-for="item in channelTypeOptions"
                            :key="'channelType'+item.dictValue"  
                            :label="item.dictLabel"
                            :value="item.dictValue"/>
                    </el-select>
                </el-form-item>
           </el-col>
           <el-col :span="9">
                 <el-form-item label-width="140px" label="选择销售店铺" prop="storeId">
                    <el-select style="width:100%" :disabled="storeAvailable" ref="storeId" v-model="form.storeId" placeholder="请选择销售店铺" clearable size="small">
                      <el-option
                            v-for="item in stores"
                            :key="'omsStore'+item.storeId"  
                            :label="item.storeName"
                            :value="item.storeId"/>
                    </el-select>
                </el-form-item>    
           </el-col>
           <el-col :span="18">
                <el-form-item label-width="100px" label="商家备注" prop="channelType">
                    <el-input type="textarea" v-model="form.orderRemark" show-word-limit maxlength="200"></el-input>
               </el-form-item>   
           </el-col>
        </el-row>

        <div class="bj-divider"><div class="left"><span class="default-text">买家以及收货信息</span><div class="button"></div><span class="tips"></span></div></div>
        <el-row>
          <el-col :span="9">
              <el-form-item  label-width="100px" label="买家昵称" prop="buyerNick" style="margin-right:20px">
                 <el-input v-model="form.outerOrderNo" placeholder="请输入买家昵称" />
              </el-form-item>
          </el-col>
         </el-row>
        <el-row>
          <el-col :span="9">
              <el-form-item  label-width="100px" label="收货人" prop="logisticsUserName"  style="margin-right:20px">
                 <el-input v-model="form.logisticsUserName" placeholder="请输入" />
              </el-form-item>
          </el-col>

          <el-col :span="9">
              <el-form-item  label-width="100px" label="收货人手机" prop="logisticsUserPhone">
                 <el-input v-model="form.logisticsUserPhone" placeholder="请输入" />
              </el-form-item>
          </el-col>

          <el-col :span="9">
              <el-form-item  label-width="95px" label="所属省市区" prop="cityIds">
                  <el-cascader style="width:100%"
                  ref="citySelect"
                  v-model="cityIds"
                  :options="citys"
                  @change="handleCityChange"></el-cascader>
               </el-form-item>
          </el-col>

           <el-col :span="9">
              <el-form-item  label-width="10px"  prop="cityIds">
                  <el-input v-model="form.userAddress" placeholder="详情地址" /> 
              </el-form-item>
          </el-col>


           <el-col :span="18">
                <el-form-item label-width="100px" label="买家备注" prop="buyerRemark" >
                    <el-input type="textarea" v-model="form.buyerRemark" show-word-limit maxlength="200"></el-input>
               </el-form-item>   
           </el-col>
        </el-row>
  
         <div class="bj-divider"><div class="left"><span class="default-text">支付信息</span><div class="button"></div><span class="tips"></span></div></div>
         <el-row>
          <el-col :span="8">
               <el-form-item label="支付方式" prop="payType">
                    <el-select  style="width:100%"  v-model="form.payType" placeholder="请选择支付方式" clearable size="small">
                      <el-option
                            v-for="item in payTypeOptions"
                            :key="'payType'+item.dictValue"  
                            :label="item.dictLabel"
                            :value="item.dictValue"/>
                    </el-select>
                </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item  label-width="100px" label="支付金额" prop="buyerPayAmount"  style="margin-right:20px">
                 <el-input v-model="form.buyerPayAmount" type="number"  placeholder="请输入" /> 
              </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item  label-width="140px" label="支付金额是否含运费" prop="shippingType">
                    <el-radio-group v-model="form.shippingType">
                       <el-radio :key="'shippingType'+item.dictValue"    :label="item.dictValue" v-for="item in shippingTypeOptions" >{{item.dictLabel}}</el-radio>
                    </el-radio-group>
              </el-form-item>
          </el-col>
         </el-row>
         <el-row>
           <el-col :span="8">
                <el-form-item  label="支付状态" prop="payStatus">
                    <el-select  style="width:100%"   v-model="form.payStatus" placeholder="请选择" clearable size="small">
                      <el-option
                            v-for="item in payStatusOptions"
                            :key="'payStatus'+item.dictValue"  
                            :label="item.dictLabel"
                            :value="item.dictValue"/>
                    </el-select>
                </el-form-item>
        </el-col>

         <el-col :span="8">
              <el-form-item label-width="100px" label="支付时间" prop="payTime" style="margin-right:20px">
                  <el-date-picker clearable size="small" style="width:100%"
                    v-model="form.payTime"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择">
                  </el-date-picker>
              </el-form-item>
          </el-col>
        </el-row>

         <div class="bj-divider"><div class="left"><span class="default-text">优惠信息</span><div class="button"></div><span class="tips"></span></div></div>
         <el-row>
              <el-col :span="9">
                  <el-form-item  label-width="100px" label="三方平台优惠" prop="isThirdDiscount" style="margin-right:10px">
                        <el-radio-group v-model="form.isThirdDiscount">
                          <el-radio :key="'isThirdDiscount'+item.dictValue"   :label="item.dictValue" v-for="item in isThirdDiscountOptions" >{{item.dictLabel}}</el-radio>
                        </el-radio-group>
                  </el-form-item>
              </el-col>  
              <el-col :span="9" v-if="form.isThirdDiscount!='0'">
                    <el-form-item label-width="10" label="" prop="thirdDiscount">
                      <el-input v-model="form.thirdDiscount" placeholder="三方平台优惠金额" />
                    </el-form-item>
              </el-col>
               <el-col :span="9" v-if="form.isThirdDiscount!='0'">
                  <el-form-item label-width="100px" label="优惠承担" prop="thirdDiscountAmount" style="margin-right:10px">
                      <el-input v-model="form.thirdDiscountAmount" placeholder="三方平台承担优惠金额" />
                    </el-form-item>
              </el-col>  
              <el-col :span="9" v-if="form.isThirdDiscount!='0'">
                    <el-form-item label-width="10" label="" prop="businessDiscountAmount">
                      <el-input v-model="form.businessDiscountAmount" placeholder="商家承担优惠金额" />
                    </el-form-item>
              </el-col>
         </el-row>

         <div class="bj-divider" style="margin-bottom:10px">
               <div class="left"><span class="default-text">商品信息</span>
                   <el-button plain  type="primary"  size="mini"  @click="handleAddProduct">添加商品</el-button>
                   <span class="tips"></span>
              </div>
          </div>
          <el-row> 
               <el-col :span="24">
                  <el-form-item label="" label-width="0" prop="productList" style="margin-left:0" >
                        <el-table border width="100%" style="margin-top:5px;"  :data="products">
                          <el-table-column label="商品编号" align="center" prop="barCode" />
                          <el-table-column label="商品图片" align="center" width="100">
                            <template slot-scope="scope">
                              <el-popover
                                placement="right"
                                title=""
                                trigger="hover">
                                <img slot="reference" :src="scope.row.image" width="50">
                                <img :src="scope.row.image" style="max-width: 50px;">
                              </el-popover>
                            </template>
                          </el-table-column>
                          <el-table-column label="商品名称" show-overflow-tooltip align="center" prop="productName" />
                          <el-table-column label="商品规格" align="center" prop="sku" />
                          <!-- <el-table-column label="库存" align="center" prop="stock" /> -->
                          <el-table-column label="售价" align="center"  prop="price"  >
                            <template slot-scope="scope">
                              <div v-if="scope.row.price!=null">
                                  {{scope.row.price.toFixed(2)}}
                              </div>
                            </template>
                          </el-table-column>
                          <!-- <el-table-column label="代理价" align="center" prop="agentPrice" /> -->
                          <el-table-column label="数量" align="center"  prop="count" width="200px" >
                            <template slot-scope="scope">
                              <div>
                                  <el-input-number v-model="scope.row.count"  @change="handleProductCountChange(scope.row)"  size="mini" :min="1" :max="scope.row.stock"  ></el-input-number>
                              </div>
                            </template>
                          </el-table-column>
                          <el-table-column label="小计" align="center"  prop="money"  >
                            <template slot-scope="scope">
                              <div v-if="scope.row.money!=null">
                                  {{scope.row.money.toFixed(2)}}
                              </div>
                            </template>
                          </el-table-column>
                          <el-table-column label="操作" align="center" width="100px" >
                            <template slot-scope="scope">
                              <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-delete"
                                @click="handleProductDelete(scope.row)"
                              >删除</el-button>
                            </template>
                          </el-table-column>
                        </el-table>
                        <!-- <el-row  >
                          <el-col  >
                                <span style="margin-left:10px;" v-if="totalMoney!=null">商品总价:{{totalMoney}}</span>
                          </el-col>
                        </el-row> -->
                  </el-form-item>
               </el-col> 
          </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>

  </div>
</template>

<script>
import { listOrder, getOrder, delOrder, addOrder, updateOrder, exportOrder } from "@/api/oms/orderInternal";
import { listStore } from "@/api/oms/store";
import { getCitys } from "@/api/store/city";
export default {
  name: "Store",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {  },
      // 表单校验
      rules: {
            outerOrderNo: [
              { required: true, message: "请输入三方订单号", trigger: "blur" }
            ],
             orderTime: [
              { required: true, message: "请选择三方下单时间", trigger: "blur" }
            ],
             channelType: [
              { required: true, message: "请选择销售渠道", trigger: "blur" }
            ],
             storeId: [
              { required: true, message: "请选择销售店铺", trigger: "blur" }
            ],
             buyerNick: [
              { required: true, message: "请输入买家昵称", trigger: "blur" }
            ],
            logisticsUserName: [
              { required: true, message: "请输入收货人", trigger: "blur" }
            ],
             logisticsUserPhone: [
              { required: true, message: "请输入收货人手机号", trigger: "blur" }
            ],
            cityIds: [
              { required: true, message: "请选择收货地址", trigger: "blur" }
            ],
            payType: [
              { required: true, message: "请选择支付方式", trigger: "blur" }
            ],
            payStatus: [
              { required: true, message: "请选择支付状态", trigger: "blur" }
            ],
            buyerPayAmount: [
              { required: true, message: "请输入支付金额", trigger: "blur" }
            ],
            payTime: [
              { required: true, message: "请选择支付时间", trigger: "blur" }
            ],
      },
      channelTypeOptions:[],
      stores:[],
      payTypeOptions:[],
      shippingTypeOptions:[],
      payStatusOptions:[],
      isThirdDiscountOptions:[],
      cityIds:[],
      citys:[],
      storeAvailable:true,
      storePlaceholder:"请先选择销售渠道",
      isFreeShipping:false,
      products:[],
      product:{
         open:false,
         title:"商品选择"
      },
    };
  },
  created() {
        this.getDicts("oms_channel_type").then((response) => {
             this.channelTypeOptions = response.data;
        });
        this.getDicts("oms_pay_type").then((response) => {
             this.payTypeOptions = response.data;
        });
        this.getDicts("oms_shipping_type").then((response) => {
             this.shippingTypeOptions = response.data;
        });
        this.getDicts("oms_pay_status").then((response) => {
             this.payStatusOptions = response.data;
        });
        this.getDicts("oms_is_third_discount").then((response) => {
             this.isThirdDiscountOptions = response.data;
        });
        this.getCitys();
        this.reset();
  },
  methods: {
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
// 表单重置
    reset() {
      this.form = {
        id: null,
        storeId: null,
        outerOrderNo: null,
        innerOrderNo: null,
        preemptCode: null,
        orderType: null,
        orderSource: null,
        innerOrderSource: null,
        orderStatus: 0,
        refundStatus: 0,
        payType: null,
        payStatus: "0",
        auditType: null,
        auditStatus: 0,
        orderStage: null,
        isGift: null,
        isThirdDiscount:"0",
        goodsNum: null,
        skuNum: null,
        thirdDiscountAmount: null,
        businessDiscountAmount: null,
        totalDiscount: null,
        totalAmount: null,
        amountReceivable: null,
        buyerPayAmount: null,
        buyerRealPrice: null,
        shippingType: "0",
        costAmount: null,
        postage: null,
        tags: null,
        buyerNick: null,
        buyerRemark: null,
        orderRemark: null,
        serviceRemark: null,
        payNo: null,
        orderTime: null,
        payTime: null,
        userAddress:null,
        cityIds:[],
        citys:[],
      };
      this.cityIds=[];
      this.resetForm("form");
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const storeId = row.storeId || this.ids
      getStore(storeId).then(response => {
        this.form = response.data;
        this.form.channelWarehouseName=row.channelWarehouseName;
        if(this.form.channelType!=null){
            this.form.channelType = this.form.channelType.toString();
        }
        if(this.form.storeType!=null){
            this.form.storeType = this.form.storeType.toString();
        }
        if(this.form.status!=null){
            this.form.status = this.form.status.toString();
        }
        this.open = true;
        this.title = "修改网店";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.storeId != null) {
            updateStore(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              }
            });
          } else {
            addStore(this.form).then(response => {
              if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
              }
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const storeIds = row.storeId || this.ids;
      this.$confirm('是否确认删除网店编号为"' + storeIds + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delStore(storeIds);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function() {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有网店数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return exportStore(queryParams);
        }).then(response => {
          this.download(response.msg);
        }).catch(function() {});
    },
    getChanelType(type){
      var chanelTypeName="";
      const chanelType = this.channelTypeOptions.filter((obj) => {
            return obj[dictValue] === type
      });
      if(chanelType!=null){
          chanelTypeName=chanelType.dictLable;
      }
      return chanelTypeName;
    },
    channelChange(e){
        var item=this.channelTypeOptions.find(val => val.dictValue === e);
        var channelType=item.dictValue;
        this.form.channelType=channelType;
        listStore({"channelType":channelType}).then(response => {
            this.stores = response.rows;
        });
        this.storeAvailable=false;
        this.storePlaceholder="请选择";
    },
    handleCityChange(value) {
          console.log(value);
          var nodes=this.$refs.citySelect.getCheckedNodes();
          this.form.cityIds=nodes[0].pathLabels[0]+"-"+nodes[0].pathLabels[1]+"-"+nodes[0].pathLabels[2];
          this.form.cityIdsStr=value.toString();
          console.log(this.form.cityIdsStr);
    },
    getCitys(){
          getCitys().then(res => {
             this.loading = false;
             this.citys=res.data;
          });
    },
    handleProductCountChange(row){
      row.money=row.count*row.price;
      this.$forceUpdate();
      this.compute();
    },
    handleProductDelete(row){
       this.products.splice(this.products.findIndex(item => item.id === row.id), 1)
       this.compute();
    },
    compute(){
      this.totalMoney=0;
      var that=this;
      this.products.forEach (function (value) {
          that.totalMoney += value.money;
      });
      that.totalMoney=that.totalMoney.toFixed(2);
    },
    selectProduct(row){
      console.log(row);
      for(var i=0;i<this.products.length;i++){
        if(this.products[i].id==row.id){
          return;
        }
      }
      row.count=1;
      row.money=row.count*row.price;
      this.products.push(row);
      this.compute();
    },
    handleAddProduct(){
      this.product.open=true;
      // setTimeout(() => {
      //   this.$refs.product.getData(1);
      // }, 200);
    },
  }
};
</script>

<style lang="scss" scoped> 

.app-main{
  background: #ffffff;
}
.app-container{
  margin: 0;
}
.bj-divider {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%
}
.bj-divider.small {
    font-size: 14px;
    padding: 8px 0;
    margin-bottom: 8px
}
.bj-divider.noPadding {
    padding: 0
}
.bj-divider .left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}
.bj-divider .button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}
.bj-divider .default-text {
    border-left: 4px #13c2c2 solid;
    padding-left: 16px;
    font-size: 18px
}
.bj-divider.small .default-text {
    font-size: 14px
}
.bj-divider .xs {
    font-size: 12px;
    padding: 0 8px
}
.bj-divider .tips {
    line-height: 20px;
    margin-left: 16px
}
.bj-divider .right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}
.bj-divider .el-button {
    margin-left: 16px
}
.bj-divider .fixed {
    position: fixed;
    top: 55px;
    z-index: 9;
    right: 20px
}

.bj-divider .right .el-form-item--small.el-form-item {
    margin-bottom: 0
}

.dialog-footer{
    text-align: right;
    position: fixed;
    right: 0px;
    bottom: 0px;
    width: 90%;
    margin-right: 0px;
    padding:10px 20px;
    z-index: 9;
    background: #ffffff;
    height: 65px;
}
</style>