<template>
  <div class="right_con">
    <div v-if="channel_type=='list'">
      <div class="staff_fgx fl"></div>
      <p class="fl staff_channel">推广员绑定平台信息列表</p>
      <Button type="primary" @click="addChannel" class="add_channel_btn" v-if="is_CanAdd">添加新绑定</Button>
      <div class="search fr pad_T_15" v-if="role_id==1||role_id==0||role_id==2">
        <Select v-model="search.studio_id" class='wid_120' filterable >
          <Option v-for="(item,index) in studioSelectList" :key="index" :value="item.id">{{item.name}}</Option>
        </Select>
        <Button type="primary" @click="getStaffChannel()">搜索</Button>
        <Button class="clear_btn" @click="removeSearch">清空</Button>
      </div>
      <div class="clear"></div>
      <Table :columns="channelList" :data="channelData" class="tables clear" border ></Table>
      <div class="page">
        <Page :total="count" :current="pindex" :page-size="10" size="small" show-total show-elevator @on-change="getStaffChannel"/>
      </div>
    </div>
    <div v-else>
      <changeChannel :channel_type="channel_type" @return_btn='return_btn' :channel_id='channel_id' :pindex='pindex' :studio_id='search.studio_id'></changeChannel>
    </div>
  </div>
</template>
<script>
import changeChannel from "@@/staff/change_channel";
import {removeSearch} from '@/assets/js/common'
import { mapState } from "vuex";
export default {
  name: "staff_channel",
  components: { changeChannel },
  data() {
    return {
      is_CanDelete:false,
      is_CanAdd:false,
      studioSelectList:[],
      search:{
        studio_id:null
      },
      count:0,
      pindex:1,
      channel_type:'list',
      channel_id:null,
      channelList: [
        {
          title: "ID",
          key: "id"
        },
        {
          title: "员工账号",
          key: "manager_name"
        },
        {
          title: "员工姓名",
          key: "realname"
        },
        {
          title: "平台",
          key: "platform_name"
        },
        {
          title: "推广平台",
          key: "channel_name"
        },
        {
          title: "操作",
          render: (h, parmas) => {
            const change_btn = h(
              "span",
              {
                class: "operate-btn",
                style: {
                  color: "rgba(0, 156, 255, 1)"
                },
                on: {
                  click: () => {
                    this.editChannel(parmas.row.id);
                  }
                }
              },"编辑");
            const delete_btn = h(
              "span",
              {
                class: "operate-btn",
                style: {
                  color: "rgba(255, 121, 0, 1)"
                },
                on: {
                  click: () => {
                    if(!this.is_CanDelete){
                      this.$Message.info('无操作权限')
                      return false
                    }
                    this.deleteChannel(parmas.row.id,parmas.index);
                  }
                }
              },"删除");
            return [ delete_btn];
          }
        }
      ],
      channelData: []
    };
  },
  watch: {},
  computed:{
    ...mapState({
      role_id: state => state.adminInfo.role_id,
    }),
  },
  methods: {
    getStaffChannel(page=1){
      this.$store.commit('changeloading',true)
      this.pindex=page
      this.$api.getStaffChannel({limit:10,page:this.pindex,studio_id:this.search.studio_id}).then(data =>{
        if(data.code==200){
          this.channelData=data.data
          this.count=data.count
          this.$store.commit('changeloading',false)
        }else{
          this.$Message.info(data.msg)
          this.$store.commit('changeloading',false)
        }
      })
    },
    editChannel(id) {
      this.channel_id=id
      this.channel_type='edit'
    },
    deleteChannel(id,i) {
      this.$Modal.confirm({
        title: "提示信息",
        class: "vertical-center-modal",
        render: h => {
          return h("div", { class: "login_out" }, [
            h("p",
              {
                style: {
                  width: "100%",
                  padding: "30px 0px 10px 0px",
                  textAlign: "center",
                  backgourndColor: "rgba(52, 64, 78, 1)",
                  fontSize: "18px",
                  color: "rgba(51, 51, 51, 1)",
                  fontWeight: "400"
                }
              },"确认删除员工？"),
            h("p",
              {
                style: {
                  width: "100%",
                  textAlign: "center",
                  paddingBottom:'14px',
                  backgourndColor: "rgba(52, 64, 78, 1)",
                  fontSize: "13px",
                  color: "rgba(153, 153, 153, 1)",
                  fontWeight: "400"
                }
              },"删除后该员工业绩数据将被保留")
          ]);
        },
        onOk: () => {
          this.$api.deleteStaffChannel({id}).then(data =>{
            if(data.code==200){
              this.$Message.info(data.msg)
              this.channelData.splice(i,1)
            }else{
              this.$Message.info(data.msg)
            }
          })
        }
      });
    },
    addChannel() {
      this.channel_type='add'
    },
    return_btn(pindex){
      this.channel_type='list'
      this.getStaffChannel(pindex)
    },
    removeSearch(){
      this.search={...removeSearch({...this.search})}
    },
    getGuildList(){
      this.$api.getGuildList({limit:999,page:1,}).then(data=>{
        if(data.code==200){
          this.studioSelectList=data.data
          this.search.studio_id=this.studioSelectList[0].id?this.studioSelectList[0].id:null
          this.getStaffChannel()
        }
      })
    },
    // 获取用户权限
    getAuthRole(){
      this.$api.getAuthRole({id:this.role_id}).then(data=>{
        if(data.code===200){
          let checkList=data.data.auth_ids.split(',')
          if(checkList.indexOf('133')>=0){
            this.is_CanAdd=true
          }
          if(checkList.indexOf('137')>=0){
            this.is_CanDelete=true
          }
        }
      })
    },
  },
  created() {
    
    if(this.role_id==1||this.role_id==0||this.role_id==2){
      this.getGuildList()
    }else{
      this.getStaffChannel()
    }
  },
  mounted(){
    this.getAuthRole()
  }
};
</script>
<style>
.staff_channel{
  width: 180px;
  margin-top: 15px;
  font-size: 15px;
  margin-left: 5px
}
.add_channel_btn{
  margin-top: 10px
}
</style>


