<template>
  <div class="index-container height-100">
    <div class="row items-center justify-between fl-pb-md">
      <div v-if="state.DepartmentName">{{ state.DepartmentName }}</div>
      <div class="my-search row item-center">
        <a-input
          v-model:value="state.defaultKey"
          placeholder="请输入搜索词"
          allow-clear
          class="search-input"
          @pressEnter="handleSearch"
        >
          <template #prefix>
            <img src="@/assets/image/icon/search.png" class="icon" />
          </template>
        </a-input>
        <a-button
          class="search-btn"
          @click="handleSearch"
          :loading="state.btnLoading"
          >搜索</a-button
        >
      </div>
      <div class="row fl-mt-sm">
        <fl-form-item
          v-if="state.pageType === 'confirm'"
          style="width: 250px"
          placeholder="开始时间"
          type="date"
          field="StartDate"
          :val="state.searchData.StartDate"
          @triggerValChange="handleValChange"
        />

        <fl-form-item
          v-if="state.pageType === 'confirm'"
          style="width: 250px"
          placeholder="结束时间"
          type="date"
          field="EndDate"
          :val="state.searchData.EndDate"
          @triggerValChange="handleValChange"
        />

        <a-button
          type="origin"
          shape="round"
          class="fl-mx-xs"
          @click="handleClick('weekreport')"
        >
          周报</a-button
        >
        <a-button
          v-if="state.pageType === 'unConfirm'"
          type="primary"
          shape="round"
          class="fl-mx-xs"
          @click="state.pageType = 'confirm'"
        >
          查看已确认</a-button
        >
        <a-badge
          v-if="state.pageType === 'confirm' && state.unConfirmData.length > 0"
          dot
        >
          <a-button
            type="primary"
            shape="round"
            class="fl-mx-xs"
            @click="handleUnConfirm"
          >
            查看未确认</a-button
          >
        </a-badge>
        <a-button
          v-else-if="state.pageType === 'confirm'"
          type="primary"
          shape="round"
          class="fl-mx-xs"
          @click="handleUnConfirm"
        >
          查看未确认</a-button
        >
      </div>
    </div>

    <div
      v-if="state.pageType === 'unConfirm'"
      style="max-height: 80vh"
      class="overflow-auto"
    >
      <div
        v-for="(row, rowIdx) in state.unConfirmData"
        :key="rowIdx"
        class="fl-mb-md color-white row items-center fl-pb-xs"
        style="min-height: 40px"
      >
        <div
          class="bg-764CF6 col-12 row justify-between items-center fl-px-md"
          style="min-height: 40px"
          :style="{ borderRadius: row.showChild ? '8px 8px 0 0' : '8px' }"
        >
          <div class="col-3">
            买家姓名<span class="fl-ml-lg">{{ row.BuyName }}</span>
          </div>
          <div class="col-3">
            成交总额<span class="fl-ml-lg">{{ row.OrderFee }}</span>
          </div>
          <div class="col-3">
            销售员<span class="fl-ml-lg">{{ row.SellerName }}</span>
          </div>
          <a-button
            v-if="!row.showChild"
            shape="round"
            size="small"
            @click="row.showChild = true"
          >
            展开<down-outlined />
          </a-button>
          <a-button
            v-if="row.showChild"
            shape="round"
            size="small"
            @click="row.showChild = false"
          >
            收起<up-outlined />
          </a-button>
        </div>
        <div
          v-if="row.showChild"
          style="border: 1px solid #764cf6; border-radius: 0 0 8px 8px"
          class="col-12 fl-pa-sm row"
        >
          <div class="col-12 row fl-px-md fl-pb-md">
            <fl-simple-table
              :config="state.unConfirmOrderConfig"
              :refreshCount="state.unConfirmOrderConfig.refreshCount"
              tableType=""
              :tableData="row.TransactionStages || []"
              @triggerRowActions="handleRowActions"
            >
            </fl-simple-table>
          </div>
          <fl-simple-table
            :fatherData="row"
            :config="state.unConfirmArtworkConfig"
            :refreshCount="state.unConfirmArtworkConfig.refreshCount"
            tableType=""
            :tableData="row.Orders || []"
            @triggerRowActions="handleRowActions"
          >
          </fl-simple-table>
        </div>
      </div>
    </div>
    <div v-else-if="state.pageType === 'confirm'">
      <div
        class="bg-764CF6 color-white row items-center"
        style="min-height: 40px"
        :style="{ borderRadius: '8px 8px 0 0' }"
      >
        <span class="fl-ml-md">历史已确认订单</span>
      </div>
      <fl-simple-table
        :config="state.confirmConfig"
        :fatherParams="state.searchData"
        :refreshCount="state.confirmConfig.refreshCount"
        tableType=""
        @triggerRowActions="handleRowActions"
      >
      </fl-simple-table>
      <!-- <a-button type="primary" shape="round" @click="handleExport">
        导出数据
      </a-button> -->
    </div>
  </div>

  <export-modal
    v-if="state.exportDialogVisible"
    :openCount="state.openCount"
    @triggerCloseModal="handleCloseExport"
  />
</template>
<script setup>
import { UpOutlined, DownOutlined } from "@ant-design/icons-vue";
import {
  ref,
  reactive,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  watch,
} from "vue";
import flSimpleTable from "@/components/layout/table/simpleTable.vue";

const currentInstance = getCurrentInstance();
const { $request } = currentInstance.appContext.config.globalProperties;
import flFormItem from "@/components/layout/form/formItem.vue";

import { processError, processSuccess } from "@/utils/helper/message";
import { getParamsByObj } from "@/utils/helper/form";
import exportModal from "./exportModal.vue";
const state = reactive({
  defaultKey: null,
  searchData: {
    StartDate: "",
    EndDate: "",
  },
  DepartmentName: null, //站点
  openCount: 0,
  exportDialogVisible: false,
  btnLoading: false,
  pageType: "unConfirm",
  defaultSearch: null,
  unConfirmOrderConfig: {
    tableClass: "no-radius no-shadow no-margin",
    rowKey: "ID",
    size: "small",
    refreshCount: 0,
    columns: [
      {
        type: "select",
        title: "支付方式",
        field: "PayType",
        options: [
          {
            label: "支付宝",
            value: 1,
          },
          {
            label: "转账",
            value: 2,
          },
          {
            label: "Pos机支付",
            value: 3,
          },
          {
            label: "支付宝和转账",
            value: 4,
          },
          {
            label: "转账和pos机",
            value: 5,
          },
          {
            label: "pos和支付宝",
            value: 6,
          },
          {
            label: "pos和支付宝和转账",
            value: 7,
          },
        ],
      },
      {
        title: "入账银行",
        field: "Bank",
      },
      {
        title: "支付金额",
        field: "Fee",
      },
      {
        title: "支付时间",
        field: "PayTime",
      },
      {
        type: "image",
        title: "支付照片",
        field: "PayImg",
        height: "40px",
      },
    ],
  },
  unConfirmArtworkConfig: {
    tableMaxHeight: "200px",
    rowKey: "ID",
    size: "small",
    refreshCount: 0,
    columns: [
      {
        title: "画作名称",
        field: "ArtworkName",
      },
      {
        title: "画作编号",
        field: "ArtworkNum",
      },
      {
        title: "卖家名称",
        field: "BuyerName",
      },
      {
        title: "销售员",
        field: "SellerName",
      },
      {
        title: "画作价格",
        field: "Price",
      },
      {
        title: "出单日期",
        field: "SellTime",
      },
      {
        title: "操作",
        width: 140,
        actions: [
          {
            permission: "safecashiers_btn_sure",
            show: "[%=Status%]===5",
            actionType: "sure_btn",
            type: "primary",
            shape: "round",
            label: "确认",
          },
        ],
      },
    ],
  },
  confirmConfig: {
    rowKey: "ID",
    size: "small",
    refreshCount: 0,
    listUrl: {
      resDataField: "Data",
      url: "seller/order/cashier/list",
      params: [],
    },
    columns: [
      {
        title: "作品名称",
        field: "ArtworkName",
      },
      {
        title: "作品编号",
        field: "ArtworkNum",
      },
      {
        title: "销售员",
        field: "SellerName",
      },
      {
        title: "画作价格",
        field: "Price",
      },
      {
        title: "付款日期",
        field: "SellTime",
      },
      {
        title: "入账银行",
        field: "Bank",
      },
      {
        type: "select",
        title: "状态",
        field: "Status",
        options: [
          {
            label: "待内控确认",
            value: 6,
          },
          {
            label: "待财务确认",
            value: 7,
          },
          {
            label: "已完成",
            value: 4,
          },
        ],
      },
    ],
  },
  unConfirmData: [],
});
onBeforeMount(() => {
  getTableData();
  getUserInfo();
});
onMounted(() => {});
const emits = defineEmits(["triggerClick"]);

const handleRowActions = (btnConfig, rowData, fatherData) => {
  if (btnConfig.actionType === "sure_btn") {
    let url = "seller/order/cashier/sure";
    let params = { ID: rowData.ID };
    $request.HTTP.components.postDataByParams(url, params).then(
      (res) => {
        if (res.status === 0) {
          let url = "seller/transaction/cashier/detail";
          let params = { ID: fatherData.ID };
          $request.HTTP.components.postDataByParams(url, params).then(
            (res) => {
              if (res.status === 0) {
                for (let i in state.unConfirmData) {
                  let item = state.unConfirmData[i];
                  if (item.ID === fatherData.ID) {
                    item.Orders = res.data.Orders;
                    break;
                  }
                }
              } else {
                processError(res.msg);
              }
            },
            () => {}
          );
        } else {
          processError(res.msg);
        }
      },
      () => {}
    );
  }
};
const handleSearch = () => {
  Object.assign(state.searchData, { Key: state.defaultKey });
  getTableData();
};
const getUserInfo = () => {
  let url = "user/info";
  let params = {};
  $request.HTTP.components.postDataByParams(url, params).then(
    (res) => {
      if (res.status === 0) {
        state.DepartmentName = res.data.DepartmentName;
      }
    },
    () => {}
  );
};
const getTableData = () => {
  if (state.pageType !== "unConfirm") {
    return;
  }
  let url = "seller/transaction/cashier/list";
  let params = Object.assign({}, { Key: state.defaultKey });
  $request.HTTP.components.postDataByParams(url, params).then(
    (res) => {
      if (res.status === 0) {
        state.unConfirmData = res.data.Data || [];
      }
    },
    () => {}
  );
};
const handleExport = () => {
  state.exportDialogVisible = true;
  state.openCount++;
};
const handleValChange = (val, field) => {
  state.searchData[field] = val;
};
const handleCloseExport = () => {
  state.exportDialogVisible = false;
};
const handleUnConfirm = () => {
  state.pageType = "unConfirm";
  getTableData();
};
const handleClick = (val) => {
  emits("triggerClick", val);
};
</script>
<style lang="scss" scoped>
.my-search {
  display: flex;
  align-items: center;
  margin-bottom: 0px;
  .icon {
    width: 22px;
    height: 20px;
  }
  .search-input {
    width: 576px;
    height: 35px;
    border-radius: 20px;
    color: #fff !important;
  }
  .ant-input-affix-wrapper {
    background: rgba($color: #777777, $alpha: 0.4) !important;
    border: none !important;
    box-shadow: none;
    color: #fff;
    :deep(.ant-input) {
      background: transparent;
    }
  }

  .ant-input-affix-wrapper:hover,
  .ant-input-affix-wrapper:focus {
    border: none !important;
    box-shadow: none;
  }
  .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
    border: none !important;
    box-shadow: none;
  }
  .ant-input:focus {
    /* 去除获取焦点时的样式 */
    border: none;
    box-shadow: none;
  }
  .ant-input {
    /* 去除边框样式 */
    resize: none;
    border: none;
    color: #ffffff;
  }

  input {
    background: transparent;
  }
  ::-webkit-input-placeholder {
    color: #ffffff !important;
  }
  :-moz-placeholder {
    /* Firefox 18- */
    color: #ffffff !important;
  }
  ::-moz-placeholder {
    /* Firefox 19+ */
    color: #ffffff !important;
  }
  :-ms-input-placeholder {
    color: #ffffff !important;
  }
  .search-btn {
    width: 75px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    margin-left: 15px;
    background: #c1b2e5;
    color: #ffffff;
    border-radius: 20px;
    padding: 0;
    border: none;
    font-size: 14px;
    font-family: "苹方-简";
  }
}
</style>
