<!--
 * @Description: 用户标签列表组件
 * @Author: wenjing
 * @Date: 2023-05-15 11:30:56
-->
<template>
  <div class="body">
    <!-- 过滤条件 -->
    <user-tag-list-filter @refreshPage="handleRefreshPage"/>
    <!-- 用户列表 -->
    <div class="table-style">
      <el-table :data="userList" :header-cell-style="{background:'#eff5f9', color:'#4b5156'}">
        <el-table-column min-width="1%"></el-table-column>
        <el-table-column min-width="12%" type="index" label="序号"></el-table-column>
        <el-table-column min-width="24%" label="基本信息" >
          <template slot-scope="scope">
            <div>
              <div><span class="col-name">{{ scope.row.name }}</span>{{ scope.row.mobile }}</div>
              <div style="color:#CAD0DA">{{ scope.row.genderText }} | {{ scope.row.age }} | {{ scope.row.idCardNo }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column min-width="63%" label="用户标签">
          <template slot-scope="scope">
            <div v-if="scope.row.simpleTagList">
              <el-tag v-for="(tag, index) in scope.row.simpleTagList" :key="index" class="col-user-tag" 
                :style="tagColorStyle(tag)" size="small" type='info' :disable-transitions="false">
                {{ tag.tagName }}
                <el-popconfirm title="确定删除当前标签吗?" @confirm="handleDeleteTag(tag, scope.row)">
                  <i class="el-icon-close" slot="reference"></i>
                </el-popconfirm>
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <!-- 操作栏 -->
        <el-table-column min-width="10%" label="操作">
          <template slot-scope="scope">
            <el-tooltip class="opr-icon mouse-pointer" effect="dark" content="添加标签" placement="top">
              <add-manual-tag-popup :aupUserId="scope.row.id" :iconBtn="true"
                :manualTaglist="manualTaglist" @close="handleCloseManualTagPopup" />
            </el-tooltip>
            <el-tooltip class="opr-icon mouse-pointer" effect="dark" content="编辑标签" placement="top">
              <i class="el-icon-edit" @click="handleOpenEditTagDlg(scope.row)" style="color:#397AFA"></i>
            </el-tooltip>
            <el-tooltip class="opr-icon mouse-pointer" effect="dark" content="用户画像" placement="top">
              <i class="el-icon-user" @click="handleOpenProfileDlg(scope.row)" style="color:#397AFA"></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页组件 -->
    <div class="pagenation-block">
      <pagination :page.sync="page" :pageSize.sync="pageSize" :total="total" @refresh="pageAupUsers"/>
    </div>

    <!-- 对话框 -->
    <user-tag-editor-dlg :showDialog.sync="showEditTagDlg" :userInfo="curUser" :manualTaglist="manualTaglist"
      @refreshManualTags="handleRefreshManualTags" @closeDialog="handleCloseEditTagDlg"/>
    <user-profile-dlg :showDialog.sync="showProfileDlg" :userInfo="curUser" @closeDialog="handleCloseProfileDlg"/>
  </div>
</template>

<script>
import UserTagListFilter from './components/UserTagListFilter.vue';
import AddManualTagPopup from './components/AddManualTagPopup.vue';
import UserTagEditorDlg from "./components/UserTagEditorDlg.vue";
import UserProfileDlg from './components/UserProfileDlg.vue';

export default {
  name: 'UserTagList',
  components: {
    'user-tag-list-filter': UserTagListFilter,
    'add-manual-tag-popup': AddManualTagPopup,
    'user-tag-editor-dlg': UserTagEditorDlg,
    'user-profile-dlg': UserProfileDlg
  },
  
  data() {
    return {
      userList: [],
      filterData: {},
      page: 1,
      pageSize: this.commonConst.PAGE_SIZE,
      total: 0,
      
      showEditTagDlg: false,
      showProfileDlg: false,

      curUser: {},
      manualTaglist: []
    }
  },

  computed: {
    tagColorStyle() {
      return function(tag) {
        return { backgroundColor:tag.bgcolor, color:tag.color };
      }
    },
  },
  
  methods: {
    //按过滤条件分页查询用户列表
    pageAupUsers() {
      let filterParams = {...this.filterData, page: this.page, pageSize: this.pageSize};
      this.appAxios("GET", this.commonUrl.URL_PAGE_AUP_USERS, filterParams).then(result => {
        if (result == null) {
          return;
        }
        this.total = result.totalNumber;
        this.userList = result.data;
      })
    },

    //获取所有人工标签列表
    listAllManualTags() {
      let url = this.commonUrl.URL_LIST_ALL_MANUAL_TAGS;
      this.appAxios("GET", url).then(result => {
        if (result == null) return;
        this.manualTaglist = result.data;
      })
    },

    handleRefreshPage(filterData) {
      this.page = 1;
      this.filterData = filterData;
      this.pageAupUsers();
    },
    
    handleDeleteTag(tag, user) {
      let param = {
        aupUserId: user.id, 
        tagName: tag.tagName,
        subjectKey: tag.subjectKey
      };

      let requestData = {
        method: 'DELETE',
        url: this.commonUrl.URL_DELETE_AUP_USER_TAG_BY_NAME,
        param: param,
        contentType: this.commonConst.CNTYPE_FORM_DATA
      };
      this.vueRequest(requestData).then(result => {
        if (result == null) return;
        this.pageAupUsers();
      })
    },
    
    handleCloseManualTagPopup(reloadUserWithTags) {
      if (reloadUserWithTags) {
        this.pageAupUsers();
      }
    },

    handleOpenEditTagDlg(user) {
      this.curUser = {name: user.name, idCardNo: user.idCardNo, id: user.id};
      this.showEditTagDlg = true;
    },

    handleRefreshManualTags() {
      this.listAllManualTags();
    },

    handleCloseEditTagDlg(refreshPage) {
      this.showEditTagDlg = false;
      this.curUser = {};
      if (refreshPage) {
        this.pageAupUsers();
      }
    },
    
    //打开用户画像数据弹框
    handleOpenProfileDlg(user) {
      this.curUser = {name: user.name, idCardNo: user.idCardNo, id: user.id};
      this.showProfileDlg = true;
    },

    handleCloseProfileDlg() {
      this.showProfileDlg = false;
      this.curUser = {};
    },
  },

  mounted() {
    this.pageAupUsers();
    this.listAllManualTags();
  }
}
</script>

<style scoped>
.body {
  margin: 0;
  text-align: center;
  border: solid 0px;
}

.table-style {
  margin: 0 40px 0;
  border: 1px solid #EBEEF5;
}

.col-name {
  font-size: 17px;
  color: #657180;
  margin-right: 8px
}

.col-user-tag {
  margin-right:10px; 
  margin-bottom:5px
}

.opr-icon {
  margin-right:15px;
}

.pagenation-block {
  margin: 25px 40px 0;
  text-align: right;
}
</style>
