<template>
  <div>
    <div class="warp">
      <h2>加好友配置</h2>
      <span class="echoData">发送【好办欢迎语】+【带导购参数的会员小程序卡片】</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">
            <i class="el-alert__icon el-icon-info"></i>
            <div class="el-alert__content">
              <p class="el-alert__title">
                1. 因企业微信接口限制，若在企微管理端为相关人员配置欢迎语，好办设置欢迎语不会生效；<br />
                2. 若使用好办欢迎语，请关闭其他企业自建应用/第三方应用的欢迎语配置； <br />
                3. 在此处所自定义配置的欢迎语基础上，系统将默认包含“带参会员小程序卡片”，以便门店员工添加客户好友后，引导客户进入带参会员小程序页面授权微信信息，进而使得系统将企业客户与GIC后台某客户对应起来；
              </p>
            </div>
          </div>
        </div>

        <div class="flex flex-space-between m-b-20 m-t-20">
          <el-input placeholder="请输入标题" maxlength="50" v-model="searchInput" class="w-264" style="width: 264px;" clearable> <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="scope">{{ scope.row.title }}</template>
          </el-table-column>
          <el-table-column prop="welcomeContent" label="内容" show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.welcomeContent }}</template>
          </el-table-column>
          <el-table-column label="附件">
            <template slot-scope="scope">
              <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"><i class="iconfont iconwenjianleixingtupian" /> {{ scope.row.c1 }} </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="更新时间" width="120" show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.updateTime }}</template>
          </el-table-column>
          <el-table-column prop="operatorName" label="操作人" width="120" show-overflow-tooltip> </el-table-column>
          <el-table-column prop="suitDepartmentName" label="适用范围" width="120" show-overflow-tooltip> </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button type="text">编辑</el-button>
              <el-button type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog title="加好友配置" :visible.sync="dialogVisible" width="599px" :before-close="handleClose">
      <el-form label-width="100px">
        <el-form-item label="加好友配置">
          <el-radio :label="1" v-model="valueVal">发送【好办欢迎语】+【带导购参数的会员小程序卡片】</el-radio>
          <el-radio :label="2" v-model="valueVal">发送【好办欢迎语】+【带导购参数的公众号二维码】</el-radio>
          <el-radio :label="2" v-model="valueVal">不发送【好办欢迎语】</el-radio>
          <el-radio :label="2" v-model="valueVal">发送【好办欢迎语】</el-radio>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getRequest } from '@/api/api';
import errMsg from '@/common/js/error';
export default {
  props: {},
  data() {
    return {
      form: {},
      openFlag: 0,
      valueVal: 1,
      dialogVisible: false,
      tableData: [
        {
          title: '华东区欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎语',
          welcomeContent: '华东区欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎语华东区欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎语',
          c1: '图片名称图片名称图片名称图片名称图片名称',
          updateTime: '2021-12-12 12:11:00',
          operatorName: '稻米',
          g1: '百度一下你就知道',
          suitDepartmentName: '华东分部'
        }
      ]
    };
  },
  filters: {},
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
    /**
     * 跳转
     */
    changeRoute() {
      this.$router.push('/salutatorySet');
    },

    /**
     * 获取数据
     */
    getData() {
      const that = this;
      getRequest('/haoban-manage3-web/get-welcome', {})
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1 && resData.result) {
            that.form = { ...resData.result };
            that.openFlag = resData.result.openFlag;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    setWelcome(val) {
      const that = this;
      that.$refs.form.validate(value => {
        if (value) {
          this.$confirm('是否确认修改欢迎语启用状态？', '提示')
            .then(() => {
              getRequest('/haoban-manage3-web/set-welcome', { openFlag: val })
                .then(res => {
                  let resData = res.data;
                  if (resData.errorCode == 1) {
                    that.$message.success({
                      duration: 1000,
                      message: '设置成功'
                    });
                    window.location.reload();
                  }
                  errMsg.errorMsg(resData);
                })
                .catch(function(error) {
                  that.$message.error({
                    duration: 1000,
                    message: error.message
                  });
                });
            })
            .catch(() => {
              that.openFlag = that.openFlag === 1 ? 0 : 1;
            });
        }
      });
    }
  },
  watch: {},
  mounted() {
    const that = this;
    that.$emit('showTab', 4);
    document.documentElement.style.backgroundColor = '#f0f2f5';
    that.getData();
  },
  destroyed() {
    document.documentElement.style.backgroundColor = '#fff';
  },
  components: {}
};
</script>
<style type="text/scss" lang="scss" scoped>
.bg-ebecf0 {
  background: #ebecf0;
}
.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;
  }
}

.color-c0c4cc {
  display: inline-block;
  line-height: 34px;
  padding-left: 10px;
  color: #c0c4cc;
}
.condition-tips {
  display: inline-block;
  vertical-align: middle;
  line-height: 32px;
}
.p-l-30 {
  padding-left: 30px;
}
.p-l-40 {
  padding-left: 40px;
}
.p-l-55 {
  padding-left: 55px;
}
.p-l-85 {
  padding-left: 85px;
}
.m-l-20 {
  margin-left: 20px;
}
.line-50 {
  height: 50px;
  line-height: 50px;
}
.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;
    }
  }
}
.salutatory-wrap {
  // height: 160px;
  background: #f5f7fa;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 47px;
    padding: 0 20px 0 29px;
    .left {
      font-size: 14px;
      font-weight: 600;
      color: #303133;
      line-height: 20px;
    }
    .right {
      .date {
        font-size: 12px;
        font-weight: 400;
        color: #909399;
        line-height: 17px;
        margin-right: 30px;
      }
    }
  }
  .line {
    box-sizing: border-box;
    border: 1px solid #e4e7ed;
    border-style: none none solid none;
  }
  .bottom {
    padding: 16px 20px 21px 29px;
    .el-form-item {
      >>> .el-form-item__label {
        padding: 0;
      }
      >>> .el-form-item__label,
      >>> .el-form-item__content {
        line-height: 20px;
        font-size: 14px;
        font-weight: 400;
        color: #303133;
      }
    }
  }
}
.welcome-text {
  text-align: left;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
