<template>
  <page-header-wrapper>
    <a-card v-if=" vdata.isShow">
      <JeepaySearchForm
        v-if="$access('ENT_UR_ROLE_SEARCH')"
        :searchConditionNum="6"
        :searchFunc="searchFunc"
        :resetFunc="() => { data.searchData= {} }"
      >
        <a-form-item label class="table-search-item">
          <JeepayDateRangePicker
            ref="dateRangePicker"
            v-model:value="data.searchData['queryDateRange']"
            customDateRangeType="dateTime"
          />
        </a-form-item>
        <jeepay-text-up
          v-model:value="data.searchData['sysUserId']"
          v-if="props.configMode != 'mch'"
          :placeholder="'商户名称/商户号 '"
        />
        <jeepay-text-up v-model:value="data.searchData['name']" :placeholder="'门店名称/编号'" />
        <jeepay-text-up v-model:value="data.searchData['ifCode']" :placeholder="'支付通道名称/编号'" />

        <jeepay-text-up v-model:value="data.searchData['name']" :placeholder="' 渠道名称/渠道号'" />
        <jeepay-text-up v-model:value="data.searchData['name']" :placeholder="'分账任务名称/ID'" />
      </JeepaySearchForm>

      <!-- 列表渲染 -->
      <JeepayTable
        ref="infoTable"
        :init-data="true"
        :req-table-data-func="reqTableDataFunc"
        :statisticsIsShow="false"
        :tableExportFunc="tableExportFunc"
        :table-columns="tableColumns"
        :search-data="data.searchData"
        row-key="sysUserId"
        @btnLoadClose="data.btnLoading=false"
      >
        <template #statistics>
          <div class="statistics-list">
            <div v-for="(item, index) in count" :key="index" class="item">
              <div v-if="item.type == 'line'" class="line" />
              <div class="title">{{ item.title }}</div>
              <div v-if="item.title" class="amount" :style="{color: item.textColor}">
                <span class="amount-num">{{ item.content }}</span>
              </div>
            </div>
          </div>
        </template>
        <template #topBtnSlot>
          <div>
            <a-button  type="primary"  class="mg-b-30"    @click="addFunc(2)"  >
              <plus-outlined />新建
            </a-button>
          </div>
        </template>
        <template #bodyCell="{column,record}">


          <template v-if="column.key == 'op'">
            <!-- 操作列插槽 -->
            <a-button  type="link" @click="addFunc(1,record)">修改</a-button>
            <a-button  type="link" style="color: red" @click="delFunc(record)">删除</a-button>
          </template>
        </template>
      </JeepayTable>
    </a-card>
  </page-header-wrapper>
  <SybProductTradeDivideAccountsInfoNewUserRecip ref="pageRender" ></SybProductTradeDivideAccountsInfoNewUserRecip>
</template>
      <script setup lang="ts">
      import {
        API_URL_MCH_APPLYMENT_LIST,
        req,
        $exportExcel,
        exportExcelUrl,
        API_URL_STATISTIC,
        API_MCH_PAY_DEFINES, API_URL_DIVISIONSUBJECT_DIVISION_SAVE, API_URL_DIVISIONSUBJECT_DIVISION_DIVPAGE
      } from "@/api/manage";
import { reactive, ref, getCurrentInstance, onMounted } from "vue";
import fileDownload from "js-file-download";

const props = defineProps({
  configMode: { type: String, default: "" } // 模式
});

const {
  $infoBox,
  $access,
  $hasAgentEnt
} = getCurrentInstance()!.appContext.config.globalProperties;
const ledgerGroupAdd = ref();

const tableColumns = reactive([
  { key: "isvName", title: "商户名称", dataIndex: "isvName" },
  { key: "mchFullName", title: "门店名称", dataIndex: "mchFullName" },
  { key: "mchNo", title: "门店编号", dataIndex: "mchNo" },
  { key: "ifCode", title: "支付通道", dataIndex: "ifCode" },
  { key: "isvNo", title: "所属渠道", dataIndex: "isvNo" },
  { key: "appName", title: "分账任务", dataIndex: "appName" },
  { key: "succResParameter",title: "分账详情", dataIndex: "succResParameter"},
  { key: 'op', title: '操作', width: '180px', fixed: 'right', align: 'center' }
]);

const infoTable = ref();
const pageRender = ref();
let data: any = reactive({
  tableColumns: tableColumns,
  searchData: { sysType: "PLATFORM" } as any,
  btnLoading: false,
  payDefines: [] as any
});

let count: any = ref([]); // 数据统计数组
const vdata = reactive({
  PlsC: "请选择支付通道",
  modeList: [
    { name: "按比例分账", value: 0 },
    { name: "按金额分账", value: 1 }
  ],
  typeList: [
    { name: "实时分账", value: 0 },
    { name: "延时分账", value: 1 }
    // { name: "秒到分账", value: 2 }
  ],
  idcard1Img: "",
  payDefines: [] as any,
  confirmLoading: false, // 显示确定按钮loading图标
  isAdd: true, // 新增 or 修改页面标识
  isShow: false, // 是否显示弹层/抽屉
  // saveObject: { autoDivisionFlag: 0, ifCode: "" ,divisionType:1,divisionMode:1,isSpecify:1} as any, // 数据对象
  allData: {
    divisionType: null,
    divisionMode: null,
    isSpecify: null,
    ifCode: ""
  },
  recordId: null, // 更新对象ID
  rules: {
    name: [{ required: true, message: "请输入组名称", trigger: "blur" }],
    ifCode: [{ required: true, message: "请选择所属渠道", trigger: "blur" }],
    divisionMode: [ { required: false, message: "请输入分账模式", trigger: "blur" }],
    divisionType: [ { required: true, message: "请输入分账类型", trigger: "blur" }],
    divisionAmount: [{ required: true, message: "请输入分账金额", trigger: "blur" }],
    minAmount: [{ required: true, message: "请输入最小支付金额", trigger: "blur" }],
    isSpecify: [{ required: true, message: "请指定指定设备", trigger: "blur" }],
    deviceInfo: [{ required: true, message: "请选择设备信息", trigger: "blur" }]
  }
});
function searchFunc () {
  infoTable.value.refTable(true)
}
// 请求table接口数据
function reqTableDataFunc(params) {
  reqTableCountFunc(params);
  return req.list(API_URL_DIVISIONSUBJECT_DIVISION_DIVPAGE, params);
}

function getIfCode() {
  console.log(data.searchData.ifCode, "saveObjectsaveObjectsaveObject");
}
//请求支付通道列表
function payFefines() {
  req.list(API_MCH_PAY_DEFINES, { pageSize: -1 }).then(res => {
    vdata.payDefines = res;
    vdata.isShow = true;
  });
}

function addFunc(e,record=null) {
  if (e == 1) {
    pageRender.value.pageRender(1,record);
  } else if (e == 2) {
    pageRender.value.pageRender(1);
  } else {
    console.log("未开启");
  }
}
function delFunc (recordId: any) {
  $infoBox.confirmDanger('确认删除？', '该操作将删除该条商户进件资料', () => {
    req.delById(API_URL_DIVISIONSUBJECT_DIVISION_SAVE, recordId).then((res: any) => {
      infoTable.value.refTable(true)
      $infoBox.message.success('删除成功')
    })
  })
}
function reqTableCountFunc(params: any) {
  params.method = "transaction";
  req.list(API_URL_STATISTIC + "/total", params).then(res => {
    count.value = [
      {
        title: "总成交金额",
        symbol: "add",
        textColor: "#1A66FF",
        content: (res.totalSuccAmt / 100).toFixed(2)
      },
      { type: "line" },
      { title: "总成交笔数", content: res.totalSuccNum },
      { type: "line" },
      {
        title: "总退款金额",
        symbol: "sub",
        content: (res.totalRefundAmt / 100).toFixed(2)
      },
      { type: "line" },
      { title: "总退款笔数", content: res.totalRefundNum }
    ];
  });
}

function tableExportFunc() {
  return $exportExcel(
    exportExcelUrl.statistic,
    Object.assign({}, data.searchData, {})
  )
    .then(res => {
      fileDownload(res.data, "商户统计.xlsx");
    })
    .catch(error => {
      console.log(error);
    });
}

onMounted(() => {
  payFefines();
});
</script>
    
    <style lang="less" >
.bott {
  margin: 50px;
  width: 40%;
  margin-left: 25%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .botwarn {
    background-color: #e01515;
    border: #e01515;
  }
}

.card-box-div {
  margin: 10px 0 20px 0;
  .div-top-title-tio1 {
    margin: 18px 0 0 20px;

    .div-top-title-tio-span {
      font-weight: 600;
      font-size: 17px;
    }
  }
  .upload {
    margin-left: 30px;
  }
}

.edit-box {
  padding: 20px 30px;
  margin-bottom: 20px;
}
</style>
      