<style>
  .page_iisMg ._nav {
    margin: 20px 0 0 0;
    background-color: #f5f5f5;
  }

  .page_iisMg ._nav li {
    float: left;
    font-size: 14px;
    color: #666666;
    padding: 15px 20px;
    cursor: pointer;
    position: relative;
    background-color: #f1f1f1;
    margin-right: 5px;
  }

  .page_iisMg ._nav li._active {
    background-color: #ffffff;
    color: #333333;
  }

  .page_iisMg ._nav li._active::after {
    content: "";
    width: 20px;
    height: 3px;
    background-color: #e95252;
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 38%;
  }

  .page_iisMg .query-box {
    padding-bottom: 0;
  }

  .page_iisMg .iis_info_box {
    padding-top: 15px;
  }

  .page_iisMg .el-date-editor .el-range-separator {
    width: 9% !important;
  }

  .page_iisMg td span.status_Application {
    color: #409EFF;
  }

  .page_iisMg td span.status_Cancle {
    color: #909399;
  }

  .page_iisMg td span.status_Passed {
    color: #67C23A;
  }

  .page_iisMg td span.status_Rejected {
    color: #F56C6C;
  }

  .page_iisMg td span.status_owe {
    color: #E6A23C;
  }

  .page_iisMg td span.status_Recover {
    color: #67C23A;
  }

  .page_iisMg .cursorpointer {
    text-decoration: underline;
  }

  .page_iisMg ._icon_btn i {
    width: 30px;
    height: 30px;
    display: inline-block;
    color: white !important;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    margin-right: 10px;
    cursor: pointer;
    outline: none;
  }

  .page_iisMg ._icon_btn i.icon-ico_commodity_defaul {
    background-color: #F16C3C;
  }

  .page_iisMg ._icon_btn i.icon-ico_commodity_defaul:hover {
    background-color: #e87c54
  }

  .page_iisMg ._icon_btn i.icon-ico_commodity_defaul:active {
    background-color: #f76630
  }

  .page_iisMg ._icon_btn i.icon-quxiao1 {
    background-color: #E95252;
  }

  .page_iisMg ._icon_btn i.icon-quxiao1:hover {
    background-color: #ea6d6d
  }

  .page_iisMg ._icon_btn i.icon-quxiao1:active {
    background-color: #e42d2d
  }

  .page_iisMg ._icon_btn i.icon-sousuo {
    background-color: #47BF8C;
  }

  .page_iisMg ._icon_btn i.icon-sousuo:hover {
    background-color: #66bb97
  }

  .page_iisMg ._icon_btn i.icon-sousuo:active {
    background-color: #35ab79
  }

  ._zhuihui {
    display: inline-block;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    color: white;
    background-color: #e42d2d;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    margin-right: 10px
  }

  ._zhuihui.xiugai {
    background-color: #409EFF;
  }

  .Shopping_bossdialog ._addUpload_box {
    display: initial;
    margin-top: 20px;
    width: 138px !important;
  }

  .Shopping_bossdialog ._addUpload_box>div {
    float: left;
    width: 138px;
    height: 92px;

    border-radius: 2px;
    cursor: pointer;
    padding: 5px;
    margin: 0 10px 10px 0;
    position: relative;
  }

  .Shopping_bossdialog ._addUpload_box .icon-guanbi1 {
    font-size: 12px;
    color: white;
    display: inline-block;
    margin-left: 15px;
    position: absolute;
    right: -6px;
    top: -9px;
    background-color: #f56c6c;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    text-align: center;
    line-height: 20px;
  }

  .Shopping_bossdialog ._addUpload_box .icon-guanbi1:hover {
    font-size: 12px;
    color: #c94052;
  }

  .Shopping_bossdialog ._pic_upload .el-upload-dragger {
    width: 100px !important;
    height: 50px !important;
  }

  .PQ_detail {
    width: 100%;
    border-collapse: collapse;
  }

  .PQ_detail tr th,
  .v-table-title-cell {
    background: #e6e6e6;
    height: 40px;
    font-size: 14px;
    border-right: 1px solid #e6e6e6;
    color: #333;
  }

  .PQ_detail tr {
    background: #fff;
    text-align: center;
    height: 40px;
  }

  .PQ_detail tr td {
    font-size: 12px;
    border: 1px solid #e5e5e5;
  }

</style>
<template>
  <div class="page_iisMg">
    <div class="query-box">
      <div @keyup.enter="resetPageIndex()">
        <el-form class="iis_info_box clearfix" label-width="110px">
          <el-row>
            <el-col :span="4" :gutter="35">
              <el-form-item label="关键字">
                <el-input placeholder="请输入订单编号/商品名称" v-model="msg.order_id"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" :gutter="35">
              <el-form-item label="订单状态">
                <el-select v-model="msg.order_status" filterable :placeholder="$t('pub.pleaseSel')">
                  <el-option v-for="(item, index) in order_statusList" :label="item.Name" :value="item.Id"
                    :key="index+2000">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4" :gutter="35">
              <el-form-item label="操作人员">
                <el-select v-model="msg.QUpdateBy" filterable :placeholder="$t('system.ph_in')" clearable>
                  <el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
                  <el-option v-for="item in EmployeeList" :label="item.EmName" :value="item.EmployeeId"
                    :key="item.EmployeeId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" :gutter="35">
              <el-form-item label="支付日期">
                <el-date-picker class="h34" @change="timeAdd" v-model="productionDate" type="daterange"
                  value-format="yyyy-MM-dd" :range-separator="$t('restaurant.res_To')"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <ul>
        <li>
          <button class="hollowFixedBtn" @click="resetPageIndex()">{{$t('pub.searchBtn')}}</button>
        </li>
      </ul>
    </div>
    <table class="singeRowTable" style="border:1px solid #E6E6E6;" cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <th{{$t('hotel.order_Number')}}/th>
          <th>{{$t('MarketingActi.commName')}}</th>
          <th>{{$t('restaurant.res_ContactNumber')}}</th>
          <th>订单类型</th>
          <th>原始金额</th>
          <th>支付金额</th>
          <th>订单实收</th>
          <th>{{$t('hotel.hotel_OrderStates')}}</th>
          <th>支付时间</th>
          <th>退款金额</th>
          <th>退款时间</th>
          <th>跟单人员</th>
          <th>跟单记录</th>
          <th>{{$t('system.table_operation')}}</th>
        </tr>
      </thead>
      <tbody v-loading="loading">
        <tr v-for="(item, index) in dataList" :key="index+10000">
          <td>{{item.order_id}}</td>
          <td>{{item.sku_name}}</td>
          <td>
            {{item.contacts_phone}}
          </td>
          <td>
            <!-- 订单类型(订单类型，21-团购，31-预售，41、90-外卖，51、70-次卡，60-券交易) -->
            <span v-if="item.order_type==21">团购</span>
            <span v-else-if="item.order_type==31">预售</span>
            <span v-else-if="item.order_type==41||tem.order_type==90">外卖</span>
            <span v-else-if="item.order_type==51||tem.order_type==70">次卡</span>
            <span v-else-if="item.order_type==60">券交易</span>
            <span v-else></span>
          </td>
          <td>{{item.original_amount | priceFormat(item.original_amount)}}</td>
          <td>{{item.pay_amount | priceFormat(item.pay_amount) }}</td>
          <td>{{item.receipt_amount| priceFormat(item.receipt_amount)}}</td>
          <td><span v-if="item.order_status==100">待支付</span>
            <span v-else-if="item.order_status==101">支付取消</span>
            <span v-else-if="item.order_status==200">已支付</span>
            <span v-else-if="item.order_status==201">待使用</span>
            <span v-else-if="item.order_status==1">已完成</span>
            <span v-else></span>
          </td>
          <td>{{item.pay_time}} </td>
          <td>
            <span v-if="item.refund_amount>0">{{item.refund_amount | priceFormat(item.refund_amount) }}</span>
          </td>
          <td>
            <span v-if="item.refund_amount>0">{{item.refund_time}}</span>
          </td>
          <td>
            <template v-if="item.UpdateBy>0">
              <template v-if="item.UpdateByPhoto">
                <img v-if="item.UpdateByPhoto" :src="item.UpdateByPhoto" alt>
                <img v-else src="../../assets/img/default_head_img.jpg" alt>
              </template>
              {{item.UpdateByName}}
            </template>
          </td>
          <td>
            <el-popover width="500" trigger="click">
              <template v-if="item.OperateContent&&item.OperateContent.length>0">
                <table class="PQ_detail">
                  <tr v-for="(subItem, subIndex) in item.OperateContent" v-loading="loading" :key="subIndex+1000">
                    <td style="width:150px;">{{subItem.Name}}</td>
                    <td style="text-align:left;padding-left:10px;">
                      <template v-if="subItem.Code==1">
                        {{ subItem.Content  }}
                      </template>
                      <template v-if="subItem.Code==2">
                        <template v-if="subItem.ContentList&&subItem.ContentList.length>0">
                          <template v-for="(tItem,tIndex) in subItem.ContentList">
                            <font style="padding-right:5px;">{{tItem}}</font>
                          </template>
                        </template>
                      </template>
                      <template v-if="subItem.Code==3">
                        {{ subItem.Content  }}
                      </template>
                      <template v-if="subItem.Code==4">
                        {{ subItem.Content  }}
                      </template>
                      <template v-if="subItem.Code==5">
                        {{ subItem.Content  }}
                        <template v-if="subItem.FileList&&subItem.FileList.length>0">
                          <br />
                          <template v-for="(tItem,tIndex) in subItem.FileList">
                            <el-tooltip class="item" effect="dark" content="点击查看图片" placement="top">
                              <img :src="tItem" style="width:100px;height:100px;padding-right:5px;cursor:pointer;"
                                @click="showImg(subItem.FileList)" />
                            </el-tooltip>
                          </template>
                        </template>
                      </template>
                    </td>
                  </tr>
                </table>
              </template>
              <span slot="reference" class="price"
                style="text-decoration: underline;cursor: pointer;">{{item.UpdateDate}}</span>
            </el-popover>
          </td>
          <td class="_icon_btn" style="text-align: left;padding-left: 20px">
            <el-tooltip class="item" effect="dark" content="设置跟单人员" placement="top">
              <i class="iconfont icon-ico_shezhi" style="background-color: #33B3FF !important; border-color: #33B3FF"
                @click="showDYOrderEmpDig(item)"></i>
            </el-tooltip>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="noDataNotice" v-if="dataList.length<1"><i class="iconfont icon-kong"></i>
      <p>没有找到你需要的数据</p>
    </div>
    <div v-if="dataList.length>0">
      <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
        layout="total,prev, pager, next, jumper" :page-size='msg.pageSize' :total='total'>
      </el-pagination>
    </div>
    <el-dialog custom-class="w500" title="分配销售人员" :visible.sync="isShowSellDig">
      <div style="padding-bottom:20px">
        <el-form label-width="120px">
          <el-row>
            <el-col :span="24" :gutter="35">
              <el-form-item label="选择业务员">
                <el-select v-model="postMsg.EmpId" filterable :placeholder="$t('system.ph_in')" clearable>
                  <el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
                  <el-option v-for="item in EmployeeList" :label="item.EmName" :value="item.EmployeeId"
                    :key="item.EmployeeId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 20px;">
            <el-col :span="24" style="text-align: right;">
              <input type="button" class="normalBtn" :value="$t('restaurant.res_confirm')" @click="SetDYOrderEmp()" />
              <input type="button" class="hollowFixedBtn" :value="$t('pub.closeSel')"
                @click="isShowSellDig = false,postMsg.Id=0,postMsg.EmpId=0" />
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-dialog>
    <viewer :images="images" :options='imageOptions' @inited="inited" class="viewer" ref="viewer">
      <img v-for="src in images" :src="src" :key="src">
    </viewer>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        imageOptions: {
          navbar: false,
          title: false
        },
        images: [], //图片预览
        msg: {
          order_id: '',
          sDate: '',
          eDate: '',
          order_status: 0,
          pageIndex: 1,
          pageSize: 10,
          QUpdateBy: 0,
        },
        productionDate: [],
        dataList: [],
        loading: false,
        isShowSellDig: false, //是否显示分配销售人员
        currentPage: 0,
        total: 0,
        order_statusList: [{
          Id: 0,
          Name: this.$t('pub.unlimitedSel')
        }, {
          Id: 100,
          Name: '待支付'
        }, {
          Id: 101,
          Name: '支付取消'
        }, {
          Id: 200,
          Name: '已支付'
        }, {
          Id: 201,
          Name: '待使用'
        }, {
          Id: 1,
          Name: '已完成'
        }],
        EmployeeList: [], //票务销售列表
        postMsg: {
          Id: 0,
          EmpId: 0,
        }
      };
    },
    filters: {
      priceFormat(value) {
        if (value == null) {
          return 0.0;
        }
        let nStr = value.toFixed(2);
        nStr += "";
        let x = nStr.split(".");
        let x1 = x[0];
        let x2 = x.length > 1 ? "." + x[1] : "";
        var rgx = /(\d+)(\d{3})/;
        while (rgx.test(x1)) {
          x1 = x1.replace(rgx, "$1" + "," + "$2");
        }
        return x1 + x2;
      },
    },
    methods: {
      //设置抖音订单跟单人员
      SetDYOrderEmp() {
        if (this.postMsg.EmpId <= 0) {
          this.Error("请选择人员!");
          return;
        }
        this.apipost('douyin_SetDouYinMainOrderUpdateBy', this.postMsg, res => {
          if (res.data.resultCode == 1) {
            this.isShowSellDig = false;
            this.getPageList()
          }
        })
      },
      //显示设置销售人员弹窗
      showDYOrderEmpDig(item) {
        this.postMsg.Id = item.Id;
        this.postMsg.EmpId = 0;
        this.isShowSellDig = true;
      },
      //初始化图片查看器
      inited(viewer) {
        this.$viewer = viewer
      },
      //显示图片预览
      showImg: function (imgArray) {
        this.images = [];
        if (imgArray && imgArray.length > 0) {
          this.images = imgArray;
        }
        this.$viewer.show()
      },
      //日期选择
      timeAdd: function () {
        if (!this.productionDate) {
          this.msg.sDate = "";
          this.msg.eDate = "";
          return;
        }
        this.msg.sDate = this.productionDate[0];
        this.msg.eDate = this.productionDate[1];
      },
      getPageList: function () {
        this.loading = true
        this.apipost('douyin_post_GetPageList', this.msg, res => {
          this.loading = false
          if (res.data.resultCode == 1) {
            this.total = res.data.data.count;
            this.dataList = res.data.data.pageData
          }
        }, null)
      },
      handleCurrentChange: function (val) { //翻页
        this.msg.pageIndex = val;
        this.getPageList();
      },
      resetPageIndex: function () { // 重置页码
        this.msg.pageIndex = 1;
        this.currentPage = 1;
        this.getPageList()
      },
      //获取票务人员列表
      getPiaoWuEmp() {
        this.apipost(
          "admin_get_GetEmployeeByUserDepartmentId", {
            IsGetTicket: 1
          },
          res => {
            if (res.data.resultCode == 1) {
              this.EmployeeList = res.data.data;
            }
          });
      }
    },
    mounted() {
      this.getPiaoWuEmp();
      this.getPageList();
    }
  };

</script>
