<template>
  <div>
    <el-row>
      <el-col :span="17">
        <el-form-item label="活码类型" @change="radioChange">
          <el-radio-group v-model="welcomesType">
            <el-radio :label="1">活码欢迎语</el-radio>
            <el-radio :label="2">不发送欢迎语</el-radio>
          </el-radio-group>
          <ul class="tabs" v-if="welcomesType == 1">
            <li>1.下方的欢迎语取自【设置-欢迎语设置】中的“特殊欢迎语”；</li>
            <li>2.配置“活码欢迎语”后，通过此活码添加好友后，系统自动推送此处所配置的欢迎语</li>
            <li>（根据企业微信规则，若所添加的该成员在企业微信后台已经配置了欢迎语，那么会推送企微后台所配置的欢迎语，不会推送此处的欢迎语）</li>
          </ul>
          <ul class="tabs" v-if="welcomesType == 2">
            <li>通过此活码添加好友后，系统不推送欢迎语，及时在【设置-欢迎语设置】中为该成员配置了欢迎语。</li>
            <li>（根据企业微信规则，若所添加的该成员在企业微信后台已经配置了欢迎语，那么企微后台的欢迎语会照常推送）</li>
          </ul>
        </el-form-item>
        <el-form-item label="选择欢迎语" v-if="welcomesType == 1">
          <div class="welcomeTable">
            <div class="wtabTop">
              <el-input class="w260" placeholder="请输入标题" v-model="welcomePage.title" @change="onSearch" clearable></el-input>
              <el-button plain class="ylbtn" @click="changeRoute">新建欢迎语</el-button>
            </div>
            <el-table :data="welcomeTableData" max-height="330px">
              <el-table-column width="55">
                <template slot-scope="scope">
                  <el-radio :label="scope.$index" @change.native="getCurrentRow(scope.row)" v-model="welcome">&nbsp;</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="212px" show-overflow-tooltip>
                <template slot-scope="{ row }">
                  <div class="enclosureBox" v-for="item in row.welcomeMediaList" :key="item.welcomeId">
                    <el-image class="img" :src="item.mediaUrl">
                      <div slot="error" class="image-slot img">
                        <i class="el-icon-picture-outline" style="font-size:40px;"></i>
                      </div>
                    </el-image>
                    <p>{{ item.mediaTitle ? item.mediaTitle : '--' }}</p>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <!-- <dm-pagination class="paginationBox" background @current-change="handleCurrentChange" :current-page="welcomePage.pageNum" layout=" prev, pager, next " :page-size="welcomePage.pageSize" :total="totalNum"> </dm-pagination> -->
            <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>
      </el-col>
      <el-col :span="7" v-if="welcomesType == 1 && welcomeContent != ''">
        <p class="welcomeTitle">欢迎语预览</p>
        <previewWelcome :welcomeContent="welcomeContent"></previewWelcome>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import previewWelcome from '@/components/preview-welcome.vue';
import { postJsonRequest } from '@/api/api';
export default {
  name: 'welcomeItem',
  components: { previewWelcome },
  data() {
    return {
      welcomesType: 1,
      welcomeTableData: [],
      welcome: '',
      welcomeContent: '',
      // 欢迎语参数
      welcomePage: {
        wxEnterpriseId: sessionStorage.getItem('userInfos') ? JSON.parse(sessionStorage.getItem('userInfos')).wxEnterpriseId : '',
        title: '',
        type: 2,
        pageNum: 1,
        pageSize: 4
      },
      totalNum: 1,
      welcomeId: '',
      templateSelection: {}
    };
  },
  created() {
    this.getWelcomeTable();
  },
  methods: {
    onSearch() {
      this.welcomePage.pageNum = 1;
      this.getWelcomeTable();
    },
    // 当前页变化
    handleCurrentChange(val) {
      this.welcomePage.pageNum = val;
      this.welcome = '';
      this.getWelcomeTable();
    },
    // 选择欢迎语列表数据
    async getWelcomeTable() {
      await postJsonRequest('/haoban-manage3-web/welcome/list', this.welcomePage).then(res => {
        this.welcomeTableData = res.data.result.result;
        this.totalNum = res.data.result.totalCount;
      });
    },
    // 新建欢迎语
    changeRoute() {
      // this.$router.push({ path: '/salutatorySet' });
      let routeUrl = this.$router.resolve({ path: '/salutatorySet', query: { type: 2 } });
      window.open(routeUrl.href, '_blank');
    },
    getCurrentRow(row) {
      // 获取选中数据   row表示选中这一行的数据，可以从里面提取所需要的值
      this.templateSelection = row;
      this.welcomeContent = row.welcomeContent;
      this.welcomeId = row.welcomeId;
      this.$emit('getWelcomeId', this.welcomeId);
    },
    // 单选框点击事件
    radioChange(e) {
      if (e == 1) {
        this.welcomeId = '';
        this.$emit('getWelcomeId', this.welcomeId);
      }
    }
  }
};
</script>
<style lang="less" scoped>
.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;
  }
}
.ylbtn {
  border: 1px solid #2f54eb;
  color: #2f54eb;
}
.addPic {
  font-size: 14px;
  padding-right: 4px;
}
.welcomeTitle {
  text-align: center;
  margin-bottom: 26px;
  margin-top: 6px;
  font-weight: 500;
  color: #303133;
  font-size: 14px;
}
.welcomeTable {
  width: 720px;
  height: 429px;
  border: 1px solid #dcdfe6;
  padding: 12px;
  position: relative;
  .wtabTop {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
  }
  .paginationBox {
    position: absolute;
    right: 7px;
    bottom: 0;
    margin-top: 46px;
    margin-right: -4px;
  }
  .enclosureBox {
    display: flex;
    align-items: center;
    .img {
      width: 40px;
      height: 40px;
      margin-right: 10px;
    }
    p {
      width: 143px;
      max-width: 143px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
