<template>
    <div class="customerManage" style="height:100%;">
      <div class="tools">
          <h1>引流账号设置</h1>
          <div class="rightmenu">
            <el-button size="mini" type="primary" @click="addAccount">新增</el-button>
        </div>
      </div>
      <div class="query-box">
        <el-row :gutter="20">
            <el-col :xs="7" :sm="6" :md="5" :lg="4" :xl="3">
                <span class="font-size-12" style="padding-right: 10px">账号名称</span>
                <el-input size="mini" class="w210" v-model="msg.Name" placeholder="账号名称" clearable
                    @change="init" @keyup.enter.native="init"></el-input>
            </el-col>
            <el-col :xs="7" :sm="6" :md="5" :lg="4" :xl="3">
                <span class="font-size-12" style="padding-right: 10px">平台</span>
                <el-select v-model="msg.PlatformType" size="small" placeholder="请选择平台" @change="init">
                    <el-option label='不限' value='0' key='0'></el-option>
                    <el-option
                        v-for="item in PlatformTypeList"
                        :key="item.Id"
                        :label="item.Name"
                        :value="item.Id">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :xs="7" :sm="6" :md="5" :lg="4" :xl="3">
                <span class="font-size-12" style="padding-right: 10px">板块</span>
                <el-select v-model="msg.ModuleType" size="small" placeholder="请选择板块" @change="init">
                    <el-option label='不限' value='0' key='0'></el-option>
                    <el-option
                        v-for="item in ModuleTypeList"
                        :key="item.Id"
                        :label="item.Name"
                        :value="item.Id">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :xs="7" :sm="6" :md="5" :lg="4" :xl="3">
              <span class="font-size-12" style="padding-right: 10px">状态</span>
              <el-select v-model="msg.State" size="small" placeholder="请选择状态" 
              @change="init">
                  <el-option key="0" label="不限" value="0"></el-option>
                  <el-option
                      v-for="item in ptionList"
                      :key="item.Id"
                      :label="item.Name"
                      :value="item.Id">
                  </el-option>
              </el-select>
          </el-col>
        </el-row>    
        
        
    </div>
      <!-- height:calc(100% - 200px) -->
      <div class="page-content" style="padding-bottom:20px;;box-sizing:border-box;">
        <el-table :data="tableData" tooltip-effect="dark" v-loading="loading" 
        empty-text="暂无数据" style="width: 100%;" border
         >
          <el-table-column label="账号名称" prop="Name"></el-table-column>
          <el-table-column width="130" prop="State" label="状态">
            <template slot-scope="scope">
              <template v-if="!scope.row.Show">
                <span class="activeState" @click="scope.row.Show=true">
                  <a v-if="scope.row.State==1">正常</a>
                  <a v-if="scope.row.State==2">限流</a>
                  <a v-if="scope.row.State==3">封号</a>
                  <a v-if="scope.row.State==4">重启</a>
                </span>
              </template>
              <template v-if="scope.row.Show">
                <el-select style="width: 80px;" size="mini" v-model="scope.row.State" placeholder="请选择"
                @change="EditState($event,scope.row)">
                  <el-option v-for="item in scope.row.optionList" :key="item.Id" :label="item.Name"
                    :value="item.Id"></el-option>
                </el-select>
                <i class="iconfnt el-icon-close left10 activeState" @click="scope.row.Show=false"></i>
              </template>
              
            </template>
          </el-table-column>
          <el-table-column label="所属平台" prop="PlatformTypeName"></el-table-column>
          <el-table-column label="所属板块" prop="ModuleTypeName"></el-table-column>
          <el-table-column label="运营人" prop="EmpName"></el-table-column>
          <el-table-column label="创建时间" prop="CreateTime"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button size="mini" type="primary" plain icon="el-icon-edit" @click="editAccount(scope.row)"></el-button>
                <el-button size="mini" type="danger" plain icon="el-icon-delete" @click="delAccount(scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        class="Mypagination"
        background
        @current-change="handleCurrentChange"
        :page-sizes="[10,20,30,40,50,60]"
        :page-size="msg.PageSize"
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        :total="total">
    </el-pagination>
    <el-dialog @closed="closedDialog" :modal="true" :visible.sync="dialogTableVisible" width="600px"  :close-on-click-modal="false" class="addCustomer">
        <div class="add-tit" slot="title">
            <p><span></span>{{title}}</p>
            <span icon="el-icon-close"></span>
        </div>
        <div class="form-box" >
            <el-form :model="form" ref="form" :rules="rules" class="MyEditForm">
                <el-row :gutter="30">
                    <el-col :span="12">
                      <div class="MyEditForm-item">
                        <el-form-item label="账号名称" prop="Name">
                          <el-input placeholder="请输入账号名称" v-model="form.Name"></el-input>
                        </el-form-item>
                      </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="MyEditForm-item label-pad-left">
                            <el-form-item label="平台" prop="PlatformType">
                              <el-select v-model="form.PlatformType" placeholder="请选择平台">
                                <el-option v-for="item in PlatformTypeList" :key="item.Id" :label="item.Name" :value="item.Id">
                                </el-option>
                              </el-select>
                            </el-form-item>
                          </div>
                      </el-col>
                    <el-col :span="12">
                        <div class="MyEditForm-item label-pad-left">
                            <el-form-item label="板块" prop="ModuleType">
                              <el-select v-model="form.ModuleType" placeholder="请选择板块">
                                <el-option v-for="item in ModuleTypeList" :key="item.Id" :label="item.Name" :value="item.Id">
                                </el-option>
                              </el-select>
                            </el-form-item>
                          </div>
                      </el-col>
                      <el-col :span="12">
                        <div class="MyEditForm-item label-pad-left">
                            <el-form-item label="运营人" prop="EmpIds">
                              <el-select v-model="form.EmpIds" placeholder="请选择运营人" 
                              multiple filterable>
                                <el-option 
                                v-for="item in EmployeeList"
                                :label='item.EmName'
                                :value='item.EmployeeId'
                                :key='item.EmployeeId'>
                                </el-option>
                              </el-select>
                            </el-form-item>
                          </div>
                      </el-col>
                      <el-col :span="12">
                        <div class="MyEditForm-item label-pad-left">
                            <el-form-item label="状态" prop="EmpIds">
                              <el-select v-model="form.State" placeholder="请选择状态">
                                <el-option 
                                v-for="item in ptionList"
                                :label='item.Name'
                                :value='item.Id'
                                :key='item.Id'>
                                </el-option>
                              </el-select>
                            </el-form-item>
                          </div>
                      </el-col>
                </el-row>
            </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" class="add-box-btn" @click="submitForm('form')">确 定</el-button>
            <el-button class="add-box-btn add-box-cancel" @click="dialogTableVisible = false, resetForm('form')">取 消</el-button>
        </div>
    </el-dialog>
    </div>
  </template>
  
  <script>
  import rightDrawer from "../../components/workStatistics/rightDrawer.vue";
  export default {
    components: {
      rightDrawer,
    },
    data() {
      return {
        EmployeeList:[],
        dialogTableVisible:false,
        ModuleTypeList:[],
        PlatformTypeList:[],
        msg: {
            PageIndex: 1,
            PageSize: 10,
            Name: "",
            PlatformType: '0',//平台
            ModuleType: '0',//板块
            State: '0'
        },
        title:'',
        form:{
            Id:0,//	修改时传递	是	[string]		查看
            Name:'',//	账号名称	是	[string]		查看
            PlatformType:1,//	平台 枚举	是	[int]		查看
            ModuleType:1,//	版块 枚举	是	[int]		查看
            EmpIds:[],//	运营人 Ids 英文逗号分隔
            State:1,
        },
        rules: {
            Name: [{
            required: true,
            message: "请输入账号名称",
            trigger: "blur"
          }, ],
          PlatformType: [{
            required: true,
            message: "请选择平台",
            trigger: "blur"
          }, ],
          ModuleType: [{
            required: true,
            message: "请选择板块",
            trigger: "change"
          }, ],
          EmpIds: [{
            required: true,
            message: "请选择运营人",
            trigger: "blur"
          }, ],
          State: [{
            required: true,
            message: "请选择状态",
            trigger: "blur"
          }, ],
        },
        total: 0,
        tableData: [],
        loading: false,
        ptionList:[
          {Name:'正常',Id:1},
          {Name:'限流',Id:2},
          {Name:'封号',Id:3},
          {Name:'重启',Id:4},
        ]
      };
    },
    provide() {
      return {
        
      };
    },
    created() {
    },
    mounted() {
        this.Employee()
        this.getEnumerate()
        this.init();
    },
    methods: {
      EditState(e,row) {
        let datas = {
          AccountId:row.Id,
          State:row.State
        }
        this.$confirm('此操作将修改该账号状态否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
          this.apipost('/api/IntroduceFlowStat/SetFlowAccountState',datas, res=>{
              if (res.data.resultCode == 1) {
                  this.init()
                  this.$message.success(res.data.message)
              } else {
                  this.init()
                  this.$message.error(res.data.message)
              }
          })
        }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            }); 
            this.init()         
        });
        
      },
        delAccount(row){
            this.$confirm('此操作将删除该账号是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let msg = {
                    AccountId: row.Id
                }
                this.apipost('/api/IntroduceFlowStat/DelFlowAccount', msg, res=>{
                if (res.data.resultCode == 1) {
                    this.$message.success('操作成功')
                    this.init()
                }
                })
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '已取消'
                });          
            });
        },
        // 修改引流账号
        editAccount(row){
            this.form = JSON.parse(JSON.stringify(row))
            let EmpIds = JSON.parse(JSON.stringify(row.EmpIds))
            EmpIds = EmpIds.split(',')
            this.form.EmpIds = []
            EmpIds.forEach(item => {
                this.form.EmpIds.push(Number(item))
            });
            this.title = '修改引流账号'
            this.dialogTableVisible = true
        },
        closedDialog(){
            this.resetForm("form");
            this.dialogTableVisible = false
        },
        addData(){
            if (!this.form.Name) {
                return this.$message.error('请输入账号名称')
            }
            if (!this.form.PlatformType) {
                return this.$message.error('请选择平台')
            }
            if (!this.form.ModuleType) {
                return this.$message.error('请选择板块')
            }
            if (this.form.EmpIds&&this.form.EmpIds.length==0) {
                return this.$message.error('请选择运营人')
            }
            if (!this.form.State) {
                return this.$message.error('请选择状态')
            }
            let datas = {
                Id:this.form.Id?this.form.Id:0,
                Name:this.form.Name,
                PlatformType:this.form.PlatformType,
                ModuleType:this.form.ModuleType,
                EmpIds:this.form.EmpIds.join(','),
                State:this.form.State
            }
            this.apipost('/api/IntroduceFlowStat/SetFlowAccount',datas, res=>{
                if (res.data.resultCode == 1) {
                    this.init()
                    this.resetForm("form");
                    this.dialogTableVisible = false;
                    this.$message.success(res.data.message)
                    
                } else {
                    this.$message.error(res.data.message)
                }
            })
        },
        submitForm(addMsg) {
            //提交创建、修改表单
            this.$refs[addMsg].validate(valid => {
                if (valid) {
                    this.addData();
                } else {
                    return false;
                }
            });
        },
        addAccount(){
            this.title = '新增引流账号'
            this.dialogTableVisible = true
        },
        resetForm(formName) { // 重置表单
            this.form =  {
                Id:0,//	修改时传递	是	[string]		查看
                Name:'',//	账号名称	是	[string]		查看
                PlatformType:1,//	平台 枚举	是	[int]		查看
                ModuleType:1,//	版块 枚举	是	[int]		查看
                EmpIds:'',//	运营人 Ids 英文逗号分隔
                State:1
            }
            this.$refs[formName].resetFields();
        },
      // 获取业务员
        Employee() {
            let userInfo = this.getLocalStorage();
            let msg = {
                RB_Group_id: userInfo.RB_Group_id,
                BranchId: -1,
                DepartmentId: 0,
                PostId: 0,
                IsLeave: 0,
            };
            this.apipost2(
                "admin_get_EmployeeGetList",
                msg,
                (res) => {
                if (res.data.resultCode == 1) {
                    this.EmployeeList = res.data.data;
                } else {
                }
                },
                (err) => {}
            );
        },
      getEnumerate(){
        // 平台枚举
        this.apipost(
          "/api/IntroduceFlowStat/GetPlatformTypeEnumList",{},
          (res) => {
            this.PlatformTypeList = res.data.data
          },
          (e) => {
            
          }
        );
        // 板块枚举
        this.apipost(
          "/api/IntroduceFlowStat/GetModuleTypeEnumList",{},
          (res) => {
            this.ModuleTypeList = res.data.data
          },
          (e) => {
           
          }
        );
      },
      init(type) {
        if (this.loading) return;
        this.loading = true;
        if(type){
          this.msg.PageIndex = 1
        }
        this.apipost(
          "/api/IntroduceFlowStat/GetFlowAccountPageList",
          this.msg,
          (res) => {
            let datas = res.data.data&&res.data.data.pageData
            let addList = function (arr) {
                arr.forEach(item => {
                  item.Show = false
                  item.optionList = [
                    {Name:'正常',Id:1},
                    {Name:'限流',Id:2},
                    {Name:'封号',Id:3},
                    {Name:'重启',Id:4}
                  ]
                });
            };
            addList(datas);
            this.loading = false;
            this.tableData = res.data.data.pageData;
            this.total = res.data.data.count;
          },
          (e) => {
            this.loading = false;
          }
        );
      },
    handleSizeChange(val) {
        this.msg.PageSize = val
        this.init(1);
    },
    handleCurrentChange(val) {
        this.msg.PageIndex = val;
        this.init();
    },
    },
  };
  </script>
  
  <style>
  @import "../../assets/css/customerManage.css";
  .left10{
    margin-left: 10px;
  }
  .activeState{
    color: #00b0f0;
    cursor: pointer;
  }
  .el-table__fixed-body-wrapper table {
    padding-bottom: 8px !important;
  }
  
  .el-table .xiaoji-row {
    background: #ffff00;
  }
  
  .el-table .sum-row {
    background: #00b0f0;
  }
  
  .el-table .warning-col {
    background: red;
  }
  
  .pointer {
    cursor: pointer;
  }
  
  .pointer:hover {
    color: #00b0f0;
  }
  </style>
  