<template>
 <div class="container-appointment">
     <!-- 头部el-card -->
    <el-card style="margin-bottom: 20px;">
      <div class="top-card-box">
        <div></div>
       <div>  
           <el-input style="width:521px" v-model="keyWord" placeholder="请输入手机号/公司名称" clearable>
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
      </div>
    </el-card>
    <!-- 内容el-card -->
    <el-card>
      <div>
        <el-select v-model="sellerName" @change="sellerNameChange" placeholder="所属销售" clearable>
             <el-option v-for="item in sellerList" :key="item.SellerName" :label="item.SellerName" :value="item.SellerName"></el-option>
          </el-select>
          </div>
        <!-- 表格部分 -->
     <el-table :data="dataList"  style="width: 100%; margin-top: 20px;" border="">
        <el-table-column prop="RealName" align="center" label="姓名"></el-table-column>
        <el-table-column prop="Mobile" align="center" label="手机号"></el-table-column>
        <el-table-column prop="CompanyName" align="center" label="公司名称"></el-table-column>
        <el-table-column prop="SellerName" align="center" label="所属销售"></el-table-column>
        <el-table-column prop="BreakAppointmentNum" align="center" label="爽约次数"></el-table-column>
        <el-table-column prop="" align="center" label="操作">
          <template slot-scope="scope">
            <span class="editsty" @click="detail(scope.row.UserId)">查看详情</span>
          </template>
        </el-table-column>
        <el-table-column width="170" prop="" align="center" label="报名限制">
          <template slot-scope="scope">
            <el-switch
            :disabled="roleIdentity==='rai_seller'"
             @change="switchChange(scope.row.UserId)"
              v-model="scope.row.Operation"
             active-text="已限制"
            inactive-text="不限制">
            </el-switch>
          </template>
        </el-table-column>
     </el-table>
      <el-col :span="24" class="toolbar">
				<m-page 
				:total="total"
				:page_no="page_no"
        :pageSize="10"
				@handleCurrentChange="handleCurrentChange"/>
			</el-col>
    </el-card>
     <el-dialog
    
      v-dialogDrag 
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      center
      :visible.sync="dialogVisiblepartica"
      customClass="custom-appoinetdialog"
      :before-close="confirmPerson"
    >
    <div slot="title" style="display: flex; align-items: center">
        <img
          :src="$icons.warntop"
          style="color: #fff; width: 16px; height: 16px; margin-right: 5px"
        />
        <span style="font-size: 16px">爽约详情</span>
      </div>
      <div>
        <el-table  max-height="260px" :data="detailList" border style="width: 100%; margin-top: 10px;">
        <el-table-column width="250" prop="ActivityName" align="center" label="活动名称"></el-table-column>
        <el-table-column prop="ChartPermissionName" align="center" label="行业"></el-table-column>
        <el-table-column prop="ActivityTypeName" align="center" label="活动类型"></el-table-column>
        <el-table-column width="230" prop="ActivityTimeText" align="center" label="活动时间"></el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmPerson">知道了</el-button>
      </span>
     </el-dialog>
 </div>
</template>

<script>
import mPage from '@/components/mPage.vue'
import {raiInterface} from '@/api/api.js'
export default {
  name: '',
  components: {mPage},
  props: {},
  data () {
    return {
        page_no:sessionStorage.getItem('interviewListBack')?JSON.parse(sessionStorage.getItem('interviewListBack')).page_no:1,
        total:0,//条数
        PageSize:10,//每页显示几条
        dataList: [],//表格的列表
        keyWord:'',
        sellerName:'',
        sellerList:[],
        dialogVisiblepartica:false,
        detailList:null
    }
  },
  computed: {
    roleIdentity(){
      
      return localStorage.getItem('RoleIdentity')
    }
  },
  watch: {
    keyWord(){
      this.page_no=1
      this.getsDataList()
    }
  },
  created () {},
  mounted () {
    this.getsDataList()
    this.sellerNameListList()
  },
  methods: {
    sellerNameChange(){
      this.page_no=1
      this.getsDataList()
    },
      //列表表格
    getsDataList(){
      raiInterface.breakAppointmentList({
        CurrentIndex:this.page_no,
        PageSize:this.PageSize,
        KeyWord:this.keyWord,
        SellerName:this.sellerName
      }).then((res) => {
        if(res.Ret !== 200) return
        this.dataList=res.Data.List
        this.total= res.Data.Paging.Totals
      })
    },
      //分页
    handleCurrentChange(page){
     	this.page_no = page
      this.getsDataList()
    },
    detail(id){
        raiInterface.breakAppointmentDetail({ UserId:id}).then((res)=>{
         if(res.Ret !== 200) return
          this.dialogVisiblepartica=true
          this.$nextTick(()=>{
            this.detailList=res.Data.List
          })
        })
    },
    confirmPerson(){
       this.dialogVisiblepartica=false
    },
    sellerNameListList(){
      raiInterface.sellerNameListList().then((res)=>{
        if(res.Ret===200){
          this.sellerList=res.Data.List
        }
      })
    },
    switchChange(id){
       raiInterface.signUpRestrictUid({
        UserId:id,
     }).then((res) =>{
       if(res.Ret === 200){
          this.$message.success('操作成功')
       }else{
          this.getsDataList()
       }
       
     })   
    }
  }
}
</script>
<style  lang="scss">
.container-appointment{
  .custom-appoinetdialog {
    width: 800px;
  }
    .top-card-box {
        display: flex;
        justify-content: space-between;
    }
    .el-switch__label  {
    color: #606266 ;
   font-size: 14px;
   font-weight:400;
  }
   .is-active {
    color: #409EFF !important;
  }
}
</style>
