<template>
  <div>
    <p class="edit_page_title">{{channel_type==='add'?'添加推广员平台绑定':'修改推广员平台绑定'}}</p>
    <Form :label-width="100" v-if="channel_type==='add'">
      <FormItem label="绑定模式">
        <RadioGroup v-model="isMany">
          <Radio :label="0">单条绑定</Radio>
          <Radio :label="1" class="mar_L_30">批量绑定</Radio>
        </RadioGroup>
      </FormItem>
    </Form>
    <div v-if="isMany==0">
      <Form ref="channelInfo" :model="channelInfo" :rules="channel_role" :label-width="100">
        <FormItem label="员工账号" prop="staff_account">
          <Select v-model="channelInfo.staff_account" class="wid_275" placeholder="选择员工账号" :disabled="channel_type=='edit'" >
            <Option v-for="(item,index) in staffSelectList" :value="item.id.toString()" :key="index" >{{item.name}}</Option>
          </Select>
        </FormItem>
        <FormItem label="平台" prop="platform">
          <Select v-model="channelInfo.platform" class="wid_275" placeholder="选择绑定平台">
            <Option v-for="(item,index) in platformList" :value="item.id.toString()" :key="index" >{{item.name}}</Option>
          </Select>
        </FormItem>
        <FormItem label="推广平台" prop="channelname">
          <Input type="text" class="wid_275" v-model="channelInfo.channelname"></Input>
        </FormItem>
        <FormItem class="form_btn">
          <Button type="primary" @click="saveChannelInfo('channelInfo')">确认</Button>
          <Button @click="return_btn" class="return_btn mar_L_15">返回</Button>
        </FormItem>
      </Form>
    </div>
    <div v-else>
      <Form ref="manybind" :label-width="100" id="uploadexcel">
        <FormItem label="Excel模板" prop="">
          &nbsp;&nbsp;<a href="/api/推广员平台批量绑定模板.xls" class="a_text loadmoban">下载模板</a>
        </FormItem>
        <FormItem label="导入模板" prop="">
          <uploadExcel @saveurl='saveurl'></uploadExcel>
        </FormItem>
        <FormItem class="form_btn">
          <Button type="primary" @click="moreSaveChannelInfo">确认</Button>
          <Button @click="return_btn" class="return_btn mar_L_15">返回</Button>
        </FormItem>
      </Form>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import uploadExcel from '@@/base/upload_excel'
export default {
  name: "change_channel",
  props: {
    channel_type: String,
    channel_id: Number,
    pindex: Number,
    studio_id: Number,
  },
  components:{uploadExcel},
  data() {
    const confirmSub = (rule, value, cb) => {
      if (this.is_boss) {
        cb();
      } else {
        if (value === "" || !value) {
          cb(new Error("子平台账号不能为空"));
        } else {
          cb();
        }
      }
    };
    return {
      isMany:0,
      changeform: true,
      studioList:[],
      staffSelectList:[],
      platformList: [],
      excelSaveName:'',
      channelInfo: {
        staff_account:'',
        platform:'',
        channelname:'',
      },
      channel_role: {
        staff_account: [
          { required: true, message: "请选择员工账号", trigger: "change" }
        ],
        platform: [
          { required: true, message: "请选择绑定平台", trigger: "change" }
        ],
        channelname: [
          { required: true, message: "推广平台账号不能为空", trigger: "blur" },
        ],
      }
    };
  },
  computed: {
    is_boss() {
      if (this.channelInfo.staff_account == 1) {
        return true;
      } else {
        return false;
      }
    },
    ...mapState({
      role_id: state => state.adminInfo.role_id,
      name: state => state.adminInfo.name,
    }),
  },
  watch: {
    "channelInfo.staff_account"(n) {
      this.resetform();
    },
  },
  methods: {
    saveChannelInfo(formname) {
      this.$refs[formname].validate(valid => {
        if (valid) {
          let params={
            manager_id:this.channelInfo.staff_account,
            platform_id:this.channelInfo.platform,
            name:this.channelInfo.channelname
          }
          let api
          if(this.channel_type==='edit'){
            params.id=this.channel_id
            api='editStaffChannel'
          }else{
            api='addStaffChannel'
          }
          this.$api[api]({...params}).then(data => {
            if(data.code==200){
              this.$Message.info(data.msg)
              this.$emit('return_btn',this.pindex)
            }else{
              this.$Message.info(data.msg)
            }
          })
        }
      });
    },
    moreSaveChannelInfo(){
      this.$api.moreSaveChannelInfo({file_save_name:this.excelSaveName}).then(data=>{
        if(data.code==200){
          this.$Message.info(data.msg)
          this.$emit('return_btn',this.pindex)
        }else{
          this.$Message.info(data.msg)
        }
      })
    },
    // 获取员工下拉框
    getStaffSelectList(id){
      let params={}
      this.studioList=[]
      if(this.role_id==1||this.role_id==0||this.role_id==2){
        params.studio_id=this.studio_id
      }
      this.$api.getStaffSelectList({...params}).then(data => {
        if(data.code==200){
          this.staffSelectList=data.data
          for(let i of this.staffSelectList){
            if(this.role_id==0||this.role_id==1){
              if(i.role_id==3){
                this.studioList.push(i)
              }
            }else{
              if(i.role_id==3&&this.name==i.name){
                this.studioList.push(i)
              }
            }
          }
          if(!!id){
            this.channelInfo.staff_account=id.toString()
          }else{
            this.studioList.length?this.channelInfo.staff_account=this.studioList[0].id.toString():''
          }
        }else{
          this.staffSelectList=[]
        }
      })
    },
    // 获取部门下拉框
    getPlatformStudioList(){
      let params={}
      if(this.role_id==1||this.role_id==0||this.role_id==2){
        params.studio_id=this.studio_id
      }
      this.$api.getPlatformStudioList({...params}).then(data => {
        if(data.code==200){
          this.platformList=data.data
        }else{
          this.platformList=[]
        }
      })
    },
    // 利用元素消失隐藏达到重置单个元素的表单验证
    async resetform() {
      await (this.changeform = false);
      this.changeform = true;
    },
    return_btn(){
      this.$emit('return_btn',this.pindex)
    },
    getStaffChannelDetail(id){
      this.$api.getStaffChannelDetail({id}).then(data => {
        if(data.manager_id){
          this.channelInfo.staff_account=data.manager_id.toString()
          this.channelInfo.channelname=data.name
          this.channelInfo.platform=data.platform_id.toString()
        }
      })
    },
    saveurl(savename){
      this.excelSaveName=savename
    }
  },
  created(){
    let id=this.$route.query.id||''
    
    this.$nextTick(()=>{
      this.getStaffSelectList(id)
      if(this.channel_type=='edit'&&!!this.channel_id){
        this.getStaffChannelDetail(this.channel_id)
      }
    })
  },
  mounted(){
    this.getPlatformStudioList()
  }
};
</script>
<style>
.loadmoban{
  font-size: 14px;
  position: relative;
  top: 2px;
}
#uploadexcel .ivu-form-item-required .ivu-form-item-label:before{
  content: ''
}
#uploadexcel .ivu-form-item-error-tip{
  display: none
}
</style>


