<template>
  <el-dialog width="600px" :title="title" :visible.sync="show">
    <div class="u-p-15">
      <div class="">
        <el-tabs v-model="activeName" @tab-click="tabClick">
          <el-tab-pane label="优惠券(单选)" name="youhui">
            <el-table
              empty-text="无可用优惠券"
              :data="quans.fullReductionCoupon"
              @cell-click="fullReductionCouponClick"
            >
              <el-table-column
                type="index"
                width="80"
                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" 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 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>
          </el-tab-pane>
          <el-tab-pane label="商品券(多选)" name="goods">
            <el-table
              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="商品信息">
                <template v-slot="scope">
                  <div class="u-flex ">
                    <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 label="券类型" width="80">
                <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="useRestrictions" label="描述">
            </el-table-column>
          </el-table>
        </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} 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 {
      fullReductionCouponSel: {
        id: "",
      },
      productCouponSelArr: [],
      quansSelArr: [],
      quans: {
        fullReductionCoupon: [],
        productCoupon: [],
      },
      currentRow: null,
      multipleSelection: null,
      fullReductionCouponSelId: "",
      activeName: "youhui",
      form: {},
      show: false,
    };
  },
  watch: {
    activeName(newval){
      if(newval=='youhui'){
        this.quans.fullReductionCoupon=$originFullReductionCoupon.filter(v=>(this.orderPrice-this.goodsDiscount)>=v.fullAmount)
      }
    }
  },
  computed:{
  
    goodsDiscount(){
      const coupArr=this.productCouponSelArr.filter(v=>v.type==2);
      return  returnProductCouponAllPrice(coupArr,this.goodsArr,this.vipUser)
    }
  },
  methods: {
    productCouponChange(val) {
      console.log(val)
      this.productCouponSelArr = val;
      const dikouQuan=this.quansSelArr[0]
      if (this.productCouponSelArr.length > 0&&(dikouQuan&&dikouQuan.type==1) ) {
        for (let i in val) {
        this.$set(this.quansSelArr, i+1, val[i])
        }
      } else {
        if(dikouQuan){
          this.quansSelArr=[dikouQuan]
        }else{
          this.quansSelArr = val;
        }
      }
      console.log(this.quansSelArr)
    },
    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);
      }
    },
    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();
    },
    async open(data) {
      console.log(data);
      if (data.memberId) {
        let quans = await $activateByOrderId({
          orderId: data.id,
          memberId: data.memberId,
        });
        quans.fullReductionCoupon = quans.fullReductionCoupon.filter(
          (v) => v.use
        );
        $originFullReductionCoupon=quans.fullReductionCoupon
        quans.productCoupon = quans.productCoupon.filter((v) => v.use);
        this.quans = quans;
      }

      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>