<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input v-model="listQuery.phone" clearable class="filter-item" style="width: 160px;" placeholder="请输入用户手机" />
      <el-input v-model="listQuery.refHmOrderNo" clearable class="filter-item" style="width: 160px;" placeholder="请输入关联单据" />
      <el-input v-model="listQuery.serviceContractno" clearable class="filter-item" style="width: 160px;" placeholder="请输入权益卡号" />
      
        <el-select v-model="listQuery.channelId" style="width: 160px" class="filter-item" placeholder="请选择渠道" clearable>
        <el-option v-for="item in channels" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-select v-model="listQuery.status" clearable  style="width: 200px" class="filter-item" placeholder="请选择订单状态">
        <el-option v-for="(key, value) in statusMap" :key="key" :label="key" :value="value" />
      </el-select>
      <el-date-picker v-model="listQuery.timeArray" type="datetimerange" class="filter-item" range-separator="至" start-placeholder="下单开始日期" end-placeholder="下单结束日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd hh:mm:ss" />

      <el-button v-permission="['GET /admin/hmInterst/getPageList']" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
     <el-button v-permission="['GET /admin/hmInterst/syncInterst']"  class="filter-item" type="primary"  icon="el-icon-refresh"  @click="syncInterst">同步权益</el-button>
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>
      <el-table-column align="center" label="权益卡号" prop="serviceContractno" fixed="left" width="135" />
      <el-table-column align="center" label="关联单据" prop="refHmOrderNo"  width="160">
                 
               <template slot-scope="scope">
                   <el-button
              type="text"
              @click="goServiceorder(scope.row)"
            >{{scope.row.refHmOrderNo}}</el-button>
          </template>
       
      </el-table-column>

      <!-- <el-table-column align="center" label="付款单号" prop="paymentNo" /> -->
      <el-table-column align="center" label="门店" prop="shopName" />
      <el-table-column align="center" label="服务项" prop="itemName" />
      <el-table-column align="center" label="权益类型" prop="interestTypeName" />
      <el-table-column align="center" label="赠送目的" prop="useCodeName" />
      <el-table-column align="center" label="用户预期指定者" prop="selectedServantName" />
      <el-table-column align="center" label="未预约次数" prop="unBookTimes" />
      <el-table-column align="center" label="已用次数/总次数" prop="used" >
           <template slot-scope="scope">
          <span>{{scope.row.used}}/{{scope.row.total}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="用户姓名" prop="userName" /> 
      <el-table-column align="center" label="用户手机" prop="phone" /> 
      <el-table-column align="center" label="用户备注" prop="userRemark" /> 
      <el-table-column align="center" label="商户" prop="supplierName" /> 
      <el-table-column align="center" label="权益卡创建时间" prop="createTime" /> 
      <!-- <el-table-column align="center" label="状态" prop="statusName" />  -->
      <el-table-column align="center" label="状态" prop="status" >
        <template slot-scope="scope">
        {{ scope.row.status | orderStatusFilter }}
        </template>

      </el-table-column> 
        <el-table-column align="center" label="订单渠道" min-width="90" prop="orderChannel">
        <template slot-scope="scope">
          <el-tag type="success">
            {{
                scope.row.channelId | channelsFilter
                }}
          </el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" label="渠道id" prop="channelId" />  -->
      <el-table-column align="center" label="客户id" prop="customerId" /> 
      <el-table-column align="center" label="鲸致服务单号" prop="jzOrderId" /> 
      <!-- <el-table-column align="center" label="鲸致服务单号" prop="jzOrderBookid" />  -->





      <el-table-column align="center" label="操作" class-name="small-padding fixed-width" fixed="right" width="140">
        <template slot-scope="scope">
          <el-button v-permission="['GET /admin/hmInterst/cancelInterst']" type="text"  class="disable-cancel" icon="el-icon-delete" size="mini" @click="cancelInterst(scope.row)" :disabled="!scope.row.cancelFlag" >取消权益</el-button>
          <el-button v-permission="['GET /admin/hmInterst/syncInterst']" type="text"  icon="el-icon-refresh" size="mini" @click="syncInterst(scope.row)">同步权益</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />


  </div>
</template>

<script>
import {
  hmInterst,
  cancelInterst,
  syncInterst,
  
} from "@/api/order";
import { allChannel } from "@/api/channel";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import { formatDate } from "@/utils/date";
import { getToken } from "@/utils/auth";
import { getUserCity } from "@/api/city";
import { hmBenefitStatusMap } from "@/api/enumUtils";

let vm;

export default {
  name: "Order",
  components: { Pagination },
  filters: {
    orderStatusFilter(status) {
      return hmBenefitStatusMap[status];
    },
    channelsFilter(value) {
      const rs = vm.channels.filter((item) => {
        return item.id === value;
      });
      if (rs != null && rs.length > 0) {
        return rs[0].name;
      }
    },
  },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: true,
      city: [],
      listQuery: {
        page: 1,
        limit: 20,
        phone: "",
        timeArray: [],
        refHmOrderNo: "",
        status: '',
        channelId: "",
        serviceContractno:'',
        sort: "create_time",
        order: "desc",
      },
      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]);
            },
          },
        ],
      },
      channels: [],
      statusMap: hmBenefitStatusMap,
   
    
      importLoading: false,
      headers: { "Content-Type": "multipart/form-data" },
    };
  },
  computed: {},
  beforeCreate() {
    vm = this;
  },
  created() {
   allChannel().then((res) => {
      this.channels = res.data.data;
    });
    this.getList();
    // getUserCity().then((res) => {
    //   this.city = res.data.data;
    // });
  },
  methods: {
 
    cancelInterst(row){
       this.$confirm("确定取消权益?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            cancelInterst({id:row.id})
              .then((response) => {
                this.$notify.success({
                  title: "成功",
                  message: "操作成功",
                });
                this.getList();
              })
              .catch((response) => {
                this.$notify.error({
                  title: "失败",
                  message: response.data.errmsg,
                });
              });
          });
    },
    syncInterst(row){
       let params={};
      if(row){
        params={id:row.id}
      }
       const loading = this.$loading({
              lock: true,
              text: "同步中...",
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.5)",
            });
            syncInterst(params)
              .then((response) => {
                  loading.close();
                this.$notify.success({
                  title: "成功",
                  message: "同步成功",
                });
                this.getList();
              })
              .catch((response) => {
                  loading.close();
                this.$notify.error({
                  title: "失败",
                  message: response.data.errmsg,
                });
              });
      
        // this.$confirm("确定同步权益?", "提示", {
        //     confirmButtonText: "确定",
        //     cancelButtonText: "取消",
        //     type: "warning",
        //   }).then(() => {
           

        //   });
    },

   
    getList() {
      this.listLoading = true;
      if (this.listQuery.timeArray && this.listQuery.timeArray.length === 2) {
        this.listQuery.start = this.listQuery.timeArray[0];
        this.listQuery.end = this.listQuery.timeArray[1];
      } else {
        this.listQuery.start = null;
        this.listQuery.end = null;
      }

      hmInterst(this.listQuery)
        .then((response) => {
          this.list = response.data.data.list;
          this.total = response.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    cityFilter(address) {
      if (address) {
        if (address.indexOf("上海市") >= 0) return "上海市";
        if (address.indexOf("北京市") >= 0) return "北京市";
        if (address.indexOf("南京") >= 0) return "南京市";
        if (address.indexOf("深圳") >= 0) return "深圳市";
        if (address.indexOf("苏州") >= 0) return "苏州市";
        if (address.indexOf("无锡") >= 0) return "无锡市";
        if (address.indexOf("杭州") >= 0) return "杭州市";
        if (address.indexOf("宜昌") >= 0) return "宜昌市";
        if (address.indexOf("青岛") >= 0) return "青岛市";
        if (address.indexOf("成都") >= 0) return "成都市";
        if (address.indexOf("重庆") >= 0) return "重庆市";
        if (address.indexOf("广州") >= 0) return "广州市";
      }
      return "";
    },
    formatTime(time) {
      if (time == null || time === "") {
        return "";
      }
      const date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    goServiceorder(row){
         
      let orderSn=row.refHmOrderNo;
      this.$router.push({
                path: "/order/serviceorder", 
                query: {
                    orderSn: orderSn, 
                },
              
            });


    },
 
  
    
   
  },
};
</script>

<style>
.detail-container {
  width: 80%;
  padding: 20px 20px 20px 20px;
  margin: 20px auto;
}

.operate-container {
  background: #f2f6fc;
  height: 80px;
  margin: -20px -20px 0;
  line-height: 80px;
}

.operate-button-container {
  float: right;
  margin-right: 20px;
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #dcdfe6;
  border-top: 1px solid #dcdfe6;
}

.table-cell {
  height: 60px;
  line-height: 20px;
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  white-space: pre-wrap;
  /* overflow: hidden; */
}

.table-cell-title {
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  background: #f2f6fc;
  text-align: center;
  font-size: 14px;
  color: #303133;
}
.el-table th.gutter {
  display: table-cell !important;
}
.color-danger {
  color: #f56c6c;
  font-size: 18px;
}
.el-button--text.disable-cancel{
  color:red;
}
.disable-cancel:disabled{
  color:#C0C4CC;
}
</style>
