<template>
  <div>
    <BaseDialog
      width="860px"
      :isShow.sync="isShow"
      :title="'佣金' + ['详情', '审核', '支付'][type - 1]"
      @open="init"
      :isShowFooter="false"
    >
      <p>
        申请时间：
        <em>
          {{ $methodsTools.onlyForma(info.createTime) || "--" }}
        </em>
      </p>
      <div class="df">
        <p>
          机构名称：<em>{{ info.tenantName }}</em>
        </p>
        <p>
          业务员：<em>{{ info.createUsername }}</em>
        </p>
        <p>
          业务号：<em>{{ info.createNo }}</em>
        </p>
        <p>
          下单企业：<em>{{ info.purchaseOrg }}</em>
        </p>
      </div>
      <div class="centent">
        <p>
          订单号：{{ info.orderSn }}
          <span class="btn" @click="orderDialogVisible = true">订单详情</span>
        </p>
        <p>申请备注：{{ info.remark || "无" }}</p>
        <p>
          订单金额：<span>{{ info.orderPrice | formatPrice }}</span>
        </p>
        <p>
          税前佣金：<span>{{ info.pretaxBrokerage | formatPrice }}</span>
        </p>
        <p>
          佣金税占比：<span>{{ info.pretax * 100 }}%</span>
        </p>
        <p>
          本次需支付佣金：<span style="font-weight: bold">{{
            info.brokerage | formatPrice
          }}</span>
        </p>
        <el-divider></el-divider>
        <p>
          支付方式：{{
            [
              "",
              "微信支付",
              "支付宝支付",
              "金币支付",
              "现金支付",
              "网银支付",
              "协议支付",
              "对公转账",
            ][payType]
          }}
        </p>
      </div>
      <div class="dialog-footer" v-if="type !== 1">
        <template v-if="type == 2">
          <el-button v-throttle @click="batchAudit(1)" type="primary">
            审核通过
          </el-button>
          <el-button
            v-throttle
            v-if="isTj"
            @click="batchAudit(-1)"
            type="warning"
            >审核不通过</el-button
          >
        </template>
        <el-button v-throttle v-else @click="handelPay" type="primary">
          确定支付
        </el-button>
      </div>
    </BaseDialog>
    <!-- 订单详情 -->
    <dislog-order-details
      :appendToBody="true"
      :ShowStatus="3"
      :orderSn="info.orderSn"
      :orderFrom="info.orderFrom"
      :dialogVisible.sync="orderDialogVisible"
    />
    <!-- 审核 -->
    <dislog-batch-audit
      :info="orderInfo"
      @search="$emit('search'), (isShow = false)"
      :dialogVisible.sync="auditDialogVisible"
    />
  </div>
</template>

<script>
import dislogOrderDetails from "../../components/dislogOrderDetails.vue";
import dislogBatchAudit from "./dislogBatchAudit";
export default {
  name: "DislogDividePay",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    info: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      orderDialogVisible: false,
      auditDialogVisible: false,
      formPay: {
        toBankAcount: "",
        toBankName: "",
        toBankTypeName: "",
      },
      bankList: [],
      orderInfo: {},
      payType: 4,
    };
  },

  mounted() {},

  methods: {
    fastInput(item) {
      this.formPay = {
        toBankAcount: item.proceedsAccount,
        toBankName: item.openingName,
        toBankTypeName: item.openingBank,
      };
    },
    init() {
      this.resetForm();
    },
    resetForm() {},
    batchAudit(checkResult = 1) {
      this.orderInfo = {
        orderSn: [this.info.orderSn],
        checkResult,
        checkFrom: 4,
        isCommission: true,
      };
      this.auditDialogVisible = true;
    },
    handelPay() {
      this.$confirm("确定支付吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let c = {
            divideModel: this.info.checkFrom - 1,
            type: 4,
            orderSn: this.info.orderSn,
            tenantId: this.info.tenantId,
            payType: this.payType,
          };
          if (this.formPay.toBankAcount) {
            c = { ...c, ...this.formPay };
          }
          this.$api.orderbankpay(c).then((res) => {
            this.isShow = false;
            this.$emit("search", 3);
            this.$message({
              type: "success",
              message: "支付成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消成功",
          });
        });
    },
  },
  computed: {
    isShow: {
      get() {
        return this.dialogVisible;
      },
      set(val) {
        this.$emit("update:dialogVisible", false);
      },
    },
    isTj() {
      return !this.$store.state.user.roles.includes("统计");
    },
    type() {
      return this.info.type;
    },
  },
  components: {
    dislogOrderDetails,
    dislogBatchAudit,
  },
};
</script>

<style lang="scss" scoped>
p {
  margin: 0;
  padding: 0;
  line-height: 30px;
  span {
    color: rgb(235, 59, 59);
  }
  .btn {
    border: 1px solid #409eff;
    border-radius: 5px;
    padding: 2px 6px;
    color: #409eff;
    margin-left: 10px;
    cursor: pointer;
  }
}
.df {
  p {
    margin-right: 30px;
  }
}
.centent {
  margin-top: 10px;
  padding: 12px 15px;
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

em {
  font-weight: bold;
  color: #000;
  font-style: unset;
}
.dialog-footer {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
