<template>
  <div>
    <div class="warp">
      <h2>加好友配置</h2>
      <span class="echoData" v-show="friendSettingType && friendSettingType != 4">{{ echoFriendData }}</span>
      <el-button type="text" style="margin-left: 20px;" @click="openDialog">去配置</el-button>
    </div>
    <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" style="width: 860px;">
            <i class="el-alert__icon el-icon-info"></i>
            <div class="el-alert__content">
              <p class="el-alert__title">
                1. 因企业微信接口限制，若在企微管理后台为门店人员配置了欢迎语，此处好办配置的欢迎语不会生效；<br />
                2. 若使用好办欢迎语，请关闭其他企业自建应用/第三方应用的欢迎语配置； <br />
                3. 只有关联了好办导购账号的企微员工在添加好友后才能触发欢迎语，否则无法发送好办欢迎语；<br />
                4. 支持按照企微不同的组织架构来分别配置不同的欢迎语，也即“多部门多欢迎语”；<br />
                5.好办欢迎语支持“文案+带参小程序卡片/带参公众号二维码”，请根据需要进行配置（“带参公众号二维码”仅有30天有效期，超期失效）；<br />
                6. 若某企微员工在多个企微部门，或者某企微部门配置了多条欢迎语，则仅发送“更新时间”最新的那条欢迎语。
              </p>
            </div>
          </div>
        </div>
        <div class="flex flex-space-between m-b-20 m-t-20">
          <el-input placeholder="请输入标题" maxlength="50" v-model="title" class="w-264" style="width: 264px;" @keyup.native="value => toInput(value, searchInput)" clearable @clear="clearSearch"> <i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input>
          <el-button type="primary" @click="changeRoute">新建欢迎语</el-button>
        </div>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" :style="{ width: '100%' }">
          <el-table-column prop="title" label="标题" width="220" show-overflow-tooltip>
            <template slot-scope="{ row }">{{ row.title }}</template>
          </el-table-column>
          <el-table-column prop="welcomeContent" label="内容" show-overflow-tooltip>
            <template slot-scope="{ row }">{{ row.welcomeContent }}</template>
          </el-table-column>
          <el-table-column label="附件">
            <template slot-scope="{ row }">
              <el-popover placement="top-start" trigger="hover" v-if="row.welcomeMediaList && row.welcomeMediaList.length">
                <div class="flexBox" v-for="item in row.welcomeMediaList" :key="item.welcomeMediaId">
                  <svg-icon :iconname="iconType[item.mediaType]" size="16" style="margin-right: 13px;"> </svg-icon>
                  <span class="popverText">{{ item.mediaTitle }}</span>
                </div>
                <div slot="reference" class="flexBox" v-if="row.welcomeMediaList && row.welcomeMediaList.length">
                  <svg-icon :iconname="iconType[row.welcomeMediaList[0].mediaType]" size="40" style="margin-right: 10px;"> </svg-icon>
                  <span class="wrapText"> {{ row.welcomeMediaList[0].mediaTitle }}</span>
                </div>
              </el-popover>
              <div v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="更新时间" width="180" show-overflow-tooltip>
            <template slot-scope="{ row }">{{ row.updateTime | formatTimeStamp }}</template>
          </el-table-column>
          <el-table-column prop="operatorName" label="操作人" width="120" show-overflow-tooltip> </el-table-column>
          <el-table-column prop="suitDepartmentName" label="适用范围" min-width="80">
            <template slot-scope="{ row }">
              <el-popover placement="top-start" trigger="hover" v-if="row.suitDepartmentName.join(',').length > 40">
                <div class="popoverBox">
                  {{ row.suitDepartmentName.join(',') }}
                </div>
                <div slot="reference">
                  {{ row.suitDepartmentName.join(',').slice(0, 40) + '...' }}
                </div>
              </el-popover>
              <div v-else>
                {{ row.suitDepartmentName.join(',') }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="{ row }">
              <el-button type="text" @click="changeRoute(row)">编辑</el-button>
              <el-button type="text" @click="remove(row)" v-if="row.defaultWelcomeFlag != 1">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog title="加好友配置" :visible.sync="dialogVisible" width="590px" :before-close="handleClose">
      <span class="tips">好办欢迎语支持文字、图片、视频、文件、链接</span>
      <el-form label-width="100px" style="margin-top:20px">
        <el-form-item label="加好友配置">
          <div v-for="(val, key) in friendSettingTypeOption" :key="key">
            <el-radio :label="val.label" v-model="type">{{ val.content }}</el-radio>
            <el-tag size="small" v-show="val.label == 2">推荐使用</el-tag>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="btnLoading" @click="saveSetting">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { postJsonRequest, getRequest } from '@/api/api';
import { _debounce } from '@/common/js/public';
export default {
  props: {},
  data() {
    return {
      friendSettingTypeOption: [
        { label: 2, content: '发送【好办欢迎语】+【带导购参数的公众号二维码】' },
        { label: 1, content: '发送【好办欢迎语】+【带导购参数的会员小程序卡片】' }
      ],
      title: '',
      wxEnterpriseId: localStorage.getItem('userInfos') ? JSON.parse(localStorage.getItem('userInfos')).wxEnterpriseId : '',
      friendSettingType: '',
      type: 2,
      friendSettingId: '',
      btnLoading: false,
      dialogVisible: false,
      iconType: {
        1: 'iconwenjianleixingtupian',
        2: 'iconwenjianleixingshipin',
        3: 'iconwenjianleixing-wenjian',
        4: 'iconwenjianleixing-lianjie'
      },
      tableData: []
    };
  },
  mounted() {
    const that = this;
    that.$emit('showTab', 4);
    document.documentElement.style.backgroundColor = '#f0f2f5';
    that.getData();
    this.getSetting();
  },
  destroyed() {
    document.documentElement.style.backgroundColor = '#fff';
  },
  computed: {
    echoFriendData() {
      let content = '';
      if (this.friendSettingType) {
        content = this.friendSettingTypeOption.filter(item => item.label == this.friendSettingType)[0].content;
      }
      return content;
    }
  },
  methods: {
    /**
     * 输入
     */
    toInput: _debounce(function(e, value) {
      this.getData();
    }, 500),
    /**
     * 搜索标签清空
     */
    clearSearch() {
      this.getData();
    },
    openDialog() {
      this.dialogVisible = true;
    },
    getSetting() {
      getRequest('/haoban-manage3-web/welcome/get/friend-setting', { wxEnterpriseId: this.wxEnterpriseId }).then(res => {
        let resData = res.data;
        if (resData.code == 0 && resData.result) {
          const { friendSettingId, friendSettingType } = resData.result;
          this.friendSettingId = friendSettingId;
          this.type = friendSettingType ? friendSettingType : 2;
          this.friendSettingType = friendSettingType;
        }
      });
    },
    saveSetting() {
      let data = {
        friendSettingId: this.friendSettingId,
        wxEnterpriseId: this.wxEnterpriseId,
        friendSettingType: this.type
      };
      this.btnLoading = true;
      postJsonRequest('/haoban-manage3-web/welcome/save/friend-setting', data)
        .then(res => {
          console.log(res);
          let resData = res.data;
          if (resData.code == 0 && resData.result) {
            this.$message.success(resData.message);
            this.dialogVisible = false;
            this.getSetting();
          }
        })
        .finally(() => {
          this.btnLoading = false;
        });
    },
    /**
     * 跳转
     */
    changeRoute(row) {
      this.$router.push({ path: '/salutatorySet', query: { id: row.welcomeId, type: this.friendSettingType } });
    },
    remove(row) {
      this.$confirm(' 是否删除本条欢迎语?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        getRequest('/haoban-manage3-web/welcome/remove', { welcomeId: row.welcomeId }).then(res => {
          let resData = res.data;
          if (resData.code == 0 && resData.result) {
            this.$message.success('删除成功');
            this.getData();
          }
        });
      });
    },
    /**
     * 获取数据
     */
    getData() {
      postJsonRequest('/haoban-manage3-web/welcome/list', { title: this.title, wxEnterpriseId: this.wxEnterpriseId })
        .then(res => {
          let resData = res.data;
          if (resData.code == 0 && resData.result) {
            this.tableData = resData.result;
            this.tableData.forEach(item => {
              item.suitDepartmentName = [];
              if (item.suitDepartmentList && item.suitDepartmentList.length) {
                item.suitDepartmentList.forEach(ele => {
                  item.suitDepartmentName.push(ele.departmentName);
                });
              }
            });
          }
        })
        .catch(error => {
          this.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {},

  components: {}
};
</script>
<style type="text/scss" lang="scss" scoped>
.warp {
  background: #fff;
  margin-bottom: 10px;
  padding: 20px;
  font-size: 14px;
  h2 {
    margin-bottom: 12px;
    font-weight: 500;
  }
  .echoData {
    background: #f5f7fa;
    border-radius: 2px;
    line-height: 22px;
    color: #606266;
    padding: 5px 13px;
  }
}

.el-alert--info {
  align-items: flex-start;
  width: 700px;
  padding-top: 5px;
  font-size: 14px;
  color: #606266;
  background: rgba(240, 245, 255, 1);
  border-radius: 2px;
  border: 1px solid rgba(133, 165, 255, 1);
}
.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;
  }
}
.daily-set-wrap {
  height: 100%;
  background-color: #fff;
  .daily-set-content {
    padding: 20px;
    .table-condition-left {
      font-size: 0;
    }
  }
}
.el-radio {
  margin-right: 0;
}
.el-radio + .el-radio {
  margin-left: 0;
}
.flexBox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .wrapText {
    width: 90%;
    text-align: left;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .popverText {
    font-size: 12px;
    width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.flexBox + .flexBox {
  margin-top: 10px;
}
.popoverBox {
  max-height: 300px;
  overflow-y: auto;
  max-width: 500px;
  line-height: 28px;
}
</style>
