import {
  stateConfig,
  stateFormData
} from "../../utils/orderAddOptions";
import { httpAdd } from "../../api/serverOrder";
import { valMobile } from "../../utils/validate";
import {
  createStoreBindings
} from 'mobx-miniprogram-bindings'
import {
  store
} from "../../store/index";
Page({
  data: {
    phone: "",
    token: "",
    loading: false,
    popupOptions: [],
    popupType: "",
    popupKey: "",
    popupTitle: "",
    popupApi: "",
    show: false,
    config: stateConfig,
    formData: {
      ...stateFormData
    },
    popupValue: '',
    background: [
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
    ],
    indicatorDots: true,
    vertical: false,
    autoplay: true,
    interval: 3000,
    duration: 500,
    date: '',
  },

  onLoad() {
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: ["token", "phone"],
      actions: ["setPhone"],
    });
  },
  onUnload() {
    this.storeBindings.destroyStoreBindings();
  },
  onShow() {
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0
      })
    }
  },

  async submitTap() {
    const token = this.data.token || ""
    if (token === '') {
      wx.navigateTo({
        url: "../../userLogin/pages/login/index"
      })
      return
    }
    const {
      loading,
      formData,
      phone
    } = this.data

    if (loading) return
    this.setData({
      loading: true
    })
    const {
      city,
      act_time_start,
      act_day_count,
      item_id,
      name,
      // budget,
      participant,
      require_item,
      req_demand,
    } = formData
    const keyMsg = this.valKey()
    if (keyMsg) {
      this.showToastMsg(keyMsg)
      this.setData({
        loading: false
      })
      return
    }
    const msg = valMobile(phone)
    if (msg) {
      this.showToastMsg(msg)
      this.setData({
        loading: false
      })
      return
    }
    const {
      code,
      data,
      msg: ss
    } = await httpAdd({
      city,
      act_time: act_time_start,
      act_day_count,
      item_id,
      name,
      // budget,
      participant,
      require_item,
      req_demand: req_demand.toString(),
      phone
    })

    if (code === 1) {
      this.showToastMsg('会务订单创建成功！')
      wx.navigateTo({
        url: '../../userOrder/pages/order-details/index?id=' + data.reqCode
      })
      this.setData({
        formData: {
          ...formData
        }
      })
    } else if (code === 0) {
      this.showToastMsg(ss)
    } else {

    }

    this.setData({
      loading: false
    })
  },

  valKey() {
    let msg = ""
    const {
      formData,
      config
    } = this.data
    const list = [
      "city",
      "act_time",
      "name",
      // "budget",
      "item_id",
      "participant",
      "require_item",
      "req_demand"
    ]
    list.forEach((key) => {
      if (config[key] === 'checkbox') {
        if (formData[key].length === 0) {
          msg = `至少选择一个${config[key].title}！`
        }
      } else {
        if (!formData[key]) {
          msg = `${config[key].title}不能为空！`
        }
      }
    })
    return msg
  },

  onPhoneChange(event: any) {
    this.setData({
      phone: event.detail.value
    })
  },
  onNameChange(event: any) {
    const {
      formData
    } = this.data
    let model = {
      ...formData,
      name: event.detail.value
    }
    this.setData({
      formData: model
    })
  },
  //输入组件 只读点击选择数据
  onFormChange(event: any) {
    const token = this.data.token || ""
    const key = event.currentTarget.dataset.type
    const type = this.data.config[key].type
    if (token === '') {
      this.showToastMsg("请先登录！")
      return
    }
    const {
      act_time_start,
      act_time_end
    } = this.data.formData
    this.setData({
      popupValue: type !== 'time' ? this.data.formData[key] : act_time_start ? [act_time_start, act_time_end] : [],
      popupType: type,
      popupTitle: this.data.config[key].title,
      popupApi: this.data.config[key].api,
      popupKey: key,
      show: true,
      popupOptions: []
    });
  },
  tapItemClick(e: any) {
    const {
      label,
      popupKey,
      popupType,
      value,
      count,
      end
    } = e.detail
    let form = {
      ...this.data.formData
    }
    form[popupKey] = value
    form[popupKey + '_name'] = label
    if (popupType === 'time') {
      form.act_day_count = count;
      form.act_time_start = value;
      form.act_time_end = end
    }
    this.setData({
      show: false,
      formData: form
    });
  },

  popupLeft() {
    this.setData({
      show: false,
    });
  },
  showToastMsg(msg: string) {
    wx.showToast({
      title: msg,
      icon: 'none',
      duration: 2000
    })
  },


})