<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--aliPaySigningOrder数据-->
      <el-col :span="20" :xs="24">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
          <el-form-item label="签约号" prop="outTradeNo">
            <el-input
              v-model="queryParams.outTradeNo"
              placeholder="请输入签约号"
              clearable
              style="width: 200px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="链接Id" prop="linkId">
            <el-input
              v-model="queryParams.linkId"
              placeholder="请输入链接Id"
              clearable
              style="width: 200px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item> 
          <el-form-item label="链接名字" prop="linkName">
            <el-input
              v-model="queryParams.linkName"
              placeholder="请输入链接名字"
              clearable
              style="width: 200px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input
              v-model="queryParams.mobile"
              placeholder="请输入手机号"
              clearable
              style="width: 200px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="订单状态" prop="status" label-width="80px">
        <el-select v-model="queryParams.status" placeholder="订单状态" clearable>
          <el-option
            v-for="item in status"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </el-form-item>

      <el-form-item label="订单时间">
            <el-date-picker
              v-model="dateTimeRangeOrder"
              style="width: 240px"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="订单开始时间"
              end-placeholder="订单结束时间"
            ></el-date-picker>
      </el-form-item>
      
       <el-form-item label="下次支付时间" label-width="100px">
            <el-date-picker
              v-model="dateTimeRangeNext"
              style="width: 240px"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="下次支付开始时间"
              end-placeholder="下次支付结束时间"
            ></el-date-picker>
      </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

        <el-table v-loading="loading" :data="aliPaySigningOrderList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="id" align="center" key="id" prop="id" v-if="columns[0].visible" />
          <el-table-column label="手机号" align="center" key="mobile" prop="mobile" v-if="columns[1].visible" width="150"/>
          <el-table-column label="订单创建时间" align="center" key="orderTime" prop="orderTime" v-if="columns[2].visible" width="150">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.orderTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="账户名称" align="center" key="aliAccountName" prop="aliAccountName" v-if="columns[3].visible" width="150"/>
          <el-table-column label="订单号" align="center" key="orderId" prop="orderId" v-if="columns[4].visible" width="210"/>
          <el-table-column label="支付宝签约号" align="center" key="signCode" prop="signCode" v-if="columns[5].visible" width="180"/>
          <el-table-column label="支付价格" align="center" key="price" prop="price" v-if="columns[6].visible" width="80"/>
          <el-table-column label="其他类型签约号" align="center" key="otherOrderId" prop="otherOrderId" v-if="columns[7].visible" width="210"/>
          <el-table-column label="用户支付宝唯一id" align="center" key="aliUserId" prop="aliUserId" v-if="columns[8].visible" width="150"/>
          <el-table-column label="退订时间" align="center" key="unsubTime" prop="unsubTime" v-if="columns[9].visible">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.unsubTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="业务类型" align="center" key="businessType" prop="businessType" v-if="columns[10].visible" :show-overflow-tooltip="true" width="100">
            <template slot-scope="scope">
              {{scope.row.status == '1' ? "权益类业务" :''}}
            </template>
          </el-table-column>
          <el-table-column label="链接Id" align="center" key="linkId" prop="linkId" v-if="columns[11].visible" :show-overflow-tooltip="true" width="100"/>
          <el-table-column label="链接名字" align="center" key="linkName" prop="linkName" v-if="columns[12].visible" :show-overflow-tooltip="true" />
          <el-table-column label="订单状态" align="center" key="status" prop="status" v-if="columns[13].visible" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              {{scope.row.status == '0' ? "失败" : scope.row.status == '1' ? "成功": scope.row.status == '2' ? "支付成功尚未回调":''}}
            </template>
          </el-table-column>
           <el-table-column label="下次续费时间" align="center" key="nextPayTime" prop="nextPayTime" v-if="columns[14].visible" width="150">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.nextPayTime) }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            align="center"
            width="160"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleCancel(scope.row)"
                v-hasPermi="['rights:aliPaySignOrder:edit']"
              >解约</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { listAliPaySigningOrder,aliPayUnSign } from "@/api/rights/aliPaySigningOrder";
import { addRightsDateRange } from "@/utils/ruoyi";

export default {
  name: "aliPaySigningOrder",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 阿里订单列表数据
      aliPaySigningOrderList: null,
      // 是否显示弹出层
      open: false,
      // 日期时间范围
      dateTimeRangeOrder: [],
      dateTimeRangeNext: [],
      //订单状态
      status: [
        { value:'0',label:'失败'},
        { value:'1',label:'成功'},
        { value:'2',label:'支付成功尚未回调'},
      ],
      // 表单参数
      form: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        outTradeNo: undefined,
        linkId: undefined,
        linkName: undefined,
        mobile: undefined,
        status: undefined,
        beginTime: undefined,
        endTime: undefined,
        beginSearchNextPayTime: undefined,
        endSearchNextPayTime: undefined
      },
      // 列信息
      columns: [
        { key: 0, label: `id`, visible: true },
        { key: 1, label: `手机号`, visible: true },
        { key: 2, label: `订单创建时间`, visible: true },
        { key: 3, label: `账户名称`, visible: true },
        { key: 4, label: `订单号`, visible: true },
        { key: 5, label: `支付宝签约号`, visible: true },
        { key: 6, label: `支付价格`, visible: true },
        { key: 7, label: `其他类型签约号`, visible: true },
        { key: 8, label: `用户支付宝唯一id`, visible: true },
        { key: 9, label: `退订时间`, visible: true },
        { key: 10, label: `业务类型`, visible: true },
        { key: 11, label: `链接Id`, visible: true },
        { key: 12, label: `链接名称`, visible: true },
        { key: 13, label: `订单状态`, visible: true },
        { key: 14, label: `下次续费时间`, visible: true }
      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询aliQPayOrder列表 */
    getList() {
      this.loading = true;
      listAliPaySigningOrder(this.addRightsDateRange(this.queryParams,this.dateTimeRangeOrder,this.dateTimeRangeNext)).then(response => {
          this.aliPaySigningOrderList = response.records;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateTimeRangeOrder = [];
      this.dateTimeRangeNext = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
      /** 解约按钮操作 */
      handleCancel(row) {
      this.$modal.confirm('确认要解约手机号为"' + row.mobile + '"的用户吗？').then(function() {
        let data = {
          orderId: row.orderId,
          mobile: row.mobile,
          accountName: row.aliAccountName
        }
        console.log('data',data)
        return aliPayUnSign(data);
      }).then(() => {
        this.$modal.msgSuccess("解约成功");
      }).catch(function() {
        
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
  }
};
</script>