<template>
  <div id="ActivityList">
    <search-box-new
      class="search_box_page"
      ref="searchBox"
      :redIcon="false"
      :formData="formData"
      :formList="formList"
      @search="search"
      @init="init"
    />
    <picture-list ref="pictureList" :list="statisticsList"></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
        >
        <!-- <el-button @click="batchExport" type="info" plain>
          导出excel
        </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: 1, printType: 1 }, 2)"
        >
          单据打印
        </el-button>
        <el-button
          type="text"
          style="color: rgb(230, 162, 60)"
          @click="openDialog({ ...props.scope.row, type: 1, 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"
      @search="search"
      :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 { companyList, tenantExport, countOrderNum } from "@/api/financed/index";

export default {
  name: "Arap",
  components: {
    pictureList,
    dislogDividePay,
    dislogOrderList,
    dislogPrint,
    dislogBatchAudit,
  },
  data() {
    return {
      statisticsList: [
        // 完单 ==> 已扣 + 待付
        {
          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: "billType",
          scope: "type",
          hidden: true,
          values: {
            1: "月份",
            2: "季度",
            3: "半年",
            4: "年度",
          },
        },
        {
          label: "机构名称",
          prop: "tenantName",
          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: [],
      total: 0,
      orderDialogVisible: false,
      printDialogVisible: false,
      examineDialogVisible: false,
      auditDialogVisible: false,
      activeOrderInfo: { type: 1 },
      activeOrderInfoArray: [],
      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 = 2;
      this.activeOrderInfo = data;
      this[
        ["order", "examine", "print", "audit"][type] + "DialogVisible"
      ] = true;
    },
    batchExport() {
      tenantExport(this.formData).then((res) => {
        if (res.msg) {
          exportFn(res.msg, "导出机构分成数据");
        } else {
          this.$message.error("导出失败");
        }
      });
    },
    getDataList() {
      companyList(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;
          // this.orderDialogVisible = true;
          // this.activeOrderInfo = res.rows[0];
        })
        .finally(() => {
          this.loading = false;
        });
    },
    async search(v) {
      this.loading = true;
      if (v === 2) {
        this.tableData = [];
        this.formData = {
          pageSize: 10,
          pageNum: 1,
          monthTime: [], // 搜送的月份
          months: [], // 选择的月份
          years: [],
          roleIds: this.rolesId,
        };
      }
      this.$nextTick(() => {
        this.$refs.tableList.clearMoreActive();
      });
      this.proceMonthToformData();
      this.getCountOrderNum();
      this.getDataList();
    },
    init() {
      this.search(2);
    },
    proceMonthToformData() {
      let { billType, years, months } = this.formData;
      if (!billType && !years.length) {
        return this.formData;
      }
      if (!months.length) {
        months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
      } else {
        months = months.join(",").split(",");
      }
      let mouth = [];
      // 年-月份拼接 转时间戳
      for (const year of years) {
        for (const month of months) {
          let date = year + "-" + month;
          let timestamp = new Date(date.replace(/-/g, "/")).getTime();
          mouth.push(timestamp);
        }
      }
      this.formData.monthTime = mouth;
    },
    getCountOrderNum() {
      var data = JSON.parse(JSON.stringify(this.formData));
      delete data.pageNum;
      delete data.pageSize;
      countOrderNum({ totalType: 2, ...data }).then((res) => {
        let {
          unPayMoneyTotal,
          unDeductMoneyTotal,
          deductMoneyTotal,
          payMoneyTotal,
        } = res.data;
        this.statisticsList[0].value = payMoneyTotal + unPayMoneyTotal;
        this.statisticsList[1].value =
          payMoneyTotal + unPayMoneyTotal + unDeductMoneyTotal;
        this.statisticsList[2].value = deductMoneyTotal + unDeductMoneyTotal;
      });
    },
    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
      );
    },
  },
  computed: {
    formList() {
      let formList = [
        {
          prop: "tenantIds",
          placeholder: "机构选择",
          scope: "systemtenantlist",
          multiple: true,
        },
        {
          prop: "billType",
          placeholder: "账款类型",
          scope: "select",
          options: [
            { label: "月份", value: 1 },
            { label: "季度", value: 2 },
            { label: "半年", value: 3 },
            { label: "年度", value: 4 },
          ],
        },
        {
          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 },
          ],
        },
      ];
      let { billType } = this.formData;
      if (billType) {
        let data = [
          {
            prop: "years",
            scope: "years",
            format: "yyyy",
          },
        ];
        if (billType < 4) {
          const options = [
            [
              { label: "1月", value: "1" },
              { label: "2月", value: "2" },
              { label: "3月", value: "3" },
              { label: "4月", value: "4" },
              { label: "5月", value: "5" },
              { label: "6月", value: "6" },
              { label: "7月", value: "7" },
              { label: "8月", value: "8" },
              { label: "9月", value: "9" },
              { label: "10月", value: "10" },
              { label: "11月", value: "11" },
              { label: "12月", value: "12" },
            ],
            [
              { label: "一季度", value: "1,2,3" },
              { label: "二季度", value: "4,5,6" },
              { label: "三季度", value: "7,8,9" },
              { label: "四季度", value: "10,11,12" },
            ],
            [
              { label: "上半年", value: "1,2,3,4,5,6" },
              { label: "下半年", value: "7,8,9,10,11,12" },
            ],
          ];
          data.push({
            prop: "months",
            placeholder: ["选择月份", "选择季度", "选择半年"][billType - 1],
            scope: "select",
            multiple: true,
            options: options[billType - 1],
          });
        }
        formList.splice(2, 0, ...data);
      }
      return formList;
    },
    rolesId() {
      return this.$store.state.user.rolesId;
    },
    isTj() {
      return !this.$store.state.user.roles.includes("统计");
    },
  },
  watch: {
    "formData.billType": {
      handler() {
        this.formData.months = [];
      },
    },
  },
};
</script>

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