<template>
  <div class="welcomBox">
    <div>
      <el-form-item label="设置欢迎语">
        <el-radio-group @change="radioChange" v-model="welcomeType">
          <el-radio :label="1">{{ welcomeName == 'code' ? '活码' : '链接' }}欢迎语</el-radio>
          <el-radio :label="2">不发送欢迎语</el-radio>
        </el-radio-group>
        <ul class="tabs" v-if="welcomeType == 1">
          <li>1.下方的欢迎语取自【设置-欢迎语设置】中的“特殊欢迎语”；</li>
          <li>
            2.配置“<span>{{ welcomeName == 'code' ? '活码' : '链接' }}</span
            >欢迎语”后，通过此活码添加好友后，系统自动推送此处所配置的欢迎语
          </li>
          <li>（根据企业微信规则，若所添加的该成员在企业微信后台已经配置了欢迎语，那么会推送企微后台所配置的欢迎语，不会推送此处的欢迎语）</li>
        </ul>
        <ul class="tabs" v-if="welcomeType == 2">
          <li>
            通过此<span>{{ welcomeName == 'code' ? '活码' : '链接' }}</span
            >添加好友后，系统不推送欢迎语，即使在【设置-欢迎语设置】中为该成员配置了欢迎语。
          </li>
          <li>（根据企业微信规则，若所添加的该成员在企业微信后台已经配置了欢迎语，那么企微后台的欢迎语会照常推送）</li>
        </ul>
      </el-form-item>
      <el-form-item label="选择欢迎语" v-if="welcomeType == 1">
        <div class="welcomeTable">
          <div class="wtabTop">
            <el-input class="w260" placeholder="请输入标题" v-model="welcomePage.title" @keyup.native="toInput" clearable @clear="onSearch"></el-input>
            <el-button type="primary" plain @click="changeRoute">新建欢迎语</el-button>
          </div>
          <el-table :data="welcomeTableData" max-height="300px" @row-click="getCurrentRow">
            <el-table-column width="55">
              <template slot-scope="{ row }">
                <el-radio :label="row.welcomeId" @change.native="getCurrentRow(row)" class="hideLable" v-model="welcomeId"><i></i></el-radio>
              </template>
            </el-table-column>
            <el-table-column prop="title" label="标题" width="158px"></el-table-column>
            <el-table-column prop="welcomeContent" label="内容" show-overflow-tooltip></el-table-column>
            <el-table-column label="附件" width="200px" show-overflow-tooltip>
              <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>
          <el-pagination class="paginationBox" background @current-change="handleCurrentChange" :current-page="welcomePage.pageNum" layout=" prev, pager, next " :page-size="welcomePage.pageSize" :total="totalNum"></el-pagination>
        </div>
      </el-form-item>
    </div>
    <div v-if="welcomeType == 1 && welcomeContent != ''" class="phone">
      <p class="welcomeTitle">欢迎语预览</p>
      <previewWelcome :welcomeContent="welcomeContent" :mediaList="welcomeMediaList"></previewWelcome>
    </div>
  </div>
</template>

<script>
import previewWelcome from '@/components/preview-welcome.vue';
import { postJsonRequest } from '@/api/api';
import { getRequest } from '../../../api/api';
import { _debounce } from '@/common/js/public';
export default {
  name: 'welcomeItem',
  components: { previewWelcome },
  props: {
    welcomeId: {
      type: [String, Number],
      default: ''
    },
    welcomeName: {
      type: String,
      default: 'code'
    },
    welcomeType: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      iconType: {
        1: 'iconwenjianleixingtupian',
        2: 'iconwenjianleixingshipin',
        3: 'iconwenjianleixing-wenjian',
        4: 'iconwenjianleixing-lianjie',
        5: 'iconwenjianleixing-xiaochengxu', // 小程序
        6: 'iconwenjianleixing-xiaochengxu', // 带参小程序
        7: 'icongongzhonghao1' // 带参公众号
      },

      welcomeTableData: [],
      welcomeContent: '你好，<微信名称>',
      welcomeMediaList: [],
      // 欢迎语参数
      welcomePage: {
        wxEnterpriseId: sessionStorage.getItem('userInfos') ? JSON.parse(sessionStorage.getItem('userInfos')).wxEnterpriseId : '',
        title: '',
        type: 2,
        pageNum: 1,
        pageSize: 20
      },
      totalNum: 1
    };
  },
  mounted() {
    this.getWelcomeTable();
    document.addEventListener('visibilitychange', () => {
      if (document.visibilityState == 'visible') {
        this.welcomePage = {
          wxEnterpriseId: sessionStorage.getItem('userInfos') ? JSON.parse(sessionStorage.getItem('userInfos')).wxEnterpriseId : '',
          title: '',
          type: 2,
          pageNum: 1,
          pageSize: 20
        };
        this.getWelcomeTable();
      }
    });
  },
  methods: {
    toInput: _debounce(function(e, value) {
      this.onSearch();
    }, 500),
    onSearch() {
      this.welcomePage.pageNum = 1;
      this.getWelcomeTable();
    },
    // 当前页变化
    handleCurrentChange(val) {
      this.welcomePage.pageNum = val;
      this.getWelcomeTable();
    },
    // 选择欢迎语列表数据
    getWelcomeTable() {
      postJsonRequest('/haoban-manage3-web/welcome/list', this.welcomePage).then(res => {
        this.welcomeTableData = res.data.result.result;
        this.totalNum = res.data.result.totalCount;
      });
    },
    // 新建欢迎语
    changeRoute() {
      window.open('/haoban-3/#/salutatorySet?type=2');
    },
    getCurrentRow(row) {
      const { welcomeMediaList, welcomeContent, welcomeId } = row;
      this.$emit('update:welcomeId', welcomeId);
      this.welcomeContent = welcomeContent;
      this.welcomeMediaList = welcomeMediaList;
    },

    // 单选框点击事件
    radioChange(e) {
      this.$emit('update:welcomeType', e);
      if (e == 1) {
        this.getWelcomeTable();
      }
    },
    getDetail() {
      getRequest('/haoban-manage3-web/welcome/get', { welcomeId: this.welcomeId, enterpriseId: sessionStorage.getItem('userInfos') ? JSON.parse(sessionStorage.getItem('userInfos')).enterpriseId : '' }).then(res => {
        if (res.data.code == 0 && res.data.result) {
          const { welcomeMediaList, welcomeContent } = res.data.result;
          this.welcomeContent = welcomeContent;
          this.welcomeMediaList = welcomeMediaList;
        }
      });
    },
    submit() {
      if (this.welcomeType == 2) return true;
      if (this.welcomeType == 1 && !this.welcomeId) {
        this.$message.warning('请选择欢迎语');
        return false;
      } else {
        return true;
      }
    }
  },
  watch: {
    welcomeId: {
      handler: async function(val) {
        if (val) {
          this.getDetail();
        }
      },
      immediate: true
    }
  }
};
</script>
<style lang="less" scoped>
.welcomBox {
  display: flex;
}
.m20 {
  margin: 20px;
}
.w340 {
  width: 340px;
}
.mt20 {
  margin-top: 20px;
}
.mt40b20 {
  margin-top: 40px;
  margin-bottom: 20px;
}
.mr15 {
  margin-right: 15px;
}
.w260 {
  width: 260px;
}
.tabs {
  font-size: 12px;
  color: #909399;
  li {
    line-height: 19px;
  }
}

.addPic {
  font-size: 14px;
  padding-right: 4px;
}
.welcomeTitle {
  // text-align: center;
  margin-left: 118px;
  margin-bottom: 26px;
  margin-top: 6px;
  font-weight: 500;
  color: #303133;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
}
.welcomeTable {
  width: 720px;
  height: 429px;
  border: 1px solid #dcdfe6;
  padding: 12px;
  position: relative;
  box-sizing: border-box;
  .wtabTop {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    .blueBtn {
      font-size: 14px;
      height: 32px;
    }
  }
  .paginationBox {
    position: absolute;
    right: 7px;
    bottom: 0;
    margin-top: 46px;
    margin-right: 6px;
  }
}
.wrapText {
  width: 90%;
  text-align: left;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.flexBox {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .popverText {
    font-size: 12px;
    width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.flexBox + .flexBox {
  margin-top: 10px;
}
.phone {
  .iphone {
    margin-left: 40px;
  }
}
</style>
