<template>
  <div class="container-contract_seller" ref="listPageSon">
    <template v-if="childrenActiveSeller == 1">
      <div class="segmentation-top"><b>CRM</b>内的合同管理，包含<span >业务合同</span>和<span >代付合同</span>两类，在【合同操作指南】中，详细说明了合规要求的不同业务形式下的操作说明，和CRM系统中的操作流程图</div>
      <el-image src="http://hongze.oss-cn-shanghai.aliyuncs.com/admin_op/contract_seller/1.png" />
    </template>
    <template v-else-if="childrenActiveSeller == 2">
      <div class="segmentation-top">合同列表页面可查看本人发起的所有合同。 可根据不同条件<span >筛选合同</span> 。也可以通过合同编号/客户名称/社会信用码，<span >搜索合同</span>（支持模糊搜索）</div>
      <el-image src="http://hongze.oss-cn-shanghai.aliyuncs.com/admin_op/contract_seller/2.png" />
    </template>
    <template v-else-if="childrenActiveSeller == 3">
      <div class="segmentation-top">点击左上角 <span>添加合同</span> ，选择标准合同，即添加标准业务合同</div>
      <el-image src="http://hongze.oss-cn-shanghai.aliyuncs.com/admin_op/contract_seller/3.png" />
      <p>标准业务合同，需要填写客户信息，合同信息，服务内容，审批备注四块内容 客户信息中，只需要输入客户名称关键字，系统会自动联想本人名下已录入的公司，并自动填充社会信用码和公司地址。</p>
      <p style="color: #f00">注意：此处若发现公司全称或者社会信用码有误，需要在客户详情页面修改正确后，再回来重新添加合同，因为此处填写的信息直接关联合同信息。</p>
      <el-image src="http://hongze.oss-cn-shanghai.aliyuncs.com/admin_op/contract_seller/4.png" />

      <div class="segmentation">合同信息中，带*的信息为必填内容，其中合同类型系统会根据客户信息自动判断，其余信息请根据提示填写。</div>
      <p style="color: #f00">注意：付款方式说明和付款方会显示在合同中，请按照合规要求以规范文本格式填写。付款方默认为【无】，即公司自己支付，也可以输入代付方，且支持多个代付方</p>
      <el-image src="http://hongze.oss-cn-shanghai.aliyuncs.com/admin_op/contract_seller/5.png" />

      <p>服务内容请自行选择，也可以填写合同补充内容。</p>
      <el-image src="http://hongze.oss-cn-shanghai.aliyuncs.com/admin_op/contract_seller/6.png" />
      <p>审批备注是需要告知审批人的额外信息，可选填，不在合同中显示</p>
      <el-image src="http://hongze.oss-cn-shanghai.aliyuncs.com/admin_op/contract_seller/7.png" />
      <p>完成以上四块内容中必填信息的填写后，点击预览，可预览合同；点击存草稿，合同就会保存到业务合同列表中（状态为 <span>待提交</span>）；点击提交，合同会提交给部门管理员审核（列表中状态为<span>待审批</span>)</p>
      <el-image src="http://hongze.oss-cn-shanghai.aliyuncs.com/admin_op/contract_seller/8.png" />
    </template>
    <template v-else-if="childrenActiveSeller == 4">
      <div class="segmentation-top">
        点击左上角 <span>添加合同</span> ，选择标准代付，即添加标准代付合同；
        <p>代付合同，红框字段为必填内容。</p>
        <p>实际使用方，输入关键字后系统会自动联想当前存在<span>已签回的业务合同</span>的公司。</p>
      </div>
      <el-image src="http://hongze.oss-cn-shanghai.aliyuncs.com/admin_op/contract_seller/9.png" />
      <p>完成实际使用方的关联后，下方会自动显示关联业务合同的合同信息和服务内容信息，此信息仅展示，不可更改</p>
      <p>审批备注与下方操作按钮，和标准业务合同的操作逻辑一样。</p>
       <el-image src="http://hongze.oss-cn-shanghai.aliyuncs.com/admin_op/contract_seller/10.png" />
    </template>
    <template v-else-if="childrenActiveSeller == 5">
      <div class="segmentation-top">业务合同与代付合同，状态分类一致</div>
      <div class="segmentation">1、<span>待提交</span>：编辑合同信息后，存为草稿，未提交审核的合同：</div>
      <el-image src="http://hongze.oss-cn-shanghai.aliyuncs.com/admin_op/contract_seller/11.png" />
      <p>待提交状态下，合同可以<span>提交审批</span>，可以重新进入<span>编辑</span></p>
      <div class="segmentation">2、<span>待审批</span>：已提交审批，业务主管尚未审批的合同</div>
      <el-image src="http://hongze.oss-cn-shanghai.aliyuncs.com/admin_op/contract_seller/12.png" />
      <p>待审批状态下，可以<span>查看套餐</span>，若发现合同填写有误，也可以<span>撤回申请</span></p>
      <div class="segmentation">3、<span>已撤回</span>：提交审批后又撤回的合同</div>
      <el-image src="http://hongze.oss-cn-shanghai.aliyuncs.com/admin_op/contract_seller/13.png" />
      <p>已撤回状态下，可以<span>查看套餐</span>，也可以点击<span>修改合同</span>，进入修改后再重新提交</p>
      <div class="segmentation">4、<span>已审批</span>：部门管理员已经审批通过的合同</div>
      <el-image src="http://hongze.oss-cn-shanghai.aliyuncs.com/admin_op/contract_seller/14.png" />
      <p>已审批状态下，可以<span>下载</span>合同发给客户洽谈。若客户需要对业务内容提出修改，可<span>修改重审</span>；若客户涉及对合规内容提出修改，则需要<span>作废合同</span>，修改后的合同走邮件形式发给合规重新审批。</p>
      <p style="color: #f00">系统内合同状态更新为已审批，或以邮件形式通过审批的，可前往<b>随手办公小程序</b>内 <a @click="onClick(6)">【<u>提交用印申请</u>】</a></p>
      <div class="segmentation">5、<span>已驳回</span>：业务主管审批驳回的合同</div>
      <el-image src="http://hongze.oss-cn-shanghai.aliyuncs.com/admin_op/contract_seller/15.png" />
      <div class="segmentation">已驳回状态下，可以查看<span>驳回理由</span>，也可以点击<span>申请重审</span>，进入修改相关内容后重新提交审批</div>
      <div class="segmentation">6、<span>已作废</span>：业务主管审批通过，销售又作废的合同：</div>
      <el-image src="http://hongze.oss-cn-shanghai.aliyuncs.com/admin_op/contract_seller/16.png" />
      <p>已作废状态下，可以点击<span>复制模板</span>作为新合同进行编辑，复用无需修改的内容</p>
      <div class="segmentation">7、<span>已签回</span>：双方盖完章，合规已上传合同附件的合同：</div>
      <el-image src="http://hongze.oss-cn-shanghai.aliyuncs.com/admin_op/contract_seller/17.png" />
      <p style="color: #f00">合同状态更新为已签回后，可在CRM<a @click="onClick(7)">【<u>申请转正或续约申请</u>】</a></p>
      <div class="segmentation">8、<span>已解约</span>：已签回的合同，合规又上传解约协议的合同：</div>
      <el-image src="http://hongze.oss-cn-shanghai.aliyuncs.com/admin_op/contract_seller/18.png" />
    </template>
    <template v-else-if="childrenActiveSeller == 6">
      <div class="segmentation-top">1、登录移动<b>CRM-</b><span>随手办公小程序</span>，登录账号与CRM后台账号一致</div>
      <el-image src="http://hongze.oss-cn-shanghai.aliyuncs.com/admin_op/contract_seller/19.png" />
      <div class="segmentation">2、工作台tab，选择用印审批</div>
      <el-image src="http://hongze.oss-cn-shanghai.aliyuncs.com/admin_op/contract_seller/20.png" />
      <div class="segmentation">3、点击右下角悬浮按钮，添加用印申请</div>
      <el-image src="http://hongze.oss-cn-shanghai.aliyuncs.com/admin_op/contract_seller/21.png" />
      <div class="segmentation">4、填写用印信息：</div>
      <el-image src="http://hongze.oss-cn-shanghai.aliyuncs.com/admin_op/contract_seller/22.png" />
      <p>若是标准合同，则勾选<span>系统合同</span></p>
      <p>输入客户名称关键字，系统会自动联想存在<span>已审批</span>状态合同的公司，直接选择即可</p>
      <el-image src="http://hongze.oss-cn-shanghai.aliyuncs.com/admin_op/contract_seller/23.png" />
      <p>选择后，社会信用码和合同类型会自动填充，也可以预览合同附件</p>
      <el-image src="http://hongze.oss-cn-shanghai.aliyuncs.com/admin_op/contract_seller/24.png" />
      <div class="segmentation">5、若是涉及合规内容修改的非标合同，则勾选<span>上传附件</span></div>
      <p>相关公司信息和合同系统需要手动填写，并上传合同附件，合同附件仅支持在<span>微信聊天记录</span>中选择（可先将合同附件发送至某微信会话中）</p>
      <el-image src="http://hongze.oss-cn-shanghai.aliyuncs.com/admin_op/contract_seller/25.png" />
      <div class="segmentation">6、完成必填信息后，点击提交，待合规完成审批即可。</div>
    </template>
    <template v-else-if="childrenActiveSeller == 7">
      <div class="segmentation-top"><b>申请转正：</b></div>
      <p>点击申请转正，弹窗选择标准合同</p>
      <el-image src="http://hongze.oss-cn-shanghai.aliyuncs.com/admin_op/contract_seller/26.png" />
      <div class="segmentation">系统将自动关联该公司下的<span>已签回</span>的新签合同，点击提交，待部门管理员完成审批即可。</div>
      <el-image src="http://hongze.oss-cn-shanghai.aliyuncs.com/admin_op/contract_seller/28.png" />
      <div class="segmentation">
        <b>续约申请：</b>
        <p>点击续约申请，弹窗选择标准合同</p>
      </div>
      <el-image src="http://hongze.oss-cn-shanghai.aliyuncs.com/admin_op/contract_seller/27.png" />
      <div class="segmentation">系统将自动关联该公司下<span>已签回</span>的续约合同，点击提交，待部门管理员完成审批即可。</div>
      <el-image src="http://hongze.oss-cn-shanghai.aliyuncs.com/admin_op/contract_seller/29.png" />
    </template>
  </div>
</template>

<script>
export default {
  props: {
    childrenActiveSeller: {
      type: Boolean,
      required: true,
    },
  },
  name: "",
  components: {},
  data() {
    return {
      unm: "",
    };
  },
  computed: {},
  watch: {
    childrenActiveSeller: {
      handler(nval) {
        this.$nextTick(() => {
          this.unm = nval;
        });
      },
    },
  },
  created() {},
  mounted() {},
  methods: {
    onClick(num){
        this.$emit('update:childrenActiveSeller',num)
        this.$parent.scrollTopPage()
    }
  },
};
</script>
<style scoped lang="scss">
.container-contract_seller {
  p {
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
  }
  .el-image {
    margin-bottom: 15px;
  }
  img { 
    width: 1400px;
  }
  .segmentation {
    font-size: 16px;
    color: #333;
    margin: 60px 0 30px;
  }
  .segmentation-top {
    font-size: 16px;
    color: #333;
    margin: 10px 0 30px;
  }
  h5 {
    font-size: 16px;
    margin-top: 60px;
    margin-bottom: 20px;
  }
  span {
    color: #f00;
    font-weight: 700;
  }
  a {
    cursor: pointer;
    color: blue;
  }
}
</style>
