<style>
@import '../../assets/css/customerManage.css';
.SelectedAccount_box{
  display: flex;
  flex-wrap: wrap;
}
.SelectedAccount{
  margin: 5px;
}
.vux-flexbox{
    width: 100%;
    text-align: left;
    display: flex;
    box-align: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.vux-flex-row {
    box-direction: row;
    box-orient: horizontal;
    -webkit-box-orient: horizontal;
    -ms-flex-direction: row;
    flex-direction: row;
}
.el-table__fixed-body-wrapper table{
    padding-bottom: 8px!important;
}
.scene-container {
    position: relative;
    width: 180px;
}
.scene-list{
    max-height: 240px;
    overflow-y: auto;
    font-size: 12px;
    margin-bottom: 10px;
}
.scene-list .scene-list-item{
    color: #333;
    padding: 10px 15px;
    cursor: pointer;
    background-color: #fff;
}
.scene-list .scene-list-item-select, .scene-list .scene-list-item::before {
    background-color: #f7f8fa;
    color: #2362fb;
}
.handle-interval{
    border-top: 1px solid #efefef;
}
.handle-button{
    padding: 6px 20px;
    font-size: 12px;
    cursor: pointer;
    color: #2362fb;
}
.handle-button .handle-button-icon{
    margin-right: 8px;
    margin-top: 3px;
}
.handle-button .handle-button-name{
    font-size: 12px;
}
.popover-class{
    padding: 0 !important;
}
.select-no{
    display: none;
}
.scene-wrapper{
    min-height: 50px;
    background: #fff;
    border-top: 1px solid #e1e1e1;
    font-size: 13px;
    overflow-x: scroll;
    color: #aaa;
    margin-top: 20px;
}
.scene-wrapper .list, .scene-wrapper{
    width: 100%;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.scene-wrapper .list{
    -ms-flex-negative: 0;
    flex-shrink: 0;
}
.scene-wrapper .list .list-item{
    height: 30px;
    padding: 0 10px;
    margin: 10px 15px 0 0;
    border: 1px solid #e1e1e1;
    border-radius: 3px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.scene-wrapper .list .list-item .icon{
    margin-left: 20px;
    cursor: pointer;
}
</style>
<template>
  <div class="customerManage">
    <div class="page-content">
        <el-table
            v-loading="loading"
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            :height="sceneList.length > 0 ? '600' : '660'"
            border
            row-class-name="font-size-12">
            <el-table-column
                fixed
                prop="CustomerName"
                label="渠道"
                width="120"
                align="center"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    <p class="cp">{{scope.row.Name}}</p>
                </template>
            </el-table-column>
            <el-table-column
                prop="IsAppLogin"
                label="账号"
                show-overflow-tooltip>
                <template slot-scope="scope">
                  <div class="SelectedAccount_box">
                    <el-tag class="SelectedAccount" 
                    v-for="(item,index) in scope.row.list" 
                    :key="index" closable
                    @click="editAccount(item)"
                    @close="handleClose(item)">{{item.Name}}</el-tag>
                  </div>          
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="IsCarefor"
                fixed="right"
                width="100"
                label="新建">
                <template slot-scope="scope">
                    <el-button class="button-new-tag" size="small" @click="addAccount(scope.row)">+ 账号 </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div>
    </div>
    <!-- 添加账号弹窗 -->
    <div v-if="addCustomerShow">
        <addCustomer :obj="newObj" @addCustomerOk="addCustomerOk"/>
    </div>
  </div>
</template>
<script>
import addCustomer from "../dialogModel/addCustomer";
export default {
    components: {
        addCustomer
    },
    data() {
        return {
            newObj:{},
            list:[],
            visible: false,
            CustomerId: 0,
            CustomerIdStr: '',
            addCustomerShow: false,
            loading:false,
            tableData:[],
            sceneList:[]
        };
    },
    mounted() {
        this.getList()
        let $this = this
        this.MsgBus.$on('closeaaddCustomer', function (){
            $this.addCustomerShow = false
        })
    },
    beforeDestroy() {
        this.MsgBus.$off('sceneSave');
        this.MsgBus.$off('editScene');
    },
  methods: {
      addCustomerOk(){
        this.addCustomerShow = false
        this.getList()
      },
      editAccount(row){
        this.newObj = {
          ID:row.ID,
          SNO:row.SNO,
          Name:row.Name,
          title: '编辑账号'
        }
        setTimeout(()=>{
          this.addCustomerShow = true
        },100)
      },
      addAccount(row){
        this.newObj = {
          ID:row.ID,
          title: '新建账号'
        }
        setTimeout(()=>{
          this.addCustomerShow = true
        },100)
        
      },
      //删除
      handleClose(row){
        let tips = '确定将这条账号删除?'
        tips = '是否把账号“'+ row.Name + '”删除？'
        this.$confirm(tips, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.apipost('/api/Customer/DelGuestSourceAccount', {
              SAccountId: row.ID
            }, res=>{
                if (res.data.resultCode == 1) {
                    this.$message.success(res.data.message);
                    this.getList()
                }
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        }); 
      },
    
    getList: function (){
        this.tableData = []
        this.loading = true
        this.apipost('/api/Customer/GetCustomerSourceEnum', {}, res=>{
            if (res.data.resultCode == 1) {
                let data = res.data.data;
                let addList = function(arr) {
                  arr.forEach(item => {
                    item.list = []
                  });
                };
                addList(data);
                this.tableData = res.data.data;
                this.loading = false;
                this.getGetGuestSourceAccountList()
                
            }
        })
        
    },
    getGetGuestSourceAccountList(){
      this.apipost('/api/Customer/GetGuestSourceAccountList', {}, res=>{
          if (res.data.resultCode == 1) {
            this.list = res.data.data
            for(let i=0;i<this.tableData.length;i++){
              for(let j=0;j<this.list.length;j++){
                if(this.tableData[i].ID==this.list[j].SNO){
                  let obj = {
                    ID: this.list[j].ID,
                    Name: this.list[j].Name,
                    SNO: this.list[j].SNO,
                    UpdateBy: this.list[j].UpdateBy,
                    UpdateDate: this.list[j].UpdateDate,
                  }
                  this.tableData[i].list.push(obj)
                }
              }
            }
            
          }
      })
    },
  }
};
</script>
