<template>
  <div class="daily-set-wrap ">
    <div class="daily-set-content border-box">
      <div class="admin-tip-body">
        <div role="alert" class="el-alert el-alert--info">
          <i class="el-alert__icon el-icon-info"></i>
          <div class="el-alert__content">
            <p class="el-alert__title">由管理员或者业务负责人统一配置后，客户将在添加成员为联系人后收到该欢迎语<br /></p>
          </div>
        </div>
      </div>
      <div class="salutatory-set-wrap m-t-20">
        <el-form label-width="117px" ref="form" :model="form" :rules="rules" refs="form" class="form">
          <el-form-item label="欢迎语标题" prop="title">
            <el-input show-word-limit placeholder="请输入欢迎语标题" type="text" v-model="form.title" maxlength="20" class="w-384"></el-input>
          </el-form-item>
          <el-form-item label="欢迎语内容" prop="welcomeContent" class="welcomeContentItem">
            <el-input placeholder="请输入文本内容" type="textarea" v-model="form.welcomeContent" class="w-384 welcomeContent"></el-input>
            <div class="text-bottom flex w-384">
              <div class="flex flex-wrap flex-align-center">
                <div class="put" @click="putName">插入&lt; 微信昵称 &gt;</div>
                <div class="line"></div>
                <div class="put" @click="addLinkDialogShow">插入#公众号</div>
              </div>
              <el-popover placement="top" width="388" trigger="click">
                <ul class="flex flex-wrap">
                  <li v-for="(item, index) in emojiList" :key="index + 'emoji'">
                    <img :src="item.gifUrl" alt="" @click="selectEmoji(item)" />
                  </li>
                </ul>
                <p slot="reference" style="cursor:pointer;height:24px;">
                  <svg-icon iconname="iconbiaoqing" size="20"> </svg-icon>
                </p>
              </el-popover>
            </div>
            <div class="mediaEcho" v-if="showEchoData">
              <div class="flexBoxContainer" v-for="(item, index) in form.welcomeMediaList" :key="index">
                <div class="flexBox" v-if="item.mediaType != 5">
                  <svg-icon :iconname="iconType[item.mediaType]" size="16" style="margin-right: 13px;"> </svg-icon>
                  <span class="popverText">{{ item.mediaTitle }}</span>
                  <i class="el-icon-close" style="margin-left: 20px;cursor: pointer;" @click="handleDelMedia(item, index)"></i>
                </div>
              </div>
            </div>
            <div class="addInfo" :style="showEchoData ? 'border-top: 1px dashed #dcdfe6;' : ''">
              <el-popover placement="top" trigger="click">
                <ul class="flex flex-wrap">
                  <li v-for="(item, index) in uploadList" :key="index" :class="['uploadListBox', form.welcomeMediaList.length >= 9 ? 'disabled' : '']" @click="handleUploadList(item, index)">
                    <i :class="['iconfont-hb3', item.icon]" style="font-size:20px"></i>
                    <p>{{ item.title }}</p>
                    <input type="file" :accept="item.fileType" @change="e => handkeFileChange(e, item)" class="upload-input" />
                  </li>
                </ul>
                <div slot="reference" style="cursor: pointer; display: inline-block;">
                  <i class="iconfont-hb3 icontianjiajiahaowubiankuang"></i>
                  <p>添加图片/视频/文件/链接/小程序</p>
                </div>
              </el-popover>
              <p style="font-size:12px;color:#909399">(附件不超过9个，单个大小不超过2M，小程序仅支持添加1个)</p>
            </div>
          </el-form-item>
          <el-form-item label="使用范围" required>
            <div v-show="form.suitDepartmentAddList.length" class="scopeContainer">
              <!-- <el-tag size="small" v-for="(item, index) in form.suitDepartmentAddList" closable @close="handleTagClose(index)" :key="item.departmentId">
                {{ item.departmentName }}
              </el-tag> -->
              <div class="wwTag" v-for="(item, index) in form.suitDepartmentAddList" :key="item.departmentId">
                <span class="font-14 color-2f54eb opacity80 iconfont-hb3  iconqiye-tianchong"></span>
                {{ item.departmentName }}
                <i class="el-icon-close" style="margin-left: 20px;cursor: pointer;" @click="handleTagClose(index)"></i>
              </div>
            </div>
            <span @click="openScopeDialog" class="color-2f54eb cursor-pointer" style="margin-left:8px;"> 请选择使用范围</span>
          </el-form-item>
          <el-button type="primary" style="margin-left:117px;" :loading="btnLoading" @click="submit">保存</el-button>
        </el-form>
        <div class="iphone">
          <div class="infoList">
            <div class="infoListBox" v-if="form.welcomeContent || form.title">
              <div class="infoAvatar">
                <img src="@/assets/head_default.jpg" />
              </div>
              <div class="textInfo">
                <div class="content" style="font-size:14px;font-weight: 500;">{{ form.title }}</div>
                <div class="content" v-html="form.welcomeContent"></div>
              </div>
            </div>
            <div class="infoListBox" v-for="(item, index) in form.welcomeMediaList" :key="index">
              <div class="infoAvatar">
                <img src="@/assets/head_default.jpg" />
              </div>
              <div v-if="item.mediaType == 1" class="imgInfo">
                <img :src="item.mediaUrl" />
              </div>
              <div v-if="item.mediaType == 2" class="videoInfo" @click="blank(item.mediaUrl)">
                <video :src="item.mediaUrl" />
              </div>
              <div v-if="item.mediaType == 3" class="docInfo">
                <div class="docTitle">
                  <b>{{ item.mediaTitle }}</b>
                  <p>{{ item.mediaSize }} KB</p>
                </div>
                <svg-icon iconname="iconwenjianleixing-wenjian" size="40"> </svg-icon>
              </div>
              <div v-if="item.mediaType == 4" class="urlInfo">
                <div class="urlTitle">{{ item.mediaTitle }}</div>
                <div class="urlContent">
                  <b>{{ item.mediaTitle }}</b>
                  <svg-icon iconname="iconwenjianleixing-lianjie" size="40"> </svg-icon>
                </div>
              </div>
              <div v-if="item.mediaType == 5" class="appletsInfo">
                <div class="appletsTitle">{{ item.miniProgramName }}</div>
                <div class="appletsTitle" style="font-size:12px">{{ item.mediaTitle }}</div>
                <img :src="item.mediaUrl" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-dialog title="添加公众号" width="585px" class="replay-link-dialog" :visible.sync="addReplayDialog" @closed="onClosed">
        <el-form label-position="right" ref="form" :model="{}" label-width="100px" @submit.native.prevent>
          <el-form-item label="公众号名称">
            <el-input v-model="accountName" @keyup.enter.native="addAcountName"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addReplayDialog = false">取消</el-button>
          <el-button type="primary" @click="addAcountName">确定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="添加链接" width="585px" class="replay-link-dialog" :visible.sync="urlDialogVisible" @closed="onClosed">
        <el-form label-position="right" ref="form" :model="{}" label-width="100px" @submit.native.prevent>
          <el-form-item label="链接地址">
            <el-input v-model="url" @keyup.enter.native="addUrl"></el-input>
            <span class="tips">以http或https开头</span>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="urlDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addUrl">确认添加</el-button>
        </div>
      </el-dialog>
      <el-dialog title="请选择使用范围" width="886px" class="replay-link-dialog" :visible.sync="scopeVisible" @closed="clearAllSelectedData">
        <div class="scopeBox">
          <div class="left">
            <el-input placeholder="请输入部门名称" maxlength="50" v-model="filterText" style="width: 398px;" clearable @clear="handlefilterTextClear" @keyup.native="value => toInput(value, searchInput)"> <i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input>
            <el-tree v-loading="loading" ref="tree" :data="treeData" show-checkbox node-key="departmentId" :props="defaultProps" :expand-on-click-node="false" class="tree" :check-strictly="true" :render-after-expand="false" @check-change="handleCheckChange">
              <span class="custom-tree-node" slot-scope="{ node }">
                <span class="font-14  color-2f54eb opacity80 iconfont-hb3  iconqiye-tianchong"></span>
                <span>{{ node.label }}</span>
              </span>
            </el-tree>
          </div>
          <div class="right">
            <div class="right-top">
              <span>已选：{{ selectedTreeData.length }}个部门</span><span @click="clearAllSelectedData" class="color-2f54eb cursor-pointer">清空</span>
            </div>
            <ul v-if="selectedTreeData.length">
              <li class="contact-li" v-for="(item, index) in selectedTreeData" :key="index + 'gic'">
                <div class="li-cell cursor-pointer">
                  <div>
                    <span class="font-14 color-2f54eb opacity80 iconfont-hb3  iconqiye-tianchong"></span>
                    <span class="font-14 color-303133 span-departName"> {{ item.departmentName }}</span>
                  </div>
                  <i class="el-icon-close" @click="handleSelectedDataCancel(item, index)"></i>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="scopeVisible = false">取消</el-button>
          <el-button type="primary" @click="addSuitDepartment">确认</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getRequest, postForm, postJsonRequest } from '@/api/api';
import { _debounce } from '@/common/js/public';
import limitTextarea from '@/components/limit-textarea.vue';
import { emojiArr } from '@/utils/emoji';
import multUpload from '@/components/mult-upload-img.vue';
import singleUpload from '@/components/single-upload.vue';
export default {
  props: {},
  data() {
    return {
      filterText: '',
      defaultProps: {
        label: 'departmentName'
      },
      form: {
        title: '系统默认',
        welcomeContent: '你好，<微信昵称>',
        welcomeMediaList: [],
        suitDepartmentAddList: [],
        suitDepartmentList: []
      },
      uploadList: [
        {
          title: '图片',
          icon: 'icontupian',
          fileType: '*'
        },
        {
          title: '视频',
          icon: 'iconshipin',
          fileType: '.mp4'
        },
        {
          title: '文件',
          icon: 'iconwenjian',
          fileType: '*'
        },
        {
          title: '链接',
          icon: 'iconlianjie'
        }
      ],
      iconType: {
        1: 'iconwenjianleixingtupian',
        2: 'iconwenjianleixingshipin',
        3: 'iconwenjianleixing-wenjian',
        4: 'iconwenjianleixing-lianjie',
        5: 'iconwenjianleixing-xiaochengxu'
      },
      accountName: '',
      rules: {
        title: [{ required: true, message: '请输入欢迎语标题', trigger: 'blur' }],
        welcomeContent: [{ required: true, message: '请输入欢迎语内容', trigger: 'blur' }]
      },
      wxEnterpriseId: localStorage.getItem('userInfos') ? JSON.parse(localStorage.getItem('userInfos')).wxEnterpriseId : '',
      emojiList: emojiArr,
      addReplayDialog: false,
      url: '',
      urlDialogVisible: false,
      scopeVisible: false,
      treeData: [],
      treeDataCopy: [],
      loading: false,
      btnLoading: false,
      selectedTreeData: [],
      friendSettingType: ''
    };
  },
  watch: {},
  computed: {
    showEchoData() {
      let bool1 = true;
      let bool2 = false;
      console.log(this.form.welcomeMediaList);
      if (this.form.welcomeMediaList && this.form.welcomeMediaList.length && this.form.welcomeMediaList.length == 1 && this.form.welcomeMediaList[0].mediaType == 5) {
        bool1 = false;
      }
      if (this.form.welcomeMediaList && this.form.welcomeMediaList.length) {
        bool2 = true;
      }
      return bool1 && bool2;
    }
  },
  mounted() {
    const that = this;
    that.$emit('showTab', 4);
    document.documentElement.style.backgroundColor = '#f0f2f5';
    const { id, type } = this.$route.query;
    if (id) {
      that.getData();
    }
    if (type && type == 1 && !id) {
      this.friendSettingType = type;
      this.getAppData();
    }
  },
  destroyed() {
    document.documentElement.style.backgroundColor = '#fff';
  },
  components: {
    limitTextarea,
    singleUpload,
    multUpload
  },
  methods: {
    getAppData() {
      // 获取小程序
      getRequest('/haoban-manage3-web/list-miniprogram-setting', {})
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1 && resData.result) {
            const applet = resData.result.length && resData.result[0];
            this.form.welcomeMediaList.push({
              miniProgramName: applet.miniprogramName,
              mediaTitle: applet.title,
              mediaType: 5,
              mediaUrl: applet.imageUrl,
              mediaSize: ''
            });
          }
        })
        .catch(function(error) {
          this.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    addSuitDepartment() {
      this.form.suitDepartmentAddList = Object.assign([], this.selectedTreeData);
      this.clearAllSelectedData();
      this.scopeVisible = false;
    },
    handleTagClose(index) {
      this.form.suitDepartmentAddList.splice(index, 1);
    },
    clearAllSelectedData() {
      // 清空 右侧 被选中部门树的数据 和 清空 部门树的 选中节点
      this.$refs.tree.setCheckedKeys([]);
    },
    handleSelectedDataCancel(item, index) {
      // 删除 右侧 被选中部门树的数据
      this.selectedTreeData.splice(index, 1);
      console.log(this.selectedTreeData);
      this.$refs.tree.setChecked(item.departmentId, false, true);
    },
    handlefilterTextClear() {
      // 清空搜索部门树条件
      this.treeData = this.handleTreeData(JSON.parse(JSON.stringify(this.treeDataCopy)));
      this.$nextTick(() => {
        this.$refs.tree.store._getAllNodes()[0].expanded = true;
        if (this.selectedTreeData.length) {
          this.$refs.tree.setCheckedKeys(this.selectedTreeData.map(item => item.departmentId));
        } else {
          this.$refs.tree.setCheckedKeys([]);
        }
      });
    },
    toInput: _debounce(function(e, value) {
      // 前端搜索部门树
      const that = this;
      if (!that.filterText) {
        that.handlefilterTextClear();
      } else {
        that.getSearchData();
      }
    }, 500),
    getSearchData() {
      // 前端搜索部门树
      this.treeData = this.treeDataCopy.filter(ele => ele.departmentName.indexOf(this.filterText) != -1);
      if (this.selectedTreeData.length) {
        this.$refs.tree.setCheckedKeys(this.selectedTreeData.map(item => item.departmentId));
      } else {
        this.$refs.tree.setCheckedKeys([]);
      }
    },
    handleCheckChange(data, checked, indeterminate) {
      // 部门树选中变化时
      const obj = JSON.parse(JSON.stringify(data));
      obj.children ? delete obj.children : '';
      if (checked) {
        if (!this.selectedTreeData.filter(item => item.departmentId == obj.departmentId).length) this.selectedTreeData.push(obj);
      } else {
        this.selectedTreeData = this.selectedTreeData.filter(item => item.departmentId !== obj.departmentId);
      }
      console.log(this.selectedTreeData);
    },
    /**
     * 获取部门树数据
     */
    getTableList(val) {
      let para = {
        isStore: 0, // 当前页
        parentId: '' // 一页显示个数
      };
      this.loading = true;
      getRequest('/haoban-manage3-web/department-list-cache', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            if (!!resData.result && resData.result.length) {
              this.treeData = this.handleTreeData(JSON.parse(JSON.stringify(resData.result)));
              this.$nextTick(() => {
                this.$refs.tree.store._getAllNodes()[0].expanded = true;
              });
              this.treeDataCopy = resData.result;
            }
          }
        })
        .catch(function(error) {
          this.$message.error({
            duration: 1000,
            message: error.message
          });
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleTreeData(data) {
      let tree = data.filter(father => {
        //循环所有项
        let branchArr = data.filter(child => {
          return father.departmentId == child.parentDepartmentId; //返回每一项的子级数组
        });
        if (branchArr.length > 0) {
          father.hasSonNode = true;
          father.children = branchArr; //如果存在子级，则给父级添加一个children属性，并赋值
        } else {
          father.hasSonNode = false;
        }
        return father.parentDepartmentId == 0; //返回第一层
      });
      console.log(tree);
      return tree;
    },
    openScopeDialog() {
      // 选择范围打开部门树弹窗
      this.getTableList();
      this.scopeVisible = true;
      this.$nextTick(() => {
        this.selectedTreeData = this.form.suitDepartmentAddList;
        this.$refs.tree.setCheckedKeys(this.form.suitDepartmentAddList.map(item => item.departmentId));
      });
    },
    blank(url) {
      window.open(url);
    },
    handleUploadList(item, index) {
      console.log(item);
      if (['图片', '视频', '文件'].includes(item.title)) {
        document.getElementsByClassName('upload-input')[index].click();
      } else if (item.title == '链接') {
        this.urlDialogVisible = true;
      }
    },
    handleDelMedia(row, index) {
      this.form.welcomeMediaList.splice(index, 1);
    },
    handkeFileChange(e, item) {
      console.log(item);
      const file = e.target.files[0]; // only use files[0]
      console.log(file);
      let fileType = '';
      if (file.size > 2000000) {
        this.$message.error('单个大小不超过2M');
        return false;
      }
      if (item.title == '图片') {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png';
        if (!isJPG) {
          this.$message.error('请上传图片');
          return false;
        }
        fileType = 'jpg';
      } else if (item.title == '视频') {
        const isVideo = file.type == 'video/mp4';
        if (!isVideo) {
          this.$message.error('请上传mp4类型的视频文件');
          return false;
        }
        fileType = 'mp4';
      } else if (item.title == '文件') {
        fileType = '.doc';
      }
      this.handleRequest(file, fileType);
    },
    handleRequest(file, fileType) {
      let files = new FormData();
      files.append('file', file);
      postForm(`/haoban-manage3-web/upload-file?fileType=${fileType}`, files).then(res => {
        const { data } = res;
        let mediaType = 1;
        if (fileType == 'jpg') {
          mediaType = 1;
        } else if (fileType == 'mp4') {
          mediaType = 2;
        } else if (fileType == '.doc') {
          mediaType = 3;
        }
        if (data.errorCode == 1 && data.result) {
          const obj = {
            mediaTitle: file.name,
            mediaType,
            mediaUrl: data.result.url
          };
          if (mediaType == 3) {
            obj.mediaSize = (data.result.size / 1024).toFixed(2);
          }
          this.form.welcomeMediaList.push(obj);
        }
      });
    },
    onClosed() {
      this.accountName = '';
      this.url = '';
    },
    addAcountName() {
      // 文本链接
      if (this.accountName == '') {
        this.$message({
          message: '请输入公众号名称',
          type: 'error'
        });
        return;
      } else {
        if (this.accountName.indexOf('#公众号：') != -1) {
          console.log('');
        } else {
          this.accountName = '#公众号：' + this.accountName;
        }
        this.addReplayDialog = false;
        this.form.welcomeContent = this.form.welcomeContent + this.accountName;
      }
    },
    addUrl() {
      this.form.welcomeMediaList.push({
        mediaTitle: this.url,
        mediaType: 4,
        mediaUrl: this.url,
        mediaSize: ''
      });
      this.urlDialogVisible = false;
    },
    addLinkDialogShow() {
      this.addReplayDialog = true;
    },
    changeRoute() {
      this.$router.push('/contactsList');
    },
    selectEmoji(item) {
      const that = this;
      const str = that.form.welcomeContent + item.key;
      if (str.length > 1000) {
        this.$message('添加该表情后文本内容将超过字数限制，无法添加！');
      } else {
        that.form.welcomeContent = str;
      }
    },
    putName() {
      const that = this;
      that.form.welcomeContent = that.form.welcomeContent + '<微信昵称>';
    },
    getData() {
      let para = {
        welcomeId: this.$route.query.id
      };
      getRequest('/haoban-manage3-web/welcome/get', para)
        .then(res => {
          let resData = res.data;
          if (resData.code == 0 && resData.result) {
            const { suitDepartmentList, title, welcomeId, welcomeContent, welcomeMediaList, wxEnterpriseId } = resData.result;
            this.form = { suitDepartmentList: suitDepartmentList || [], suitDepartmentAddList: JSON.parse(JSON.stringify(suitDepartmentList)) || [], title, welcomeId, welcomeContent, welcomeMediaList, wxEnterpriseId };
            console.log(this.form);
            this.form = Object.assign({}, this.form);
          }
        })
        .catch(error => {
          this.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    submit() {
      if (!this.form.suitDepartmentAddList.length) {
        this.$message.error('请选择使用范围');
        return;
      }
      this.$refs.form.validate(value => {
        if (value) {
          const { suitDepartmentAddList, suitDepartmentList, title, welcomeId, welcomeContent, welcomeMediaList, wxEnterpriseId } = this.form;
          const para = { title, welcomeId, welcomeContent, welcomeMediaList, wxEnterpriseId: wxEnterpriseId || this.wxEnterpriseId };
          const addArr = [];
          const delArr = [];
          suitDepartmentAddList.forEach(ele => {
            if (!suitDepartmentList.filter(item => item.departmentId == ele.departmentId).length) {
              addArr.push(ele);
            }
          });
          suitDepartmentList.forEach(ele => {
            if (!suitDepartmentAddList.filter(item => item.departmentId == ele.departmentId).length) {
              delArr.push(ele);
            }
          });
          para.suitDepartmentAddList = addArr;
          para.suitDepartmentDeleteList = delArr;
          para.suitDepartmentAddList.forEach(item => {
            item.selectType = 1;
          });
          para.suitDepartmentDeleteList.forEach(item => {
            item.selectType = 1;
          });

          console.log(para);
          this.btnLoading = true;
          postJsonRequest('/haoban-manage3-web/welcome/save', para)
            .then(res => {
              let resData = res.data;
              if (resData.code == 0) {
                this.$message({
                  type: 'success',
                  message: '保存成功!'
                });
                this.$router.push('/salutatory');
              }
            })
            .catch(function(error) {
              this.$message.error({
                duration: 1000,
                message: error.message
              });
            })
            .finally(() => {
              this.btnLoading = false;
            });
        }
      });
    }
  }
};
</script>
<style type="text/scss" lang="scss" scoped>
.upload-input {
  display: none;
}
.w-384 {
  width: 555px;
  box-sizing: border-box;
}
.mediaEcho {
  background: #f7f8fa;
  padding-left: 20px;
  padding-top: 14px;
  padding-bottom: 14px;
  .flexBox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 14px;
    .popverText {
      font-size: 12px;
      line-height: 16px;
      max-width: 80%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .flexBoxContainer:last-child {
    .flexBox {
      margin-bottom: 0;
    }
  }
}
.addInfo {
  padding: 10px 20px;
  width: 555px;
  background: #f7f8fa;
  border-radius: 2px;
  line-height: 20px;
  box-sizing: border-box;
  p {
    display: inline-block;
    margin-left: 5px;
  }
  &:hover {
    color: #2f54eb;
  }
}
.uploadListBox {
  width: 72px;
  height: 60px;
  border-radius: 2px;
  border: 1px solid #dcdfe6;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
  &:hover {
    box-shadow: 0px 2px 4px 0px rgba(47, 84, 235, 0.16);
    border: 1px solid #2f54eb;
  }
}
.disabled {
  pointer-events: none;
  opacity: 0.5;
}
.uploadListBox + .uploadListBox {
  margin-left: 20px;
}
.scopeContainer {
  .wwTag {
    background: #ebeffe;
    border-radius: 4px;
    display: inline-block;
    height: 24px;
    line-height: 24px;
    padding: 0 8px;
    box-sizing: border-box;
    margin-left: 8px;
    margin-bottom: 8px;
  }
}
.welcomeContent {
  height: 220px;
  border: 1px solid #dcdfe6;
  border-radius: 2px;
  >>> .el-textarea__inner {
    height: 181px;
    border: none;
    &:focus {
      box-shadow: none;
    }
  }
  >>> .el-input__count {
    bottom: 44px;
  }
}
.daily-set-wrap {
  height: 100%;
  .daily-set-content {
    padding: 20px;
    .table-condition-left {
      font-size: 0;
    }
  }
}
.salutatory-set-wrap {
  >>> .el-input__inner:focus {
    box-shadow: none;
  }
  .welcomeContentItem >>> .el-form-item__content {
    position: relative;
    width: 555px;
    box-sizing: border-box;
    .text-bottom {
      position: absolute;
      top: 180px;
      left: 1px;
      justify-content: space-between;
      align-items: center;
      height: 38px;
      width: 555px;
      box-sizing: border-box;
      padding: 0 9px;
      .put {
        font-size: 12px;
        font-weight: 400;
        line-height: 17px;
        color: #606266;
        cursor: pointer;
      }
      .line {
        width: 1px;
        height: 9px;
        background: #c0c4cc;
        margin: 0 10px;
      }
    }
  }
  .form {
    width: 672px;
    float: left;
  }
  .iphone {
    border-radius: 4px;
    position: relative;
    margin-left: 117px;
    display: inline-block;
    font-size: 0;
    line-height: 0;
    background-image: url('../../assets/iphone2.png');
    background-repeat: no-repeat;
    width: 240px;
    min-height: 495px;
    background-size: 240px auto;
    color: #303133;
    .infoList {
      padding: 0 10px;
      margin-top: 80px;
      border-radius: 6px;
      max-height: 360px;
      overflow: auto;
      .infoListBox {
        .infoAvatar {
          display: inline-block;
          vertical-align: top;
          margin-right: 10px;
          img {
            vertical-align: top;
            width: 26px;
            height: 26px;
          }
        }
        .imgInfo,
        .videoInfo {
          display: inline-block;
          overflow: hidden;
          border-radius: 4px;
          position: relative;
          cursor: default;
          img {
            min-height: 27px;
            max-width: 140px;
          }
        }
        .videoInfo {
          video {
            min-height: 27px;
            max-width: 140px;
            max-height: 250px;
            cursor: pointer;
          }
        }
        .textInfo,
        .docInfo,
        .urlInfo,
        .appletsInfo {
          min-height: 28px;
          background-color: #fff;
          border: 1px solid #e4e6e9;
          max-width: 166px;
          display: inline-block;
          text-align: left;
          padding: 5px 6px;
          border-radius: 4px;
          min-width: 24px;
          box-sizing: border-box;
          position: relative;
          &::before {
            top: 10px;
            display: block;
            content: ' ';
            width: 0;
            line-height: 0;
            font-size: 0;
            border-style: solid;
            border-color: transparent;
            position: absolute;
            left: -6px;
            border-width: 4px 6px;
            border-left: 0;
            border-right-color: #fff;
          }
          .content {
            font-size: 12px;
            word-break: break-all;
            letter-spacing: 0;
            line-height: 18px;
            height: auto;
          }
        }
        .docInfo {
          display: inline-flex;
          align-items: center;
        }
        .docTitle {
          padding-right: 10px;
          max-width: 100px;
          float: left;
          overflow-wrap: break-word;
          b {
            font-size: 12px;
            text-align: left;
            line-height: 16px;
          }
          p {
            margin-top: 5px;
            font-size: 12px;
            color: #787878;
            text-align: left;
            line-height: 14px;
          }
        }
        .urlTitle,
        .appletsTitle {
          font-size: 14px;
          line-height: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-bottom: 3px;
        }
        .urlInfo {
          .urlContent {
            overflow-wrap: break-word;
            b {
              color: #606266;
              padding-right: 10px;
              font-size: 12px;
              text-align: left;
              line-height: 17px;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
              overflow: hidden;
              max-width: 100px;
              float: left;
            }
          }
        }
        .appletsInfo {
          .appletsTitle {
            color: #606266;
          }
          img {
            width: 144px;
            height: 144px;
          }
        }
      }
      .infoListBox + .infoListBox {
        margin-top: 15px;
      }
    }
  }
}
.el-alert--info {
  align-items: flex-start;
  width: 700px;
  padding-top: 5px;
  font-size: 14px;
  color: #606266;

  background: #f7f8fa;
  border-radius: 2px;
}
.el-icon-info {
  width: 12px;
  font-size: 12px;
  color: #2f54eb;
  margin-top: 5px;
}
.el-alert__content {
  padding-left: 9px;
  .el-alert__title {
    font-size: 13px;
    font-weight: 400;
    color: #303133;
    line-height: 22px;
  }
}
.opacity80 {
  opacity: 0.8;
}
.scopeBox {
  width: 846px;
  height: 522px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  display: flex;
  .left {
    padding: 15px;
    width: 50%;
    .tree {
      margin-top: 20px;
      height: 454px;
      overflow-y: auto;
    }
  }
  .right {
    width: 50%;
    border-left: 1px solid #dcdfe6;
    padding: 20px 15px;
    height: 454px;
    overflow-y: auto;
    .right-top {
      margin-bottom: 15px;
      display: flex;
      justify-content: space-between;
      color: #303133;
    }
    .contact-li {
      .li-cell {
        border-radius: 2px;
        line-height: 32px;
        display: inline-flex;
        width: 392px;
        justify-content: space-between;
        padding: 0 4px;
        align-items: center;
        box-sizing: border-box;
        &:hover {
          background: #f7f8fa;
        }
        i {
          width: 20px;
          height: 20px;
          border-radius: 10px;
          font-size: 12px;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          &:hover {
            background: #e5e6eb;
          }
        }
      }
    }
  }
}
</style>
