<template>
  <el-dialog
    width="700px"
    :title="title"
    :visible.sync="show"
    top="20px"
    @close="reset"
  >
    <div class="u-p-15">
      <div class="">
        <el-tabs v-model="activeName" @tab-click="tabClick">
          <el-tab-pane label="优惠券(单选)" name="youhui">
            <el-table
              ref="table"
              empty-text="无可用优惠券"
              :data="quans.fullReductionCoupon"
              @cell-click="fullReductionCouponClick"
            >
              <el-table-column
                type="index"
                label=""
                v-if="quans.fullReductionCoupon.length > 0"
              >
                <template v-slot="scope">
                  <el-checkbox
                    @change="fullReductionCouponClick(scope.row)"
                    :value="scope.row.id == fullReductionCouponSel.id"
                  ></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column type="index" label="#"> </el-table-column>
              <el-table-column prop="name" label="券名称"> </el-table-column>
              <el-table-column label="券类型" width="80">
                <template v-slot="scope">
                  {{ scope.row.type == 1 ? "优惠券" : "商品券" }}
                </template>
              </el-table-column>
              <el-table-column prop="discountAmount" label="抵扣">
                <template v-slot="scope">
                  <span class="color-red">
                    ￥{{ scope.row.discountAmount }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="discountAmount" label="限制" width="120">
                <template v-slot="scope">
                  <div class="u-flex">
                    <span>支付满</span>
                    <span class="color-red no-wrap">
                      {{ scope.row.fullAmount }}
                    </span>
                    <span>元可用</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="useRestrictions" label="描述">
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="商品券(多选)" name="goods">
            <el-table
              ref="table1"
              @cell-click="productCouponClick"
              empty-text="无可用商品券"
              :data="quans.productCoupon"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="productCouponChange"
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column type="index" width="50" label="#">
              </el-table-column>
              <el-table-column prop="name" label="券名称"> </el-table-column>

              <el-table-column label="商品信息" width="120">
                <template v-slot="scope">
                  <div class="u-flex">
                    <div class="u-flex">
                      <el-image
                        :src="scope.row.productCover"
                        fit="cover"
                        style="width: 40px; height: 40px"
                        :preview-src-list="[scope.row.productCover]"
                      ></el-image>
                    </div>
                    <div class="u-p-l-10">
                      <div class="">{{ scope.row.productName }}</div>
                      <div class="">x{{ scope.row.num || "" }}</div>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="discountAmount" label="抵扣">
                <template v-slot="scope">
                  <span class="color-red">
                    ￥{{ scope.row.discountAmount }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="券类型">
                <template v-slot="scope">
                  {{ scope.row.type == 1 ? "优惠券" : "商品券" }}
                </template>
              </el-table-column>
              <el-table-column prop="useRestrictions" label="描述">
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
        <div v-if="quansSelArr.length > 0">
          <div class="font-bold u-m-b-10">已选优惠券</div>
          <el-table empty-text="未选择优惠券" :data="quansSelArr">
            <el-table-column type="index" width="50" label="#">
            </el-table-column>
            <el-table-column prop="name" label="券名称"> </el-table-column>
            <el-table-column label="券类型" width="80">
              <template v-slot="scope">
                {{ scope.row.type == 1 ? "优惠券" : "商品券" }}
              </template>
            </el-table-column>
            <el-table-column label="商品信息">
              <template v-slot="scope">
                <div class="u-flex" v-if="scope.row.type == 2">
                  <el-image
                    :src="scope.row.productCover"
                    style="width: 40px; height: 40px"
                    :preview-src-list="[scope.row.productCover]"
                  ></el-image>
                  <div class="u-m-l-10">{{ scope.row.productName }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="discountAmount" label="抵扣">
              <template v-slot="scope">
                <span class="color-red">
                  ￥{{ scope.row.discountAmount }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="useRestrictions" label="描述">
            </el-table-column>
            <el-table-column prop="useRestrictions" label="">
              <template v-slot="scope">
                <el-button type="danger" size="mini" @click="delQuan(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="u-flex u-m-t-20">
            <span class="">抵扣：</span>
            <span class="color-red font-bold">{{ AllCouponPrice }}</span>
          </div>
        </div>
        <div class="u-flex u-row-center u-m-t-50">
          <el-button size="medium" @click="close">取消</el-button>
          <el-button size="medium" type="primary" @click="confirm"
            >确定</el-button
          >
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { $activateByOrderId } from "@/api/table";
import {
  returnProductCouponAllPrice,
  returnProductCouponPrice,
  returnFullReductionCouponAllPrice,
} from "../util";
let $originFullReductionCoupon = [];
export default {
  props: {
    title: {
      type: String,
      default: "选择优惠券",
    },
    goodsArr: {
      type: Array,
      default: [],
    },
    vipUser: {
      type: Object,
      default: () => {
        return {
          isVip: false,
        };
      },
    },
    orderPrice: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      propSelCoup: [],
      fullReductionCouponSel: {
        id: "",
      },
      quansSelArr: [],
      quans: {
        fullReductionCoupon: [],
        productCoupon: [],
      },
      currentRow: null,
      multipleSelection: null,
      fullReductionCouponSelId: "",
      activeName: "youhui",
      form: {},
      show: false,
      isSetProductCoup: false,
    };
  },
  watch: {
    activeName(newval) {
      if (newval == "youhui") {
        this.filterFullReductionCoupon();
      }
    },
  },
  computed: {
    goodsDiscount() {
      const coupArr = this.quansSelArr.filter((v) => v.type == 2);
      return returnProductCouponAllPrice(coupArr, this.goodsArr, this.vipUser);
    },
    fullReductionCouponDiscount() {
      const coupArr = this.quansSelArr.filter((v) => v.type == 1);
      return returnFullReductionCouponAllPrice(coupArr);
    },
    AllCouponPrice() {
      return (
        this.goodsDiscount * 1 +
        this.fullReductionCouponDiscount * 1
      ).toFixed(2);
    },
  },
  methods: {
    delQuan(row) {
      if (row.type == 2) {
        const index = this.quansSelArr.findIndex((item) => item.id == row.id);
        this.quansSelArr.splice(index, 1);
        this.$refs.table1.toggleRowSelection(row, false);
      } else {
        this.fullReductionCouponSel = { id: "" };
        this.quansSelArr.splice(0, 1);
      }
      if (index != -1) {
        const row = this.quansSelArr.find;
      }
    },
    reset() {
      this.quansSelArr = [];
      this.fullReductionCouponSel = { id: "" };
      this.$refs.table1.clearSelection();
    },
    filterFullReductionCoupon() {
      this.quans.fullReductionCoupon = $originFullReductionCoupon.filter(
        (v) => this.orderPrice - this.goodsDiscount >= v.fullAmount
      );
    },
    productCouponChange(val) {
      if (this.isSetProductCoup) {
        return;
      }

      const firstCoup = this.quansSelArr[0];
      const firstIsDikouQuan = firstCoup ? firstCoup.type == 1 : false;
      if (firstCoup && firstIsDikouQuan) {
        if (
          this.orderPrice -
            this.fullReductionCouponDiscount -
            returnProductCouponAllPrice(val, this.goodsArr, this.vipUser) <
          firstCoup.fullAmount
        ) {
          this.$confirm(
            "所选优惠券不满足最低抵扣" + firstCoup.fullAmount + "元要求",
            "提示",
            {
              distinguishCancelAndClose: true,
              confirmButtonText: "放弃选择商品券",
              cancelButtonText: "删除优惠券",
              type: "warning",
            }
          )
            .then(() => {
              val.map((v) => {
                this.$refs.table1.toggleRowSelection(v);
              });
            })
            .catch((action) => {
              if (action == "cancel") {
                this.quansSelArr.splice(0, 1);
                this.fullReductionCouponSel = { id: "" };
                this.quansSelArr = [...val];
              }
              if (action == "close") {
                val.map((v) => {
                  this.$refs.table1.toggleRowSelection(v);
                });
              }
            });
        } else {
          this.quansSelArr.splice(
            val.length <= 0 ? 1 : val.length,
            this.quansSelArr.length
          );
          for (let i in val) {
            this.$set(this.quansSelArr, i * 1 + 1, { ...val[i] });
          }
        }
      } else {
        this.quansSelArr = [...val];
      }
    },
    fullReductionCouponClick(row) {
      if (row.id == this.fullReductionCouponSel.id) {
        this.fullReductionCouponSel = { id: "" };
        this.quansSelArr.splice(0, 1);
        return;
      }
      const dikouQuan = this.quansSelArr[0];
      this.fullReductionCouponSel = row;
      if (dikouQuan && dikouQuan.type == 1) {
        this.$set(this.quansSelArr, 0, row);
      } else {
        this.quansSelArr.unshift(row);
      }
      if(!this.fullReductionCouponSel.id){
        return
      }
      
      if (
        this.orderPrice -
          this.fullReductionCouponDiscount -
          this.goodsDiscount <
            this.fullReductionCouponSel.fullAmount
      ) {
        this.fullReductionCouponSel = { id: "" };
        this.quansSelArr.splice(0, 1);
        this.$confirm(
          "所选优惠券不满足最低抵扣" +
            this.fullReductionCouponSel.fullAmount +
            "元要求",
          "提示",
          {
            distinguishCancelAndClose: true,
            confirmButtonText: "确定",
            type: "warning",
          }
        ).then(() => {});
      }
    },
    productCouponClick(row) {
      this.$refs.table1.toggleRowSelection(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    tabClick() {},
    init() {},

    changeKey(key, val) {
      this[key] = val;
    },

    confirm() {
      this.$emit("confirm", [...this.quansSelArr]);
      this.close();
    },
    setSelectCoupon() {
      const dikouQuan = this.propSelCoup.find((v) => v.type == 1);
      this.fullReductionCouponSel = dikouQuan ? dikouQuan : { id: "" };
      const productCouArr = this.propSelCoup.filter((v) => v.type == 2);
      this.quans.productCoupon.map((v) => {
        for (let i in productCouArr) {
          this.isSetProductCoup = true;
          if (v.id == productCouArr[i].id) {
            this.$refs.table1.toggleRowSelection(v, true);
          }
        }
      });

      this.isSetProductCoup = false;
    },
    async open(data, propSelCoup) {
      this.propSelCoup = [...propSelCoup] || [];
      console.log(data);
      if (data.memberId) {
        let quansRes = await $activateByOrderId({
          orderId: data.id,
          memberId: data.memberId,
        });
        quansRes.fullReductionCoupon = quansRes.fullReductionCoupon.filter(
          (v) => this.orderPrice >= v.fullAmount
        );
        $originFullReductionCoupon = quansRes.fullReductionCoupon;
        this.quans.productCoupon = quansRes.productCoupon
          .map((v) => {
            return {
              ...v,
              discountAmount: returnProductCouponPrice(
                v,
                this.goodsArr,
                this.vipUser
              ),
            };
          })
          .filter((v) => v.discountAmount > 0);
        // this.quans = quans;
        this.filterFullReductionCoupon();
        this.quansSelArr = this.propSelCoup;
        this.$nextTick(() => {
          this.setSelectCoupon();
        });
      }

      this.show = true;
      this.init();
    },
    close() {
      this.show = false;
    },
  },
  mounted() {
    this.number = `${this.value}`;
  },
};
</script>
      
    <style  lang="scss" scoped>
.codeImg {
  width: 160px;
  border: 1px solid rgb(220, 223, 230);
  height: 160px;
}
::v-deep .el-input .el-input__inner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

::v-deep .el-input .el-input__inner::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
</style>