<template>
  <div>
    <div class="from-content">
      <el-form :model="goodsForm" :rules="goodsRules" ref="goodsForm" label-width="150px" class="demo-ruleForm" label-position="right" v-loading="loading">
        <div class="form-section">
          <h3>基础信息</h3>
          <el-form-item label="福利渠道" class="w-630">{{ enterpriseName }}</el-form-item>
          <el-form-item label="礼品名称" class="w-630" prop="giftName">
            <dm-input :byte-type="1" type="text" v-model="goodsForm.giftName" :maxlength="30" placeholder="请输入礼品名称"></dm-input>
          </el-form-item>
          <el-form-item label="礼品主图" required>
            <div class="member-upload-image">
              <div class="member-upload-image">
                <dm-upload-picture :action-url="actionUrl" :image-list="image" :max-image-length="maxlength" accept="image/jpeg, image/jpg, image/png, image/gif" :before-upload="beforeUpload" @uploadOnSuccess="uploadOnSuccess" @deleteImage="deleteImage"></dm-upload-picture>
              </div>
              <span class="tip-warm" style="display:block">图片宽度800*800px，格式jpg/png/gif，大小1MB以内，你可以拖拽图片调整顺序，最多上传 5 张</span>
            </div>
          </el-form-item>
          <el-form-item label="礼品详情" prop="giftDescrption">
            <dm-editor :width="editorWidth" :value="goodsForm.giftDescrption" @change="handleChange"></dm-editor>
          </el-form-item>
        </div>
        <div class="form-section">
          <h3>库存信息</h3>
          <el-form-item label="成本" class="w-630" prop="virCostPrice">
            <dm-input-amount v-model="goodsForm.virCostPrice" width="180" :min="0" :max="999999.99" :precision="2"></dm-input-amount>
          </el-form-item>
          <el-form-item label="库存" class="w-630" prop="stock">
            <dm-input-number v-model="goodsForm.stock" width="180" :min="0" :max="999999" :precision="2" disabled placeholder="上传文件后自动填充"></dm-input-number>
          </el-form-item>
          <el-form-item prop="marketPrice" label="市场价">
            <dm-input-amount v-model="goodsForm.marketPrice" width="180" :min="0" :max="999999.99" :precision="2"></dm-input-amount>
            <div>
              <span class="tip-warm">市场价在礼品详情会以划线形式显示。</span>
              <el-popover placement="top-start" width="395" trigger="hover">
                <img style="width:360px" src="../../assets/images/eg2.png" alt />
                <el-button slot="reference" type="text" style="margin-left:15px;">查看示例</el-button>
              </el-popover>
            </div>
          </el-form-item>
          <el-form-item label="礼品编码" class="w-630" prop="giftNo">
            <el-input style="width:260px" v-model="goodsForm.giftNo" placeholder="请输入" :min="0" :max="999999" :precision="2"></el-input>
          </el-form-item>
          <el-form-item label="礼品条形码" class="w-630" prop="giftBarNo">
            <el-input style="width:260px" v-model="goodsForm.giftBarNo" placeholder="请输入" :min="0" :max="999999" :precision="2"></el-input>
          </el-form-item>
        </div>
        <div class="form-section">
          <h3>福利设置</h3>
          <!-- 虚拟 -->
          <el-form-item label="发货内容" required prop="template">
            <template>
              <div style="display:flex;">
                <dm-editor width="500" height="300" :value="goodsForm.template" :placeholder="template" @change="handleChange2" :readonly="readonly"></dm-editor>
                <div class="ml20">
                  <p>用户申请履约后，发货内容将自动发送。</p>
                  <div style="height: 250px;" class="step-style">
                    <el-steps direction="vertical" :active="active">
                      <el-step>
                        <div slot="description" style="width:360px">
                          <span class="step-text">编辑发货内容，变量请使用大括号标记"{}"。</span>
                          <!-- <el-button type="text" @click="saveDescription">点击生成模板</el-button></div> -->
                        </div>
                      </el-step>
                      <el-step>
                        <div slot="description">
                          <span class="step-text">下载模板并以“变量”为表头填入变量值。</span>
                          <el-button type="text" @click="downloadFile">点击下载</el-button></div>
                      </el-step>
                      <el-step>
                        <div slot="description">
                          <div class="pickup-upload">
                            <span class="inline-block step-text" style="margin-bottom:20px">上传完善后的文件。</span>
                            <dm-upload-file
                              width="300"
                              class="inline-block"
                              :show-file-list="false"
                              :action="uploadAction"
                              :on-success="successUpload"
                              accept=".xls,.xlsx"
                              :before-upload="beforeUploadFile"
                              :data="{ giftId: giftId, remark: '' }"
                              with-credentials>
                              <el-button class="upload-trigger"><i class="iconfont-components4 icon-cp-shangc upload-icon"></i> 上传</el-button>
                              <span slot="tip" class="upload-tip inline-block">
                                <!-- <el-button style="margin-right: 30px" type="text" @click="downloadFile">下载文件模板</el-button> -->
                                <el-popover trigger="click" placement="right" popper-class="upload-popper">
                                  <el-button slot="reference" type="text">查看导入规则</el-button>
                                  <div class="upload-tip-text">
                                    <p>1.请按照顺序维护表头，所有变量均为必填项;</p>
                                    <p>2.请勿导入重复的内容，导入的内容在原来基础上增加库存;</p>
                                    <p>3.上传完整仅支持.xlsx .xls文件的导入，填充数据不超过“10万”条;</p>
                                  </div>
                                </el-popover>
                                <el-button type="text" v-if="isEdit" class="inline-block ml20" @click="checkUploadDetail">查看内容</el-button>
                              </span>
                              <div slot="file-item" slot-scope="{fileData}">{{ fileData.name }}</div>
                            </dm-upload-file>
                          </div>
                        </div>
                      </el-step>
                    </el-steps>
                  </div>
                </div>
              </div>
              <!-- <el-button class="mt10" type="primary" @click="saveDescription">保存</el-button> -->
            </template>
          </el-form-item>
          <el-form-item label="库存消耗方式" prop="checkList">
            <template>
              <el-checkbox-group v-model="goodsForm.checkList" @change="changeStockUse" :disabled="isEdit">
                <el-checkbox label="0">
                  <el-tooltip class="tips-content" effect="dark" open-delay="200" popper-class="store-tips" placement="top-start">
                    <div slot="content" style="width:245px">固定库存：通过占用的方式获得固定可用库存，不会被其他应用/活动所消耗。</div>
                    <span class="inline-block ml30 dash-style">固定库存</span>
                  </el-tooltip>
                </el-checkbox>
                <el-checkbox label="1" style="margin-left:50px">
                  <el-tooltip class="tips-content" effect="dark" open-delay="200" popper-class="store-tips" placement="top-start">
                    <div slot="content" style="width:245px">实时库存：不占用库存，使用福利中心“可占库存”，与其他应用使用同个库存。</div>
                    <span class="inline-block ml30 dash-style">实时库存</span>
                  </el-tooltip>
                </el-checkbox>
              </el-checkbox-group>
            </template>
          </el-form-item>
        </div>
        <div class="form-section">
          <h3>售后服务</h3>
          <el-form-item prop="refundFlag" label="支持申请退货" required>
            <template>
              <div>
                <el-radio v-model="goodsForm.refundFlag" :label="1">是</el-radio>
                <el-radio v-model="goodsForm.refundFlag" :label="0">否</el-radio>
              </div>
              <span class="tip-warm" style="display:block">若商品不支持退货，则该礼品出库后不支持生成退货单</span>
            </template>
          </el-form-item>
        </div>
        <div class="form-section mb56">
          <h3>权限设置</h3>
          <el-form-item label="操作人权限" required>
            <dm-acc-group-select :etype.sync="goodsForm.operAuthType" :group-ids.sync="goodsForm.operAuthPre" />
          </el-form-item>
        </div>
        <div class="fixed-btn">
          <dm-perm-button type="primary" @click="submitForm('goodsForm')" v-if="giftId">保存</dm-perm-button>
          <dm-perm-button type="primary" @click="submitForm('goodsForm')" v-else>确认新建</dm-perm-button>
        </div>
      </el-form>
    </div>
    <check-upload-detail v-if="dialogVisible" :dialog-id="dialogId" :is-edit="true"></check-upload-detail>
  </div>
</template>
<script>
import { request } from '../../utils/request';
import { welfarePrefix } from '@/config';
import api from '@/api/gift.js';
import uploadUrl from '@/api/common.js';
const {
  giftGet,
  giftUpdate,
  giftSave,
  // virtualGiftUpload,
  getGiftId,
  // getOperatorList,
  giftTemplateDownload } = api;
import checkUploadDetail from './module/check-upload-detail';
export default {
  components: {
    // importCoupon
    checkUploadDetail,
  },
  data() {
    return {
      uploadUrl: uploadUrl,
      bread: [
        {
          breadName: '礼品管理'
        },
        {
          breadPath: '/gift-manage/virtual-gift',
          breadName: '虚拟礼品'
        },
        {
          breadName: '新建礼品'
        }
      ],
      goodsForm: {
        giftName: '', // 礼品名称
        marketPrice: undefined, // 礼品市场价
        virCostPrice: undefined,
        giftImages: '', // 礼品主图URL，分割
        giftDescrption: '', // 礼品详情
        checkList: [],
        refundFlag: 0,
        operAuthType: '', // 操作人权限
        operAuth: '',
        operAuthPre: [],
        shopCodeList: [],
        costPrice: '', // 成本价
        deliveryType: [], // 配送方式 1物流发货 2门店自提 3文本券码
        stockUseType: '', // 库存使用类型（0:占用,1:动态 , 2占用+动态）
        // tableData: [
        //   {
        giftNo: undefined,
        stock: undefined,
        giftBarNo: undefined,
        //   }
        // ],
        template: ''
      },
      template: '示例1:<br>卡号：{01}<br>卡密：{02}<br><br>示例2：<br>点击卡密链接，使用星巴克电子券二维码直接在门店核销。<br>{卡密链接}<br> 使用条款：<br>本电子代金券需一次性使用完毕，不可兑换现金，不找零，不与其他优惠同享。<br>您可凭以上所示二维码在有效期内前往中国大陆地区星巴克门店购买商品',
      goodsRules: {
        giftName: [ { required: true, message: '请输入礼品名称', trigger: 'blur' } ],
        // marketPrice: [ { required: true, message: '请输入', trigger: 'blur' } ],
        virCostPrice: [ { required: true, message: '请输入', trigger: 'blur' } ],
        refundFlag: [ { required: true, message: '请选择是否支持退款', trigger: 'change' } ],
        // deliveryType: [ { required: true, message: '请选择配送方式', trigger: 'change' } ],
        checkList: [ { required: true, message: '请选择库存消耗方式', trigger: 'change' } ],
        template: [ { required: true, message: '请输入发货内容', trigger: 'blur' } ]
      },
      giftId: '',
      editorWidth: 900,
      // 图片墙数据
      // projectName: 'welfare', // 当前项目名(必传参数)
      // wxFlag: '1', // '1': 表示需要返回微信图片地址(可选参数),插件内已默认 '1'
      actionUrl: '/api-plug/upload-images', // 必选参数，上传的相对地址 String 类型,切勿硬编码写死地址
      maxlength: 5, // 图片数量 默认 5
      // uploadAction: window.location.origin + '/api-marketing/upload/upload-image?requestProject=marketing',
      // uploadAction: 'https://four.gicdev.com/api-marketing/upload/upload-image?requestProject=welfare',
      uploadAction: `${welfarePrefix}/gift/vir-gift-upload`,
      openStorePick: 0,
      btnLoading: false,
      loading: false,
      enterpriseName: '', // 商户名称
      handleData: {
        giftSkuCostPrice: '',
        stock: undefined,
        giftSkuCode: '',
        skuBarCode: ''
      },
      dialogVisible: false,
      // description: '',
      fileName: '',
      readonly: false,
      isEdit: false,
      active: 3,
      image: [],
      uploadFile: {
        name: ''
      }
    };
  },
  mounted() {
    this.$emit('updateBread', this.bread);
    this.$emit('showAside', true);
    this.getLoginUser();
    this.giftId = this.$route.query.giftId;
    if (this.giftId) {
      this.readonly = true;
      this.bread[2].breadName = '编辑礼品';
      this.getMess();
      this.isEdit = true;
    }else{
      this.getGiftId();
    }
    // this.getOpenStorePick();
  },
  methods: {
    getGiftId(){
      getGiftId().then(res =>{
        if(res.code === '0000'){
          this.giftId = res.result;
        }else{
          this.$message.error(res.message);
        }
      });
    },
    checkUploadDetail(){
      this.dialogVisible = true;
      this.dialogId = this.giftId;
      console.log(this.dialogId);
    },
    closeUploadDetail(){
      this.dialogVisible = false;
    },
    // uploadFile(file){
    //   console.log(file);
    // },
    beforeUploadFile(file, fileList){
      this.uploadFile.name = file.name;
      // console.log(file);
      // console.log(fileList);
      // this.fileName = file.name;
      // console.log(file.response);
      // let result = file.response.result;
      // console.log(result);
      // let fileUrl = result.url;
      // console.log(fileUrl);
      // let params = {
      //   giftId: this.giftId,
      //   file: file,
      //   remark: ''
      // };
      // virtualGiftUpload(params).then(res =>{
      //   console.log(res);
      // });
    },
    downloadFile() {
      if(!this.isEdit){
        this.saveDescription();
      }
      const prev = process.env['NODE_ENV'] === 'development' ? '' : '/welfare'; // eslint-disable-line
      window.open(`${prev}/static/虚拟礼品卡券模板.xlsx`, '_blank');
    },
    // uploadChange(file){
    //   console.log(file);
    //   let params = {
    //     giftId: this.giftId,
    //     file: this.fileName
    //   };
    //   virtualGiftUpload(params).then(res =>{
    //     console.log(res);
    //   });
    // },
    // templateUpload(){},
    // 表头添加必填标识符
    // starAdd(obj){
    //   if(obj.column.label === '库存' || obj.column.label === '成本价(元)') {
    //     return 'star';
    //   }
    // },
    handleChange2(value){
      this.goodsForm.template = value;
      // console.log(this.goodsForm.giftDescrption);
    },
    // 保存发货内容 校验
    saveDescription(){
      this.isSave = true;
      let index = this.goodsForm.template.indexOf('{'); // 字符出现的位置
      let templatePre = this.goodsForm.template.split(''); // 处理{ 后的数据
      templatePre.splice(index + 1, 0, '<span style="text-decoration: underline">');
      this.goodsForm.template = templatePre.join('');
      index = this.goodsForm.template.indexOf('{', index + 1);
      let num2 = 0; // 这个字符出现的次数
      let num = 0; // 这个字符出现的次数
      while(index !== -1) {
        templatePre = this.goodsForm.template.split(''); // 处理{ 后的数据
        templatePre.splice(index + 1, 0, '<span style="text-decoration: underline">');
        this.goodsForm.template = templatePre.join('');
        index = this.goodsForm.template.indexOf('{', index + 1);
      }
      let index2 = this.goodsForm.template.indexOf('}'); // 字符出现的位置
      let templateLate = this.goodsForm.template.split(''); // 处理 } 后的数据
      templateLate.splice(index2, 0, '</span>');
      this.goodsForm.template = templateLate.join('');
      index2 = this.goodsForm.template.indexOf('}');
      index2 = this.goodsForm.template.indexOf('}', index2 + 1);
      while(index2 !== -1){
        templateLate = this.goodsForm.template.split(''); // 处理 } 后的数据
        templateLate.splice(index2, 0, '</span>');
        this.goodsForm.template = templateLate.join('');
        index2 = this.goodsForm.template.indexOf('}', index2 + 1);
        index2 = this.goodsForm.template.indexOf('}', index2 + 1);
      };
      let indexCopy = this.goodsForm.template.indexOf('{'); // 字符出现的位置
      let indexCopyLate = indexCopy;
      let index2Copy = this.goodsForm.template.indexOf('}'); // 字符出现的位置
      let index2CopyLate = index2Copy;
      while(indexCopy !== -1){
        num++;
        indexCopy = this.goodsForm.template.indexOf('{', indexCopy + 1);
        if(indexCopy - indexCopyLate == 42){
          this.$message.error('{}不能嵌套出现');
          this.isSave = false;
        };
        indexCopyLate = indexCopy;
      }
      while(index2Copy !== -1){
        num2++;
        index2Copy = this.goodsForm.template.indexOf('}', index2Copy + 1);
        if(index2Copy - index2CopyLate == 8){
          this.$message.error('{}不能嵌套出现');
          this.isSave = false;
        };
        index2CopyLate = index2Copy;
      }
      if(num !== num2 || num > 3 || num2 > 3){
        this.$message.error('请填写正确的格式');
        this.isSave = false;
      };
      // if(this.isSave){
      //   this.generateTemplate();
      // }
    },
    // 生成模板
    // generateTemplate(){
    //   if(this.isSave){
    //     console.log('生成模板');
    //   }else{
    //     this.$message.error('请先保存发货内容');
    //   }
    // },
    // 下载模板
    downloadTemplate(){
      console.log('下载模板');
      giftTemplateDownload({ template: this.goodsForm.template }).then(res =>{
        if(res.code === '0000'){
          console.log(res.result);
        }else{
          this.$message.error(res.massage);
        }
      });
    },
    // 处理库存消耗方式
    changeStockUse(value){
      if(value.length > 1){
        this.goodsForm.stockUseType = 2;
      }else{
        this.goodsForm.stockUseType = value[0];
      };
    },
    // 获取商户信息
    getLoginUser(){
      request({ url: '/gic-auth-web/user/get-login-user' }).then(res => {
        this.enterpriseName = res.result.enterpriseName;
      });
    },
    // 操作人权限数据回显
    // getOperatorList(){
    //   let params = {
    //     typeEnum: 'WELFARE',
    //     relationId: this.giftId
    //   };
    //   getOperatorList(params).then(res =>{
    //     if(res.code === '0000'){
    //       console.log(res.result);
    //       this.goodsForm.operAuthPre = res.result;
    //     }else{
    //       this.$message.error(res.message);
    //     }
    //   });
    // },
    getMess() {
      let params = {
        id: this.giftId
      };
      this.$emit('updateLoading');
      giftGet(params)
        .then(res => {
          if (res.code === '0000') {
            let resResult = res.result;
            // this.goodsForm.changeDelivery = resResult.changeDelivery; // 兑换方式
            this.goodsForm.giftName = resResult.giftName; // 礼品名称
            this.goodsForm.giftNo = resResult.giftNo;
            this.goodsForm.stock = resResult.stock;
            this.goodsForm.giftBarNo = resResult.giftBarNo;
            this.goodsForm.virCostPrice = resResult.virCostPrice;
            // this.goodsForm.tableData[0].giftNo = resResult.giftNo;
            // this.goodsForm.tableData[0].stock = resResult.stock;
            // this.goodsForm.tableData[0].giftBarNo = resResult.giftBarNo;
            this.goodsForm.marketPrice = resResult.marketPrice; // 市场价
            this.goodsForm.operAuthType = resResult.operAuthType; // 操作人权限
            this.goodsForm.operAuthPre = resResult.operAuth.split(',');
            // this.goodsForm.shopCodeList = resResult.shopId; // 操作人权限code
            this.goodsForm.template = resResult.template; // 虚拟礼品模板
            this.goodsForm.checkList = resResult.stockUseType == 2 ? [ '1', '2' ] : (resResult.stockUseType == 1 ? [ '1' ] : [ '0' ]); // 库存消耗方式
            this.goodsForm.deliveryType = resResult.deliveryType;
            this.goodsForm.giftImages = resResult.giftImages;
            this.goodsForm.stockUseType = resResult.stockUseType;
            let img = resResult.giftImages.split(',');
            // this.goodsForm.giftImages = [];
            if (img.length) {
              for (let item of img) {
                this.image.push({
                  url: item
                });
              }
            } // 礼品主图
            this.goodsForm.giftDescrption = resResult.giftDescrption; // 礼品详情
            this.goodsForm.template = resResult.template;
            this.goodsForm.refundFlag = resResult.refundFlag; // 是否支持退货
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(error => {
          this.$message.error({
            duration: 1000,
            message: error.message
          });
        }).finally(() => this.$emit('updateLoading'));
      console.log(222);
    },
    // 上传前
    beforeUpload(file) {
      if (file.size > 1 * 1024 * 1024) {
        this.$message.error('请上传小于1MB的图片');
        return false;
      }
      if (file.width < 800 || file.width / file.width != 1 / 1) {
        this.$message.error('请上传宽度≥800px，宽高比1：1的图片');
        return false;
      }
      return true;
    },
    // 上传成功 返回的图片对象 里面有图片 大小 类型 等相关信息
    uploadOnSuccess(obj) {
      // 目前返回两个参数 {res:res,file:file}
      let url = obj.res.result[0];
      this.image.push(url);
      let handelImage = [];
      this.image.forEach((item, index) =>{
        handelImage[index] = item.url;
      });
      this.goodsForm.giftImages = handelImage.join('');
    },
    // 删除图片 返回图片列表的索引 你可以根据这个索引去找对应图片的id
    deleteImage(i) {
      this.image.splice(i, 1);
      let handelImage = [];
      this.image.forEach((item, index) =>{
        handelImage[index] = item.url;
      });
      this.goodsForm.giftImages = handelImage.join('');
    },
    handleChange(val) {
      this.goodsForm.giftDescrption = val;
    },
    // 保存
    submitForm(goodsForm) {
      if(this.btnLoading) return;
      if (this.image.length === 0) {
        this.$message.error('请上传主图');
        return false;
      }
      if(!this.goodsForm.operAuthType){
        this.$message.error('请选择操作人权限');
        return false;
      }
      this.$refs[goodsForm].validate(valid => {
        if (!valid){
          PublicMethods.jumpToFormError(); // eslint-disable-line
          return;
        }else{
          // this.btnLoading = true;
          this.$emit('updateLoading');
          let params = {
            giftId: this.giftId,
            giftType: 2, // 虚拟礼品
            giftName: this.goodsForm.giftName, // 礼品名称
            marketPrice: this.goodsForm.marketPrice, // 市场价
            virCostPrice: this.goodsForm.virCostPrice, // 虚拟礼品成本价
            stock: 0, // 库存
            giftNo: this.goodsForm.giftNo, // 礼品编码
            giftBarNo: this.goodsForm.giftBarNo, // 礼品条形码
            giftImages: this.goodsForm.giftImages, // 礼品主图
            giftDescrption: this.goodsForm.giftDescrption, // 礼品详情
            refundFlag: this.goodsForm.refundFlag, // 是否支持退货
            giftSpecInfo: JSON.stringify(this.goodsStandardInfo),
            skuList: [],
            operAuthType: this.goodsForm.operAuthType, // 操作人权限
            operAuth: this.goodsForm.operAuthPre.join(','), // 操作人权限
            deliveryType: '3', // 兑换方式
            source: 1, // 新建方式 默认手动发布1
            shopSelectType: '', // 门店选择类型
            shopImportUuid: '', // 导入门店唯一标识 仅用于新增
            shopCodeList: [], // 门店CodeList
            stockUseType: this.goodsForm.stockUseType, // 库存使用类型
            template: this.goodsForm.template,
            // template: this.template,
          };
          this.btnLoading = true;
          if (this.isEdit) {
            // params.giftId = this.giftId;
            giftUpdate(params).then(res =>{
              if (res.code === '0000') {
                this.$router.push({ path: '/gift-manage/virtual-gift' });
                this.btnLoading = false;
              } else {
                this.btnLoading = false;
                this.$message.error(res.message);
              }
            }).finally(() => this.$emit('updateLoading'));
          }else{
            // params.giftId = '';
            giftSave(params).then(res =>{
              if (res.code === '0000') {
                this.$router.push({ path: '/gift-manage/virtual-gift' });
                this.btnLoading = false;
              } else {
                this.btnLoading = false;
                this.$message.error(res.message);
              }
            }).finally(() => this.$emit('updateLoading'));
          }
        }
      });
    }
  },
};
</script>
<style lang="scss" scoped>
@import '@/assets/styles/colors.scss';
.step-text{
  color: #000000;
  font-size: 14px;
}
.dash-style{
  border-bottom: 1px dashed #2f54eb;
}
.upload-btn {
  height: 40px;
  border: 1px dashed rgba(192, 196, 204, 1);
  display: inline-block;
  font-size: 14px;
  color: #c0c4cc;
  cursor: pointer;
  margin-right: 10px;
  width: 250px;
  border-radius: 4px;
}
.upload-btn .el-icon-upload2 {
  font-size: 18px;
  color: #c0c4cc;
}
.upload-btn:hover {
  border-color: #1890ff;
}
.upload-ele .el-button {
  border: none;
  color: #c0c4cc;
}
.upload-ele .el-button--small {
  padding: 0;
}
.w-630 {
  width: 630px;
}
.mb56 {
  margin-bottom: 56px;
}
.from-content {
  position: relative;
  .demo-ruleForm {
    // margin-bottom: 40px;
    .form-section {
      // margin-bottom: 60px;
      padding: 30px 20px;
      h3 {
        color: #303133;
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 31px;
        margin-left: 20px;
        padding-bottom: 9px;
        border-bottom: 1px solid #dfdfdf;
      }
      h3::before{
        clear: both;
        content: "";
        display: inline-block;
        // height: 0;
        overflow: hidden;
        width: 3px;
        height: 12px;
        line-height: 14px;
        margin-right: 8px;
        background: #2F54EB;
      }
      .tip-warm {
        color: #909399;
        font-size: 12px;
        i {
          color: #faad14;
          margin-right: 5px;
        }
      }
    }
    .fixed-btn {
      width: 100%;
      height: 56px;
      position: fixed;
      bottom: 0px;
      left: 200px;
      background: #fff;
      border-top: 1px solid #e4e7ed;
      text-align: center;
      margin-left: -100px;
      z-index: 2;
      font-size: 0px;
      .el-button {
        margin-top: 12px;
      }
    }
  }
  .anchor-link {
    width: 120px;
    position: fixed;
    right: 24px;
    top: 180px;
    background: #fff;
    .link-item {
      height: 24px;
      line-height: 24px;
      color: #606266;
      font-size: 12px;
      border-left: 2px solid #ebeef5;
      padding-left: 18px;
      cursor: pointer;
    }
  }
}
.from-content .see-btn {
  color: #909399;
  margin-left: 15px;
}
.from-content .see-btn:hover {
  color: #2f54ed;
}
.ml20 {
  margin-left: 20px;
}
.mr10 {
  margin-right: 10px;
}
.tips-content {
  position: absolute;
  left: -4px;
  top: 6px;
}
.store-tips {
  width: 200px;
  position: absolute;
  left: -10px;
}
.underline{
  text-decoration: underline;
}
.pickup-upload{
  display: inline-block;
  vertical-align: top;
  margin-left: 10px;
  .upload-trigger{
    border-style: dashed;
    .upload-icon {
      font-size: 14px;
    }
  }
  .pickup-list {
    margin-top: 18px;
    .pickup-list-name {
      font-size: 14px;
      font-weight: 400;
      color: $gray01;
      line-height: 20px;
      .file-icon {
        font-size: 14px;
      }
    }
  }
}
/* 规格值 */
</style>
<style>
/* .table-error .el-form-item__error {
  display: none !important;
} */
/* .damolish .el-form-item__label::after {
  content: "";
} */
/* .damolish .el-tooltip__popper {
  width: 245px;
} */
/* table th.star div::before {
  content: '*';
  color: red;
} */
.right-border {
  border-right: 1px solid #ebeef5;
}
/* .mopney-input span {
  display: none !important;
} */
/* .from-content .see-btn {
  color: #909399;
  margin-left: 15px;
}
.from-content .see-btn:hover {
  color: #2f54ed;
} */
.step-style .el-step.is-vertical .el-step__line{
  top: 30px;
  left: 8px;
  transform:scaleX(0.5);
}
/* .step-style .el-step__line-inner{
} */
.step-style .el-step__head.is-finish{
  color: #2F54EB;
  border-color: #2F54EB;
}
.step-style .el-step__icon.is-text{
  border: 1px solid;
}
/* {
  transform:scaleX(1.5);
} */
/* .step-style .el-step.is-vertical .el-step__head{
  width: 16px;
} */
.step-style .el-step__icon{
  width: 16px;
  height: 16px;
}
.step-style .el-step__icon-inner{
  font-size: 12px;
}
/* .el-popover{
  font-size: 6px;
} */
</style>
