<template>
  <div>
    <div>
      <el-card class="mb-4" shadow="never">
        <div>
          <el-row>
            <el-col :span="18">
              <el-space wrap>
                <el-date-picker
                  v-model="state.times"
                  type="monthrange"
                  clearable
                  range-separator="至"
                  value-format="YYYY/MM/DD"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
                <el-select
                  v-model="state.query.status"
                  placeholder="所有结算状态"
                  filterable
                  multiple
                  collapse-tags
                  clearable
                  class="w-[180px]"
                >
                  <el-option v-for="item in settlementStatusList" :label="item.label" :value="item.value" :key="item.value" />
                </el-select>
                <el-button class="ml-2" type="primary" @click="onSearch">筛选</el-button>
                <el-button type="primary" plain @click="onReset">重置</el-button>
              </el-space>
            </el-col>
            <el-col :span="6">
              <div class="flex justify-end text-right">
                <el-space wrap>
                  <!-- <el-button type="primary" plain @click="state.visibleRecordOfError = true" link class="mr-2"
                    >获取账单生成历史记录</el-button
                  > -->
                  <el-input v-model="state.query.key" placeholder="关键词，可以搜索备注" style="width: 225px" />
                  <el-button :icon="Search" @click="onSearch">查询</el-button>
                </el-space>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-table :data="state.list" style="width: 100%" border>
        <el-table-column prop="startTime" label="账单周期">
          <template #default="{ row }">
            <div class="flex">
              <div>{{ row.startTime?.split(" ")[0] }}</div>
              <div class="mx-2">至</div>
              <div>{{ row.endTime?.split(" ")[0] }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="archiveId" label="账单所属第三方名称">
          <template #default="{ row }">
            <div class="flex">
              <div>{{ row.agency?.nickname }}【{{ row.agency?.id }}】</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="agencyReceiveBalance"
          label="累计支付到第三方总金额"
          :formatter="v => (v.agencyReceiveBalance / 100).toFixed(2)"
        />
        <el-table-column
          prop="toMechanismBalance"
          label="结算后平台应收款金额"
          :formatter="v => (v.toMechanismBalance / 100).toFixed(2)"
        />
        <el-table-column
          prop="mechanismReceiveBalance"
          label="累计支付到平台总金额"
          :formatter="v => (v.mechanismReceiveBalance / 100).toFixed(2)"
        />
        <el-table-column
          prop="toAgencyBalance"
          label="结算后第三方应收款金额"
          :formatter="v => (v.toAgencyBalance / 100).toFixed(2)"
        />
        <el-table-column prop="serviceName" label="结算状态">
          <template #default="{ row }">
            <div :class="settlementStatusList[row.status - 1].color">
              {{ settlementStatusList[row.status - 1]?.label }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="agencyRemark" label="备注">
          <template #default="{ row }">
            <div v-if="!row.agencyRemark" class="text-gray-400">未填写</div>
            <div v-else>已填写</div>
          </template>
        </el-table-column>
        <el-table-column prop="serviceName" label="操作">
          <template #default="{ row }">
            <el-button type="primary" link @click="handlePreviwDetail(row.id)">账单详情</el-button>
            <el-button
              type="primary"
              link
              @click="
                state.rowData = { ...row };
                state.visibleEeditRemark = true;
              "
              >备注信息</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="mt-4 justify-end"
        background
        layout="prev, pager, next"
        :total="state.total"
        :page-size="state.pageSize"
        @current-change="changePage"
      />
      <PreviewPromotionalInvoiceDetailDialog
        v-model:show="visiblePreview"
        ref="previewPromotionalInvoiceDetailDialogRef"
        @success="getList"
      />
    </div>
    <el-dialog title="账单备注" v-model="state.visibleEeditRemark">
      <div>
        <Editor placeholder="请输入账单备注" v-model:value="state.rowData.agencyRemark" />
      </div>
      <template #footer>
        <el-button @click="state.visibleEeditRemark = false">取 消</el-button>
        <el-button type="primary" @click="handleSaveRemark">确 定</el-button>
      </template>
    </el-dialog>
    <DialogRecordTable v-model:show="state.visibleRecordOfError" />
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";

import { settlementStatusList } from "./constant.ts";
import request from "@/api";

import PreviewPromotionalInvoiceDetailDialog from "./components/PreviewPromotionalInvoiceDetailDialog.vue";
import DialogRecordTable from "./components/DialogRecordTable.vue";
import Editor from "@/components/WangEditor/index.vue";

import { ElMessage } from "element-plus";
import { Search } from "@element-plus/icons-vue";

const state = reactive({
  visible: false,
  visibleRecordOfError: false,
  rowData: {},
  query: {
    page: 1,
    pageSize: 10, //
    agencyIds: [],
    status: [],
    key: ""
  },
  times: [],
  list: [],
  total: 0,
  agencyList: [],
  visibleEeditRemark: false
});
const visiblePreview = ref(false);
const previewPromotionalInvoiceDetailDialogRef = ref(null);
const getList = () => {
  let start = undefined;
  let end = undefined;
  if (state.times?.length > 0) {
    start = state.times[0] + " 00:00:00";
    end = state.times[1] + " 23:59:59";
  }
  request
    .get("archivesService/agency/orderBill/paginate", {
      ...state.query,
      agencyIds: state.query.agencyIds?.join(","),
      status: state.query?.status?.join(","),
      start,
      end
    })
    .then(resp => {
      state.list = resp.data.list;
      state.total = resp.data.total;
    });
};
const onSearch = () => {
  state.query.page = 1;
  getList();
};
const onReset = () => {
  state.times = [];
  state.query.agencyIds = [];
  state.query.times = [];
  state.query.serviceIds = [];
  state.query.type = 0;
  state.query.value = "";
  state.query.key = "";
  onSearch();
};
const handleSaveRemark = () => {
  request
    .post("/archivesService/agency/orderBill/updateRemark", {
      id: state.rowData.id,
      remark: state.rowData.agencyRemark
    })
    .then(resp => {
      ElMessage.success(resp.message);
      state.visibleEeditRemark = false;
      getList();
    });
};

const handlePreviwDetail = id => {
  visiblePreview.value = true;
  previewPromotionalInvoiceDetailDialogRef.value.initData(id);
};

const changePage = page => {
  state.query.page = page;
  getList();
};

const initData = () => {
  getList();
  request.get("/archivesService/agency/profile").then(resp => {
    console.log("resp");
  });
};

initData();
</script>
<style lang="scss">
.el-select-dropdown__item {
  height: auto;
  overflow: auto;
}
</style>
