<template>
  <div class="newPopActivity H100">
    <div class="head_box">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item >内容管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/popularActivitiesPage'}">热门活动</el-breadcrumb-item>
        <el-breadcrumb-item>{{headFont}}</el-breadcrumb-item>
      </el-breadcrumb>
      <h4>{{headFont}}</h4>
    </div>
    <div class="content_box">
      <div class="reject_box" v-show="isShow == 1 || isShow == 6">
        <p><i></i><span>驳回原因:</span>&nbsp;  {{rejectReason}}</p>
      </div>
      <div class="scrool">
        <div class="form_box" >
        <div class="form_scroll_div">
          <!--<el-scrollbar >-->
            <el-row>
              <el-form :model="contentForm"  :rules="formRules" label-width="100px"  ref="ruleForm">
                <el-col :span="12">
                  <el-form-item label="活动名称：" class="input_form" prop="name">
                    <el-input size="small" v-model="contentForm.name" auto-complete="off" placeholder="请输入活动名称" clearable></el-input>
                  </el-form-item>
                  <el-form-item class="icon_box" label="业务icon：" prop="icon">
                    <el-upload class="avatar-uploader" name="icon" action=""
                               :file-list="fileList"
                               accept="image/png"
                               :limit="1"
                               :on-change="handleChange"
                               :on-exceed="handleExceed"
                               :before-remove="beforeRemove"
                               :on-remove="handleRemove"
                               :http-request="handleUploadImg">
                      <img v-if="contentForm.icon" :src="contentForm.icon" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      <div slot="tip" class="el-upload__tip">只支持上传一张.png 格式 大小建议不超过96px*96px</div>
                    </el-upload>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="网点归属：" label-width="140px" prop="bankBranchId" class="input_form">
                    <el-input size="small" v-model="contentForm.bankBranchName" :disabled="true"></el-input>
                  </el-form-item>
                  <el-form-item label="是否支持预约：" label-width="140px">
                    <el-radio-group v-model="contentForm.isOrder" @change="radioChange">
                      <el-radio label="1">是</el-radio>
                      <el-radio label="2">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="最大预约人数：" label-width="140px" class="input_form"  prop="maxNumber">
                    <el-input :disabled="contentForm.isOrder == '1' ? false : true" size="small" v-model="contentForm.maxNumber" auto-complete="off" placeholder="请输入最大预约人数" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="内容："  class="editor-container" prop="content">
                    <UE  :defaultMsg="contentForm.content"  :config=config  :id="ue1" ref="ue1" ></UE>
                  </el-form-item>
                  <div class="dialog-footer">
                    <el-button size="mini" type="primary" @click="submit(2)">提交</el-button>
                    <el-button size="mini"  @click="submit(1)">保存</el-button>
                    <el-button size="mini" @click="handleCancel('ruleForm')">取消</el-button>
                  </div>
                </el-col>
              </el-form>
            </el-row>
          <!--</el-scrollbar>-->
        </div>
      </div>
      </div>
    </div>
  </div>
</template>

<script>
  import UE from '../../components/ue/ueditor'
  export default {
    data() {
      return {
        fileList: [],
        rejectReason:"",
        isShow:"",
        id:"",
        dialogImageUrl: '',
        typeList: [],
        ue1: "ue1",
        config: { initialFrameWidth: null,initialFrameHeight: 408, autoHeightEnabled: true,autoFloatEnabled: false},
        contentForm:{name:'',bankBranchId:'',bankBranchName:'',isOrder:'2',content:'',icon:'',maxNumber:''},
        bankList: [],
        value: '',
        headFont:'新增热门活动',
        formRules:{
          name:[
            {required: true, message: '请输入活动名称', trigger: 'blur' },
            {max: 20, message: '不能超过20个字符'},
            {pattern: /^[\s\S]*.*[^\s][\s\S]*$/, message: '请输入正确的活动名称'}
          ],
          icon:[
            {required: true, message: '请上传业务icon', trigger: 'blur' }
          ],
          maxNumber:[],
          bankBranchId:[
            {required: true, message: '请选择所属网点', trigger: 'blur' }
          ],
          content:[
            {required: true, message: '请输入内容', trigger: 'blur' }
          ]
        }
      }
    },
    computed: {
    },
    mounted() {
      this.initData();
    },
    components: {UE},
    watch:{
      contentForm:{//深度监听，可监听到对象、数组的变化
        handler(val){
          if(val.isOrder == 1){
            let obj = [{required: true, message: '请输入最大预约人数', trigger: 'blur'},
              {pattern: /^[1-9]\d*$/, message: '只能输入大于0的数字'}];
            this.formRules.maxNumber = obj;
          }else{
            let obj = [];
            this.formRules.maxNumber = obj;
          }
        },
        deep:true
      }
    },
    methods: {
      initData() {
        this.id = this.$route.query.id;
        if (this.id) {
          this.headFont = '编辑热门活动';
          this.getInfoById(this.id)
        }
        this.contentForm.bankBranchId = localStorage.getItem('bankBranchId');
        this.contentForm.bankBranchName = localStorage.getItem('bankBranchName');
      },
      radioChange() {
        if (this.contentForm.isOrder == 2) {
          this.contentForm.maxNumber = "";
        } else {
          this.contentForm.maxNumber = "";
        }
      },
      getInfoById(id) {
        let vm = this;
        vm.$https({
          method: 'get',
          url: 'hotProductActivity/getById?id='+id,
          authType: this.backToken
        }).then(function (res) {
          if (res.status == 201 || res.status == 200) {
              let obj = {};
              obj.name = res.data.name;
              obj.bankBranchId = res.data.bankBranchId;
              obj.bankBranchName = res.data.bankBranchInfo.name;
              obj.content = res.data.content;
              obj.icon = res.data.icon;
              obj.maxNumber = res.data.maxNumber;
              obj.isOrder = res.data.isOrder.toString();
              if(obj.maxNumber == 0){
                obj.maxNumber = "";
              }
              vm.contentForm = obj;
              vm.rejectReason = res.data.rejectReason;
              vm.isShow = res.data.isShow;
              vm.setUEContent()
            }
          })
          .catch(function (error) {
            console.log(error)
          });

      },
      setUEContent() {
        this.$refs.ue1.setUEContentTxt(this.contentForm.content)
      },
      handleUploadImg(file) {
        let vm = this;
        vm.handleUpload(file.file).then(function (response) {
          let obj = {
            name: file.file.name,
            url: response.data.url
          }
          vm.fileList.push(obj);
          if (response.data.url) {
            vm.$refs['ruleForm'].validateField(file.filename);

          }
        })
      },
      handleUpload(file) {
        let _this = this;
        let formData = new FormData();
        formData.append("bc_cover", file);
        return new Promise(function (resolve, reject) {
          _this.$https({
            url: 'pic/upload',
            method: 'post',
            authType: _this.backToken
          }, formData, 'file', 60000).then((res) => {
            resolve(res);
            _this.contentForm.icon = res.data.url;
          }, (error) => {
            console.log(error)
          })
        })
      },
      handleExceed() {
        this.$message.warning(`当前限制选择 1 个文件，如需更改请删除后重选`);
      },
      beforeRemove(file) {
        if(file) {
          return this.$confirm(`确定移除 ${ file.name }？`);
        }
      },
      handleChange(file, fileList) {
        this.fileList = fileList.slice(1);
      },
      handleRemove(){
        this.contentForm.icon = '';
      },
      handleCancel(formName) {
        this.contentForm={};
        this.$refs[formName].resetFields();
        this.$router.push('/popularActivitiesPage');
      },
      submit(action) {
        let vm = this;
        if(vm.contentForm.isOrder == 2){
          vm.contentForm.maxNumber = "0";
        }
        vm.contentForm.content = this.$refs.ue1.getUEContent();
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            let params = JSON.parse(JSON.stringify(vm.contentForm));
            let url = "";
            let method = "post"
            if (vm.id) {
              method = "put"
              url = "hotProductActivity/edit?type=2&action=" + action+"&currentBankId="+ localStorage.getItem('bankBranchId');
              params.id = vm.id
            } else {
              url = "hotProductActivity/add?type=2&action=" + action+"&currentBankId="+ localStorage.getItem('bankBranchId');
            }
            vm.$https({
              method: method,
              url: url,
              authType: this.backToken
            }, vm.$qs.stringify(params)).then((res) => {
              if (res.data.status == 201) {
                  vm.$message({type: 'success', message: res.data.message});
                  vm.$router.push('/popularActivitiesPage');
                } else {
                  vm.$message({type: 'error', message: res.data.message});
                }
              }, (error) => {
                console.log(error)

              }
            )
          } else {
            console.log('error submit!!');
          }
        });
      },
    }
  }
</script>

<style lang="less">
@import '../../style/common';
.newPopActivity{
  .content_box{
    overflow-y: scroll;
    .reject_box{
      width:cale(100% - 40px);
      background: #fff;
      margin: 10px 20px;
      border-radius:4px;
      p{
        padding: 5px;
        i{
          width: 10px;
          height: 10px;
          display: inline-block;
          margin: 0px 10px;
          background: url("../../../static/images/icon/reject.png") no-repeat 100%;
        }
      }
    }
    .scrool {
      width: 100%;
      height: 100%;
      overflow-x: hidden;
      overflow-y: scroll;
      .form_box {
        background-color: #fff;
        margin: 10px 20px 0px 20px;
        padding: 20px;
        position: relative;
        .form_scroll_div {
          height: calc(100% - 68px);
          position: relative;
          .el-form-item {
            &.input_form {
              .el-input {
                width: 273px;
              }
            }
            .el-upload__tip {
              margin-top: 0px;
            }
            .avatar-uploader .el-upload {
              border: 1px dashed #d9d9d9;
              border-radius: 6px;
              cursor: pointer;
              position: relative;
              overflow: hidden;
            }
            .el-upload-list {
              width: 245px;
              height: 25px;
              position: absolute;
              top: 10px;
              left: 120px;
            }
            .avatar-uploader .el-upload:hover {
              border-color: #409EFF;
            }
            .avatar-uploader-icon {
              font-size: 28px;
              color: #8c939d;
              width: 104px;
              height: 104px;
              line-height: 104px;
              text-align: center;
            }
            .avatar {
              width: 104px;
              height: 104px;
              display: block;
            }
            .edui-editor-toolbarbox.edui-default {
              line-height: 1;
            }
          }
        }
      }
    }
  }
  .editor-container {
    margin-bottom: 88px!important;
  }
  .dialog-footer {
    position: absolute;
    bottom: 32px;
    left: 32px;
    z-index: 999;
  }
}



</style>
