<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;
  }

  .page_iisMg .nav_Main {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .page_iisMg .nav_IconContent {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .page_iisMg .nav_IconContent div>div {
    display: inline-block;
  }

  .page_iisMg .colapp-image {
    background-size: cover;
    background-position: center center;
    width: 100px;
    height: 100px;
    border-radius: 0%;
  }

  .page_iisMg .delBtn {
    position: absolute;
    right: -8px;
    top: -8px;
    padding: 4px 4px !important;
  }

  .page_iisMg .add-image-btn {
    width: 100px;
    height: 100px;
    line-height: 100px;
    color: #419efb;
    border: 1px solid #e2e2e2;
    cursor: pointer;
    text-align: center;
  }

</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="$t('salesModule.keyWords')">
                <el-input :placeholder="$t('objFill.v101.qingsddbhspminc')" v-model="msg.order_id"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" :gutter="35">
              <el-form-item :label="$t('hotel.hotel_OrderStates')">
                <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="8" :gutter="35">
              <el-form-item :label="$t('objFill.zfrq')">
                <!-- <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> -->
                  <StartDateLimit :clearable="false" :dateTime="productionDate" @change="(startDate,endDate)=>{productionDate=[startDate,endDate],timeAdd()}"></StartDateLimit>
                </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>{{$t('active.cl_orderType')}}</th>
          <th>{{$t('objFill.v101.yuanhsijine')}}</th>
          <th>{{$t('objFill.v101.zhifujine')}}</th>
          <th>{{$t('objFill.v101.dindanshis')}}</th>
          <th>{{$t('hotel.hotel_OrderStates')}}</th>
          <th>{{$t('objFill.zhifushij')}}</th>
          <th>{{$t('objFill.tkjine')}}</th>
          <th>{{$t('objFill.v101.tuikuansj')}}</th>
          <th>{{$t('objFill.v101.gendanreny')}}</th>
          <th>{{$t('objFill.v101.gendanjilv')}}</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">{{$t('objFill.v101.tuangou')}}</span>
            <span v-else-if="item.order_type==31">{{$t('objFill.v101.yushou')}}</span>
            <span v-else-if="item.order_type==41||tem.order_type==90">{{$t('objFill.v101.waimai')}}</span>
            <span v-else-if="item.order_type==51||tem.order_type==70">{{$t('objFill.v101.Rest.cikai')}}</span>
            <span v-else-if="item.order_type==60">{{$t('objFill.v101.quanjiaoyi')}}</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">{{$t('objFill.v101.Rest.daizhifu')}}</span>
            <span v-else-if="item.order_status==101">{{$t('objFill.v101.zhifuquxiao')}}</span>
            <span v-else-if="item.order_status==200">{{$t('objFill.v101.Rest.yizhifu')}}</span>
            <span v-else-if="item.order_status==201">{{$t('objFill.v101.daishiyong')}}</span>
            <span v-else-if="item.order_status==1">{{$t('leader.leader_HasCompleted')}}</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 />
                          <font>{{$t('objFill.fj')}}</font>
                          <br />
                          <template v-for="(tItem,tIndex) in subItem.FileList">
                            <el-tooltip class="item" effect="dark" :content="$t('objFill.v101.dianjicktp')" 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="$t('objFill.v101.gengxddxxi')" placement="top">
              <i class="iconfont icon-Edit" style="background-color: #33B3FF !important; border-color: #33B3FF"
                @click="setStatus(item)"></i>
            </el-tooltip>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="noDataNotice" v-if="dataList.length<1"><i class="iconfont icon-kong"></i>
      <p>{{$t('active.ld_noData')}}</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="$t('objFill.v101.biaojiddxxi')" :visible.sync="isShowStatus">
      <div style="padding-bottom:20px">
        <el-form label-width="100px">
          <el-row>
            <template v-if="UpdateApply.OperateContentList&&UpdateApply.OperateContentList.length>0">
              <el-col :span="24" :gutter="35" :key="indexo" v-for="(itemo, indexo) in UpdateApply.OperateContentList"
                v-loading="loading">
                <el-form-item :label="itemo.Name">
                  <!--单选-->
                  <template v-if="itemo.Code=='1'">
                    <template v-for="(subItem,subIndex) in itemo.OptionList">
                      <el-radio v-model="itemo.Content" :label="subItem.Name" :key="subIndex+10000">{{subItem.Name}}
                      </el-radio>
                    </template>
                  </template>
                  <!--多选-->
                  <template v-if="itemo.Code=='2'">
                    <el-checkbox-group v-model="itemo.ContentList">
                      <el-checkbox v-for="(subItem,subIndex) in itemo.OptionList" :label="subItem.Name"
                        :key="subIndex+20000">{{subItem.Name}}</el-checkbox>
                    </el-checkbox-group>
                  </template>
                  <!--下拉列表-->
                  <template v-if="itemo.Code=='3'">
                    <el-select v-model="itemo.Content">
                      <el-option v-for="(subItem,subIndex) in itemo.OptionList" :key="subIndex+30000"
                        :label="subItem.Name" :value="subItem.Name">
                      </el-option>
                    </el-select>
                  </template>
                  <!--文本-->
                  <template v-if="itemo.Code=='4'">
                    <el-input v-model="itemo.Content" style="width:90%;"></el-input>
                  </template>
                  <!--图文-->
                  <template v-if="itemo.Code=='5'">
                    <el-input v-model="itemo.Content" type="textarea" style="width:90%;"></el-input>
                    <div class="nav_Main">
                      <div class="nav_IconContent">

                        <div v-for="(sItem, sindex) in itemo.FileList" :key="sindex+'2'"
                          style="margin-right: 20px; position: relative; ">
                          <div class="colapp-image" :style="{
                                  backgroundImage: 'url(' + sItem + ')'
                                }"></div>
                          <el-button @click="delImg(itemo,sindex)" class="delBtn" type="danger" icon="el-icon-close"
                            circle>
                          </el-button>
                        </div>
                      </div>
                      <div v-if="itemo.FileList.length<9" class="add-image-btn">
                        <el-upload :http-request="UploadAttachment" :multiple="true" ref="my-upload"
                          accept="image/jpeg,image/gif,image/png,image/bmp" :show-file-list="false" action="">
                          <i class="el-icon-plus" @click="getClickItem(itemo)"></i>
                        </el-upload>
                      </div>
                    </div>
                  </template>
                </el-form-item>
              </el-col>
            </template>
          </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="updateStatus()" />
              <input type="button" class="hollowFixedBtn" :value="$t('pub.closeSel')"
                @click="isShowStatus = false,UpdateApply.Id=0,UpdateApply.OperateContentList=[]" />
            </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>
  import StartDateLimit from '../public/StartDateLimit.vue';
  export default {
    components: {StartDateLimit},
    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,
        isShowStatus: false,
        isShowSellDig: false, //是否显示分配销售人员
        AllOperateContentList: [],
        currentPage: 0,
        total: 0,
        UpdateApply: {
          OperateContentList: [],
          Id: 0,
        },
        order_statusList: [{
          Id: 0,
          Name: this.$t('pub.unlimitedSel')
        }, {
          Id: 100,
          Name: this.$t('objFill.v101.Rest.daizhifu')
        }, {
          Id: 101,
          Name: this.$t('objFill.v101.zhifuquxiao')
        }, {
          Id: 200,
          Name: this.$t('objFill.v101.Rest.yizhifu')
        }, {
          Id: 201,
          Name: this.$t('objFill.v101.daishiyong')
        }, {
          Id: 1,
          Name: this.$t('leader.leader_HasCompleted')
        }],
        currentObj: {},
        EmployeeList: [], //票务销售列表
        currentUserInfo: {},
      };
    },
    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: {
      GetSupperOrderEditAuth() {
        var actionCode = this.$AuthCode.isQueryHistoryData;
        this.CheckUserAuth(actionCode, res => {
          if (res.data.resultCode == 1 && res.data.data == 1) {

          }else {
            let StartDate = this.getBeforeDate(31, new Date().Format("yyyy-MM-dd"))
            let EndDate = this.getBeforeDate(-1, new Date().Format("yyyy-MM-dd"))
            this.productionDate = [StartDate, EndDate]
            this.msg.sDate = this.productionDate[0];
            this.msg.eDate = this.productionDate[1];
          }
        });

      },
      delImg(item, index) {
        item.FileList.splice(index, 1);
      },
      //初始化图片查看器
      inited(viewer) {
        this.$viewer = viewer
      },
      //显示图片预览
      showImg: function (imgArray) {
        this.images = [];
        if (imgArray && imgArray.length > 0) {
          this.images = imgArray;
        }
        this.$viewer.show()
      },
      getClickItem(item) {
        this.currentObj = item;
      },
      //上传图片
      UploadAttachment(file) {
        let newArr = [];
        newArr.push(file.file);
        var path = "/Upload/DouYin/";
        this.UploadSelfFileT(path, newArr, x => {
          var imgUrl = this.domainManager().ViittoFileUrl + x.data.FilePath;
          this.currentObj.FileList.push(imgUrl);
        });
      },
      // 删除上传文件
      deleteUploadFile(i) {
        this.UpdateApply.OperateContentList.splice(i, 1);
      },
      setStatus: function (item) {
        this.UpdateApply.Id = item.Id;
        this.UpdateApply.OperateContentList = [];
        if (item.OperateContent && item.OperateContent.length > 0) {
          this.UpdateApply.OperateContentList = JSON.parse(JSON.stringify(item.OperateContent));
          this.UpdateApply.OperateContentList.forEach(sItem => {
            var cObj = this.AllOperateContentList.find(qitem => {
              return qitem.Name === sItem.Name;
            });
            if (cObj && cObj.OptionList) {
              sItem.OptionList = cObj.OptionList;
            }
          });
        } else {
          this.AllOperateContentList.forEach(sItem => {
            this.UpdateApply.OperateContentList.push({
              Name: sItem.Name,
              Code: sItem.Code,
              OptionList: sItem.OptionList,
              Content: '', //操作内容
              ContentList: [], //多选列表
              FileList: [], //文件列表
            });
          });
        }
        this.isShowStatus = true;
      },
      //更新订单信息
      updateStatus() {
        this.$confirm(this.$t('objFill.v101.querbjdddxxizq'), this.$t('tips.tips'), {
          confirmButtonText: this.$t('restaurant.res_confirm'),
          cancelButtonText: this.$t('pub.cancelBtn'),
          type: 'warning'
        }).then(() => {
          this.apipost('douyin_post_SetDouYinMainOrder', this.UpdateApply, res => {
            if (res.data.resultCode == 1) {
              this.UpdateApply.OperateContentList = [];
              this.UpdateApply.Id = 0;
              this.isShowStatus = false;
              this.getPageList()
            }
          }, null)
        }).catch(() => {});
      },
      getAllOperateContentList: function () {
        this.apipost('dict_post_GetDouYinConfigList', {
          Key: 'DouYin_MainOrder'
        }, res => {
          this.loading = false
          if (res.data.resultCode == 1) {
            this.AllOperateContentList = res.data.data;
          }
        })
      },
      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.GetSupperOrderEditAuth()
      this.currentUserInfo = this.getLocalStorage();
      this.msg.QUpdateBy = this.currentUserInfo.EmployeeId;
      this.getPiaoWuEmp();
      this.getAllOperateContentList();
      this.getPageList();
    }
  };

</script>
