<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="85px" class="queryFormInline">
          <el-form-item label="付款状态" prop="payStatus">
            <el-select v-model="queryParams.payStatus" placeholder="付款状态" size="small">
              <el-option v-for="item in payOptions" :key="item.value" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="发货状态" prop="goodsStatus">
            <el-select v-model="queryParams.goodsStatus" placeholder="发货状态" size="small">
              <el-option v-for="item in goodsOptions" :key="item.value" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="订单状态" size="small">
              <el-option v-for="item in orderOptions" :key="item.value" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="商品名字" prop="GoodsName">
            <el-input
              v-model="queryParams.GoodsName"
              placeholder="请输商品名字"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="订单号" prop="order_sn">
            <el-input
              v-model="queryParams.order_sn"
              placeholder="请输订单号"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="下单时间" prop="addTimeInterval">
            <el-date-picker
              size="small"
              v-model="queryParams.addTimeInterval"
              type="daterange"
              align="left"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>

          <el-form-item label="收货人名字" prop="shipname">
            <el-input
              v-model="queryParams.shipname"
              placeholder="请输收货人名字"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="手机号" prop="Tel">
            <el-input
              v-model="queryParams.Tel"
              placeholder="请输手机号"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table v-loading="loading" :data="orderList" :height="tableHeight" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column label="商品名称" align="center" width="200">
          <template slot-scope="scope">
            <div style="display: flex;justify-content: space-around;flex-direction: row;">
              <el-image
                v-if="scope.row.Img!=''"
                style="width: 60px; height: 50px"
                :src="scope.row.Img"
                fit="fill"
              ></el-image>
              <span>{{ scope.row.GoodsName}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="订单号" align="center" prop="order_sn"/>
        <el-table-column label="商品ID" align="center" prop="GoodsId"/>
        <el-table-column label="规格" align="center" prop="SpecDes"/>
        <el-table-column label="数量" align="center" prop="Quantity"/>
        <el-table-column label="订单金额" align="center" prop="Money"/>
        <el-table-column label="结算价格" align="center" prop="SellerMoney"/>
<!--        <el-table-column label="来源" align="center">-->
<!--          <template slot-scope="scope">-->
<!--            <p v-if="scope.row.Pt==0">供应链中台</p>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <!--<el-table-column label="收货人姓名" align="center" prop=""/>-->
        <el-table-column label="收货人信息" align="center" width="300">
          <template slot-scope="scope">
            <div style="width:80%;margin:0 auto; text-align: left;">
              <span ><i class="el-icon-user"></i> {{scope.row.Shipname}}</span>
              <br/>
              <span ><i class="el-icon-phone-outline"></i> {{scope.row.Tel}}</span>
              <br/>
              <i class="el-icon-location-information"></i>
              {{scope.row.Province}}
              {{scope.row.City}}
              {{scope.row.Area}}
              {{scope.row.Town}}
              {{scope.row.Address}}
            </div>

          </template>
        </el-table-column>
        <el-table-column label="付款时间" align="center" prop="Paytime"/>
        <el-table-column label="确认收货" align="center" prop="ConfirmTime"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.PayStatus==1 && scope.row.GoodsStatus == 0 || scope.row.GoodsStatus == 3"
              size="mini"
              type="text"
              icon="el-icon-truck"
              @click="fahuo(scope.row)"
            >去发货
            </el-button>
            <el-button
              v-else-if="scope.row.PayStatus==1 && scope.row.GoodsStatus == 1 || scope.row.GoodsStatus == 2 && scope.row.DeliverNo"
              size="mini"
              type="text"
              icon="el-icon-location"
              @click="handleWl(scope.row)"
              v-loading="loading"
            >物流
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-info"
              @click="handleUpdate(scope.row)"
            >详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <!-- 详情 -->
      <el-dialog :title="title" :visible.sync="open" width="70%" append-to-body class="order-details">
        <el-col :span="24" class="card-box" v-loading="loading">
          <el-card>
            <div slot="header">
              <span>订单信息</span>
            </div>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <table cellspacing="0" style="width: 100%;">
                <tbody>

                <tr>
                  <td>
                    <div class="cell">订单编号</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.order_sn">{{form.order_sn}}</div>
                  </td>
                  <td>
                    <div class="cell">第三方订单号</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.tx_sn">{{form.tx_sn}}</div>
                  </td>
                  <td>
                    <div class="cell">父订单号</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.parent_order_sn">{{form.parent_order_sn}}</div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="cell">商品总价格</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.SellerMoney">{{form.SellerMoney}}</div>
                  </td>
                  <td>
                    <div class="cell">商品实付价格</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.Money">{{form.Money}}</div>
                  </td>
                  <td>
                    <div class="cell">数量</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.Quantity">{{form.Quantity}}</div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="cell">下单时间</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.Addtime">{{form.Addtime}}</div>
                  </td>
                  <td>
                    <div class="cell">付款时间</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.Paytime">{{form.Paytime}}</div>
                  </td>

                </tr>

                </tbody>
              </table>
            </div>
          </el-card>
        </el-col>
        <el-col :span="24" class="card-box" v-loading="loading">
          <el-card>
            <div slot="header">
              <span>商品信息</span>
            </div>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <table cellspacing="0" style="width: 100%;">
                <tbody>
                <tr>
                  <td>
                    <div class="cell">商品图</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.Img"><img :src="form.Img" alt="" width="320" height="198"></div>
                  </td>
                  <td>
                    <div class="cell">商品ID</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.GoodsId">{{form.GoodsId}}</div>
                  </td>

                </tr>
                <tr>
                  <td>
                    <div class="cell">商品名</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.GoodsName">{{form.GoodsName}}</div>
                  </td>
                  <td>
                    <div class="cell">商品规格</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.SpecDes">{{form.SpecDes}}</div>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </el-card>
        </el-col>
        <el-col :span="24" class="card-box" v-loading="loading">
          <el-card>
            <div slot="header">
              <span>物流信息</span>
            </div>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <table cellspacing="0" style="width: 100%;">
                <tbody>
                <tr>
                  <td>
                    <div class="cell">收货人姓名</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.Shipname">{{form.Shipname}}</div>
                  </td>
                  <td>
                    <div class="cell">收货人电话</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.Tel">{{form.Tel}}</div>
                  </td>
                  <td>
                    <div class="cell">收货人地址</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.Address">{{form.Address}}</div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="cell">快递公司</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.DeliverName">{{form.DeliverName}}</div>
                  </td>
                  <td>
                    <div class="cell">快递单号</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.DeliverNo">{{form.DeliverNo}}</div>
                  </td>
                  <td>
                    <div class="cell">发货时间</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.Delivertime">{{form.Delivertime}}</div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="cell">运费</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.Freight">{{form.Freight}}</div>
                  </td>
                  <td>
                    <div class="cell">查看物流信息</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.DeliverNo">
                      <el-button size="big" type="text" @click="handleWl(form)">点击查看</el-button>
                    </div>
                    <div class="cell" v-else @click="fahuo(form)">去发货</div>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </el-card>
        </el-col>
        <el-col :span="24" class="card-box" v-loading="loading">
          <el-card>
            <div slot="header">
              <span>其他</span>
            </div>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <table cellspacing="0" style="width: 100%;">
                <tbody>
                <tr>
                  <td>
                    <div class="cell">售后时长</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.AftersaleTime">{{form.AftersaleTime}}</div>
                  </td>
                  <td>
                    <div class="cell">售后过期时间</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.AfterSaleOverTime">{{form.AfterSaleOverTime}}</div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="cell">备注</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.Remark">{{form.Remark}}</div>
                  </td>
                  <td>
                    <div class="cell">用户备注</div>
                  </td>
                  <td>
                    <div class="cell" v-if="form.UserRemark">{{form.UserRemark}}</div>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </el-card>
        </el-col>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
      <!-- 去发货 -->
      <el-dialog :title="title2" :visible.sync="open2" width="60%" append-to-body v-loading="loading" style="height: 40%">
        <el-form :model="sendGoods" ref="sendGoods" label-width="100px;">
          <el-row>
            <el-col :span="16" :offset="3">
              <el-form-item label="快递公司" >
                <el-select v-model="sendGoods.deliverName" filterable clearable placeholder="请选择快递公司" @change="selectValue" style="width:70%">
                  <el-option v-for="item in expressList" :key="item.value" :label="item.label" size="small"
                             :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="16" :offset="3">
              <el-form-item label="快递单号" prop="Tel">
                <el-input
                  v-model="sendGoods.deliverNo"
                  placeholder="请输快递单号"
                  clearable
                  size="small"
                  style="width:70%"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :span="24">
            <el-col :span="2" :offset="21">
              <el-form-item>
                <el-button type="primary" @click="submitForm()">提 交</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
      <!-- 物流信息 -->
      <el-dialog :title="title3" :visible.sync="open3" width="60%" append-to-body v-loading="loading">
        <el-timeline :reverse="reverse" style="padding: 10px 60px;">
          <el-timeline-item
            v-loading="loading"
            v-for="(activity, index) in expressInfo"
            :key="index"
            :timestamp="activity.time">
            {{activity.context}}
          </el-timeline-item>
        </el-timeline>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
  import {listOrder, getOrder, sendOrder, getExpressInfo, updateOrder, getExpressList} from '@/api/module/order'
  import {dateFormat} from '@/utils'

  export default {
    name: "order",
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        //-------------------
        fullHeight: 0,
        tableHeight: 0,
        fullscreenLoading: false,
        // 时间线正序
        reverse: false,
        // 遮罩层
        loading: false,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 折扣金额表格数据
        orderList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 弹出层标题2
        title2: "",
        // 是否显示弹出层2
        open2: false,
        // 是否显示弹出层
        open3: false,
        // 弹出层标题2
        title3: "",
        //快递公司
        expressList: [],
        //商品状态
        goodsOptions: [
          {label: "全部状态", value: -1},
          {label: "未发货", value: 0},
          {label: "已发货", value: 1},
          {label: "已收货", value: 2},
          {label: "配货中", value: 3},
          {label: "拒收", value: 4},
        ],
        //支付状态  付款状态:0:未付款,1:已付款,2申请退款,3,退款中,4已退款5退款申请失败（申请后20天内未处理）
        payOptions: [
          {label: "全部状态", value: -1},
          {label: "未付款", value: 0},
          {label: "已付款", value: 1},
          {label: "申请退款", value: 2},
          {label: "退款中", value: 3},
          {label: "已退款", value: 4},
          {label: "退款申请失败", value: 5},
        ],
        //订单状态:0:未处理,1,已作废,2,待退货,3,已退货,4,异常订单,10已处理
        orderOptions: [
          {label: "全部状态", value: -1},
          {label: "未处理", value: 0},
          {label: "已作废", value: 1},
          {label: "待退货", value: 2},
          {label: "已退货", value: 3},
          {label: "异常订单", value: 4},
          {label: "已处理", value: 10},
        ],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          payStatus: null,
          goodsStatus: null,
          status: null,
          GoodsName: null,
          order_sn: null,
          shipname: null,
          Tel:null,
          beginTime: 0,
          endTime: 0,
          addTimeInterval: []
        },
        sendGoods: {
          orderSn: "",
          deliverNo: "",
          deliverName: "",
          deliverCode: "",
        },
        expressInfo: [],
        // 表单参数
        form: {},


      };
    },
    created() {
      this.getList();
      this.getExpress();
      this.$nextTick(() => {
        this.fullHeight = document.getElementsByClassName('box-card')[0].clientHeight
      })
    },
    watch: {
      fullHeight(val) {
        let formHeight = document.getElementsByClassName('clearfix')[0].clientHeight
        this.tableHeight = val - formHeight - 110
      },
      // 保证日期初始化格式
      'queryParams.addTimeInterval'() {
        // select组件，clear的时候，将addTimeInterval的值，初始化为null，判断当其值为null时，赋值为数组
        if(!this.queryParams.addTimeInterval && typeof(this.queryParams.addTimeInterval) !== "undefined") {
          this.queryParams.addTimeInterval = [];
          this.queryParams.beginTime = 0;
          this.queryParams.endTime = 0;
        }
      }
    },
    methods: {
      // 获取所有物流
      getExpress() {
        getExpressList().then(res => {
          if(res.code === 1 && res.data) {
            this.expressList = res.data.expressLists;
          }else {
            this.$message({message: '数据出错啦！',type:'error'});
          }
        });
      },
      // 选择的物流数据
      selectValue(value) {
        this.sendGoods.deliverCode = value;
      },
      //物流
      handleWl: function (row) {
        this.loading = true;
        this.sendGoods.deliverCode = row.DeliverCode;
        this.sendGoods.deliverName = row.DeliverName;
        this.sendGoods.deliverNo = row.DeliverNo;
        this.sendGoods.orderSn = row.order_sn;
        getExpressInfo(this.sendGoods).then(res => {
          this.loading = false;
          if(res.code === 1) {
            this.open3 = true;
            this.title3 = "物流信息";
            this.expressInfo = res.data.data;
          }else {
            let msg = res.data.reason || res.msg || '数据出错了';
            this.$message({type: 'error',message: msg});
          }
        });
      },
      //发货
      fahuo: function (row) {
        this.reset();
        const order_sn = row.order_sn
        this.sendGoods.orderSn = order_sn
        this.open2 = true;
        this.title2 = "去发货";
      },
      dateIfAddZero: function (time) {
        return time < 10 ? '0' + time : time
      },
      /** 查询折扣金额列表 */
      getList() {
        this.loading = true;
        listOrder(this.queryParams).then(response => {
          this.from = response.data.list;
          this.orderList = response.data.list;
          this.total = response.data.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {};
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        if(this.queryParams.addTimeInterval.length === 2) {
          this.queryParams.beginTime = new Date(this.queryParams.addTimeInterval[0]).getTime() / 1000;
          this.queryParams.endTime = new Date(this.queryParams.addTimeInterval[1]).getTime() / 1000;
        }
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.queryParams.beginTime = 0;
        this.queryParams.endTime = 0;
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.order_sn)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },

      /** 详情按钮操作 */
      handleUpdate(row) {
        this.reset();
        this.loading = true
        const order_sn = row.order_sn || this.ids
        getOrder(order_sn).then(response => {
          //console.log("请求原始数据：",response);
          this.loading = false
          this.form = response.data.parms;
          this.form.Delivertime = dateFormat(response.data.parms.Delivertime * 1000, "Y-m-d H:i:s");
          this.form.Addtime = dateFormat(response.data.parms.Addtime * 1000, "Y-m-d H:i:s");
          this.expressList = response.data.expressLists;
          this.open = true;
          this.title = "订单详情";
        });
      },
      /** 发货按钮 */
      submitForm() {
        this.$refs["sendGoods"].validate(valid => {
          if (valid) {
            sendOrder(this.sendGoods).then(response => {
              if (response.code == 1) {
                this.msgSuccess("发货成功");
                this.open2 = false;
                this.open = false;
                this.getList();
              }
            });
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const order_sns = row.order_sn || this.ids;
        this.$confirm('是否确认删除折扣金额编号为"' + order_sns + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return delOrder(order_sns);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function () {
        });
      },
    } //methods结束
  };
</script>
<style scoped lang="scss" type="text/stylus">

  .order-details{
    /deep/.el-dialog {
      height: 80%;
      overflow: hidden;
    }
    /deep/.el-dialog__body {
      height: calc(100% - 120px);
      overflow-x: hidden;
      overflow-y: scroll;
    }
  }

  /deep/.queryFormInline {
    .el-form-item {
      margin-bottom: 5px ;
    }
  }
</style>
