<template>
  <!-- 具体标签 -->
  <div class="tag-some-list">
    <div>
      <el-table :data="tableData" height="460">
        <el-table-column label="标签名称" prop="tagName">
          <template slot-scope="scope">
            <span class="tag-name">{{ scope.row.tagName }}</span>
            <el-tooltip class="item" effect="dark" content="添加标签" placement="bottom">
              <i class="el-icon-plus icon-tag-name" @click="addTag(scope.row)"></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="标签描述" prop="tagDescribe">
          <template slot-scope="scope">
            <div>{{ scope.row.tagDescribe ? scope.row.tagDescribe : '--' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="是否实时" prop="isActive">
          <template slot-scope="scope">
            <span> {{ scope.row.isActive == 1 ? '实时' : '非实时' }} </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" v-if="handTag == 1">
          <template slot-scope="scope">
            <el-button type="text" @click="editHandTag(scope.row)">编辑</el-button>
            <el-button type="text" @click="deleteHandTag(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog title="添加标签" :visible.sync="dialogVisible" width="540" :before-close="handleClose">
      <div class="dialog-box">
        <p class="tag-name">{{ dialogData.tagName }}</p>
        <p class="tag-desc">根据会员信息扩展字段统计而来</p>
        <p class="tag-desc">标签值设置</p>
        <!-- 所有标签的配置项 -->
        <tag-config-options v-if="optionFlag" :tagId="tagId" ref="tagConfig"> </tag-config-options>

        <!-- <div class="tag-value">
          <p>标签值设置</p>
          <div class="tag-area"></div>
          <p>时间范围</p>
          <div class="time-area">
            <el-select v-model="value" placeholder="请选择">
              <el-option v-for="item in TimeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </div>
        </div> -->

        <div class="tag-mode">
          <p>营销方式</p>
          <tag-mode></tag-mode>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmOptions">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import TagMode from '@/components/tag/tag-mode';
import TagConfigOptions from '@/components/tag/tag-config-options';
import { delThirdHandTag } from '@/request/api';

export default {
  name: 'tag-container',

  components: {
    TagMode,
    TagConfigOptions
  },

  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    },
    handTag: {
      type: Boolean,
      default: false
    },
    groupId: String
  },

  data() {
    return {
      tableData: [],
      dialogVisible: false,
      dialogData: {},
      TimeOptions: [],
      optionFlag: false,
      tagId: ''
    };
  },

  methods: {
    handleClose() {
      this.optionFlag = false;
    },
    // 添加标签 弹框里面操作
    addTag(list) {
      this.dialogData = list;
      if (list.tagId) {
        this.optionFlag = true;
        this.tagId = list.tagId;
        this.dialogVisible = !this.dialogVisible;
      }
    },
    editHandTag(list) {
      this.$router.push({
        path: '/manualTagEdit',
        query: { tagId: list.tagId }
      });
    },
    deleteHandTag(list) {
      this.$confirm('删除标签后，符合该标签值的会员对应标签值将同步删除。一旦删除将无法恢复，确认要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(_ => {
          const param = {
            tagId: list.tagId,
            requestProject: 'gic-member-tag-web'
          };
          delThirdHandTag(param)
            .then(res => {
              if (res.errorCode == 1) {
                this.$message({
                  message: '删除成功',
                  type: 'success',
                  duration: 1000
                });
                this.$emit('deleteHandTag', this.groupId);
              }
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(err => {
          console.log(err);
        });
    },

    /**
     *
     */
    confirmOptions() {
      console.log(this.$refs.tagConfig.getTemplateData());
    }
  },

  watch: {
    data: {
      immediate: true,
      handler(newval) {
        this.tableData = newval;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.tag-some-list {
  height: 510px;
  margin: 0 20px;
  overflow-y: auto;
  .tag-name {
    display: inline-block;
    vertical-align: middle;
  }
  .icon-tag-name {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
  }
  .tag-desc {
    font-size: 14px;
    line-height: 26px;
    color: #606266;
  }
  .tag-name {
    font-size: 14px;
    font-weight: bold;
  }
  .tag-value {
    margin-top: 10px;
    padding-top: 10px;
    margin-bottom: 10px;
    border-top: 1px solid #ebeef5;
  }
}
</style>
