<template>
  <!--  订单详情-->
  <div class="placeOrder">
    <Header fontColor="#000"></Header>
    <div style="padding-top: 88px"></div>
    <div class="orderMain">
      <div class="jz">
        <!--        <el-breadcrumb class="breadcrumb" separator="/">-->
        <!--          <el-breadcrumb-item :to="{ path: '/shopping/person' }">个人中心</el-breadcrumb-item>-->
        <!--          <el-breadcrumb-item :to="{ path: '/shopping/person' }">全部订单</el-breadcrumb-item>-->
        <!--          <el-breadcrumb-item>订单详情</el-breadcrumb-item>-->
        <!--        </el-breadcrumb>-->
        <div class="d-flex">
          <div class="l">
            <div class="card">
              <p class="f_24">待支付</p>
              <!--              <p class="f_24" v-if="!this.model.pay">待支付</p>-->
              <!--              <p class="f_24" v-if="!this.model.receipt && this.model.pay">待收货</p>-->
              <!--              <p class="f_24" v-if="this.model.receipt">已完成</p>-->
              <!--              <a class="c_333 f_12" v-if="this.model.receipt">查看发票详情</a>-->
            </div>
            <div class="steps">
              <a-steps direction="vertical" size="small" :current="current">
                <a-step title="提交订单" :description="this.model.orderTime" >
                  <a-icon slot="icon" type="container" />
                </a-step>
                <a-step title="已支付"  >
                  <a-icon slot="icon" type="credit-card" />
                </a-step>

                <a-step title="待生产"  >
                  <a-icon slot="icon" type="rocket" />
                </a-step>

                <a-step title="生产中"  >
                  <a-icon slot="icon" type="reconciliation" />
                </a-step>

                <a-step title="已发货" >
                  <a-icon slot="icon" type="car" />
                </a-step>

                <a-step title="已到货"  >
                  <a-icon slot="icon" type="home" />
                </a-step>

                <a-step title="已签收"  >
                  <a-icon slot="icon" type="printer" />
                </a-step>

              </a-steps>
            </div>
          </div>
          <div class="r">
            <div class="title d-flex">
              <span class="f_20 c_333">订单号#{{this.model.orderNum}}<span class="line f_16 c_1B">|</span>{{this.model.orderTime}}</span>
              <div class="right d-flex f_16"><span>数量</span><span>价格</span><span>总计</span></div>
            </div>
            <div class="d-flex orderDiv">
              <div class="orderAddr">
                <p class="headline">配送至</p>
                <a-button
                  class="defaultAddr"
                  style="padding-top: 10px;word-wrap: break-word;

                  overflow-wrap: break-word;
                  white-space: normal;
                  height: auto;
                  margin-bottom:10px;
                  text-align:left;
                  overflow: hidden;"  >
                  <j-area-linkage disabled type="cascader" v-model="defaultAddr.addr1" placeholder="请选择省市区"/>
                  <p class="text f_12">{{defaultAddr.addr2}}</p>
                  <p class="text d-flex f_14"><span>{{defaultAddr.postCode}}</span><span v-if="defaultAddr.flag">默认地址</span></p>
                </a-button>
                <a-button  @click="showModal">选择其他地址</a-button>
              </div>
              <div class="orderList ">
                <div class="item d-flex">
                  <div class="img">
                    <img :src="tp">
                  </div>
                  <div class="info">
                    <p class="f_14 c_333 headline">{{this.dingdaninfo.goodsName}}</p>
                    <p class="d-flex">款式：<span>{{this.dingdaninfo.styleNames}}</span></p>
                    <p class="d-flex">尺码：<span>{{this.dingdaninfo.modelNumber}}</span></p>
                    <p class="d-flex">主辅料：<span>{{this.dingdaninfo.name}}</span></p>
                  </div>
                  <div class="right d-flex f_14 c_333">
                    <span>
                      <el-input-number style="width: 80px" controls-position="right" size="mini" v-model="dingdaninfo.num" @change="handleChange" :min="1"></el-input-number>
                    </span>
                    <span>{{this.dingdaninfo.price}}</span>
                    <span>{{this.dingdaninfo.total}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="heji">
              <p class="d-flex">
                <span class="leftSide  f_20" style="font-weight:500">购买人</span>
                <span class="midst  f_16">小记</span>
                <span class="rightSide  f_16"  style="font-weight:500">{{this.dingdaninfo.total}}</span>
              </p>
              <p class="d-flex">
                <span class="leftSide  f_18">{{this.dingdaninfo.buyer}}</span>
                <span class="midst  f_16">运费总计</span>
                <span class="rightSide  f_16" style="font-weight:500">{{this.dingdaninfo.fare}}</span>
              </p>
              <p class="d-flex">
                <span class="leftSide"></span>
                <span class="midst  f_20"  style="font-weight:600">总计</span>
                <span class="rightSide  f_20" style="font-weight:600">{{this.dingdaninfo.all}}</span>
              </p>
            </div>
          </div>
        </div>
        <div class="btn">
          <a  class="c_fff f_16" @click="handleBack">返回</a>
          <a  class="c_fff f_16" @click="tj()">提交</a>
        </div>
      </div>
    </div>
    <a-modal :width="800" v-model="visible" title="选择其他地址" @ok="handleOk" @cancel="handleCancel">
      <a-radio-group v-model="value" @change="onChange">
        <a-radio :style="radioStyle"  v-for="(item,index) in formInline" :key="index" :value="item.id">
          <div style="display: flex;align-items: center">
            <j-area-linkage type="cascader" v-model="item.addr1" placeholder="请选择省市区" style="margin-right: 20px"/>
            <span style="margin-right: 20px;word-wrap: break-word;
                  overflow-wrap: break-word;
                  white-space: normal;">{{item.addr2}}</span><span>{{item.postCode}}</span>
          </div>

        </a-radio>
      </a-radio-group>
    </a-modal>
    <a-modal v-model="visible2"  class="toPay">
      <template slot="title">
        <div class="c_1B f_20" style="text-align: center;padding: 5px;font-weight: 500">支付宝支付</div>
      </template>
      <div class="d-flex"
           style="
            width: 450px;
            padding: 30px 10px;
            margin: 0 auto;">
        <div class="l"
             style="
                width: 120px;
                height: 120px;
                margin-right: 20px;" @click="zhifu">
          <img style="width: 120px;
                height: 120px;" src="../assets/erweima.png"/>
        </div>
        <div class="r" style="width:290px">
          <p class="f_16 c_4B">总计: ￥{{this.dingdaninfo.all}}</p>
          <p class="f_14 c_4B">请使用支付宝扫描左图二维码进行支付</p>
          <p class="f_14 c_4B">请您在15分钟内付款以免订单被取消，如有疑问，请联系客服。</p>
          <p class="f_14 c_4B">订单发货后您将收到订单发货通知短信</p>
        </div>
      </div>
      <template slot="footer">
        <div class="d-flex" style="justify-content: center;align-items:center">
          <a-button style="margin-right: 30px;border:none;font-size: 12px">手机不在身边？ 登录账号付款</a-button>
          <a-button style="font-size: 12px"   size="small" @click="handleCancel">
            返回
          </a-button>
        </div>

      </template>
    </a-modal>
    <Footer></Footer>

  </div>
</template>
<script>
  import Header from "../components/Header/HeaderView";
  import Footer from "../components/Footer/FooterView"
  import { httpAction, getAction } from '@/api/manage'
  export default {
    name: "placeOrder",
    components: { Header,Footer },
    data() {
      return {
        url: {
          xd: "/zyorders/zyOrders/xd",
          dzlist: "/zyorders/zyOrders/dzlist",
          TJorder: "/zyorders/zyOrders/TJorder",
          zf: "/zyorders/zyOrders/zf",
        },
        ordersid:"",
        tp:"../assets/cloth001.png",
        dingdaninfo:{
          orderNum:111111,
          createTime:'2022-08-19',
          goodsName:'男士职业正装外套',
          styleNames:'test01',
          modelNumber:'S',
          name:'白色素面布',
          typeName:'有纺树脂衬',
          num:1,
          price:2478,
          total:2478,
          buyer:'张三',
          fare:0,//运费
          all:0//合计
        },//订单信息
        value: 1,//弹窗选择的地址id
        radioAddr:{

        },//弹窗选择的地址
        radioStyle: {
          display: 'flex',
          alignItems:'center'
        },
        current:0,//目前步骤条在第几步
        visible:false,//地址弹窗是否显示
        visible2:false,//支付弹窗是否显示
        // 全部地址列表
        formInline: [
          {
            id:134325,
            user: false,
            addr1:'210521',
            addr2:'黄淮学院南校区学府花园26号楼弹窗1',
            postCode:'463800',
            flag:false//是否默认地址
          },
          {
            id:2432,
            user: false,
            addr1:'210521',
            addr2:'黄淮学院南校区学府花园26号楼弹窗2',
            postCode:'463800',
            flag:false
          },
          {
            id:324345,
            user: false,
            addr1:'210521',
            addr2:'黄淮学院南校区学府花园26号楼弹窗3',
            postCode:'463800',
            flag:false

          },
          {
            id:424365,
            user: false,
            addr1:'210521',
            addr2:'黄淮学院南校区学府花园26号楼弹窗4',
            postCode:'463800',
            flag:false
          },
        ],
        model:{
          id:'',//订单id
          orderNum:'1111111',//订单编号
          orderTime:'2022-08-19',//下单时间
          pay:false,//是否已支付
          // receipt:false
        },
        // 默认展示地址
        defaultAddr:{
          id:'1',
          addr1:'210521',
          addr2:'黄淮学院南校区学府花园26号楼默认1',
          flag:true,//是否默认地址
          postCode:'463800',
        },
      };
    },
    methods:{
      tj(){
        getAction(this.url.TJorder,{OrdersNum:this.model.orderNum,goodsid:this.$route.query.goodsid,goodsNum:this.dingdaninfo.num}).then((res1) => {
          if (res1.success) {
            this.ordersid = res1.result;
            //console.log(res1.result)
            this.visible2 = true;
          }else{
            this.$message.error(res1.message);
          }
        });
      },
      zhifu() {
        getAction(this.url.zf,{ordersid:this.ordersid,goodsid:this.$route.query.goodsid}).then((res1) => {
          if (res1.success) {
            this.$notification['success']({
              message: '支付成功！',
              description:
                '自动为您跳转首页中...',
            });
            let that = this
            setTimeout(function(){
              that.$router.push({
                path: "/shopping/shopHome",
                query: {
                  // id: item.id,
                },
              });
            },2000);
          }else{
            this.$message.error(res1.message);
          }
        });
      },
      handleChange(value) {
        this.dingdaninfo.total = this.dingdaninfo.price*value
        this.dingdaninfo.all = this.dingdaninfo.total + this.dingdaninfo.fare
      },
      onChange(e) {
        this.radioAddr = this.formInline.find(object => object.id == e.target.value)
        this.value = e.target.value
      },
      showModal() {
        this.visible = true;
      },
      handleOk(e) {
        this.visible = false;
        if(JSON.stringify(this.radioAddr) !== "{}"){
          this.defaultAddr = this.radioAddr
        }
      },
      handleCancel(e) {
        this.visible = false;
        this.visible2 = false;
      },
      handleBack(){
        this.$router.push({
          path: "/shopping/ClothDetail",
          query: { id: this.$route.query.goodsid, title: this.$route.query.title ,name:this.$route.query.name,parentName:this.$route.query.parentName},
        });
      }
    },
    mounted() {
      this.dingdaninfo.all = this.dingdaninfo.total + this.dingdaninfo.fare;
      getAction(this.url.dzlist).then((res) => {
        if (res.success) {
          //console.log(res.result);
          this.formInline = res.result;
        }else{
          this.$message.error(res.message);
        }
      });
      getAction(this.url.xd,{goodsid:this.$route.query.goodsid}).then((res1) => {
        if (res1.success) {
          //console.log(res1.result)
          this.model.orderTime = res1.result.dqsj;
          this.model.orderNum = res1.result.orderNum;
          this.defaultAddr = res1.result.address;
          this.dingdaninfo.buyer = res1.result.gmr;
          this.dingdaninfo.goodsName = res1.result.spmc;
          this.dingdaninfo.styleNames=res1.result.spks;
          this.dingdaninfo.modelNumber=this.$route.query.size;
          this.dingdaninfo.name=res1.result.zfl;
          this.dingdaninfo.price=res1.result.spjg;
          this.tp=res1.result.sptp;
          this.dingdaninfo.total = res1.result.spjg;
          this.dingdaninfo.all = res1.result.spjg;
        }else{
          this.$message.error(res1.message);
        }
      });
    },
  };
</script>
<style>
  .placeOrder .top .middle .fzlx {
    border-bottom: 2px solid #000;
  }
</style>
<style lang="less" scoped>
  @import '../assets/common.css';
  .j-area-linkage /deep/ .area-select{
    background-color: #fff;
    border: none;
    span{
      padding-left: 0;
      font-size: 12px;
      color:#313131;
      cursor:auto;
      font-weight: 500;
    }
    i{
      display: none;
    }
  }
  .ant-radio-group /deep/ .area-cascader-wrap{
    height:40px;
    .area-select{
      height: 40px;
      .area-selected-trigger{
        height: 40px;line-height:40px;
        padding: 0;
      }
    }
  }
  .orderMain{
    background: #F6F6F6;
    padding-bottom: 100px;
    padding-top: 50px;
    .jz{
      .breadcrumb{
        padding-top: 50px;
        padding-bottom: 50px;
      }
      .d-flex{
        justify-content: space-between;
        .l{
          width: 300px;
          .card{
            width: 300px;
            height: 157px;
            background: #FFFFFF;
            margin-bottom: 20px;
            text-align: center;
            padding-top: 40px;
            .f_24{
              color: #C8A985;
              margin-bottom: 20px;
            }
            .f_12{
              padding: 5px 14px;
              border: 1px solid #333333;
            }
          }
          .steps{
            width: 300px;
            /*height: 736px;*/
            background: #FFFFFF;
            padding: 32px 55px;
          }
        }
        .r{
          width: 1110px;
          /*height: 913px;*/
          background: #FFFFFF;
          padding: 54px 48px;
          .title{
            padding-bottom: 15px;
            border-bottom: 1px solid #DADADA;
            .line{
              margin-left: 10px;
              margin-right: 10px;
            }
            .right{
              width: 25%;
              span{
                color: #C8A985;
              }
            }
          }
          .orderDiv{
            padding-bottom: 20px;
            border-bottom: 1px solid #DADADA;
            .orderAddr{
              width: 25%;
              color: #333;
              font-size: 16px;
              p{
                margin-bottom: 10px;
              }
              .headline{
                font-weight: 500;
                color: #C8A985;
                margin-top: 30px;
              }
              .text{
                font-weight: 400;
              }
            }
            .orderList{
              width: 75%;
              .item{
                padding-top: 30px;
                border-bottom: 1px solid #DADADA;
                &:last-of-type{
                  border: none;
                }
                .img{
                  width: 23.33%;
                  img{
                    width: 180px;
                    height: 180px;
                  }
                }
                .info{
                  width: 43.33%;
                  padding-right: 15px;
                  .headline{
                    font-weight: 500;
                  }
                  p{
                    span{
                      margin-left: 10px;
                      display: inline-block;
                      width: 75%;
                    }
                  }
                }
                .right{
                  width: 33.33%;
                  font-weight: 500;
                }
              }


            }}
          .heji{
            padding: 30px 20px;
            p{
              span{
                width: 20%;
                color: #333;
              }
              .leftSide{
                text-align: left;

              }
              .midst{
                text-align: center;

              }
              .rightSide{
                text-align: right;

              }
            }
          }
        }
      }
    }
    .btn{
      a{
        display: inline-block;
        width: 284px;
        height: 56px;
        background: #1B1B1B;
        line-height: 56px;
        margin-right: 20px;
      }
      &:hover{
        color: red;
      }
      text-align: center;
      margin-top: 60px;
    }
  }
</style>

