<template>
  <!-- 具体标签 -->
  <div class="tag-some-list">
    <div>
      <el-table :data="tableData">
        <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="scope.row.refersh ? '更新标签' : '添加标签'" placement="bottom">
              <i class="iconfont icon-jia icon-tag-name" :class="{ 'icon-shoudonggengxin': scope.row.refersh }" @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" :append-to-body="true">
      <div class="dialog-box">
        <p class="tag-name">{{ tagData.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-mode">
          <p>营销方式</p>
          <tag-mode></tag-mode>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="confirmOptions">确 定</el-button>
      </span>
    </el-dialog> -->
    <edit-tag :showEditTagPop.sync="showEditTagPop" :tagData="tagData" :title="editPopType === 'add' ? '添加标签' : '编辑标签'" @returnTagData="returnTagData"></edit-tag>
  </div>
</template>

<script>
// import TagMode from '@/components/tag/tag-mode';
import tagDetails from '@/components/tagDetail/mixin/index';
// import TagConfigOptions from '@/components/tag/tag-config-options';
import EditTag from '../memberGroup/edit-tag';
import { delThirdHandTag } from '@/request/api';

export default {
  name: 'tag-container',

  mixins: [tagDetails],

  components: {
    // TagMode,
    // TagConfigOptions,
    EditTag
  },

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

  data() {
    return {
      successAdd: false,
      tableData: [],
      dialogVisible: false,
      dialogData: {},
      TimeOptions: [],
      optionFlag: false,
      showEditTagPop: false,
      tagData: {}, // 单个数据
      editPopType: 'add',
      templateData: [],
      tagId: '',
      postTemplateData: {
        selectedVal: [],
        template: []
      },
      activeTagsGroupIndex: 0,
      selectedTags: [[]]
      // tagData: {
      //   tagId: '',
      //   tagName: '',
      //   tagDescribe: '',
      //   isActive: 0, // 是否实时
      //   inputSearch: '' // 输入搜索
      // }
    };
  },

  methods: {
    returnTagData(data) {
      switch (this.editPopType) {
        case 'add':
          this.selectedTags[this.activeTagsGroupIndex].push(data);
          break;
        case 'edit':
          this.selectedTags[this.activeTagsGroupIndex][this.activeTagIndex] = { ...data };
          break;
      }
      this.$emit('returnTagData', this.selectedTags);
    },
    handleClose() {
      this.dialogVisible = false;
      this.optionFlag = false;
    },
    // 添加标签 弹框里面操作
    addTag(list) {
      this.dialogData = list;
      this.tagData = list;
      this.middleList = list;
      if (list.tagId) {
        this.optionFlag = true;
        this.tagId = list.tagId;
        this.showEditTagPop = true;
      }
    },
    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);
        });
    },

    /**
     *
     */
    async confirmOptions() {
      this.successAdd = false;
      const ret = this.$refs.tagConfig.getTemplateData();
      this.templateData = JSON.parse(JSON.stringify(ret));
      this.confirmPost();
      setTimeout(_ => {
        // 如果成功就修改
        if (this.successAdd) {
          this.dialogVisible = false;
          let index = this.tableData.findIndex(el => el.tagId === this.middleList.tagId);
          this.tableData[index].refersh = true;
          // 传出数据到tags-group-list
        }
      }, 200);
    }
  },

  created() {
    this.middleList = null;
  },

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

<style lang="scss" scoped>
.tag-some-list {
  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>
