<template>
  <div>
    <BaseDialog
      :disabledBtn="disabledBtn"
      width="900px"
      :isShow.sync="isShow"
      title="学员审核"
      @close="close"
      :confirmStatus="false"
    >
      <p style="margin-top: 0">
        <strong style="color: #000">申请时间：</strong
        >{{ $methodsTools.onlyForma(form.buyTime) }}
      </p>
      <p>
        <span class="color_1890ff">{{ form.tenantName }}</span>
        <span>,发起学员修改申请</span>
      </p>
      <div class="bgc_pink">
        <p>
          <strong>订单号：</strong><span>{{ form.orderSn }}</span>
          <el-button
            type="text"
            style="margin-left: 10px"
            @click="openOrderDetail"
            >订单详情</el-button
          >
        </p>
        <!-- :span-method="objectSpanMethod" 表格合并代码👇 -->
        <el-table
          ref="tableList"
          row-key="orderGoodsId"
          size="small"
          border
          :data="tableData"
          stripe
          style="width: 100%"
          height="340"
          v-loading="loading"
          @select-all="selectAll"
          @select="select"
        >
          <el-table-column
            reserve-selection
            align="center"
            type="selection"
            width="55"
            header-align="center"
            fixed="left"
            :selectable="selectableFunc"
          >
          </el-table-column>
          <el-table-column
            align="center"
            type="index"
            label="序号"
            width="70"
          ></el-table-column>
          <el-table-column
            align="center"
            v-for="(item, index) in tableList"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
          >
            <template slot-scope="scope">
              <template v-if="item.scope === 'isOptions'">
                <template v-for="(i, k) in item.options">
                  <span v-if="scope.row[item.prop] == i.value">{{
                    i.label
                  }}</span>
                </template>
              </template>
              <div v-else :style="item.style">
                <span v-if="item.ch && scope.row[item.prop]">{{
                  item.ch
                }}</span>
                {{ scope.row[item.prop] }}
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="total"
          :pageSize.sync="refFormData.pageSize"
          :currentPage.sync="refFormData.pageNum"
          @search="search"
        />
      </div>
      <template slot="slotBtnRight">
        <el-button @click="auditFail">审核不通过</el-button>
        <el-button type="primary" @click="submitForm">审核通过</el-button>
      </template>
    </BaseDialog>

    <dislogOrderDetails
      :dialogVisible.sync="orderDialogVisible"
      :orderSn="orderSn"
      :ShowStatus="1"
      @search="search"
    ></dislogOrderDetails>
  </div>
</template>

<script>
import dislogOrderDetails from "../dislogOrderDetails.vue";
import pagination from "@/components/pagination";
export default {
  components: {
    pagination,
    dislogOrderDetails,
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    orderSn: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      loading: false,
      form: {},
      disabledBtn: false,
      tableData: [],
      tableList: [
        {
          label: "姓名",
          prop: "userName",
        },
        {
          label: "身份证号",
          prop: "userCard",
          width: "140",
        },
        {
          label: "手机号",
          prop: "userPhone",
          width: "100",
        },
        {
          label: "课程",
          prop: "goodsName",
          width: "160",
        },
        {
          label: "年份",
          prop: "year",
        },
        {
          label: "专业",
          prop: "majorName",
        },
        {
          label: "业务",
          prop: "businessName",
          width: "180",
        },
        {
          label: "原价(元)",
          prop: "goodsPrice",
          ch: "￥",
        },
        {
          label: "单价(元)",
          prop: "goodsRealPrice",
          ch: "￥",
        },
        {
          label: "学习状态",
          prop: "studyStatus",
        },
        {
          label: "审核状态",
          prop: "checkStatus",
          scope: "isOptions",
          options: [
            {
              label: "待审核",
              value: 0,
            },
            {
              label: "已通过",
              value: 1,
            },
            {
              label: "未通过",
              value: 2,
            },
            {
              label: "已撤销",
              value: 3,
            },
            {
              label: "已取消",
              value: -1,
            },
          ],
        },
        {
          label: "发起原因",
          prop: "refundReason",
        },
        {
          label: "审核意见",
          prop: "checkReason",
          style: { color: "red" },
        },
      ],
      refFormData: {
        pageSize: 10,
        pageNum: 1,
      },
      total: 0,
      orderDialogVisible: false,
      allCheckData: [],
      selectableFunc: (row, rowIndex) => {
        if (row.checkStatus === 0) {
          return true;
        } else {
          return false;
        }
      },
    };
  },

  mounted() {},

  methods: {
    //订单详情
    openOrderDetail() {
      this.orderDialogVisible = true;
    },
    init() {
      this.$api.systemtoporderid(this.orderSn).then((res) => {
        this.form = res.data;
        this.search();
      });
    },
    search() {
      let ary = Object.assign(
        {
          orderSn: this.orderSn,
          orderFrom: this.form.orderFrom,
        },
        this.refFormData
      );
      this.loading = true;
      this.$api
        .systemtopordergoodslist(ary)
        .then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    close() {
      this.allCheckData = [];
      this.$refs.tableList.clearSelection();
    },
    auditFail() {
      if (this.allCheckData.length === 0) {
        this.$message.error("请勾选数据");
        return;
      }
      this.$prompt("确定审核不通过吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPlaceholder: "输入不通过原因",
      })
        .then(({ value }) => {
          this.$api
            .systemtopordercheckstudent({
              checkReason: value || "",
              checkStatus: 2,
              orderSn: this.orderSn,
              orderGoodsIds: this.allCheckData.map(
                (i) => i.orderGoodsId
              ),
            })
            .then((res) => {
              this.$message.success("操作成功");
              this.isShow = false;
              this.$emit("search");
            });
        })
        .catch(() => {});
    },
    submitForm() {
      if (this.allCheckData.length === 0) {
        this.$message.error("请勾选数据");
        return;
      }
      this.disabledBtn = true;
      this.$api
        .systemtopordercheckstudent({
          checkStatus: 1,
          orderSn: this.orderSn,
          orderGoodsIds: this.allCheckData.map(
            (i) => i.orderGoodsId
          ),
        })
        .then((res) => {
          this.$message.success("操作成功");
          this.isShow = false;
          this.$emit("search");
        })
        .finally(() => {
          this.disabledBtn = false;
        });
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 == 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 1,
          };
        }
      }
    },

    selectAll(value) {
      this.allCheckData = value;
    },
    select(selection) {
      this.allCheckData = selection;
    },
  },
  computed: {
    isShow: {
      get() {
        if (this.dialogVisible) {
          this.init();
        }
        return this.dialogVisible;
      },
      set(val) {
        this.$emit("update:dialogVisible", false);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.bgc_pink {
  padding: 10px;
  box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  color: #000;
}
.color_red {
  font-weight: bold;
  color: rgb(235, 59, 59);
}
.color_1890ff {
  color: #1890ff;
  font-weight: bold;
}
em {
  font-weight: bold;
  color: #000;
  font-style: unset;
}
</style>
