@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>
              <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-item label="签署会员">
                    <el-select
                            v-model="contract_sign_uid"
                            filterable
                            remote
                            placeholder="请输入昵称/姓名/手机号/ID"
                            :remote-method="queryMembers"
                            :loading="loading">
                        <el-option
                                v-for="item in sign_members"
                                :key="item.uid"
                                :label="item.nickname+'/'+item.realname+'/'+item.mobile"
                                :value="item.uid">
                        </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\ContractController::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="../../assets/images/pdf.png" alt="">
                    </div>
                    <div @mouseover="selectStyle" @mouseout="outStyle" v-show="currIndex == 0">
                      <img src="../../assets/images/search.png" 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\ContractController::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="../../assets/images/pdf.png" alt="">
                    </div>
                    <div @mouseover="selectStyle" @mouseout="outStyle" v-show="currIndex == 0">
                      <img src="../../assets/images/search.png" 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\ContractController::GET_DETAIL_URL)}}">
  <input type="hidden" id="edit_step1_url" value="{{yzWebUrl(\Yunshop\ShopEsign\admin\ContractController::EDIT_STEP1_URL)}}">
  <input type="hidden" id="add_step1_url" value="{{yzWebUrl(\Yunshop\ShopEsign\admin\ContractController::ADD_STEP1_URL)}}">
  <input type="hidden" id="step2_view_url" value="{{yzWebUrl(\Yunshop\ShopEsign\admin\ContractController::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,
        platform_role_id_list:[
            {
                'id': 1,
                'name': '甲方'
            },
            {
                'id': 2,
                'name': '乙方'
            }
        ],
        contract_sign_uid: 0,
          contract_sign_id:0,
        sign_members:[],
        ruleForm: {
          name: "",
          status: true,
          scene_id: 1,
          sign_role_type: 0,
            platform_role_id:1,
            contract_sign_uid:0
        },
        rules: {
          name: [{
            required: true,
            message: "请输入合同名称",
            trigger: "blur"
          }]
        }
      };
    },
    watch: {},
    created() {
      this.id = parseInt("{{$id}}");
      if (this.id) {
        this.getDeatil();
      }
    },
    destroyed() {},
    methods: {
        queryMembers(query) {
            let query_member_url = "{!!yzWebUrl('plugin.shop-esign.admin.member.queryJson')!!}";
            if (query) {
                this.$http.post(query_member_url, {
                    keyword: query
                }, "loading").then(response => {
                    if (response.data.result === 1) {
                        this.sign_members = response.data.data;
                    } else {
                        this.$message.error(response.msg);
                    }
                }).catch(err => {
                    console.log(err);
                });
            }
        },
      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;
            this.contract_sign_uid = this.Data.user_role_info.uid;
            this.contract_sign_id = this.Data.user_role_info.id;
            this.queryMembers(this.contract_sign_uid);
          } 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,
            contract_sign_uid:this.contract_sign_uid,
            contract_sign_id:this.contract_sign_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