<template>
  <div id="ActivityList">
    <search-box-new
      class="search_box_page"
      ref="searchBox"
      :redIcon="false"
      :formData="formData"
      :formList="formList"
      @search="search(3)"
      @init="init"
    />
    <picture-list ref="pictureList" :list="showTabList"></picture-list>
    <table-list
      rowKey="id"
      ref="tableList"
      :tableSets="tableSet"
      :tableData="tableData"
      :navText="navText"
      :loading="loading"
    >
      <template slot="customize">
        <el-button @click="batchAudit(1)" type="primary"> 批量审核 </el-button>
        <el-button v-if="isTj" @click="batchAudit(-1)" type="warning"
          >批量审核不通过</el-button
        >
      </template>
      <template slot="payStatus" slot-scope="props">
        <div>
          {{
            ["待支付", "已结算", "待审核", "打款中", "支付失败", "审核中"][
              props.scope.row.payStatus
            ]
          }}
          <span style="color: red" v-if="props.scope.row.roleName">
            ({{ props.scope.row.roleName }})
          </span>
        </div>
      </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="btn" slot-scope="props">
        <el-button type="text" @click="openDialog(props.scope.row)">
          详情
        </el-button>
        <el-button
          type="text"
          v-if="
            props.scope.row.payStatus === 0 || props.scope.row.payStatus === 4
          "
          :disabled="getRoles(props.scope.row.roleId)"
          @click="openDialog(props.scope.row, 1)"
        >
          支付
        </el-button>
        <el-button
          v-else
          type="text"
          :disabled="
            props.scope.row.payStatus !== 2 || getRoles(props.scope.row.roleId)
          "
          @click="openDialog({ ...props.scope.row, isEdit: 1 })"
        >
          审核
        </el-button>
        <el-button
          type="text"
          :style="{
            color:
              props.scope.row.payStatus !== 1 ? '#ccc' : 'rgb(230, 162, 60)',
          }"
          :disabled="props.scope.row.payStatus !== 1"
          @click="openDialog({ ...props.scope.row, type: 2, printType: 1 }, 2)"
        >
          单据打印
        </el-button>
        <el-button
          type="text"
          style="color: rgb(230, 162, 60)"
          @click="openDialog({ ...props.scope.row, type: 2, printType: 2 }, 2)"
        >
          明细打印
        </el-button>
      </template>
    </table-list>
    <pagination1
      :total="total"
      :pageSize.sync="formData.pageSize"
      :currentPage.sync="formData.pageNum"
      @search="search(3)"
    />
    <!-- 订单列表 -->
    <dislogOrderList
      :info="activeOrderInfo"
      :dialogVisible.sync="orderDialogVisible"
    />
    <dislog-divide-pay
      :dialogVisible.sync="examineDialogVisible"
      @search="search"
      :info="activeOrderInfo"
    />
    <!-- 打印 -->
    <dislog-print
      :activeData="activeOrderInfo"
      :dialogVisible.sync="printDialogVisible"
    />
    <!-- 审核 -->
    <dislog-batch-audit
      :info="activeOrderInfo"
      @search="search"
      :dialogVisible.sync="auditDialogVisible"
    />
  </div>
</template>

<script>
import dislogDividePay from "../components/dislogDividePay.vue";
import dislogOrderList from "../components/dislogOrderList";
import pictureList from "@/components/Comon/pictureList.vue";
import dislogPrint from "../components/dislogPrint.vue";
import dislogBatchAudit from "../components/dislogBatchAudit";
import { exportFn } from "@/utils/index.js";
import {
  sellerExport,
  countOrderNum,
  sellerPercentageList,
} from "@/api/financed/index";

export default {
  name: "Seller",
  components: {
    dislogOrderList,
    dislogDividePay,
    pictureList,
    dislogPrint,
    dislogBatchAudit,
  },
  data() {
    return {
      showTabList: [
        {
          label: "应付分成",
          img: "未收款",
          value: 0,
        },
        {
          label: "完单分成",
          img: "已退款",
          value: 0,
        },
        {
          label: "退款扣除",
          img: "成本金额",
          value: 0,
        },
      ],
      loading: false, //当前表单加载是否加载动画
      navText: {
        title: "业务提成",
        index: 0,
        ch: "条",
        num: true,
        choice: true,
        addHide: true,
        dontNum: true,
        openCheckMore: false,
        changeWidth: "280px",
        custom: false,
        tableColor: true,
        selectableStatus: true,
        selectableFunc: (row, rowIndex) => {
          return row.payStatus == 2 && !this.getRoles(row.roleId);
        },
      },
      formData: {
        pageSize: 10,
        pageNum: 1,
      },
      tableSet: [
        {
          label: "账期时间",
          prop: "monthTime",
          hidden: true,
          width: 140,
        },
        {
          label: "机构名称",
          prop: "tenantName",
          hidden: true,
        },
        {
          label: "业务员",
          prop: "createUsername",
          hidden: true,
        },
        {
          label: "业务号",
          prop: "createNo",
          hidden: true,
        },
        {
          label: "应付分成",
          prop: "payMoney",
          hidden: true,
          scope: "formatPrice",
        },
        {
          label: "完单分成",
          prop: "closeOrderMoney",
          hidden: true,
          scope: "formatPrice",
        },
        {
          label: "退款扣除",
          prop: "deductMoney",
          hidden: true,
          scope: "formatPrice",
        },
        {
          label: "预付时间",
          prop: "predictPayTime",
          hidden: true,
          scope: "aTimeList",
          hidden: true,
        },
        {
          label: "剩余天数",
          prop: "predictPayDay",
          hidden: true,
          scope: "solt",
          soltName: "predictPayDay",
        },
        {
          label: "审核状态",
          prop: "payStatus",
          hidden: true,
          scope: "solt",
          soltName: "payStatus",
        },
        {
          label: "审核意见",
          prop: "checkReason",
          hidden: true,
        },
      ],
      tableData: [], //表单数据
      formList: [
        {
          prop: "tenantIds",
          placeholder: "机构选择",
          scope: "systemtenantlist",
          multiple: true,
        },
        {
          prop: "monthTime",
          placeholder: "账期时间",
          scope: "moreMonth",
        },
        {
          prop: "overPayDay",
          placeholder: "预付超期",
          scope: "select",
          options: [
            { label: "7天", value: 1 },
            { label: "30天", value: 2 },
            { label: "半年", value: 3 },
            { label: "1年", value: 4 },
          ],
        },
        {
          prop: "payStatus",
          placeholder: "审核状态",
          scope: "select",
          multiple: true,
          options: [
            { label: "待审核", value: 2 },
            { label: "审核中", value: 5 },
            { label: "待支付", value: 0 },
            { label: "支付失败", value: 4 },
            { label: "已结算", value: 1 },
          ],
        },
        {
          prop: "createNo",
          placeholder: "输入业务号/业务员号",
        },
      ],
      total: 0, //一共多少条
      orderDialogVisible: false,
      examineDialogVisible: false,
      printDialogVisible: false,
      auditDialogVisible: false,
      activeOrderInfo: {},
      activeList: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    getRoles(roleId) {
      if (
        (this.rolesId?.length > 0 && this.rolesId.includes(roleId)) ||
        this.rolesId.includes(1)
      ) {
        return false;
      } else {
        return true;
      }
    },
    openDialog(data, type = 0) {
      data.checkFrom = 3;
      this.activeOrderInfo = data;
      this[
        ["order", "examine", "print", "audit"][type] + "DialogVisible"
      ] = true;
    },
    batchExport() {
      sellerExport(this.formData).then((res) => {
        if (res.msg) {
          exportFn(res.msg, "导出业务提成数据");
        } else {
          this.$message.error("导出失败");
        }
      });
    },
    batchAudit(checkResult = 1) {
      const divideLogId = this.$refs.tableList.allCheckData.map((e) => e.id);
      if (divideLogId.length === 0) {
        this.$message.error("请先勾选待审核数据");
        return;
      }
      this.openDialog(
        {
          divideLogId,
          checkResult,
        },
        3
      );
    },
    getDataList() {
      sellerPercentageList(this.formData)
        .then((res) => {
          res.rows.forEach((e) => {
            e.monthTime = this.parseTime(e.monthTime, "{y}-{m}");
            e.closeOrderMoney = e.deductMoney + e.payMoney;
          });
          this.tableData = res.rows;
          this.total = res.total;
          this.navText.index = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    async search(v) {
      this.loading = true;
      if (v === 2) {
        this.tableData = [];
        this.formData = {
          pageSize: 10,
          pageNum: 1,
          monthTime: [],
          years: [],
          roleIds: this.rolesId,
        };
      }
      this.$nextTick(() => {
        this.$refs.tableList.clearMoreActive();
      });
      this.getCountOrderNum();
      this.getDataList();
    },
    init() {
      this.search(2);
    },
    getCountOrderNum() {
      var data = JSON.parse(JSON.stringify(this.formData));
      delete data.pageNum;
      delete data.pageSize;
      delete data.roleIds;
      countOrderNum({ totalType: 3, ...data }).then((res) => {
        let {
          unPayMoneyTotal,
          unDeductMoneyTotal,
          deductMoneyTotal,
          payMoneyTotal,
        } = res.data;
        this.showTabList[0].value = payMoneyTotal + unPayMoneyTotal;
        this.showTabList[1].value =
          payMoneyTotal + unPayMoneyTotal + unDeductMoneyTotal;
        this.showTabList[2].value = deductMoneyTotal + unDeductMoneyTotal;
      });
    },
  },
  computed: {
    rolesId() {
      return this.$store.state.user.rolesId;
    },
    isTj() {
      return !this.$store.state.user.roles.includes("统计");
    },
  },
};
</script>

<style lang="scss" scoped>
.search_box_page {
  /deep/ .el-select {
    width: 120px;
  }
  /deep/ .el-form-item__content > .el-input {
    width: 190px;
  }
}
</style>
