<template>
  <div class="">
    <Row>
      <i-col :span="12">
        <Form ref="welcomeForm"
              :model="welcome"
              :rules="welcomeRules">
          <FormItem label="欢迎语内容"
                    prop="description">
            <i-input v-model="welcome.description"
                     type="textarea"
                     style="height: 220px"
                     :autosize="{minRows: 10,maxRows: 10}"
                     placeholder="请输入欢迎语内容,最多100个字"></i-input>
          </FormItem>
          <Row style="margin-bottom: 10px"
               :gutter="10"
               class="inputItem"
               v-for="(item, index) in welcome.params"
               :key="index">
            <div v-if="item.type == 3">
              <i-col style="line-height: 32px"
                     :span="4"> APPID {{ index + 1 }} </i-col>
              <i-col :span="6">
                <i-input class="inputClass"
                         type="text"
                         disabled
                         v-model="item.defaultVal"></i-input>
              </i-col>
              <i-col style="line-height: 32px"
                     :span="4"> URI {{ index + 1 }} </i-col>
              <i-col :span="6">
                <i-input class="inputClass"
                         type="text"
                         disabled
                         v-model="item.description"></i-input>
              </i-col>
            </div>
            <div v-else>
              <i-col style="line-height: 32px"
                     :span="4"> {{item.name}}{{ index + 1 }} </i-col>
              <i-col :span="16">
                <i-input class="inputClass"
                         type="text"
                         disabled
                         v-model="item.defaultVal"></i-input>
              </i-col>
            </div>
            <i-col :span="4">
              <Button type="error"
                      @click="delActivityInput(index)">删除</Button>
            </i-col>
          </Row>
          <FormItem>
            <Button type="text"
                    @click="() => showMessageTypes = true"
                    icon="md-add">添加图片/网页/小程序消息</Button>
          </FormItem>
          <FormItem label="配置范围: ">
            <span v-if="welcome.stores.length > 0">
              {{welcome.stores[0].name}}等{{welcome.stores.length}}家店铺
            </span>
            <Button type="text"
                    @click="showStores"
                    icon="md-add">全部店铺</Button>
          </FormItem>
          <FormItem>
            <Button type="primary"
                    long
                    @click="submit">确定</Button>
          </FormItem>
        </Form>
      </i-col>
    </Row>
    <Modal v-model="showMessageTypes"
           title="添加图片/网页/小程序消息"
           :footer-hide="true">
      <Row :gutter="24">
        <i-col :span="8">
          <Upload ref="upload"
                  :show-upload-list="false"
                  :on-success="uploadImgSuccess"
                  :format="['jpg', 'jpeg', 'png']"
                  :max-size="2048"
                  :before-upload="handleBeforeUpload"
                  multiple
                  type="drag"
                  action=""
                  style="width: 100%;">
            <div style="width: 100%;">
              <Button long
                      type="primary">图片</Button>
            </div>
          </Upload>
        </i-col>
        <i-col :span="8">
          <Button long
                  @click="doShowWeb"
                  type="primary">网页</Button></i-col>
        <i-col :span="8">
          <Button long
                  @click="doShowMini"
                  type="primary">小程序</Button></i-col>
      </Row>
    </Modal>
    <Modal v-model="showWeb"
           title="添加网页消息"
           :loading="true">
      <Form ref="webForm"
            :model="webForm"
            :rules="webFormRules">
        <FormItem label="添加网页消息"
                  prop="url">
          <i-input v-model="webForm.url"
                   type="text"
                   placeholder="以http或https开头"></i-input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary"
                @click="cancelWeb">取消</Button>
        <Button type="primary"
                @click="okWeb">确定</Button>
      </div>
    </Modal>
    <Modal v-model="showMini"
           title="添加小程序消息"
           :loading="true">
      <Form ref="miniForm"
            :model="miniForm"
            :rules="miniFormRules">
        <FormItem label="APPID"
                  prop="appid">
          <i-input v-model="miniForm.appid"
                   type="text"
                   placeholder="请输入appid"></i-input>
        </FormItem>
        <FormItem label="APPID"
                  prop="uri">
          <i-input v-model="miniForm.uri"
                   type="text"
                   placeholder="请输入URl"></i-input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary"
                @click="cancelMini">取消</Button>
        <Button type="primary"
                @click="okMini">确定</Button>
      </div>
    </Modal>
    <selectStoreStep @doShow="doShow"
                     :schedule="welcome"
                     :show="showStoreCheck"></selectStoreStep>
  </div>
</template>

<script type="text/javascript">
import axios from "axios";
import { isURL } from '../../utils/Common';
import store from "../../store"
import selectStoreStep from '../activity/selectStoreStep';
const validateUrl = (rule, value, callback) => {
  const is = isURL(value)
  if (is) {
    callback();
  } else {
    callback(new Error('URL非法,请以http或https开头'));
  }
};
export default {
  data () {
    return {
      showStoreCheck: false,
      showWeb: false,
      showMini: false,
      id: 0,
      showMessageTypes: false,
      welcome: {
        description: "",
        params: [],
        companys: [],
        name: "欢迎语",
        stores: []
      },
      welcomeRules: {
        description: [
          { required: true, message: "请输入欢迎语内容", trigger: "blur" },
          { type: 'string', max: 100, message: '欢迎语最长100个字符', trigger: 'blur' },]
      },
      webFormRules: {
        url: [
          { required: true, message: "请输入url", trigger: "blur" },
          { validator: validateUrl, trigger: 'blur' }]
      },
      webForm: { url: "" },
      miniFormRules: {
        appid: [
          { required: true, message: "请输入url", trigger: "blur" },],
        uri: [
          { required: true, message: "请输入url", trigger: "blur" },]
      },
      miniForm: { appid: "", uri: "" }
    }
  },
  created () {
    this.id = this.$route.query.id
  },
  components: {
    selectStoreStep
  },
  methods: {
    doShow () {
      this.showStoreCheck = false
      this.welcome = store.getters.useData
    },
    showStores () {
      store.commit("SET_useData", { ...store.getters.useData, ...this.welcome })
      this.showStoreCheck = true;
    },
    uploadImgSuccess (res, file) {

    },
    cancelWeb () {
      this.showWeb = false;
    },
    doShowWeb () {
      this.showWeb = true;
      this.webForm = { url: "" };
    },
    doShowMini () {
      this.showMini = true;
      this.miniForm = {
        appid: "", uri: ""
      };
    },
    cancelMini () {
      this.showMini = false;
    },
    okWeb () {
      let _this = this;
      this.$refs["webForm"].validate((valid) => {
        if (valid) {
          _this.welcome.params.push({
            attr: "url",
            defaultVal: this.webForm.url,
            description: this.webForm.url,
            isRequired: 1,
            key: "url",
            limitLower: null,
            limitUpper: null,
            name: "网页",
            type: 2
          });
          this.showWeb = false;
          this.showMessageTypes = false;
        }
      })
    },
    okMini () {
      let _this = this;
      this.$refs["miniForm"].validate((valid) => {
        if (valid) {
          _this.welcome.params.push({
            attr: "mini",
            defaultVal: this.miniForm.appid,
            description: this.miniForm.uri,
            isRequired: 1,
            key: "mini",
            limitLower: null,
            limitUpper: null,
            name: "小程序消息",
            type: 3
          });
          this.showMini = false;
          this.showMessageTypes = false;
        }
      })
    },
    delActivityInput (index) {
      this.welcome.params.splice(index, 1);
      this.$forceUpdate();
    },
    handleBeforeUpload (res) {
      const me = this;
      let data = new FormData();
      data.append("file", res);
      axios({
        method: "post",
        url: "/upload",
        data: data,
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then(function (res) {
        if (res.data.success) {
          // me.formValidate.logo = res.data.results;
          me.welcome.params.push({
            attr: "image",
            defaultVal: res.data.results,
            description: res.data.results,
            isRequired: 1,
            key: "image",
            limitLower: null,
            limitUpper: null,
            name: "图片",
            type: 1
          });
          me.showMessageTypes = false;
        }
      });
      return false;
    },
    submit () {
      let _this = this;
      if (this.welcome.params.length <= 0) {
        _this.$Message.error("请添加图片/网页/小程序消息");
      }
      if (this.welcome.stores.length <= 0) {
        _this.$Message.error("请至少选择一个店铺");
      }
      this.$refs["welcomeForm"].validate((valid) => {
        if (valid) {
          console.log(_this.welcome)
        }
      })
    }
  },
}
</script>

<style scope>
.ivu-upload-drag {
  border: none !important;
}
</style>
