<template>
  <ai-list class="AppPetitionManage" isTabs>
    <template slot="content">
      <ai-search-bar class="search-bar">
        <template slot="left">
          <ai-select
            v-model="search.isRealName"
            @change="search.current = 1, getList()"
            placeholder="是否实名"
            :selectList="realStatus">
          </ai-select>
          <ai-select
            v-model="search.wxUserId"
            filterable
            @change="search.current = 1, getList()"
            placeholder="所属员工"
            :selectList="userList">
          </ai-select>
          <ai-select
            v-model="search.tagId"
            @change="search.current = 1, getList()"
            placeholder="选择标签"
            :selectList="subTags">
          </ai-select>
        </template>
        <template slot="right">
          <el-input
            v-model="search.name"
            class="search-input"
            size="small"
            @keyup.enter.native="search.current = 1, getList()"
            placeholder="请输入备注、昵称、姓名"
            clearable
            @change="getList"
            @clear="search.current = 1, search.name = '', getList()"
            suffix-icon="iconfont iconSearch">
          </el-input>
        </template>
      </ai-search-bar>
      <ai-search-bar>
        <template slot="left">
          <el-button type="primary" icon="iconfont iconAdd" @click="isShow = true" :disabled="!ids.length">批量打标签</el-button>
        </template>
        <template slot="right">
          <el-button type="primary" icon="iconfont iconResetting" @click="update" :loading="btnLoading">更新数据</el-button>
        </template>
      </ai-search-bar>
      <ai-table
        :tableData="tableData"
        :col-configs="colConfigs"
        :total="total"
        ref="aitableex"
        :current.sync="search.current"
        @selection-change="handleSelectionChange"
        :size.sync="search.size"
        v-loading="isLoading"
        @getList="getList">
        <el-table-column slot="avatar" label="" width="80" align="center">
          <template slot-scope="{ row }">
            <div class="avatar" style="text-align: right;     justify-content: end;">
              <img :src="row.avatar">
            </div>
          </template>
        </el-table-column>
        <el-table-column slot="userinfo" label="备注名" width="280px" align="left">
          <template slot-scope="{ row }">
            <div class="userinfo">
              <div class="userinfo-right ellipsis">
                <el-tooltip effect="dark" :content="row.corpFullName ? (row.remark || row.name) + '@' + row.corpFullName : (row.remark || row.name) + ''" placement="top">
                  <div class="userinfo-right__top">
                    <h3>{{ row.remark || row.name }}</h3>
                    <span class="ellipsis">{{ row.corpFullName ? '@' + row.corpFullName : '' }}</span>
                  </div>
                </el-tooltip>
                <div class="userinfo-right__bottom">
                  <el-tooltip effect="dark" :content="row.name" placement="top">
                    <i>昵称：{{ row.name }}</i>
                  </el-tooltip>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column slot="tags" label="标签" align="left">
          <template slot-scope="{ row }">
            <div class="table-tags">
              <el-tag type="info" v-for="(item, index) in row.tags" size="medium" :key="index">{{ item.tagName }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column slot="options" label="操作" width="100" fixed="right" align="center">
          <template slot-scope="{ row }">
            <div class="table-options">
              <el-button type="text" @click="toDetail(row.id)">详情</el-button>
            </div>
          </template>
        </el-table-column>
      </ai-table>
      <ai-dialog
        :visible.sync="isShow"
        width="800px"
        title="批量打标签"
        @close="onClose"
        @onConfirm="onConfirm">
        <div class="tags">
          <div class="tag-item" v-for="(item, index) in tags" :key="index">
            <h2>{{ item.name }}</h2>
            <div class="tag-item__right">
              <el-button
                :type="chooseTags.indexOf(item.id) === -1 ? '' : 'primary'"
                v-for="(item, index) in item.tagList"
                @click="choose(item.id)"
                :key="index">
                {{ item.name }}
              </el-button>
            </div>
          </div>
        </div>
      </ai-dialog>
    </template>
  </ai-list>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    name: 'List',

    props: {
      instance: Function,
      dict: Object
    },

    data () {
      return {
        search: {
          current: 1,
          size: 10,
          name: '',
          tagId: '',
          wxUserId: '',
          isRealName: ''
        },
        btnLoading: false,
        isLoading: false,
        isShow: false,
        ids: [],
        total: 10,
        chooseTags: [],
        tags: [],
        colConfigs: [
          { type: 'selection' },
          { slot: 'avatar' },
          { slot: 'userinfo' },
          { prop: 'realName', label: '真实姓名', align: 'center' },
          {
            prop: 'identityNumber', label: '是否实名', align: 'center', 
            render: (h, params) => {
              return h('span', {
              }, params.row.realName ? '是' : '否')
            }
          },
          { prop: 'wxUserNames', label: '所属员工', align: 'center' },
          { slot: 'tags' },
          { prop: 'createTime', label: '添加时间', align: 'left' },
          { prop: 'addWay', label: '添加渠道', align: 'center', formart: v => this.dict.getLabel('wxCustomerAddWay', v) },
          { slot: 'options', label: '操作', align: 'center' }
        ],
        tableData: [],
        realStatus: [{
          dictName: '是',
          dictValue: '1'
        }, {
          dictName: '否',
          dictValue : '0'
        }],
        subTags: [],
        userList: []
      }
    },

    computed: {
      ...mapState(['user'])
    },

    mounted () {
      this.getTags()
      this.getSubTags()
      this.getWxUserList()
      this.isLoading = true
      this.dict.load(['wxCustomerAddWay']).then(() => {
        this.getList()
      })
    },

    methods: {
      getWxUserList () {
        this.instance.post(`/app/wxcp/wxuser/listByDepartId`, {
        }).then(res => {
          if (res.code == 0) {
            this.userList = res.data.map(item => {
              item.dictName = item.name
              item.dictValue = item.id

              return item
            })
          }
        })
      },

      update () {
        this.btnLoading = true
        this.instance.post(`/app/wxcp/wxusercustomer/sync`, null, {
          timeout: 1000000
        }).then(res => {
          if (res.code == 0) {
            this.$message.success('更新成功')
            this.getList()
          }

          this.btnLoading = false
        }).catch(() => {
          
          this.btnLoading = false
        })
      },

      onClose () {
        this.chooseTags = []
      },

      getSubTags () {
        this.instance.post(`/app/wxcp/wxcorptag/listAllTags`).then(res => {
          if (res.code == 0) {
            this.subTags = res.data.map(item => {
              return {
                dictName: item.name,
                dictValue: item.id
              }
            })
          }
        })
      },

      getList() {
        this.instance.post(`/app/wxcp/wxcustomer/list`, null, {
          params: {
            ...this.search
          }
        }).then(res => {
          if (res.code == 0) {
            this.tableData = res.data.records
            this.total = res.data.total

            this.isLoading = false
          } else {
            this.isLoading = false
          }
        }).catch(() => {
          this.isLoading = false  
        })
      },

      choose (id) {
        const index = this.chooseTags.indexOf(id)
        if (index === -1) {
          this.chooseTags.push(id)
        } else {
          this.chooseTags.splice(index, 1)
        }
      },

      onConfirm () {
        if (!this.chooseTags.length) {
          return this.$message.error('请选择标签')
        }

        this.instance.post(`/app/wxcp/wxcorptag/markTagForWeb`, {
          addTagIds: this.chooseTags,
          customerIds: this.ids.map(v => v.id)
        }).then(res => {
          if (res.code == 0) {
            this.isShow = false
            this.getList()
          }
        })
      },

      getTags () {
        this.instance.post(`/app/wxcp/wxcorptag/listAll?size=100`).then(res => {
          if (res.code == 0) {
            this.tags = res.data.records
          }
        })
      },

      onAdd () {
        this.$emit('change', {
          type: 'add'
        })
      },

      handleSelectionChange(e) {
        this.ids = e
      },

      removeAll () {
        this.remove(this.ids.map(v => v.id).join(','))
      },

      remove (id) {
        this.$confirm('确定删除该数据？').then(() => {
          this.instance.post(`/app/apppetition/delete?ids=${id}`).then(res => {
            if (res.code == 0) {
              this.$message.success('删除成功！')
              this.getList()
            }
          })
        })
      },

      toDetail (id) {
        this.$emit('change', {
          type: 'detail',
          params: {
            id: id
          }
        })
      },

      onAdd () {
        this.$emit('change', {
          type: 'add'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .table-tags {
    .el-tag {
      margin-right: 8px;
      margin-bottom: 8px;
      border: 1px solid #D0D4DC;
      background: #F3F4F7;
      border-radius: 4px;
      font-size: 13px;
      color: #222222;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .ellipsis {
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }

  .tags {
    .tag-item {
      display: flex;
      align-items: center;
      padding-bottom: 30px;
      padding-top: 30px;
      border-bottom: 1px solid #EEEEEE;

      &:first-child {
        padding-top: 0;
      }

      .el-tag {
        margin-right: 8px;
        color: #222222;
      }

      h2 {
        width: 88px;
        margin-right: 40px;
        text-align: right;
        color: #888888;
        font-size: 14px;
      }
    }
  }

  .avatar {
    text-align: right;
    img {
      position: relative;
      top: 4px;
      width: 40px;
      height: 40px;
      border-radius: 2px;
      border: 1px solid #CCCCCC;
    }
  }

  .userinfo {
    display: flex;
    align-items: center;
    line-height: 1;

    .userinfo-right__top {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      cursor: pointer;
      white-space: nowrap;
    }

    .userinfo-right__bottom {
      text-align: left;
    }

    i {
      cursor: pointer;
      font-style: normal;
      color: #888888;
      font-size: 14px;
    }

    h3 {
      margin-top: 0;
      margin-bottom: 0;
      margin-right: 8px;
      color: #222222;
      font-weight: normal;
      font-size: 14px;
    }

    span {
      color: #3C7FC8;
      white-space: nowrap;
    }
  }
</style>
