<template>
  <div class="orderDetail">
    <BaseDialog
      width="1200px"
      :isShow.sync="isShow"
      :title="title"
      @close="close"
      :appendToBody="appendToBody"
      :isShowFooter="false"
    >
      <div class="head">
        订单号：<span>{{ detailInfo.orderSn }}</span> 退款状态：<span>{{
          refundStatus(detailInfo.refundStatus)
        }}</span>
        <i
          v-if="detailInfo.orderFrom === 3 || detailInfo.orderFrom === 4"
          style="font-style: normal"
          >审核状态：<span>{{ checkStatus(detailInfo.checkStatus) }}</span></i
        >
        <i
          v-if="
            ShowStatus == 2 &&
            detailInfo.checkStatus === 0 &&
            (detailInfo.orderFrom == 3 || detailInfo.orderFrom == 4)
          "
          style="float: right"
        >
          <el-button type="success" size="small" @click="success"
            >订单审核通过</el-button
          >
          <el-button type="danger" size="small" @click="error"
            >订单审核不通过</el-button
          >
        </i>
      </div>
      <div class="mian">
        <el-descriptions class="margin-top" :column="3" border>
          <el-descriptions-item
            :label="desc.label"
            v-for="(desc, index) in descList"
            :key="index"
          >
            <div v-if="desc.type">
              <el-link
                :underline="false"
                v-if="desc.type === 'dowm'"
                :href="detailInfo['link']"
                target="_blank"
                ><span v-if="detailInfo['link']">资料下载</span></el-link
              >
              <div v-if="desc.type === 'image'">
                <el-image
                  v-if="detailInfo[desc.key] && detailInfo[desc.key].length > 0"
                  style="width: 40px; height: 20px; margin-right: 10px"
                  :src="detailInfo[desc.key][0]"
                  :preview-src-list="detailInfo[desc.key]"
                >
                </el-image>
                <span>{{
                  detailInfo[desc.key] && detailInfo[desc.key].length > 0
                    ? "共" + detailInfo[desc.key].length + "张"
                    : "暂无转账凭证"
                }}</span>
              </div>
              <div v-if="desc.type === 'pretax'">
                <span style="margin-right: 20px"
                  >税前佣金：{{
                    $methodsTools.decimalPoint(detailInfo["pretaxBrokerage"])
                  }}</span
                ><span>税占比：{{ detailInfo["pretaxStr"] }}</span>
              </div>
              <div v-if="desc.type === 'time'">
                {{ $methodsTools.onlyForma(detailInfo[desc.key]) }}
              </div>
              <div v-if="desc.type === 'options'">
                <template v-for="(i, k) in desc.options">
                  <span v-if="i.value === detailInfo[desc.key]">
                    {{ i.label }}
                  </span>
                </template>
              </div>
              <div v-if="desc.type === 'money'">
                {{ $methodsTools.decimalPoint(detailInfo[desc.key]) }}
                <span
                  v-if="desc.key === 'orderProfit'"
                  :style="{
                    color: detailInfo[desc.key] > 0 ? '#409eff' : '#f56c6c',
                  }"
                  >【{{ detailInfo[desc.key] > 0 ? "盈" : "亏" }}】</span
                >
                <span
                  v-if="desc.key === 'orderUncollected'"
                  :style="{
                    color: detailInfo[desc.key] > 0 ? '#f56c6c' : '#409eff',
                  }"
                  >（{{
                    detailInfo[desc.key] > 0 ? "未结清" : "已结清"
                  }}）</span
                >
              </div>
              <div v-if="desc.type === 'reduce'">
                {{
                  $methodsTools.decimalPoint(
                    detailInfo.orderPrice - detailInfo.pretaxBrokerage
                  )
                }}
              </div>
            </div>
            <div v-else>
              {{ detailInfo[desc.key] }}
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <student-details
        v-if="isShow && detailInfo.orderFrom"
        :orderSn="orderSn"
        :orderFrom="detailInfo.orderFrom"
        :ShowStatus="ShowStatus"
        :checkStatus="detailInfo.checkStatus"
        @parentsSearch="parentsSearch"
      ></student-details>
    </BaseDialog>
  </div>
</template>

<script>
import studentDetails from "./studentDetails.vue";
export default {
  name: "dislogOrderDetails",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    orderSn: {
      type: String,
    },
    ShowStatus: {
      type: Number, //1、订单详情 2、订单审核 3、机构审核
      default: 0,
    },
    appendToBody: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      descList: [
        { label: "机构名称", key: "tenantName" },
        { label: "业务员", key: "createUsername" },
        { label: "业务号", key: "createNo" },
        { label: "下单客户", key: "purchaseOrg" },
        { label: "订单来源", key: "orderOrg" },
        { label: "业务归属", key: "schemeName" },
        { label: "业务类型", key: "businessNames" },
        { label: "订单日期", key: "buyTime", type: "time" },
        { label: "订单金额", key: "orderPrice", type: "money" },
        { label: "已收账款", key: "orderReceived", type: "money" },
        { label: "未收账款", key: "orderUncollected", type: "money" },
        { label: "申请退款", key: "orderRefund", type: "money" },
        { label: "已退账款", key: "orderRefunded", type: "money" },
        { label: "修改补款", key: "", type: "money" },
        { label: "实际账款", key: "orderPractical", type: "money" },
        { label: "成本", key: "orderCost", type: "money" },
        { label: "盈亏", key: "orderProfit", type: "money" },
        {
          label: "完单状态",
          key: "finishStatus",
          type: "options",
          options: [
            { label: "已完单", value: 1 },
            { label: "未完单", value: 0 },
          ],
        },
        { label: "佣金", key: "pretax", type: "pretax" },
        { label: "收佣方式", key: "", type: "" },
        { label: "佣金状态", key: "", type: "" },
        { label: "分成金额", key: "", type: "" },
        { label: "分成审核", key: "", type: "" },
        { label: "发票金额", key: "", type: "money" },
        { label: "发票申请时间", key: "", type: "time" },
        {
          label: "发票状态",
          key: "invoiceStatus",
          type: "options",
          options: [
            {
              label: "未开票",
              value: 0,
            },
            {
              label: "已开票",
              value: 1,
            },
          ],
        },
        { label: "转账凭证", key: "attachmentList", type: "image" },
        { label: "附件", type: "dowm" },
        { label: "下单备注", key: "remark" },
        { label: "审核意见", key: "financeRemark" },
      ],
      detailInfo: {
        orderFrom: null,
        attachmentList: [],
      },
    };
  },

  mounted() {},

  methods: {
    //退款状态
    refundStatus(i) {
      var str = "";
      switch (i) {
        case 0:
          str = "待审核";
          break;
        case 1:
          str = "正常";
          break;
        case 2:
          str = "未退款";
          break;
        case 3:
          str = "已完成";
          break;
        case 4:
          str = "未通过";
          break;
        case 5:
          str = "支付中";
          break;
        case 6:
          str = "支付失败";
          break;
        default:
          break;
      }
      return str;
    },
    //审核状态
    checkStatus(i) {
      var str = "";
      switch (i) {
        case 0:
          str = "待审核";
          break;
        case 1:
          str = "已通过";
          break;
        case 2:
          str = "未通过";
          break;
        case 3:
          str = "已撤销";
          break;
        default:
          break;
      }
      return str;
    },
    init() {
      this.getOrderDetail();
    },
    getOrderDetail() {
      this.$api.systemtoporderid(this.orderSn).then((res) => {
        if (res.data.attachmentList?.length > 0) {
          let a1 = [];
          for (let i = 0; i < res.data.attachmentList.length; i++) {
            if (res.data.attachmentList[i].attachmentType === 1) {
              a1.push(res.data.attachmentList[i].attachmentUrl);
            }
            if (res.data.attachmentList[i].attachmentType === 2) {
              res.data.link = res.data.attachmentList[i].attachmentUrl;
            }
          }
          res.data.attachmentList = a1;
        } else {
          res.data.attachmentList = [];
        }
        console.log(res.data);
        this.detailInfo = res.data;
      });
    },
    close() {},
    submit() {},
    submitForm() {
      this.isShow = false;
      this.$emit("search");
    },
    parentsSearch() {
      this.$emit("search");
    },
    success() {
      this.$confirm("确定审核通过吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api
            .systemtopordercheck({
              checkStatus: 1,
              orderSn: this.orderSn,
            })
            .then((res) => {
              this.$message.success("操作成功");
              this.submitForm();
            });
        })
        .catch(() => {});
    },
    error() {
      this.$prompt("确定审核不通过吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPlaceholder: "输入不通过原因",
      })
        .then(({ value }) => {
          this.$api
            .systemtopordercheck({
              checkReason: value || "",
              checkStatus: 2,
              orderSn: this.orderSn,
            })
            .then((res) => {
              this.$message.success("操作成功");
              this.submitForm();
            });
        })
        .catch(() => {});
    },
  },
  computed: {
    isShow: {
      get() {
        if (this.dialogVisible) {
          this.init();
        }
        return this.dialogVisible;
      },
      set(val) {
        this.$emit("update:dialogVisible", false);
      },
    },
    title() {
      return ["订单详情", "订单审核", "分成审核"][this.ShowStatus - 1];
    },
  },
  components: { studentDetails },
};
</script>

<style lang="scss" scoped>
// .orderDetail {
  .head {
    margin-bottom: 20px;
    span {
      padding-right: 20px;
      color: #409eff;
    }
  }
// }
</style>
