<template>
  <div class="p-20">
    <el-form label-width="100px" size="small">
      <dm-sub-title type="line">基础信息</dm-sub-title>
      <div class="section">
        <el-form-item label="链接类型" required>
          <el-radio-group v-model="form.linkType">
            <el-radio :label="1">专用链接</el-radio>
            <el-radio :label="2">通用链接</el-radio>
          </el-radio-group>
          <p class="tips" v-if="form.linkType == 1">仅用于在GIC系统中创建“短信模板”时直接添加引用，便于系统根据会员手机号为该引流链接带上特定会员参数，常用于通过短信的方式来促进存量会员的私域转化。</p>
          <p class="tips" v-else>可复制此引流链接或下载链接二维码，通过不同营销活动、渠道等引导客户添加导购企微号，转化成私域流量。</p>
        </el-form-item>
        <el-form-item label="链接名称" required>
          <el-input placeholder="请输入链接名称" class="w-340" :maxlength="30" show-word-limit v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="链接描述">
          <el-input placeholder="请输入链接描述" type="textarea" class="w-340" :maxlength="100" :autosize="{ minRow: 3, maxRow: 5 }" show-word-limit v-model="form.remark"></el-input>
        </el-form-item>
        <el-form-item label="链接标签" required>
          <el-button plain @click="tagsDialogVisible = true"><i class="iconfont-components3 icon-cp-PlusOutlined addPic"></i>添加标签</el-button>
          <dm-memberTag-group :visiable.sync="tagsDialogVisible" projectName="haobao-3"></dm-memberTag-group>
        </el-form-item>
      </div>
      <dm-sub-title type="line">分配规则</dm-sub-title>
      <p class="tips-info">
        客户点击此引流链接，系统所分配的企微员工活码将根据下方层级配置区分优先级进行展示：<br />
        <span class="dot"></span> <span style="color:#FA8C16">优先级判断规则是“从上到下、从左到右”。</span>如：当上一层级匹配到结果后，则不会再执行下个层级的判断；同一层级内，当左边的勾选项匹配到结果，则不会再执行层级内右边的勾选项<br />
        <span class="dot"></span>按照优先级匹配到的结果的大前提是该员工“可生成活码”且“并未达到当天添加好友上限”，否则则继续进行后续优先级的判断； <br />
        <span class="dot"></span>若按照优先级所匹配到的结果已经与该客户是好友关系了，不会继续进行后续优先级的判断，直接展示该员工的活码。<br />
      </p>
      <div class="section">
        <div class="level">
          <div class="title m-b-20">
            <span>层级一：服务门店</span>
            <el-switch v-model="form.fw_store.open" :disabled="true"></el-switch>
          </div>
          <div class="content">
            <el-checkbox v-model="form.fw_store.zs" :true-label="1" :false-label="0">专属导购</el-checkbox>
            <el-checkbox v-model="form.fw_store.dz" :true-label="1" :false-label="0">店长</el-checkbox>
            <el-checkbox v-model="form.fw_store.dy" :true-label="1" :false-label="0">其他导购</el-checkbox>
          </div>
        </div>
        <div class="level">
          <div class="title">
            <span>层级二：协管门店</span>
            <el-switch v-model="form.xg_store.open" :disabled="true"></el-switch>
          </div>
          <p class="tips margin-num">当客户在多个协管门店下都有协管导购时，随机取一个协管门店导购</p>
          <div class="content">
            <el-checkbox v-model="form.xg_store.zs" :true-label="1" :false-label="0">协管门店导购</el-checkbox>
            <el-checkbox v-model="form.xg_store.dz" :true-label="1" :false-label="0">店长</el-checkbox>
            <el-checkbox v-model="form.xg_store.dy" :true-label="1" :false-label="0">其他导购</el-checkbox>
          </div>
        </div>
        <div class="level">
          <div class="title">
            <span>层级三：其他门店</span>
            <el-switch v-model="form.xg_store.open" :disabled="true"></el-switch>
          </div>
          <div class="level3-1">
            <el-radio-group v-model="form.storeRuleJson.store_type">
              <el-radio :label="1">推荐门店</el-radio>
              <el-radio :label="2">附近门店</el-radio>
            </el-radio-group>
            <p class="tips m-t-6" v-if="form.storeRuleJson.store_type == 1">可配置最多20个门店作为推荐门店让客户自主选择要添加的门店好友</p>
            <p class="tips m-t-6" v-else>需客户同意授权当前定位信息，才可展示客户附近最多20家门店供客户选择，否则只能在指定门店下选择</p>
          </div>
          <div class="level3-2">
            <div class="level3-2-content" v-if="form.storeRuleJson.store_type == 1">
              <el-form-item label="选择门店" required label-width="92px">
                <el-select></el-select>
              </el-form-item>
              <el-checkbox v-model="form.storeRuleJson.store.dz" :true-label="1" :false-label="0">店长</el-checkbox>
              <el-checkbox v-model="form.storeRuleJson.store.dy" :true-label="1" :false-label="0">导购</el-checkbox>
            </div>
            <div class="level3-2-content" v-else>
              <p class="content-tips">客户同意授权当前定位信息，可在“附近门店”中自主选择要添加的门店好友</p>
              <div class="level3-2-content-check">
                <el-checkbox v-model="form.storeRuleJson.store.dz" :true-label="1" :false-label="0">店长</el-checkbox>
                <el-checkbox v-model="form.storeRuleJson.store.dy" :true-label="1" :false-label="0">导购</el-checkbox>
              </div>
              <p class="content-tips m-b-10">客户拒绝授权当前定位信息，可在下方指定的门店范围中（最多20家）自主选择要添加的门店好友</p>
              <el-form-item label="选择门店" required label-width="92px">
                <el-select></el-select>
              </el-form-item>
              <el-checkbox v-model="form.storeRuleJson.store.ndz" :true-label="1" :false-label="0">店长</el-checkbox>
              <el-checkbox v-model="form.storeRuleJson.store.ndy" :true-label="1" :false-label="0">导购</el-checkbox>
            </div>
          </div>
          <div class="level3-3">
            <el-checkbox v-model="form.storeRuleJson.city_store.open" :true-label="1" :false-label="0">除附近门店/指定门店之外，允许客户按照省市区自由筛选商户所有门店进行添加</el-checkbox>
            <div class="level3-3-content">
              <el-checkbox v-model="form.storeRuleJson.city_store.dz" :true-label="1" :false-label="0">店长</el-checkbox>
              <el-checkbox v-model="form.storeRuleJson.city_store.dy" :true-label="1" :false-label="0">导购</el-checkbox>
            </div>
          </div>
        </div>
      </div>
      <dm-sub-title type="line">欢迎语设置</dm-sub-title>
      <div class="section"></div>
      <dm-sub-title type="line">欢迎语设置</dm-sub-title>
      <div class="section"></div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tagsDialogVisible: false,
      form: {
        linkType: 1,
        memberLabelId: '',
        name: '',
        pageId: '',
        welcomeId: '',
        remark: '',
        fw_store: {
          open: 1, //是否开启 1是0否
          zs: 1, //专属导购
          dz: 1, //店长
          dy: 1 // 其他导购
        },
        xg_store: {
          open: 1,
          zs: 1,
          dz: 1,
          dy: 1
        },
        storeRuleJson: {
          //其他门店
          open: 1, //是否开启1是0否
          store_type: 1, // 1推荐门店 2附近门店,
          store: {
            dz: 1, //店长
            dy: 1, // 店员
            ndz: 1, // 拒绝后店长
            ndy: 1 //拒绝后店员
          },
          //省市筛选
          city_store: {
            open: 1, //是否开启1是0否
            dz: 1, //店长
            dy: 1 //店员
          }
        }
      }
    };
  }
};
</script>

<style lang="scss" scoped>
.section {
  padding: 20px 0 40px 0;
  .level {
    width: 1194px;
    min-height: 94px;
    background: #f7f8fa;
    border-radius: 2px;
    padding: 16px 12px;
    box-sizing: border-box;
    .margin-num {
      margin: 10px 0 16px 56px;
    }
    .title {
      display: flex;
      justify-content: space-between;
      width: 240px;

      span {
        line-height: 20px;
        color: #303133;
        font-weight: 500;
        font-size: 14px;
      }
    }
    .content {
      margin-left: 56px;
    }
  }
  .level3-1 {
    margin: 16px 0 16px 56px;
  }
  .level3-2 {
    width: 1106px;
    margin-left: 56px;
    border-bottom: 1px solid #dcdfe6;
    padding-bottom: 16px;
    .level3-2-content {
      margin-left: 20px;
      .content-tips {
        font-size: 12px;
        color: #606266;
        line-height: 17px;
      }
      .level3-2-content-check {
        margin: 10px 0 20px 0;
      }
    }
  }
  .level3-3 {
    padding: 16px 0 0 56px;
    .level3-3-content {
      margin: 16px 0 0 20px;
    }
  }
  .level + .level {
    margin-top: 12px;
  }
}
.tips-info {
  font-size: 12px;
  color: #909399;
  margin-top: 8px;
  line-height: 22px;
  .dot {
    width: 5px;
    height: 5px;
    background: #999999;
    border-radius: 2.5px;
    margin-right: 8px;
    display: inline-block;
  }
}
</style>
