<!--
 * @Descripttion:素材库-分配企业
 * @version: 1.0.0
 * @Author: 阿羽
 * @Date: 2021-04-12 15:57:24
 * @LastEditors: 阿羽
 * @LastEditTime: 2021-04-12 15:57:24
 -->
<!--
    <el-button type="text" @click="toDistribute(scope.$index, scope.row)" v-if="scope.row.fromMaterialId =='-1'">分配企业</el-button>

    <distribution-enterprise :editRow="distributionEditRow" :show="showDistribution" @closeText="closeTextDistribution" @submitText="submitTextDistribution"></distribution-enterprise>
<script>
import distributionEnterprise from '@/components/set/distribution-enterprise.vue';
export default {
data() {
    return {
     showDistribution: false,
      distributionEditRow: {}
    };
},
 methods: {
   closeTextDistribution() {
      this.showDistribution = false;
      this.distributionEditRow = {};
    },
    submitTextDistribution() {
      const that = this;
      that.showDistribution = false;
      that.distributionEditRow = {};
      that.$emit('refreshTable');
    },
    toDistribute(index, row) {
      this.showDistribution = true;
      this.distributionEditRow = row;
    },
 },
  components: {
    distributionEnterprise
  }
 -->
<template>
  <el-dialog title="分配企业" :visible.sync="dialogVisible" width="490px" class="distribution-enterprise" @close="toCancel">
    <div>
      <el-form :model="form" :rules="rules" ref="ruleForm" class="demo-ruleForm">
        <el-form-item>
          <p class="check-all">
            <el-checkbox v-model="checkAll" :disabled="hasCheckAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
          </p>
          <el-form-item prop="checkedList">
            <p v-if="!options.length" class="no-enterprise">暂无可分配企业</p>
            <el-checkbox-group v-else v-model="form.checkedList" name="checkedList" @change="handleCheckedListChange">
              <el-checkbox v-for="(opt, index) in options" name="checkedList" :label="opt.wxEnterpriseId" :key="index" :disabled="opt.bindFlag">
                <p class="name">{{ opt.enterpriseName }}</p>
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="toCancel">取消</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')" :disabled="hasCheckAll">分配</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { _debounce } from '@/common/js/public';
import { postRequest, getRequest } from '@/api/api';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';

export default {
  props: {
    editRow: {
      type: Object,
      default() {
        return {};
      }
    },
    show: {
      type: Boolean,
      default() {
        return false;
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      ruleForm: {
        enterpriseId: ''
      },
      rules: {
        checkedList: [{ type: 'array', required: true, message: '请选择企业', tigger: 'change' }]
      },
      hasCheckAll: false,
      checkAll: false,
      form: { checkedList: [] },
      options: [],
      isIndeterminate: false
    };
  },
  methods: {
    toCancel() {
      this.$emit('closeText');
      this.form.checkedList = [];
      this.hasCheckAll = false;
      this.checkAll = false;
      this.isIndeterminate = false;
      this.$refs['ruleForm'].resetFields();
    },
    submitForm: _debounce(function(formName) {
      const that = this;
      that.$refs[formName].validate(valid => {
        if (valid) {
          this.$confirm('是否确认提交?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              that.postSave();
            })
            .catch(() => {});
        }
      });
    }, 300),
    postSave() {
      const that = this;
      let data = {
        materialIds: that.editRow.materialId,
        toWxEnterpriseIds: that.form.checkedList.join(',')
      };
      postRequest('/haoban-manage3-web/material-share', data)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            showMsg.showmsg('操作成功', 'success');
            that.$emit('submitText');
          } else {
            errMsg.errorMsg(resData);
          }
        })
        .catch(error => {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    handleCheckAllChange(val) {
      if (val) {
        let arr = [];
        this.options.map(item => {
          arr.push(item.wxEnterpriseId);
        });
        this.form.checkedList = [...arr];
      } else {
        this.form.checkedList = [];
      }
      this.isIndeterminate = false;
    },
    handleCheckedListChange(value) {
      this.form.checkedList = value;
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.options.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.options.length;
    },
    getOptions() {
      const data = {
        materialId: this.editRow.materialId
      };
      this.checkAll = false;
      this.hasCheckAll = false;
      getRequest('/haoban-manage3-web/agent-wx-enterprise-list', data)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1 && resData.result && resData.result.length) {
            let arr = [];
            let options = resData.result.filter(item => {
              if (arr.indexOf(item.wxEnterpriseId) === -1) {
                if (item.bindFlag) {
                  this.form.checkedList.push(item.wxEnterpriseId);
                }
                arr.push(item.wxEnterpriseId);
                return item;
              }
            });
            if (this.form.checkedList.length === options.length) {
              this.checkAll = true;
              this.hasCheckAll = true;
            }
            this.options = [...options];
            this.handleCheckedListChange(this.form.checkedList);
          } else {
            errMsg.errorMsg(resData);
          }
        })
        .catch(error => {
          this.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {
    show(newV, oldV) {
      this.dialogVisible = newV;
    },
    editRow(newData) {
      if (Object.keys(newData).length) {
        this.getOptions();
      }
    }
  },
  mounted() {
    if (Object.keys(this.editRow).length) {
      this.getOptions();
    }
  }
};
</script>
<style lang="scss" scoped>
.distribution-enterprise {
  >>> .el-dialog {
    height: 429px;
  }
  >>> .el-dialog__header {
    padding: 16px 0 10px 20px;
    .el-dialog__title {
      display: block;
      line-height: 25px;
    }
  }
  >>> .el-dialog__body {
    padding: 12px 16px 0 17px;
    .check-all {
      width: 100%;
      height: 40px;
      box-sizing: border-box;
      background: #f5f7fa;
      padding-left: 28px;
      margin-bottom: 18px;
    }
    .el-checkbox-group {
      height: 248px;
      box-sizing: content-box;
      overflow: scroll;
      padding-left: 28px;
      .el-checkbox {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        margin: 0 0 20px;
        .name {
          font-size: 14px;
          color: #303133;
          line-height: 14px;
          margin-bottom: 6px;
        }
      }
    }
  }
  >>> .el-dialog__footer {
    padding-top: 16px;
    padding-bottom: 20px;
  }
}
.no-enterprise {
  height: 248px;
  text-align: center;
  color: #606266;
}
</style>
<style lang="scss"></style>
