<!--
 * @Descripttion : 当前组件信息
 * @Author       : 无尘
 * @Date         : 2020-02-13 16:13:59
 * @LastEditors: Drama
 * @LastEditTime: 2022-09-23 10:23:56
 * @FilePath: /haoban-3/src/components/company/add-relate-new.vue
 -->
<!--

  <add-relate :departObj="departObj" @refreshData="refreshData"></add-relate>
  import addRelate from '@/components/company/add-relate.vue';
  -->

<template>
  <el-dialog custom-class="add-remote-dialog" width="600px" title="新增关联" :visible.sync="departVisible" append-to-body :before-close="handleClose">
    <el-form :model="partForm" label-width="95px" :rules="rules" ref="partForm" class="dialog-form">
      <el-form-item label="关联角色" prop="manageFlag">
        <el-radio-group v-model="partForm.manageFlag" @change="manageChange">
          <el-radio :label="0">导购</el-radio>
          <el-radio :label="1">区经/督导</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="关联账号" prop="clerkId">
        <di key="1" v-if="partForm.manageFlag == 0">
          <dm-select-scroller v-model="partForm.clerkId" placeholder="请选择" :data="brandList" :props="props" :width="352" @load="load" @remote-search="remoteSearch" :total-count="totalCount" :clearable="true"></dm-select-scroller>
        </di>
        <di key="2" v-if="partForm.manageFlag == 1">
          <dm-select-scroller v-model="partForm.clerkId" placeholder="请选择" :data="brandList" :props="props" :width="352" @load="load" @remote-search="remoteSearch" :total-count="totalCount" :clearable="true"></dm-select-scroller>
        </di>
        <div v-if="isShowError" class="el-form-item__error">请选择关联账号</div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button class="btn-class" @click="cancel">取消</el-button>
      <el-button class="btn-class" type="primary" :loading="loading" @click="submitForm('partForm')">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import limitInput from '@/components/limit-input.vue';
import { getRequest, postRequest } from '@/api/api';
import errMsg from '@/common/js/error';
import showMsg from '@/common/js/showmsg';
import { _debounce } from '@/common/js/public';
import store from '../../store/store';
export default {
  name: 'add-relate',
  components: {
    limitInput
  },
  props: {
    departObj: {
      type: [Object, Array],
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      partForm: {
        salerName: '',
        manageFlag: 0, // TODO: 关联角色 导购 区经/督导
        clerkId: ''
      },
      brandParams: {
        pageNum: 1,
        pageSize: 10,
        search: ''
      }, // TODO: 远程搜索参数
      rules: {
        salerName: [
          {
            required: true,
            message: '请选择导购',
            trigger: 'change'
          }
        ]
      },
      selectId: '',
      departVisible: true,
      loading: false,
      visible: false,
      brandList: [], // TODO: 远程搜索数组
      brandList_0: [],
      brandList_1: [],
      totalCount: 99999,
      props: {
        label: 'clerkName',
        value: 'clerkId',
        childLabel: 'storeName',
        sideLabel: 'clerkCode'
      },
      isShowError: false
    };
  },
  methods: {
    manageChange(value) {
      console.log(value, '按钮切换');
      this.partForm.clerkId = '';
      this.brandParams.search = '';
      this.brandList = [];
      // TODO: 若选择马上切换需要取消上个请求
      store.getters.axiosPromiseArr.forEach(cancel => cancel());
      store.commit('setAxiosPromiseArr', []);
    },
    // 加载更多
    load() {
      console.log('load');
      // this.brandParams.pageNum++;
      // this.getRemoteAccountList();
    },
    // 远程搜索方法
    remoteSearch(query) {
      this.brandParams.search = query;
      this.brandParams.pageNum = 1;
      this.searchRemote();
    },
    searchRemote: _debounce(function() {
      const that = this;
      if (that.brandParams.search.trim() == '') {
        this.brandList = [];
        return false;
      }
      that.getRemoteAccountList();
    }, 500),
    // 获取远程关联账号数据
    getRemoteAccountList() {
      // if (this.brandParams.pageNum == 1) {
      //   this.brandList = [];
      // }
      this.brandList = [];
      let para = {
        search: this.brandParams.search,
        manageFlag: this.partForm.manageFlag
      };
      getRequest('/haoban-manage3-web/search-clerk-relation', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            this.brandList = resData.result || [];
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          console.log(error);
          // this.$message.error({
          //   duration: 1000,
          //   message: error.message
          // });
        });
    },
    /**
     * 关闭弹窗
     */
    handleClose(done) {
      const that = this;
      that.$refs['partForm'].resetFields();
      that.$emit('refreshData', 'close');
      done();
    },
    cancel() {
      const that = this;
      that.$refs['partForm'].resetFields();
      that.$emit('refreshData', 'close');
    },
    /**
     * 确定保存
     */
    submitForm: _debounce(function(form) {
      const that = this;
      that.loading = true;
      that.$refs[form].validate(valid => {
        if (valid) {
          if (!that.partForm.clerkId) {
            this.isShowError = true;
            return;
          }
          that.postAdd();
        } else {
          that.loading = false;
          return false;
        }
      });
    }, 300),
    postAdd() {
      const that = this;
      let params = {
        staffId: that.departObj.staffId,
        manageFlag: that.partForm.manageFlag,
        clerkId: that.partForm.clerkId
      };
      console.log(params, '保存的参数');
      that.loading = false;
      postRequest('/haoban-manage3-web/add-clerk-relation', params)
        .then(res => {
          let resData = res.data;
          that.loading = false;
          if (resData.errorCode == 1) {
            showMsg.showmsg('添加成功', 'success');
            that.$emit('refreshData', that.partForm);
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.loading = false;
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {
    'partForm.clerkId': {
      deep: true,
      handler: function(newV, oldV) {
        console.log(newV, '监听');
        if (newV) {
          this.isShowError = false;
        }
      }
    }
  },
  mounted() {
    // TODO: 初始化加载
    // this.getRemoteAccountList();
  }
};
</script>
<style lang="less" scoped>
/deep/ .add-remote-dialog {
  // .el-dialog {
  //   height: 221px;
  // }
  .el-dialog__header {
    padding: 24px 24px 0 24px;
    .el-dialog__title {
      line-height: 25px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #37383a;
    }
  }
  .el-dialog__body {
    padding: 30px;
  }
}
// .damolish .el-select-dropdown .el-select-dropdown__empty {
//   width: 352px;
// }
// .damolish .el-select-dropdown .el-select-dropdown__item {
//   height: 45px;
//   line-height: 45px;
// }
.w-95 {
  width: 95px;
}
.w-352 {
  width: 352px;
}
.m-l-30 {
  margin-left: 30px;
}
.w-319 {
  width: 319px;
}
.w-558 {
  width: 558px;
}
.btn-class {
  box-sizing: border-box;
  padding: 5px 24px;
  width: 80px;
  height: 32px;
}
.damolish .el-popper {
  min-width: 352px;
}

.text-ellipsis {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
