<template>
  <div class="mainBox">
    <div class="layerBox" v-if="this.$store.state.template.stepStatus">
      <tableTitle :name="templateStepTitle"/>
      <step :activeNumber="1"/>
    </div>
    <el-form ref="form" :model="form" :rules="loginRules" class="login-form" autocomplete="on" label-position="left" label-width="120px">
      <div class="layerBox">
        <tableTitle :name="templateBaseTitle"/>
        <div class="formDiv">
          <el-form-item label="常规模板类型：" :label-width="formLabelWidth" prop="role_id" class="custom-align-right">
            <div class="formLabelFloatBox">
              <el-checkbox-group v-model="form.template_base_type">
                <el-checkbox label="1" disabled>首页</el-checkbox>
                <el-checkbox label="2">分类页</el-checkbox>
                <el-checkbox label="3">列表页</el-checkbox>
                <el-checkbox label="4">详情页</el-checkbox>
              </el-checkbox-group>
            </div>
          </el-form-item>
          <el-form-item :label="null" :label-width="formLabelWidth" class="custom-align-right">
            <div class="formLabelFloatBox">
              <div class="labelTitleStyle">
                单页模板类型：
                <el-tooltip class="item" effect="dark" content="说明文字" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </div>
              <el-checkbox-group v-model="form.template_special_type">
                <el-checkbox label="1">自定义列表页</el-checkbox>
                <el-checkbox label="2" disabled>自定义详情页</el-checkbox>
              </el-checkbox-group>
            </div>
          </el-form-item>
        </div>
      </div>
      <div class="layerBox">
        <tableTitle :name="templateInfoTitle"/>
        <div class="formDiv">
          <el-form-item label="网站声明：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
            <div class="formLabelFloatBox">
              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
            </div>
          </el-form-item>
          <el-form-item label="主办单位：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
            <div class="formLabelFloatBox">
              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
            </div>
          </el-form-item>
          <el-form-item label="版权信息：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
            <div class="formLabelFloatBox">
              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
            </div>
          </el-form-item>
          <el-form-item label="联系电话：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
            <div class="formLabelFloatBox">
              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
            </div>
          </el-form-item>
          <el-form-item label="公司地址：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
            <div class="formLabelFloatBox">
              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
            </div>
          </el-form-item>
          <el-form-item label="项目LOGO：" class="custom-align-right">
            <div class="uploaderBox">
              <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload">
                <!-- <img v-if="imgUrl" :src="imgUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
                <!-- 预览图片 -->
                <img v-if="form.project_img_src" :src="form.project_img_src" class="avatar">
                <!-- 上传图标 -->
                <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
                <div v-else class="chooseImgDiv">
                  <div>
                    <img src="@/assets/public/upload/noImage.png">
                    <div>选择图片</div>
                  </div>
                </div>
              </el-upload>
            </div>
          </el-form-item>
          <el-form-item label="项目名称：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
            <div class="formLabelFloatBox">
              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
            </div>
          </el-form-item>
          <el-form-item label="项目网址：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
            <div class="formLabelFloatBox">
              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
            </div>
          </el-form-item>
          <el-form-item label="公司LOGO：" class="custom-align-right">
            <div class="uploaderBox">
              <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload">
                <!-- <img v-if="imgUrl" :src="imgUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
                <!-- 预览图片 -->
                <img v-if="form.project_img_src" :src="form.project_img_src" class="avatar">
                <!-- 上传图标 -->
                <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
                <div v-else class="chooseImgDiv">
                  <div>
                    <img src="@/assets/public/upload/noImage.png">
                    <div>选择图片</div>
                  </div>
                </div>
              </el-upload>
            </div>
          </el-form-item>
          <el-form-item label="公司名称：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
            <div class="formLabelFloatBox">
              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
            </div>
          </el-form-item>
          <el-form-item label="公司网址：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
            <div class="formLabelFloatBox">
              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
            </div>
          </el-form-item>
          <el-form-item label="网站备案号：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
            <div class="formLabelFloatBox">
              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
            </div>  
          </el-form-item>
          <el-form-item label="网安备案号：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
            <div class="formLabelFloatBox">
              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
            </div>
          </el-form-item>
          <el-form-item label="客服QQ号1：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
            <div class="formLabelFloatBox">
              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
            </div>
          </el-form-item>
          <el-form-item label="客服QQ号2：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
            <div class="formLabelFloatBox">
              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
            </div>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <div class="bottomBtnBox">
      <el-button type="info" @click="goToWebsite">返回</el-button>
      <el-button type="primary" @click="goToStyle">下一步</el-button>
    </div>
  </div>
</template>

<script>
// 引入公用样式
import '@/styles/global.less';
//表格标题
import tableTitle from './public/tableTitle';
//步骤条
import step from './public/step';

export default {
  components: {
    tableTitle,//表格标题
    step//步骤条
  },
  data() {
    // 配置验证规则：用于表单验证
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码不能低于6位！'))
      } else {
        callback()
      }
    }
    const validateEmpty = (rule,value,callback) => {
      if (value.length == 0) {
        callback(new Error('该项不能为空！'))
      } else {
        callback()
      }
    }
    return {
      templateStepTitle:"仅需四步，即可完成模板创建",
      templateBaseTitle:"模板类型设置",
      templateInfoTitle:"模板信息设置",
      formLabelWidth:"120px",
      editId:"",
      form:{
        template_base_type:["1"],//常规类型
        template_special_type:["2"],//特殊类型
        website_statement:"",//网站声明
        project_img_src:"",
      },
      //配置from表单验证规则
      loginRules: { 
        website_statement: [{ required: true, trigger: 'blur', validator: validateEmpty }],
      }
    };
  },
  methods: {
    //0.全局操作 start ------------------------------------------------------------>
    //上一步
    goToWebsite(){
      this.$router.push({
        path: '/webSite'
      });
    },
    //下一步
    goToStyle(){
      this.$router.push({
        path: '/templateStyle',
        query: {
          id: this.editId
        }
      });
    },
    //0.全局操作 end ------------------------------------------------------------>

    //1.提交表单 start ------------------------------------------------------------>
    //提交表单
    addData(){
      console.log(this.form);
      //1.先验证用户是否已经存在
      this.$store.dispatch('template/addBasic',this.form).then(res=>{
        if(res.code==200){
          this.$message.success('基本信息添加成功！请选择模板风格');
          //进入下一步
          this.goToStyle();
        }
      }).catch(error=>{
        this.$message.error('网络错误，请重试！');
      })
    },
    //提交表单 start ------------------------------------------------------------>

    //2.编辑表单 start ------------------------------------------------------------>
    //获得用户信息
    getUserInfo(){
      this.$store.dispatch('userMember/getUser',{id:this.editId}).then(res=>{
        console.log(res);
        //回显数据
        this.form.type_id = res.data.type_id;
        this.form.user_name = res.data.user_name;
        this.form.role_id = res.data.role_id;
        this.form.real_name = res.data.real_name;
        this.form.mobile = res.data.mobile;
        this.form.gender = res.data.gender + "";

      }).catch(error=>{
        this.$message({
          type: 'info',
          message: '网络错误，请重试！'
        });
      })
    },
    //修改用户
    editData(){
      this.$store.dispatch('userMember/verifyUserInfo',{id:this.editId,user_name:this.form.user_name}).then(res=>{
        if(res.code==0){
          this.form.id = this.editId;
          delete this.form.password;
          delete this.form.confirm_password;
          //如果code为0表示用户不存在，提交表单
          this.$store.dispatch('userMember/updateUser',this.form).then(res=>{
            console.log(res);
            this.$message({
              type: 'success',
              message: '用户添加成功！'
            });
            this.goList();
          })
        }else if(res.code==200){
          //如果code==200 表示用户存在，阻止进一步提交
          this.$message({
            type: 'warning',
            message: '该账号已被注册，请更换其他账号！'
          });
        }
      }).catch(error=>{
        this.$message({
          type: 'info',
          message: '网络错误，请重试！'
        });
      })
    },
    //编辑表单 end ------------------------------------------------------------>

  },
  mounted(){
    //1.展示步骤
    this.$store.commit('template/showStepStatus');
    //2.判断是新建还是回显
    if(this.$route.query.id!=undefined){
      this.editId = this.$route.query.id;
      console.log("编辑模板！")
    }else{
      console.log("添加模板基本信息！")
    }
  }
};
</script>

<style scoped lang="less">
  .labelTitleStyle{
    font-size: 14px;
    color: #606266;
    font-weight: bold;
  }
  .exampleBox {
    border: 1px solid #ccc;
  }

  .formDiv{
    background: #F5F7FB;
    padding: 10px 20px 10px 20px;
  }
  .uploaderBox .avatar-uploader {
    background: #fff;
  }
  ::v-deep .formDiv .el-form-item:last-child {
    margin-bottom: 0 !important;
  }
  ::v-deep .formDiv .el-form-item__content{
    margin-left: 0 !important;
  }
  ::v-deep .formDiv .el-form-item__label{
    float: none;
  }
  //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
  ::v-deep .custom-form-item > .el-form-item__label {
    line-height: 140px !important;
  }
  ::v-deep .custom-textarea .el-textarea__inner {
    resize: none; /* 禁止用户拖拽调整大小 */
  }
  ::v-deep .custom-align-right .el-form-item__label {
    text-align: right; /* 设置标签文字右对齐 */
  }
  ::v-deep .el-select {
    width: 100%; /* 禁止用户拖拽调整大小 */
  }
  //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
</style>
