<template>
  <a-form layout="vertical" ref="formRef" @finish="onFinish" @finishFailed="onFinishFailed" :model="activity"
          :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="activeKey_content" :tab="activity_content">
        <a-form-item :label="activity_type" name="type">
          <a-radio-group v-model:value="activity.type">
            <a-radio-button value="1">{{ activity_cycle }}</a-radio-button>
            <a-radio-button value="2">{{ activity_custom }}</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item v-if="activity.type === '2'" v-model:label="RangePicker.showTime" name="range_time"
                     v-bind="rangeConfig">
          <a-range-picker v-model:value="activity.range_time" format="YYYY-MM-DD HH:mm:ss" show-time
                          value-format="YYYY-MM-DD HH:mm:ss"/>
        </a-form-item>
        <a-form-item v-if="activity.type === '1'" :label="cycle_type"
                     :rules="[{ required: true, message: cycle_type_required }]"
                     name="cycle_type">
          <a-select v-model:value="activity.cycle_type" :placeholder="placeholder_cycle_type"
                    style="width: 200px"
                    @change="handleProvinceChange">
            <a-select-option v-for="(cycle_type, index) in cycleTypes" :key="cycle_type" :value="cycle_type">
              {{ cycle_type }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item v-if="activity.type === '1'" :label="cycle_data"
                     :rules="[{ required: true, message: cycle_data_required }]"
                     name="cycle_data">
          <a-select v-model:value="activity.cycle_data" :placeholder="placeholder_cycle_data"
                    style="width: 200px">
            <a-select-option v-for="(cycle_data, index) in cycleDatas" :key="cycle_data" :value="index">
              {{ cycle_data }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item hidden name="id">
          <a-input v-model:value="activity.id" name="id" type="hidden"/>
        </a-form-item>
        <a-tabs v-model:activeKey="activeKey_lang_content">
          <a-tab-pane v-for="(lang, lang_index) in langs" :key="lang_index" :tab="lang.value" forceRender="true">
            <a-form-item :label="activity_picture" :name="['activity_content', lang.key, 'picture']"
                         :rules="[{ required: true, message: picture_required }]">
              <a-upload v-model:file-list="activity.activity_content[lang.key].picture"
                        :before-upload="beforeUpload" :headers="headers"
                        :max-count="1" action="/ex-admin/addons-webman-controller-IndexController/activityUpload"
                        list-type="picture-card">
                <div>
                  <PlusOutlined/>
                  <div style="margin-top: 8px">Upload</div>
                </div>
              </a-upload>
            </a-form-item>
            <a-form-item :name="['activity_content', lang.key, 'id']" hidden>
              <a-input v-model:value="activity.activity_content[lang.key].id" type="hidden"/>
            </a-form-item>

            <a-form-item :label="activity_name" :name="['activity_content', lang.key, 'name']"
                         :rules="[{ required: true, message: name_required }]">
              <a-input v-model:value="activity.activity_content[lang.key].name" :maxlength="100"
                       :rules="[{ required: true, message: activity_name_required }]"
                       show-count/>
            </a-form-item>
            <a-form-item :label="recharge_setting" :rules="[{ required: true, message: recharge_setting_required }]"
                         name="recharge_id">
              <a-select v-model:value="activity.recharge_id" allowClear="true">
                <a-select-option v-for="option in options" :key="option.id" :value="option.id">
                  {{ option.title }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-tab-pane>
        </a-tabs>
      </a-tab-pane>
    </a-tabs>
    <a-form-item>
      <a-button type="primary" html-type="submit">{{ Submit }}</a-button>
      <a-button style="margin-left: 10px" @click="resetForm">{{ reset }}</a-button>
    </a-form-item>
  </a-form>
</template>
<script>
const cycleType = ['Week', 'Month'];
const cycleData = {
  Week: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
  Month: ['1', '2', '3', '4', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
};

const messages = {
  //简体中文
  'zh-CN': {
    rangTime: '请选择开放时间',
    showTime: '开放时间',
    submit: '提交',
    reset: '重置',
    activity_content: '活动内容',
    activity_picture: '活动图片',
    activity_type: '活动时间模式',
    activity_cycle: '周期模式',
    activity_custom: '自定义模式',
    activity_cycle_data: '周期数据',
    activity_picture_required: '请上传活动图片',
    activity_name: '活动名称',
    activity_name_required: '请填写活动名称',
    activity_link: '活动链接',
    upload_type: '支持png, jpeg, png图片格式',
    picture_required: '请上传活动图片',
    name_required: '请填写活动名称',
    recharge_setting: '充值配置',
    recharge_setting_required: '请选择充值配置',
    placeholder_cycle_type: '请选择周期模式',
    placeholder_cycle_data: '请选择周期配置数据',
    cycle_type_help: '周期模式下,周期类型以及周期配置为必选项',
    cycle_type: '周期类型',
    cycle_data: '周期配置',
    cycle_type_required: '请选择周期类型',
    cycle_data_required: '请选择周期配置',
  },
  //英文
  en: {
    rangTime: '请选择开放时间',
    showTime: '开放时间',
    submit: '提交',
    reset: '重置',
    activity_content: '活动内容',
    activity_picture: '活动图片',
    activity_type: '活动时间模式',
    activity_cycle: '周期模式',
    activity_custom: '自定义模式',
    activity_cycle_data: '周期数据',
    activity_picture_required: '请上传活动图片',
    activity_name: '活动名称',
    activity_name_required: '请填写活动名称',
    activity_link: '活动链接',
    upload_type: '支持png, jpeg, png图片格式',
    upload_size: '图片最大不得超过5M',
    picture_required: '请上传活动图片',
    name_required: '请填写活动名称',
    recharge_setting: '充值配置',
    recharge_setting_required: '请选择充值配置',
    placeholder_cycle_type: '请选择周期模式',
    placeholder_cycle_data: '请选择周期配置数据',
    cycle_type_help: '周期模式下,模式类型以及相关配置为必选项',
    cycle_type: '周期类型',
    cycle_data: '周期配置',
    cycle_type_required: '请选择周期类型',
    cycle_data_required: '请选择周期配置',
  },
  'Ma-my': {
    rangTime: '请选择开放时间',
    showTime: '开放时间',
    submit: '提交',
    reset: '重置',
    activity_content: '活动内容',
    activity_picture: '活动图片',
    activity_type: '活动时间模式',
    activity_cycle: '周期模式',
    activity_custom: '自定义模式',
    activity_cycle_data: '周期数据',
    activity_picture_required: '请上传活动图片',
    activity_name: '活动名称',
    activity_name_required: '请填写活动名称',
    activity_link: '活动链接',
    upload_type: '支持png, jpeg, png图片格式',
    upload_size: '图片最大不得超过5M',
    picture_required: '请上传活动图片',
    name_required: '请填写活动名称',
    recharge_setting: '充值配置',
    recharge_setting_required: '请选择充值配置',
    placeholder_cycle_type: '请选择周期模式',
    placeholder_cycle_data: '请选择周期配置数据',
    cycle_type_help: '周期模式下,模式类型以及相关配置为必选项',
    cycle_type: '周期类型',
    cycle_data: '周期配置',
    cycle_type_required: '请选择周期类型',
    cycle_data_required: '请选择周期配置',
  },
  // 繁体中文
  'cam_dia': {
    rangTime: '请选择开放时间',
    showTime: '开放时间',
    submit: '提交',
    reset: '重置',
    activity_content: '活动内容',
    activity_picture: '活动图片',
    activity_type: '活动时间模式',
    activity_cycle: '周期模式',
    activity_custom: '自定义模式',
    activity_cycle_data: '周期数据',
    activity_picture_required: '请上传活动图片',
    activity_name: '活动名称',
    activity_name_required: '请填写活动名称',
    activity_link: '活动链接',
    upload_type: '支持png, jpeg, png图片格式',
    upload_size: '图片最大不得超过5M',
    picture_required: '请上传活动图片',
    name_required: '请填写活动名称',
    recharge_setting: '充值配置',
    recharge_setting_required: '请选择充值配置',
    placeholder_cycle_type: '请选择周期模式',
    placeholder_cycle_data: '请选择周期配置数据',
    cycle_type_help: '周期模式下,模式类型以及相关配置为必选项',
    cycle_type: '周期类型',
    cycle_data: '周期配置',
    cycle_type_required: '请选择周期类型',
    cycle_data_required: '请选择周期配置',
  }
}
export default {
  name: "socket.vue",
  //可传参数
  props: {
    activityModel: {},
    rechargeSetting: [],
    langs: {},
    showTime: String,
    langLocale: String,
  },
  data() {
    return {
      cycleTypes: cycleType,
      cycleDatas: cycleData[cycleType[1]],
      activity: this.activityModel,
      options: this.rechargeSetting,
      activeKey: 'activeKey_content',
      newTabIndex: '',
      activeKey_lang_content: 0,
      activeKey_lang_phase: 0,
      rangeConfig: {
        rules: [{
          type: 'array',
          required: true,
          message: messages[this.langLocale]['rangTime'],
        }],
      },
      RangePicker: Vue.reactive({
        showTime: messages[this.langLocale]['showTime']
      }),
      labelCol: {
        style: {
          width: '150px',
        },
      },
      wrapperCol: {
        span: 24,
      },
      headers: {
        authorization: localStorage.getItem("agent_ex-admin-token"),
      },
      Submit: messages[this.langLocale]['submit'],
      reset: messages[this.langLocale]['reset'],
      activity_content: messages[this.langLocale]['activity_content'],
      activity_picture: messages[this.langLocale]['activity_picture'],
      activity_type: messages[this.langLocale]['activity_type'],
      activity_custom: messages[this.langLocale]['activity_custom'],
      activity_cycle: messages[this.langLocale]['activity_cycle'],
      activity_cycle_data: messages[this.langLocale]['activity_cycle_data'],
      activity_name: messages[this.langLocale]['activity_name'],
      activity_name_required: messages[this.langLocale]['activity_name_required'],
      activity_link: messages[this.langLocale]['activity_link'],
      activity_notice: messages[this.langLocale]['activity_notice'],
      upload_type: messages[this.langLocale]['upload_type'],
      upload_size: messages[this.langLocale]['upload_size'],
      picture_required: messages[this.langLocale]['picture_required'],
      name_required: messages[this.langLocale]['name_required'],
      recharge_setting: messages[this.langLocale]['recharge_setting'],
      recharge_setting_required: messages[this.langLocale]['recharge_setting_required'],
      placeholder_cycle_type: messages[this.langLocale]['placeholder_cycle_type'],
      placeholder_cycle_data: messages[this.langLocale]['placeholder_cycle_data'],
      cycle_type_help: messages[this.langLocale]['cycle_type_help'],
      cycle_type: messages[this.langLocale]['cycle_type'],
      cycle_data: messages[this.langLocale]['cycle_data'],
      cycle_type_required: messages[this.langLocale]['cycle_type_required'],
      cycle_data_required: messages[this.langLocale]['cycle_data_required'],
      selectedItems: Vue.ref([]),
    };
  },
  //生命周期渲染完执行
  created() {
    this.newTabIndex = Vue.ref(0);
    if (this.activity.id === null || this.activity.id === undefined || this.activity.id === '') {
      this.activity = Vue.reactive({
        id: '',
        type: '2',
        cycle_type: null,
        cycle_data: null,
        range_time: {
          start_time: '',
          end_time: '',
        },
        dateRange: ['', ''],
        activity_content: {
          'zh-CN': {
            name: '',
            lang: 'zh-CN',
            picture: [],
            id: '',
          },
          en: {
            name: '',
            lang: 'en',
            picture: [],
            id: '',
          },
          'Ma-my': {
            name: '',
            lang: 'Ma-my',
            picture: [],
            id: '',
          },
          'cam_dia': {
            name: '',
            lang: 'cam_dia',
            picture: [],
            id: '',
          }
        }
      })
    } else {
      if (this.activity.type === '1') {
        this.cycleDatas = cycleData[this.activity.cycle_type];
      } else {
        this.cycleTypes = cycleType;
        this.cycleDatas = cycleData['Week'];
        this.activity.cycle_type = null;
        this.activity.cycle_data = null;
      }
    }
  },
  //定义函数方法
  methods: {
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
      if (!isJpgOrPng) {
        this.$message.error(this.upload_type);
      }
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isLt2M) {
        this.$message.error(this.upload_size);
      }
      return isJpgOrPng && isLt2M;
    },
    resetForm() {
      this.$refs.formRef.resetFields();
    },
    onFinish(values) {
      this.$request({
        url: '/ex-admin/addons-webman-controller-ActivityController/activityOperate',
        method: 'post',
        data: values,
        header: this.headers
      }).then(res => {
        if (res.code === 200) {
          // location.reload();
        }
      })
    },
    onFinishFailed(errorInfo) {
      let name = errorInfo.errorFields[0]['name'];
      if (name.length > 0) {
        switch (name[0]) {
          case 'range_time':
            this.activeKey = 'activeKey_content';
            break;
          case 'activity_content':
            this.activeKey = 'activeKey_content';
            if (name[1] !== 'undefined' && name[1] != null && name[1] !== '') {
              let ac = 0;
              for (let key in this.activity.activity_content) {
                if (key === name[1]) {
                  this.activeKey_lang_content = ac;
                }
                ac++;
              }
            }
            break;
        }
      }
    },
    handleProvinceChange(value) {
      this.cycleDatas = cycleData[value];
    },
  }
}
</script>