<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input v-model="listQuery.phoneNumber" clearable class="filter-item" style="width: 200px" placeholder="客户电话" />
      <el-input v-model="listQuery.jzOrderSn" clearable class="filter-item" style="width: 200px" placeholder="鲸致订单号" />
      <el-input v-model="listQuery.orderId" clearable class="filter-item" style="width: 200px" placeholder="支付宝订单号" />
      <el-input v-model="listQuery.jzDetailId" clearable class="filter-item" style="width: 200px"
        placeholder="核销服务工单id" />
      <el-date-picker v-model="timeArray" type="datetimerange" class="filter-item" style="width:320px"
        range-separator="至" start-placeholder="订单创建时间" end-placeholder="创建结束日期" :picker-options="{}"
        value-format="yyyy-MM-dd HH:mm:ss" />


      <el-button v-permission="['GET /admin/zfbOrderVocher/list']" class="filter-item" type="primary"
        icon="el-icon-search" @click="getList()">查找
      </el-button>
      <!-- <el-button v-permission="['POST /admin/kstalent/addNewTalent']" class="filter-item" type="primary"
        icon="el-icon-edit" @click="addTalent">添加达人
      </el-button>
      <el-button v-permission="['GET /admin/kstalent/talentList']" class="filter-item" type="primary"
        icon="el-icon-download" @click="handleFilter(true)">下载
      </el-button>
      <el-button v-permission="['POST /admin/kstalent/batchAdd']" class="filter-item" type="primary" icon="el-icon-upload"
        @click="importVisible = true">批量导入
      </el-button> -->
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>
      <el-table-column align="center" label="鲸致订单id" prop="jzOrderId"  fixed   />
      <el-table-column align="center" label="鲸致订单编号" prop="jzOrderSn" width="200px"  >
        <template slot-scope="scope">
          <el-button type="text" @click="toOrderList(scope.row.jzOrderSn)">{{ scope.row.jzOrderSn }}</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="支付宝订单号" prop="orderId"  />
      <el-table-column align="center" label="手机号" prop="phoneNumber" />
      <el-table-column align="center" label="凭证id" prop="voucherId" />

      <el-table-column align="center" label="创建时间" prop="createTime" />
      <el-table-column align="center" label="核销门店id" prop="shopId" />
      <el-table-column align="center" label="核销工单id" prop="jzDetailId" />

      <el-table-column align="center" label="核销状态" prop="isSuccess">
        <template slot-scope="scope">
          <span v-if="scope.row.verifyDatetime !=null ">
          <el-tag :type="scope.row.isSuccess ? 'warning' : ''">{{ scope.row.isSuccess && scope.row.isSuccess ? '成功' : '失败'
            }}</el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="核销时间" prop="verifyDatetime" />

      <el-table-column align="center" label="操作" width="150">
        <template slot-scope="scope">

          <el-button v-permission="['POST /admin/zfbOrderVocher/verify']" v-if="!scope.row.isSuccess" type="text" icon="el-icon-edit" size="mini"
            @click="handleUpdate(scope.row)">核销</el-button>
        </template>
      </el-table-column>
    </el-table>

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


    <!-- 核销 -->
      <el-dialog :visible.sync="addVisible" title="核销" width="650px">
      <el-form ref="addForm"  :model="addForm" status-icon label-position="left" label-width="100px"
        style="width:400px; margin-left:50px;">
        <el-form-item label="鲸致订单id" prop="jzOrderId">
          <el-input v-model="addForm.jzOrderId" readonly style="width:100%" />
        </el-form-item>
        <el-form-item label="服务工单" prop="bookDetailId">
          <el-input v-model="addForm.bookDetailId" placeholder="请输入服务工单id"  style="width:100%" />
        </el-form-item>
       <row>注意：输入的服务工单需已经服务完成，且用户有预约使用（需拿到用户加密券编码）</row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取消</el-button>
        <el-button type="primary"   @click="handleRealUpdate()">确定</el-button>
      </div>
    </el-dialog>



  </div>
</template>

<script>
import {  list,verify} from "@/api/zfb";
import Pagination from "@/components/Pagination";

let vm;
export default {
  name: "ksTalent",
  components: { Pagination },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        pageNum: 1,
        pageSize: 20,

        phoneNumber:'',
        jzOrderSn:'',
        orderId:'',
        jzDetailId:''
      },
      timeArray: [],
      addVisible:false,
      addForm:{
        jzOrderId:'',
        bookDetailId:'',
      }
    };
  },
  created() {
   this.getList();
  },
  methods: {
    toOrderList(jzOrderSn) {
      this.$router.push({ path: "/order/order", query: { orderSn: jzOrderSn } });
    },
    handleUpdate(row){
      this.addVisible=true;
      this.addForm.jzDetailId='';
      this.addForm.jzOrderId=row.jzOrderId;
    },
    handleRealUpdate(){
      verify(this.addForm)
          .then((res) => {

            this.$notify.success({
              title: "成功",
              message: "核销成功",
            });
           this.addVisible=false;
           this.getList();
          })
          .catch((response) => {
            this.$notify.error({
              title: "失败",
              message: response.data.errmsg,
            });
          });
    },
    getList() {
      this.listLoading = true;
      if (this.timeArray && this.timeArray.length === 2) {
        this.listQuery.start = this.timeArray[0];
        this.listQuery.end = this.timeArray[1];
      } else {
        this.listQuery.start = null;
        this.listQuery.end = null;
      }


      list(this.listQuery)
        .then((response) => {
          this.listLoading = false;
          console.info("查询")
          this.list = response.data.data.list;
          this.total = response.data.data.total;
          this.listLoading = false;
        })
        .catch((res) => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });

    },

  },


};
</script>
<style scoped>
.el-form-item {
  margin-bottom: 18px;
}
</style>
