@extends('layouts.base')

@section('content')
@section('title', '合同模版信息')
<div class="w1200 m0a">
  <div class="right-titpos">
    <ul class="add-snav">
      <li class="active"><a href="#">合同模版信息</a></li>
    </ul>
  </div>
  <div id="app">
    <template>
      <div id="sign">
        <div class="box">
          <div class="right-head">
            <div class="right-head-con">模版基本信息</div>
          </div>
          <div style="padding-right: 50px">
            <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="140px" @submit.native.prevent class="demo-ruleForm">
              <el-form-item label="模版名称" prop="name">
                <el-input v-model.trim="ruleForm.name" placeholder="请输入模版名称"></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-switch v-model="ruleForm.status"></el-switch>
                <span style="margin-left: 20px;">[[ruleForm.status? "启用":"禁用"]]</span>
              </el-form-item>
              <el-form-item label="使用场景">
                <el-select v-model="ruleForm.scene_id" placeholder="">
                  <el-option v-for="item in scene_idList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="签署主体">
                <el-radio-group v-model="ruleForm.sign_role_type" style="padding: 10px;">
                  <el-radio :label="0">个人</el-radio>
                  <el-radio :label="1">企业</el-radio>
                </el-radio-group>
              </el-form-item>
                <el-form-item label="平台角色">
                    <el-select v-model="ruleForm.platform_role_id" placeholder="">
                        <el-option v-for="item in platform_role_id_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="box">
          <div class="right-head">
            <div class="right-head-con">上传模版</div>
          </div>
          <div class="template-box">
            <el-row>
              <el-col :span="3">
                <div>合同文档</div>
              </el-col>
              <el-col :span="10">
                <el-upload v-if="!contract_doc_name" class="upload-demo" :show-file-list="false" :before-upload="beforeUpload1" :on-progress="onProgress1" ref="upload" :on-success="onSuccess" :on-error="onError" accept="application/pdf" :action="'{{yzWebUrl(\Yunshop\ShopEsign\admin\TemplateController::UPLOAD_URL)}}'">
                  <div v-show="progressFlag1" class="progress-box">
                    <el-progress type="circle" :percentage="progressPercent1"></el-progress>
                  </div>
                  <div class="fileAddItem_1Vqb7" v-show="!progressFlag1">
                    <i class="iconfont icon-adsystem_icon_add"></i>
                    <p class="defaultInfoStyle_2mgdq">添加模版</p>
                  </div>
                  <div class="el-upload__tip" slot="tip">支持10M以内的pdf格式文件</div>
                </el-upload>
                <div style="height: 20px"></div>
                <div class="fileItemArea_2VWWl" v-if="contract_doc_name">
                  <div class="imgPlaceholder_22teb">
                    <div @mouseover="selectStyle" @mouseout="outStyle" v-show="currIndex == 1">
                      <img src="data:image/png;base64,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" alt="">
                    </div>
                    <div @mouseover="selectStyle" @mouseout="outStyle" v-show="currIndex == 0">
                      <img src="data:image/png;base64,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" alt="">
                    </div>
                  </div>
                  <div class="fileInfoArea_3dGBW">
                    <p class="fileName_25vmY">[[contract_doc_name]]</p>
                    <p class="fileName_25vmY deleted" @click="deleteSingle"><i class="el-icon-delete"></i>删除</p>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="3">
                <div>模版附件</div>
              </el-col>
              <el-col :span="20">
                <el-upload class="upload-demo" :show-file-list="false" :before-upload="beforeUpload2" :on-progress="onProgress2" ref="upload" :on-success="onSuccess2" :on-error="onError" accept="application/pdf" :action="'{{yzWebUrl(\Yunshop\ShopEsign\admin\TemplateController::UPLOAD_URL)}}'">
                  <el-button size="small" type="primary">点击上传附件</el-button>
                  <div class="el-upload__tip" slot="tip">支持10M以内的pdf格式文件</div>
                </el-upload>
                <div style="height: 20px"></div>
                <div class="fileItemArea_2VWWl" v-for="(item,index) in contract_attach" :key="index">
                  <div class="imgPlaceholder_22teb">
                    <div @mouseover="selectStyle" @mouseout="outStyle" v-show="currIndex == 1">
                      <img src="data:image/png;base64,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" alt="">
                    </div>
                    <div @mouseover="selectStyle" @mouseout="outStyle" v-show="currIndex == 0">
                      <img src="data:image/png;base64,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" alt="">
                    </div>
                  </div>
                  <div class="fileInfoArea_3dGBW">
                    <p class="fileName_25vmY">[[item.file_name]]</p>
                    <p class="fileName_25vmY deleted" @click="deleteList(index)"><i class="el-icon-delete"></i>删除</p>
                  </div>
                </div>
                <div v-show="progressFlag2" class="progress-box" style="display: inline-block;">
                  <el-progress type="circle" :percentage="progressPercent2"></el-progress>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div style="text-align: center">
          <el-button type="primary" style="width: 300px;" v-if="!id" @click="submitForm">下一步</el-button>
          <el-button type="primary" style="width: 300px;" v-else @click="submitForm('save')">下一步</el-button>
        </div>
      </div>
    </template>


  </div>
  <input type="hidden" id="get_detail_url" value="{{yzWebUrl(\Yunshop\ShopEsign\admin\TemplateController::GET_DETAIL_URL)}}">
  <input type="hidden" id="edit_step1_url" value="{{yzWebUrl(\Yunshop\ShopEsign\admin\TemplateController::EDIT_STEP1_URL)}}">
  <input type="hidden" id="add_step1_url" value="{{yzWebUrl(\Yunshop\ShopEsign\admin\TemplateController::ADD_STEP1_URL)}}">
  <input type="hidden" id="step2_view_url" value="{{yzWebUrl(\Yunshop\ShopEsign\admin\TemplateController::STEP2_VIEW_URL)}}">
</div>

<script>
  var app = new Vue({
    el: "#app",
    delimiters: ['[[', ']]'],
    data() {
      return {
        progressFlag1: false,
        progressFlag2: false,
        progressPercent1: 0,
        progressPercent2: 0,
        id: "",
        currIndex: 1,
        maxSize: 10 * 10224 * 1024, //10M
        contract_attach: [],
        contract_doc_name: "",
        contract_doc_url: "",
        platform_role_id:1,
        scene_idList: [{
            'id': 1,
            'name': '通用签署'
          },
          {
            'id': 2,
            'name': '分销商'
          },
          {
            'id': 3,
            'name': '经销商'
          },
          {
            'id': 4,
            'name': '区域代理'
          },
          {
            'id': 5,
            'name': '供应商'
          },
          {
            'id': 6,
            'name': '门店'
          },
          {
            'id': 7,
            'name': '酒店'
          },
          {
            'id': 8,
            'name': '招商员/招商中心'
          },
          {
            'id': 9,
            'name': '微店店长'
          },
          {
            'id': 10,
            'name': '主播'
          },
          {
            'id': 11,
            'name': 'MRYT代理'
          },
          {
              'id': 12,
              'name': '订单'
          },
          {
            'id': 13,
            'name': '定金阶梯团'
          },
          {
            'id': 14,
            'name': '抢团'
          },
          {
            'id': 15,
            'name': '渠道商'
          },
            {
                'id': 16,
                'name': '存货服务'
            }
        ],
        platform_role_id_list:[
            {
                'id': 1,
                'name': '甲方'
            },
            {
                'id': 2,
                'name': '乙方'
            }
        ],
        ruleForm: {
          name: "",
          status: true,
          scene_id: 1,
          sign_role_type: 0,
            platform_role_id:1
        },
        rules: {
          name: [{
            required: true,
            message: "请输入模版名称",
            trigger: "blur"
          }]
        }
      };
    },
    watch: {},
    created() {
      this.id = parseInt("{{$id}}");
      if (this.id) {
        this.getDeatil();
      }
    },
    destroyed() {},
    methods: {
      getDeatil() {
        this.$http.post(document.getElementById("get_detail_url").value, {
          id: this.id
        }, "loading").then(response => {
          if (response.data.result === 1) {
            this.Data = response.data.data;
            this.ruleForm.name = this.Data.name;
            this.ruleForm.scene_id = this.Data.scene_id;
            this.ruleForm.sign_role_type = this.Data.sign_role_type;
            this.Data.status == 1 ? this.ruleForm.status = true : this.ruleForm.status = false;
            this.contract_doc_name = this.Data.contract_doc_name;
            this.contract_doc_url = this.Data.contract_doc_url;
            this.contract_attach = this.Data.contract_attach;
            this.ruleForm.platform_role_id = this.Data.platform_role_id?this.Data.platform_role_id:1;
          } else {
            this.$message.error(response.msg);
          }
        }).catch(err => {
          console.log(err);
        });
      },
      selectStyle() {
        this.currIndex = 1;
      },
      outStyle() {
        this.currIndex = 1;
      },
      deleteSingle() {
        this.contract_doc_name = "";
        this.contract_doc_url = "";
      },
      deleteList(index) {
        this.contract_attach.splice(index, 1);
      },
      onProgress1(response, file, fileList) {
        this.progressPercent1 = Number(response.percent.toFixed(2))
      },
      onProgress2(response, file, fileList) {
        this.progressPercent2 = Number(response.percent.toFixed(2))
      },
      beforeUpload1(file) {
        if (file.size >= this.maxSize) {
          this.$message.error("文件大小超出10M");
          return false;
        }
        this.progressFlag1 = true
      },
      beforeUpload2(file) {
        if (file.size >= this.maxSize) {
          this.$message.error("文件大小超出10M");
          return false;
        }
        this.progressFlag2 = true
      },
      onSuccess(response, file, fileList) {
        if (this.progressPercent1 === 100) {
          this.progressFlag1 = false
          this.progressPercent1 = 0
        }
        if (!response.data.file_name) {
          this.$message.error(response.msg);
        }
        this.contract_doc_name = response.data.file_name;
        this.contract_doc_url = response.data.file_url;
      },
      onSuccess2(response, file, fileList) {
        if (this.progressPercent2 === 100) {
          this.progressFlag2 = false
          this.progressPercent2 = 0
        }
        if (!response.data.file_name) {
          this.$message.error(response.msg);
        }
        this.contract_attach.push(response.data);
      },
      onError() {
        this.progressFlag1 = false;
        this.progressFlag2 = false;
        this.progressPercent1 = 0;
        this.progressPercent2 = 0;
        this.$message.error("上传失败请重新上传");
      },
      submitForm(str) {
        if (!this.ruleForm.name) {
          this.$message.error("请先填写模版名称");
          return;
        }
        if (!this.contract_doc_url) {
          this.$message.error("请先上传模版文件");
          return;
        }
        let status = 0;
        this.ruleForm.status ? status = 1 : status = 0;
        let json = {
          name: this.ruleForm.name,
          status: status,
          scene_id: this.ruleForm.scene_id,
          sign_role_type: this.ruleForm.sign_role_type,
          contract_doc_name: this.contract_doc_name,
          contract_doc_url: this.contract_doc_url,
          contract_attach: this.contract_attach,
          platform_role_id: this.ruleForm.platform_role_id
        };
        let url = "";
        if (str == "save") {
          json.id = this.id;
          url = document.getElementById("edit_step1_url").value;
        } else {
          url = document.getElementById("add_step1_url").value;
        }
        this.$http.post(url, json, "loading").then(response => {
          if (response.data.result === 1) {
            let id = '';
            if (response.data.data.template_id) {
              id = response.data.data.template_id
            } else {
              id = this.id;
            }
            window.location.href = document.getElementById("step2_view_url").value + '&id=' + id;
            //this.$router.push(this.fun.getUrl("set_template",{id: id}));
          } else {
            this.$message.error(response.data.msg);
          }
        }).catch(err => {
          console.log(err);
        });
      }
    }
  })
</script>
<style>
  .el-upload input[type=file] {
    display: none !important;
  }

  #sign {
    padding: 30px;
    max-width: 1200px;
    margin: 0 auto;
    overflow: auto;
  }

  .right-head {
    line-height: 50px;
    border-bottom: 1px #ccc solid;
    margin-bottom: 15px;
  }

  .right-head .right-head-con {
    display: inline-block;
    padding-right: 20px;
    font-size: 16px;
    color: #888;
  }

  .box {
    margin-bottom: 30px;
  }

  .template-box {
    padding: 0 40px;
    font-size: 15px;
  }

  .gray {
    font-size: 14px;
    color: #9d9d9d;
  }

  .fileItemArea_2VWWl {
    position: relative;
    display: inline-block;
    width: 180px;
    height: 210px;
    margin: 0 10px 10px 0;
    border: 1px solid #dedede;
    background: #f9f9f9;
  }

  .fileItemArea_2VWWl .imgPlaceholder_22teb {
    position: relative;
    width: 120px;
    height: 130px;
    margin: 10px 30px 20px 30px;
    /*cursor: pointer;*/
  }

  .fileItemArea_2VWWl .imgPlaceholder_22teb img {
    width: 100%;
    height: 100%;
  }

  .fileItemArea_2VWWl .fileInfoArea_3dGBW {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 10;
    width: 100%;
    height: 50px;
    background: #fff;
    border-top: 1px solid #dedede;
    user-select: none;
  }

  .fileItemArea_2VWWl .fileName_25vmY {
    margin: 0 5px;
    color: #333;
    line-height: 26px;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .fileItemArea_2VWWl .deleted {
    cursor: pointer;
    text-align: right;
  }

  .fileAddItem_1Vqb7 {
    flex-direction: column;
    justify-content: center;
    width: 180px;
    height: 210px;
    border: 1px solid #e6e6e6;
    cursor: pointer;
    vertical-align: bottom;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .fileAddItem_1Vqb7 .defaultInfoStyle_2mgdq {
    font-size: 14px;
    color: #777;
    padding-top: 20px;
  }

  .fileAddItem_1Vqb7 p {
    margin: 0;
  }

  .fileAddItem_1Vqb7 i {
    font-size: 60px;
    color: #777;
  }

  .fileAddItem_1Vqb7:hover {
    border: 1px solid #409EFF;
    background-color: rgba(64, 158, 255, 0.07);
  }

  .fileAddItem_1Vqb7:hover .defaultInfoStyle_2mgdq {
    color: #409EFF;
  }

  .fileAddItem_1Vqb7:hover i {
    color: #409EFF;
  }
</style>
@endsection