<!--
  门店权限设置组件
<set-permiss :permTitle="'店员'"></set-permiss>
<set-permiss :permTitle="'店长'"></set-permiss>
 -->
<template>
  <div class="permiss-wrap">
    <el-form label-width="110px" :model="ruleForm" ref="ruleForm">
      <el-radio-group v-model="ruleForm.radio" @change="changeRadio">
        <el-form-item :label="permType == 1? '店员可见权限' : '店长可见权限'">
          <el-radio :label="0">可见所有品牌门店架构和行政架构</el-radio>
        </el-form-item>
        <div class="permiss-child-cell" v-if="ruleForm.radio==0">
          <setPermissData v-model="ruleForm.visibleAll" @showSelect="showSelect"></setPermissData>
        </div>

        <el-form-item label=" ">
          <el-radio :label="1">可见所在品牌门店架构和行政架构</el-radio>
        </el-form-item>
        <div class="permiss-child-cell" v-if="ruleForm.radio==1">
          <setPermissData v-model="ruleForm.visibleAll" @showSelect="showSelect"></setPermissData>
        </div>

        <el-form-item label=" ">
          <el-radio :label="2">门店仅可见所有品牌门店架构</el-radio>
        </el-form-item>
        <div class="permiss-child-cell" v-if="ruleForm.radio==2">
          <setPermissData v-model="ruleForm.visibleAll" @showSelect="showSelect"></setPermissData>
        </div>

        <el-form-item label=" ">
          <el-radio :label="3"> 门店仅可见自己品牌门店架构</el-radio>
        </el-form-item>
        <div class="permiss-child-cell" v-if="ruleForm.radio==3">
          <setPermissData v-model="ruleForm.visibleAll" @showSelect="showSelect"></setPermissData>
        </div>

        <el-form-item label=" ">
          <el-radio :label="4">门店仅可见自己门店</el-radio>
        </el-form-item>
        <div class="permiss-child-cell" v-if="ruleForm.radio==4">
          <setPermissData v-model="ruleForm.visibleAll" @showSelect="showSelect"></setPermissData>
        </div>
      </el-radio-group>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
      </el-form-item>
    </el-form>

    <vue-select-employee
      :defaultSelection="defaultSelection"
      :treeSet="treeSet"
      :treeData="treeData"
      :onlyPerson="onlyPerson"
      @handleSelectedList="handleSelectedList">
    </vue-select-employee>
  </div>
</template>
<script>
import setPermissData from "@/components/set/set-permiss-data";
import vueSelectEmployee from "@/components/common/vueSelectEmployee";

import strLength from '@/common/js/strlen';
import showMsg from '@/common/js/showmsg';
import errMsg  from '@/common/js/error';
import { _debounce } from "@/common/js/public";
import { getRequest, postRequest, postJson, postForm } from '@/api/api';
export default {
  name: "",
  props: {
    authData: {
      type: [Object,Array],
      default() {
        return {}
      }
    },

    permType: {
      type: [Number,String]
    }

  },
  data() {
    return {
      projectName:  '', // 当前项目名

      ruleForm: {
        radio: 0,
        visibleAll: [
          // {
          //   id: '1',
          //   type: '1',
          //   name: '张三',
          //   headPic: 'http://thirdwx.qlogo.cn/mmopen/j7nX4OeBsXRNyvh6micCywssVEYCaWiaicUZq5Vn2zWktWLAyRvEAH7icQmUhLze8rrQYpM5ptwZ2RL7cX0icyBbiavhYFNTIZhibKu/0'
          // },
          // {
          //   id: '2',
          //   type: '2',
          //   name: '张三',
          // }
        ]
      },

      treeSet: {
        isSelectPerson: true, // 控制只能选部门(false)
        dialogVisible: false, // 控制显示/隐藏
        isSingle: false // 是否单选
      },
      treeData: {},
      defaultSelection: [], // 已选数据
      onlyPerson: false, // 控制只能选人(true)
    }
  },
  beforeMount() {
    var that = this
    var host = window.location.origin;
    console.log("当前host:",host)
    if (host.indexOf('localhost') != '-1') {
      that.baseUrl = 'http://www.gicdev.com';
    }else {
      that.baseUrl = host
    }

  },
  methods: {

    /**
     * changeRadio
     */
    changeRadio(value) {
      const that = this;
      console.log(value)
      that.ruleForm.visibleAll = [];
    },

    /**
     * 保存
     */
    submitForm: _debounce(function(formName) {
      const that = this;
      that.$refs[formName].validate((valid) => {
        console.log(valid)
        if (valid) {
          console.log(that.ruleForm)
          let data = {
            allowCherkIds: [],
            allowDepartIds: [],
            brandId: that.ruleForm.brandId,
            groupId: that.ruleForm.groupId,
            radio: that.ruleForm.radio
          };

          if (!that.ruleForm.visibleAll.lenght) {
            that.$message.error({
              duration: 1000,
              message: '请选择指定部门/人员'
            })
            return;
          }
          that.ruleForm.visibleAll.forEach(function(ele,index){
            if (ele.hasOwnProperty('employeeClerkId')) {
              data.allowCherkIds.push(ele.employeeClerkId)
            }else {
              data.allowDepartIds.push(ele.groupId)
            }
          })
          that.setStoreAuth(data,that.permType)
        } else {
          return false;
        }
      });
    },500),


    /**
     * 门店权限设置
     */
    setStoreAuth(data,type) {
      const that = this;
      let para = {
        type: type, // 1: 店员, 2: 店长
        brandId: data.brandId,
        groupId: data.groupId,
        storeEmployeeAuth: data.radio,
        storeManagerAuth: data.radio,
        allowCherkIds: data.allowCherkIds.join(','),
        allowDepartIds: data.allowDepartIds.join(',')
      }
      postRequest('/haoban-manage-web/brand/saveStoreAuth',para)
      .then((res) => {
        // console.log(res,res.data,res.data.errorCode)
        let resData = res.data;
        if (resData.errorCode == 1) {
          showMsg.showmsg('保存成功','success')

          return;
        }

        errMsg.errorMsg(resData)

      })
      .catch(function (error) {
        console.log(error);

        that.$message.error({
          duration: 1000,
          message: error.message
        })
      });
    },

    /**
     * 处理传递数据
     */
    handleAuthData(data) {
      const that = this;
      // console.log("处理传递数据:",data)
      if (!Object.keys(data).length) {return;}
      that.ruleForm.brandId = data.brandId;
      that.ruleForm.groupId = data.groupId;
      if (Number.parseInt(that.permType) === 1 ) {// && !!data.employeeAuthList.length
        that.ruleForm.visibleAll = data.employeeAuthList;
        that.defaultSelection = data.employeeAuthList;
      }

      if (Number.parseInt(that.permType) === 2 ) { // && !!data.managerAuthList.length
        that.ruleForm.visibleAll = data.managerAuthList;
        that.defaultSelection = data.managerAuthList;
      }
    },

    /**
     * 显示选择控件
     */
    showSelect() {
      const that = this;
      that.treeSet = {
                    dialogVisible: true,
                    isSingle: false,
                    isSelectPerson: true
                };
      that.defaultSelection = that.ruleForm.visibleAll;
    },

    /**
     * 处理树形控件选择的数据
     */
    handleSelectedList(list) {
      const that = this;
      // console.log(list);
      that.defaultSelection = list
      that.ruleForm.visibleAll = list
    },

    /**
     * 获取行政架构
     */
    getDepartData(selData) {
      const that = this;
      postRequest('/haoban-manage-web/dept/deptListForCompany',{})
      .then((res) => {
        // console.log(res,res.data,res.data.errorCode)
        let resData = res.data;
        if (resData.errorCode == 1) {
          // showMsg.showmsg('操作成功','success')
          if (!!resData.result) {
            let treeData = [];
            let personData = [];
            if (res.data.errorCode == 1) {
                treeData = res.data.result.departmentList || [];
                personData = res.data.result.searchList || []
            }
            // _this.formatGroupData(treeData, personData);
            that.treeData = {
                treeData,
                personData
            };

            // that.defaultSelection = selData;
            that.$forceUpdate();
          }else {
            that.$message.error({
              duration: 1000,
              message: '暂无数据'
            })
          }
          return;
        }

        errMsg.errorMsg(resData)

      })
      .catch(function (error) {
        console.log(error);

        that.$message.error({
          duration: 1000,
          message: error.message
        })
      });
    },

  },
  watch: {
    authData: function(newData,oldData) {
      const that = this
      console.log("authData:",oldData,newData)
      that.handleAuthData(newData)
    }
  },
  mounted() {
    const that = this;
    console.log(that.authData)
    that.handleAuthData(that.authData)
    that.getDepartData()
  },
  components: {
    setPermissData,
    vueSelectEmployee
  },
}
</script>
<style lang="less" scoped>

.w-500 {
  width: 500px;
}

/* flex */
.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.flex-1 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.flex-column {
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}

.flex-row {
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  -o-flex-direction: row;
  flex-direction: row;
}

.flex-align-center {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.flex-pack-center {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 180px;
  height: 180px;
  line-height: 180px;
  text-align: center;
}
.avatar {
  max-width: 180px;
  max-height: 180px;
  display: block;
}

.upload-tip {
  color: #606266;
  font-size: 12px;
  line-height: 20px;
}

.color-1890ff {
  color: #1890ff;
}

.permiss-wrap {
  .permiss-child-cell {
    width: 480px;
    min-height: 154px;
    border-radius: 2px;
    background: #F5F7FA;
    margin: 32px 0;
    padding: 20px 20px 1px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
}
</style>
