import Toast from '@vant/weapp/dist/toast/toast';
import {
  SelectedGoodsTypes,
  DisabledGoodsTypes,
  SkuItem,
  SpecDetailItem,
  SpecItem,
  DataType,
  GoodsSpecificatedItem,
} from './types';

Component({
  externalClasses: [
    'wrapper-class',
    'spec-info-class',
    'spec-row-class',
    'spec-count-class',
    'spec-total-class',
  ],
  options: {
    addGlobalClass: true,
  },

  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
  data: {
    selectedGoodsTypes: [],
    disabledGoodsTypes: [],
    skuList: [],
    specList: [],
    goodsTypesOptions: [],
    selectedGoodsShowText: '',
    goodsPrice: '',
    goodsCount: 1,
    show: false,
    imgUrl: '',
  } as DataType,

  properties: {
    title: {
      type: String,
      value: '',
    },
    btnDisabled: {
      type: Boolean,
      value: false,
    },
    btnText: {
      type: String,
      value: '确定',
    },
    show: {
      type: Boolean,
      value: false,
      observer(this, current: boolean) {
        if (current) {
          const { selectedGoodsTypes, disabledGoodsTypes } = this.properties;
          this.data.selectedGoodsTypes = selectedGoodsTypes;
          this.data.disabledGoodsTypes = disabledGoodsTypes;
          const selectedGoodsShowText: string = selectedGoodsTypes
            .map((item: GoodsSpecificatedItem) => item.text)
            .join(',');
          this.setData({ selectedGoodsShowText });
        }
      },
    },
    imgUrl: {
      type: String,
      value: '',
      observer(this, newVal: string) {
        this.setData({
          imgUrl: newVal,
        });
      },
    },
    selectedGoodsTypes: {
      type: Array,
      value: [] as SelectedGoodsTypes,
    },
    disabledGoodsTypes: {
      type: Array,
      value: [] as DisabledGoodsTypes,
    },
    goodsPrice: {
      type: Number,
      optionalTypes: [String],
      value: 0,
      observer(this, newVal: number | string) {
        const { skuList = [] } = this.properties;
        const skuPriceList: number[] = skuList.map((item: SkuItem) => item.price);
        const defaultValue = `${Math.min(...skuPriceList)}-${Math.max(...skuPriceList)}`;
        const goodsPrice: any = newVal ?? defaultValue;
        this.setData({
          goodsPrice,
        });
      },
    },
    discountPrice: {
      type: Number,
      optionalTypes: [String],
      value: 0,
    },
    goodsCount: {
      type: Number,
      value: 1,
      observer(this, newVal: number) {
        this.setData({
          goodsCount: newVal,
        });
      },
    },
    minCount: {
      type: Number,
      value: 1,
      observer(this, newVal) {
        this.setData({
          minCount: newVal,
          buyNum: newVal,
        });
      },
    },
    maxCount: {
      type: Number,
      value: 999999,
      observer(this, newVal) {
        this.setData({
          maxCount: newVal,
        });
      },
    },
    skuList: {
      type: Array,
      value: [],
      observer(this, newVal: SkuItem[]) {
        if (newVal && newVal.length > 0) {
          const skuList = newVal;
          this.setData({
            skuList,
          });
        }
      },
    },
    specList: {
      type: Array,
      value: [],
      observer(this, newVal: SpecItem[]) {
        if (newVal && newVal.length > 0) {
          const specList = newVal;
          const goodsTypesOptions = specList.map((item: SpecItem) => ({
            title: item.name,
            type: item.name,
            list: item.specDetailList
              .sort((data1: SpecDetailItem, data2: SpecDetailItem) => data2.sort - data1.sort)
              .map((data: SpecDetailItem, index: number) => ({
                id: index + 1,
                text: data.name,
              })),
          }));
          this.setData({
            specList,
            goodsTypesOptions,
          });
        }
      },
    },
    useSlotButton: {
      type: Boolean,
      value: false,
    },
  },

  methods: {
    // 显示商品规格选项弹出框
    showGoodsSpecPopup() {
      this.setData({
        show: true,
      });
    },

    // 隐藏商品规格选项弹出框
    hideGoodsSpecPopup() {
      this.setData({
        show: false,
      });
      this.triggerEvent('closeSpecsPopup', {
        show: false,
      });
    },

    // 预览商品图
    previewImage(e: WechatMiniprogram.TouchEvent) {
      const { src = '' } = e.currentTarget.dataset;
      // 图片列表来源于商品不同规格的图片组成的列表
      const imgUrls: string[] = this.data.skuList.map((item: SkuItem) => item.pic);
      wx.previewImage({
        current: src || '', // 当前显示图片的http链接
        urls: imgUrls || [], // 需要预览的图片http链接列表
      });
    },

    // 选择商品规格
    onClickGoodsTypeItem(e: WechatMiniprogram.TouchEvent) {
      const { row, index } = e.currentTarget.dataset;
      const { selectedGoodsTypes = [], disabledGoodsTypes = [], skuList = [] } = this.data;
      const disabledGoodsType: number[] = disabledGoodsTypes[index] || [];
      if (disabledGoodsType.indexOf(row.id) > -1) {
        // eslint-disable-next-line new-cap
        Toast({
          message: '库存不足',
          duration: 1000,
        });
        return;
      }
      selectedGoodsTypes[index] = row;
      const selectedGoodsShowText: string = selectedGoodsTypes
        .map((item: GoodsSpecificatedItem) => item.text)
        .join(',');
      const selectedSkuName = selectedGoodsTypes
        .map((item: GoodsSpecificatedItem) => item.text)
        .join('_');
      const selectedSkuItem: SkuItem | undefined = skuList.find((item: SkuItem) => item.detailName === selectedSkuName);
      if (selectedSkuItem) {
        const imgUrl: string = selectedSkuItem?.pic || selectedGoodsTypes[0]?.imgUrl;
        const goodsPrice = String(selectedSkuItem?.price);
        this.setData({
          imgUrl,
          // goodsPrice,
        });
        this.triggerEvent('chooseSpecItem', {
          goodsPrice,
          selectedGoodsTypes,
        });
      }
      this.setData({
        selectedGoodsTypes,
        selectedGoodsShowText,
      });
      this.triggerEvent('chooseSpecItem', {
        goodsPrice: this.data.goodsPrice,
        selectedGoodsTypes,
      });
    },

    // 选择数量
    onChangeCount(e: WechatMiniprogram.TouchEvent) {
      const goodsCount: number = e.detail as unknown as number;
      const goodsPrice = Number(this.data.goodsPrice) || 0;
      if (typeof goodsPrice !== 'number') return;
      this.setData({
        goodsCount,
      });
      this.triggerEvent('changeCount', {
        goodsCount,
      });
    },

    // 确定规格
    goodsConfirm() {
      const { goodsCount, selectedGoodsTypes } = this.data;
      this.triggerEvent('goodsConfirm', {
        goodsCount,
        selectedGoodsTypes,
      });
    },
  },
});