<template>
  <div class="order-manage-wrapper">
    <bread-crumb :curmbFirst="curmbFirst"  :curmbSecond="curmbSecond"></bread-crumb>
    <div class="order-manage-content screenSet" id="screenSet">
      <div class="header-title">订单管理</div>
      <el-form ref="searchForm" :model="searchForm" label-width="80px" label-suffix=":" :inline="true">
        <el-row :gutter="30" type="flex" style="margin-top: 10px">
          <el-col :span="18">
            <el-form-item label="商品名称">
              <el-input v-model="searchForm.goodsName" size="small" placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-form-item label="订单号">
              <el-input v-model="searchForm.orderNo" size="small" placeholder="请输入订单号"></el-input>
            </el-form-item>
            <el-form-item label="买家名称">
              <el-input v-model="searchForm.receiver" size="small" placeholder="请输入买家名称"></el-input>
            </el-form-item>
            <el-form-item label="下单时间">
              <el-date-picker
                  v-model="searchForm.orderDate"
                  type="datetime"
                  size="small"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="timestamp"
                  placeholder="请选择下单时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="text-align: right">
            <el-button type="primary" size="small" @click="searchList">查询</el-button>
            <el-button type="default" size="small" @click="resetForm" style="margin-left:0;">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="all"></el-tab-pane>
        <el-tab-pane label="等待买家付款" name="first"></el-tab-pane>
        <el-tab-pane label="等待发货" name="second"></el-tab-pane>
        <el-tab-pane label="已发货" name="third"></el-tab-pane>
        <el-tab-pane label="交易成功" name="fourth"></el-tab-pane>
        <el-tab-pane label="关闭交易" name="five"></el-tab-pane>
      </el-tabs>
      <el-table :data="tableData" border  max-height="1000" class="item-table" style="width: 100%;margin-top: 10px;">
        <el-table-column prop="id" label="订单号" min-width="100" align="center"></el-table-column>
        <el-table-column prop="goodsNameList" label="商品名称" min-width="150" align="center">
          <template slot-scope="scope">
          <!--<span>{{ scope.row.goodsName }}</span>-->
            <p v-for="(item, index) in scope.row.goodsNameList" :key="index" class="p-normal">{{item}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="showStatusStr" label="交易状态" min-width="100" align="center">
        </el-table-column>
        <el-table-column prop="amount" label="实收款" min-width="100" align="center">
          <template slot-scope="scope">
          <span>￥{{ scope.row.amount | toFixed2}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="receiver" label="买家" min-width="100" align="center"></el-table-column>
        <el-table-column prop="goodsQuantityList" label="数量" min-width="100" align="center">
          <template slot-scope="scope">
            <!--<span>{{ scope.row.goodsQuantity }}</span>-->
            <p v-for="(item, index) in scope.row.goodsQuantityList" :key="index" class="p-normal">{{item}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="sizeList" label="规格" min-width="100" align="center">
          <template slot-scope="scope">
            <!--<span>{{ scope.row.size }}</span>-->
            <p v-for="(item, index) in scope.row.sizeList" :key="index" class="p-normal">{{item}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="priceList" label="单价" min-width="100" align="center">
          <template slot-scope="scope">
            <!--<span>￥{{ scope.row.price }}</span>-->
            <p v-for="(item, index) in scope.row.priceList" :key="index" class="p-normal">￥{{item | toFixed2}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="下单时间" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="comments" label="备注" min-width="100" align="center"></el-table-column>
        <el-table-column label="操作" min-width="250" align="center" fixed="right">
          <template slot-scope="scope">
            <div>
              <!--<el-button @click="closeTrade(scope.row)" type="text" size="small">关闭交易</el-button>-->
              <!--<el-button @click="changePrice(scope.row)" type="text" size="small">修改价格</el-button>-->
              <el-button v-if="scope.row.storeType == 1 && scope.row.showStatus == 3" @click="sendGoods(scope.row)" type="text" size="small">发货</el-button>
              <el-button v-if="scope.row.storeType == 2 && scope.row.showStatus == 3" @click="distribute(scope.row)" type="text" size="small">配送</el-button>
              <el-button v-if="scope.row.storeType == 1 && (scope.row.showStatus == 1 || scope.row.showStatus == 2)" @click="viewLogistics(scope.row)" type="text" size="small">查看物流</el-button>
              <el-button v-if="scope.row.storeType == 2 && scope.row.showStatus == 2" @click="distributeComplete(scope.row)" type="text" size="small">配送完成</el-button>
              <el-button @click="goDetail(scope.row)" type="text" size="small">查看详情</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleNumChange"
            :current-page="searchForm.pageNo"
            :page-sizes="[10, 30, 50, 100]"
            :page-size="searchForm.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalRows"
        ></el-pagination>
      </div>
      <el-dialog
          title="确定关闭交易吗？"
          :visible="closeTradeDialog"
          @close="cancelTrade"
          :show-close="false"
          width="600px"
          center>
        <p style="text-align: center;margin-top: -25px;color: #9B9997">关闭后买家将不能再付款</p>
        <div style="text-align: center;margin-top: 30px;">
          <el-input type="textarea"
                    v-model="reasonTxt"
                    maxlength="400"
                    rows="5"
                    placeholder="请输入备注内容"
                    style="width: 80%;"></el-input>
          <span class="word-num">{{reasonTxt.replace(/\s+/g,"").length}}/400</span>
        </div>
        <!--<el-form ref="auditForm" :model="auditForm" label-width="120px">
          <el-form-item label="拒绝原因：">
            <el-radio-group v-model="auditForm.label">
              <div v-for="item in refuseReasonList" :key="item">
                <div style="padding-top: 12px;">
                  <el-radio :label="item"></el-radio>
                </div>
              </div>
              <div style="padding-top: 16px;">
                <el-radio label="其他"></el-radio>
              </div>
            </el-radio-group>
            <div v-if="auditForm.label == '其他'">
              <el-input type="textarea" v-model="auditForm.desc" maxlength="25" style="width: 310px;margin-top: 10px;"></el-input>
              <span class="word-num">{{(auditForm.desc).replace(/\s+/g,"").length}}/25</span>
            </div>
          </el-form-item>
        </el-form>-->
        <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="cancelTrade">取 消</el-button>
        <el-button size="small" type="primary" @click="submitTrade">关闭交易</el-button>
      </span>
      </el-dialog>
      <el-dialog
          title="修改价格"
          :visible="changePriceDialog"
          @close="cancelPrice"
          width="600px"
          center>
        <el-form ref="changePriceForm" :model="changePriceForm" label-width="120px" label-suffix=":">
          <el-form-item label="目前价格">
            <span>￥{{changePriceForm.nowPrice}}</span>
          </el-form-item>
          <el-form-item label="修改价格">
            <el-input type="text" v-model="changePriceForm.updatePrice" placeholder="请输入修改后的价格" style="width: 70%"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="submitPrice">完成</el-button>
      </span>
      </el-dialog>
      <send-set-dialog
          :sendGoodsDialog="sendGoodsDialog"
          :dialogTitle="dialogTitle"
          :sendSetFormData="sendSetForm"
          @closeSendSet="closeSendSet">
      </send-set-dialog>
      <el-dialog
          title="查看物流"
          :visible="viewLogisticsDialog"
          @close="cancelView"
          :show-close="false"
          width="600px"
          center>
        <div class="view-content">
          <i class="el-icon-truck" style="font-size: 18px"></i><span class="send-status">已发货</span>
          <span class="view-number">{{logisticeInfo}}</span>
          <el-button type="text" @click="copyTxt">复制</el-button>
        </div>
        <input type="text" id="copyInput" class="hidden-input" />
        <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="cancelView">我知道了</el-button>
      </span>
      </el-dialog>
      <el-dialog
          title=""
          :visible="disCompleteDialog"
          @close="cancelDis"
          :show-close="false"
          width="600px"
          center>
        <div class="view-content">
         <p class="center-title">确认配送完成吗？</p>
          <p class="center-subtitle">请确认线下已将商品送达</p>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="cancelDis">取消</el-button>
        <el-button size="small" type="primary" @click="submitDisComplete">配送完成</el-button>
      </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  // import { openLoading, closeLoading } from "../../utils/utils";
  import BreadCrumb from "@/components/breadcrumb.vue";
  import SendSetDialog from "@/components/shop/send-set-dialog";
  import { queryOrderList, updateExpress } from "@/utils/shop";
  export default {
    components: {
      SendSetDialog,
      BreadCrumb
    },
    data(){
      return{
        curmbFirst: '云鹊店铺',
        curmbSecond: '订单管理',
        activeName: 'all',
        searchForm: {
          showStatus: -1,
          storeId: 0,
          goodsName: '',
          orderNo: '',
          receiver: '',
          orderDate: '',
          pageNo: 1,
          pageSize: 10,
        },
        totalRows: 0,
        tableData: [
          //   {
          //   id: '',
          //   name: '',
          //   type: null,
          //   status: '',
          //   num: null,
          //   createdTime: '',
          // }
        ],
        closeTradeDialog: false,
        reasonTxt: '',
        changePriceDialog: false,
        changePriceForm: {
          nowPrice: 45,
          updatePrice: '',
        },
        sendGoodsDialog: false,
        dialogTitle: '',
        sendSetForm: {},
        viewLogisticsDialog: false,
        logisticeInfo: '',//复制物流信息
        disCompleteDialog: false,
        disCompleteData: {},
        rules: {
          name: [
            { required: true, message: '请输入快递公司', trigger: "blur"},
          ],
          orderNum: [
            { required: true, message: '请输入快递单号', trigger: "blur"},
          ],
        },
      }
    },
    created() {
      this.searchForm.storeId = this.$route.query.storeId || 0,
      this.searchList();
    },
    methods: {
      searchList(){
        queryOrderList(this.searchForm).then(res => {
          if (res.code == '000000') {
            this.tableData = res.data.orderSingleDtoList;
            this.totalRows = res.data.totalNum;
          }
        })
      },
      resetForm() {
        this.activeName = 'all';
        this.searchForm = {
          showStatus: -1,
          storeId: this.$route.query.storeId,
          goodsName: '',
          orderNo: '',
          receiver: '',
          orderDate: '',
          pageNo: 1,
          pageSize: 10,
        };
        this.searchList();
      },
      handleSizeChange(val) {
        this.searchForm.pageSize = val;
        this.searchForm.pageNo = 1;
        this.searchList();
      },
      handleNumChange(val) {
        this.searchForm.pageNo = val;
        this.searchList();
      },
      handleClick(tab, event) {
        //-1全部，1已完成,2已发货,3待发货,4待支付,5交易关闭
        if (this.activeName == 'all') {//全部
          this.searchForm.showStatus = -1;
        }else if (this.activeName == 'first') {//等待买家付款
          this.searchForm.showStatus = 4;
        }else if (this.activeName == 'second') {//待发货
          this.searchForm.showStatus = 3;
        }else if (this.activeName == 'third') {//已发货
          this.searchForm.showStatus = 2;
        }else if (this.activeName == 'fourth') {//交易成功
          this.searchForm.showStatus = 1;
        }else if (this.activeName == 'five') {//交易关闭
          this.searchForm.showStatus = 5;
        }
        this.searchForm.pageNo = 1;
        this.searchList();
      },
      //关闭交易
      closeTrade(row) {
        this.closeTradeDialog = true;
      },
      cancelTrade() {
        this.closeTradeDialog = false;
      },
      submitTrade() {
        this.closeTradeDialog = false;
      },
      //修改价格
      changePrice(row) {
        this.changePriceDialog = true;
      },
      cancelPrice() {
        this.changePriceDialog = false;
      },
      submitPrice() {
        this.changePriceDialog = false;
      },
      //发货
      sendGoods(row) {
        this.sendGoodsDialog = true;
        this.dialogTitle = '发货设置';
        this.sendSetForm = row;
      },
      closeSendSet(val) {
        //保存操作
        if (val.type == 2) {
          this.resetForm();//更新列表
        }
        this.sendGoodsDialog = false;
      },
      //配送
      distribute(row) {
        this.sendGoodsDialog = true;
        this.dialogTitle = '配送设置';
        this.sendSetForm = row;
      },
      //查看物流
      viewLogistics(row) {
        this.viewLogisticsDialog = true;
        this.logisticeInfo = `${row.expressName} ${row.expressNo}`;
      },
      cancelView() {
        this.viewLogisticsDialog = false;
      },
      copyTxt() {
        let txt = document.getElementById("copyInput");
        txt.value = this.logisticeInfo;
        // if (navigator.userAgent.match(/(iPhone|iPod|iPad|Mac);?/i)) {
        if (navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") < 1) {
          var el = document.createElement('input');
          el.value = txt.value;//要复制的内容
          el.style.opacity = '0';
          document.body.appendChild(el);
          var editable = el.contentEditable;
          var readOnly = el.readOnly;
          el.contentEditable = true;
          el.readOnly = false;
          const range = document.createRange();
          range.selectNodeContents(el);
          var sel = window.getSelection();
          sel.removeAllRanges();
          sel.addRange(range);
          el.setSelectionRange(0, 999999);
          el.contentEditable = editable;
          el.readOnly = readOnly;
          var ret = document.execCommand('copy');
          el.blur();
        } else {
          txt.select(); //选择对象
          document.execCommand("copy");
        }
        this.$message.success('复制成功');
      },
      //配送完成
      distributeComplete(row) {
        this.disCompleteDialog = true;
        this.disCompleteData = row;
      },
      cancelDis() {
        this.disCompleteDialog = false;
      },
      //确认配送完成
      submitDisComplete() {
        let para = this.disCompleteData;
        para.type = 3;
        updateExpress(para).then(res => {
          if (res.code == '000000') {
            this.$message.success('操作成功')
            this.disCompleteDialog = false;
            this.resetForm();//更新列表
          }else {
            this.$message.error('操作失败，请重试')
          }
        });
      },
      //查看详情
      goDetail(row) {
        this.$router.push({
          path: `/order-detail`,
          query:{
            id: row.id,
            storeId: this.searchForm.storeId,
            storeType: row.storeType,
          }
        })
      },
    },
    filters: {
      toFixed2: function (value) {
        let val;
        if (value) {
          val = (value/100).toFixed(2);
        }else {
          val = 0.00
        }
        return val;
      }
    },
  }
</script>
<style lang="scss">
  .order-manage-wrapper{
    .order-manage-content{
      background: #fff;
      padding: 10px;
      .header-title{
        padding: 10px 12px;
        font-size: 13px;
        color: #449284;
        border-bottom: 1px solid #efefef;
      }
    }
    .el-button--text{
      color: #449284;
      font-size: 14px;
      &::after{
        content: '';
        position: relative;
        height: 14px;
        /*border-right: 1px solid #EBEEF5;*/
        border-right: 1px solid #aaaaaa;
        padding-right: 10px;
      }
      &:last-of-type{
        &::after{
          content: '';
          position: relative;
          width: 1px;
          height: 14px;
          border-right: none;
        }
      }
    }
  }
  .el-tabs__item.is-active{
    color: #449284;
  }
  .el-tabs__active-bar{
    background-color: #449284;
  }
  .el-tabs__item:hover{
    color: #449284;
  }

  .view-content{
    .send-status{
      margin-left: 5px;
    }
    .view-number{
      color: #999999;
      margin-left: 15px;
      margin-right: 15px;
    }
    .center-title{
      text-align: center;
    }
    .center-subtitle{
      text-align: center;
      font-size: 13px;
      margin-top: 10px;
      color: #999999;
    }
  }
  .hidden-input {
    height: 0;
  }
  .p-normal{
    line-height: 26px;
    border-bottom: 1px solid #E4E7ED;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 10px 0;
    text-align: center;

    &:last-child{
      border-bottom: none;
    }
  }
</style>
