<template>
  <div class="newHotPro H100">
    <div class="head_box">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item >内容管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/hotProductsPage'}">热门产品</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;  <span>{{rejectReason}}</span></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="maxMoney">
                    <el-input :disabled="contentForm.isOrder == '1' ? false : true" size="small" v-model="contentForm.maxMoney" 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:'',maxMoney:''},
        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' }
          ],
          maxMoney:[],
          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.maxMoney = obj;
          }else{
            let obj = [];
            this.formRules.maxMoney = 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.maxMoney = "";
        } else {
          this.contentForm.maxMoney = "";
        }
      },
      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.maxMoney = res.data.maxMoney;
              obj.isOrder = res.data.isOrder.toString();
              if(obj.maxMoney == 0){
                obj.maxMoney = "";
              }
              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('/hotProductsPage');
      },
      submit(action) {
        let vm = this;
        if(vm.contentForm.isOrder == 2){
          vm.contentForm.maxMoney = "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=1&action=" + action+"&currentBankId="+ localStorage.getItem('bankBranchId');
              params.id = vm.id
            } else {
              url = "hotProductActivity/add?type=1&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('/hotProductsPage');
                } 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';
  .newHotPro{
    .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: calc(100% - 0px);
        overflow-x: hidden;
        overflow-y: scroll;
        .form_box {
          background-color: #fff;
          margin: 10px 20px 0px 20px;
          padding: 20px;
          .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>