<template>
  <BaseDialog
    width="1400px"
    :isShowFooter="false"
    :isShow.sync="isShow"
    :title="title"
    @open="init"
  >
    <div class="des df">
      <p>
        机构名称：<span>{{ info.tenantName }}</span>
      </p>
      <template v-if="info.checkFrom == 3">
        <p>
          业务员：<span>{{ info.createUsername }}</span>
        </p>
        <p>
          业务号：<span>{{ info.createNo }}</span>
        </p>
      </template>
      <p v-else>
        账期类型：<span>{{
          ["月份", "季度", "半年", "年度"][info.billType - 1]
        }}</span>
      </p>
      <p>
        时间：<span>{{ info.monthTime }}</span>
      </p>
    </div>
    <search-box-new
      ref="searchBox"
      class="search_box_page"
      :redIcon="false"
      :formData="formData"
      :formList="formList"
      @search="search(3)"
      @init="init"
    />
    <picture-list
      ref="pictureList"
      :list="showStatisticsList"
      :info="statisticsInfo"
    ></picture-list>
    <table-list
      rowKey="id"
      ref="tableList"
      :tableSets="tableSet"
      :tableData="tableData"
      :navText="navText"
      :loading="loading"
    >
      <template slot="customize">
        <template v-if="isEdit">
          <el-button @click="batchAudit(1)" type="primary">
            审核通过
          </el-button>
          <el-button v-if="isTj" @click="batchAudit(-1)" type="warning"
            >审核不通过</el-button
          >
        </template>
        <!-- <el-button v-else @click="batchExport" type="info" plain>
          导出excel
        </el-button> -->
      </template>
      <template slot="predictPayTime" slot-scope="props">
        <span v-if="props.scope.row.creditStatus == 1">已结清</span>
        <span style="color: red" v-else>
          {{ $methodsTools.onlyForma(props.scope.row.predictPayTime) || "--" }}
        </span>
      </template>
      <template slot="predictPayDay" slot-scope="props">
        <span
          :style="{ color: props.scope.row.predictPayDay < 0 ? 'red' : '' }"
        >
          {{ props.scope.row.predictPayDay || "--" }}
        </span>
      </template>
      <template slot="divideCheckStatus" slot-scope="props">
        <div>{{ props.scope.row.checkStatus > 0 ? "已通过" : "未通过" }}</div>
      </template>
      <template slot="btn" slot-scope="props">
        <el-button type="text" @click="handelDetail(props.scope.row)">
          详情
        </el-button>
      </template>
    </table-list>
    <pagination1
      :total="total"
      :pageSize.sync="formData.pageSize"
      :currentPage.sync="formData.pageNum"
      @search="search(3)"
    />
    <!-- 订单详情 -->
    <dislog-order-details
      :appendToBody="true"
      :ShowStatus="3"
      :orderSn="activeOrderInfo.orderSn"
      :orderFrom="activeOrderInfo.orderFrom"
      :dialogVisible.sync="orderDialogVisible"
    />
    <!-- 审核 -->
    <dislog-batch-audit
      :appendToBody="true"
      :info="activeOrderInfo"
      @search="$emit('search'), (isShow = false)"
      :dialogVisible.sync="auditDialogVisible"
    />
  </BaseDialog>
</template>

<script>
import pictureList from "@/components/Comon/pictureList.vue";
import dislogOrderDetails from "../../components/dislogOrderDetails.vue";
import dislogBatchAudit from "./dislogBatchAudit";
import {
  tenantExport,
  monthOrderList,
  monthOrderCount,
} from "@/api/financed/index";
export default {
  name: "SaasMasterPlatformDislogOrderList",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    info: {
      type: Object,
      default: () => {
        return {};
      },
    },
    divideModel: {
      type: String,
      default: "1",
    },
  },
  data() {
    return {
      statisticsList: [
        {
          label: "订单金额",
          img: "未收款",
          prop: "orderTotalPrice",
        },
        {
          label: "税前佣金",
          img: "已退款",
          prop: "pretaxTotalBrokerage",
        },
        {
          label: "完单分成",
          img: "成本金额",
          prop: "accomplishTotalMoney",
        },
        {
          label: "应付分成(不含坏账)",
          img: "成本金额",
          prop: "divideTotalMoney",
        },
      ],
      loading: false,
      navText: {
        title: "机构分成",
        index: 0,
        ch: "条",
        num: true,
        choice: false,
        addHide: true,
        dontNum: true,
        openCheckMore: false,
        custom: false,
        tableColor: true,
      },
      formData: {
        pageSize: 10,
        pageNum: 1,
      },
      tableSet: [
        {
          label: "完单时间",
          hidden: true,
          prop: "orderTime",
          width: 160,
          scope: "aTimeList",
        },
        {
          label: "订单日期",
          prop: "orderCreateTime",
          width: 160,
          scope: "aTimeList",
          hidden: true,
        },
        {
          label: "订单号",
          prop: "orderSn",
          width: 220,
          hidden: true,
        },
        {
          label: "分成类型",
          prop: "orderType",
          scope: "type",
          hidden: true,
          // width: 100,
          values: {
            1: "完单分成",
            2: "退款扣除",
          },
        },
        {
          label: "订单金额",
          prop: "orderPrice",
          hidden: true,
          // width: 100,
          scope: "formatPrice",
        },
        {
          label: "税前佣金",
          prop: "pretaxBrokerage",
          hidden: true,
          // width: 100,
          scope: "formatPrice",
        },
        {
          label: "应付分成",
          prop: "payMoney",
          hidden: true,
          // width: 100,
          scope: "formatPrice",
        },
        // {
        //   label: "审核状态",
        //   prop: "divideCheckStatus",
        //   hidden: true,
        //   // width: 100,
        //   scope: "solt",
        //   soltName: "divideCheckStatus",
        // },
      ],
      tableData: [],
      total: 0,
      orderDialogVisible: false,
      auditDialogVisible: false,
      activeOrderInfo: {},
      statisticsInfo: {},
    };
  },

  methods: {
    getMonthDay(date) {
      date = new Date(date);
      date.setMonth(date.getMonth() + 1);
      date.setDate(0);
      var days = date.getDate();
      return days;
    },
    init() {
      this.search(2);
    },
    batchExport() {
      tenantExport(this.formData).then((res) => {
        if (res.msg) {
          exportFn(res.msg, "导出机构分成数据");
        } else {
          this.$message.error("导出失败");
        }
      });
    },
    search(v) {
      this.loading = true;
      if (v === 2) {
        this.formData = {
          pageSize: 10,
          pageNum: 1,
          divideLogId: this.info.id,
        };
        this.$nextTick(() => {
          this.$refs.tableList.clearMoreActive();
        });
        this.getStatistics();
      }
      let { accomplishTime } = this.formData;
      if (accomplishTime) {
        this.formData.accomplishStartTime = accomplishTime[0];
        this.formData.accomplishEndTime = accomplishTime[1];
      }
      monthOrderList(this.formData)
        .then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
          this.navText.index = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getStatistics() {
      monthOrderCount({ ...this.formData, divideModel: this.divideModel }).then(
        (res) => {
          this.statisticsInfo = res.data;
        }
      );
    },
    getRoles(roleId) {
      if (
        (this.rolesId?.length > 0 && this.rolesId.includes(roleId)) ||
        this.rolesId.includes(1)
      ) {
        return false;
      } else {
        return true;
      }
    },
    handelDetail(data) {
      this.activeOrderInfo = data;
      this.orderDialogVisible = true;
    },
    batchAudit(checkResult) {
      let { checkFrom, id } = this.info;
      this.activeOrderInfo = {
        divideLogId: [id],
        checkResult,
        checkFrom,
      };
      this.auditDialogVisible = true;
    },
  },
  computed: {
    isShow: {
      get() {
        return this.dialogVisible;
      },
      set(val) {
        this.$emit("update:dialogVisible", false);
      },
    },
    isEdit() {
      return this.info.isEdit;
    },
    title() {
      return this.isEdit ? "分成审核" : "分成详细";
    },
    showStatisticsList() {
      if (true) {
        this.statisticsList.splice(2, 1);
      }
      return this.statisticsList;
    },
    rolesId() {
      return this.$store.state.user.rolesId;
    },
    isTj() {
      return !this.$store.state.user.roles.includes("统计");
    },
    formList() {
      return [
        {
          prop: "checkStatus",
          placeholder: "审核状态",
          scope: "select",
          options: [
            { label: "待审核", value: 0 },
            { label: "已通过", value: 1 },
          ],
        },
        {
          prop: "orderType",
          placeholder: "分成类型",
          scope: "select",
          options: [
            { label: "退款扣除", value: 2 },
            { label: "完单分成", value: 1 },
          ],
        },
        {
          prop: "accomplishTime",
          scope: "datePicker",
          type: "daterange",
          pickerOptions: {
            disabledDate: (time) => {
              let timeStamp = new Date(this.info.monthTime).setHours(
                0,
                0,
                0,
                0
              );
              return (
                time.getTime() < timeStamp ||
                time.getTime() >
                  timeStamp +
                    (this.getMonthDay(timeStamp) - 1) * 24 * 60 * 60 * 1000
              );
            },
          },
          defaultValue: this.info.monthTime,
        },
        {
          prop: "orderSn",
          placeholder: "输入订单号",
        },
      ];
    },
  },
  components: {
    pictureList,
    dislogOrderDetails,
    dislogBatchAudit,
  },
};
</script>

<style lang="scss" scoped>
.des {
  margin-top: -20px;
  p {
    margin: 10px 40px 10px 0;
    span {
      font-weight: bold;
    }
  }
}
.search_box_page {
  /deep/ {
    .el-date-editor {
      width: 240px;
    }
    .el-select {
      width: 120px;
    }
    .el-form-item__content > .el-input {
      width: 190px;
    }
  }
}
</style>
