<template>
  <!-- 质检员 -->
  <el-tooltip class="item" effect="dark" content="质检员设置" placement="top">
    <el-popover
      placement="bottom"
      title="质检员设置"
      width="260"
      trigger="click"
      v-model="visible"
    >
      <el-button
        slot="reference"
        icon="iconfont icon-zhijianyuanshezhi_fuzhi"
        size="small"
        class="btn"
      ></el-button>
      <div class="content">
        <el-checkbox
          label="全选"
          class="checkbox"
          v-model="allcheckList"
          @change="allchecked"
        ></el-checkbox>
        <el-checkbox-group
          v-model="checkList"
          class="checkboxgroup"
          @change="checked"
        >
          <el-checkbox
            :label="item.value"
            class="checkbox"
            v-for="(item, index) in qcList"
            :key="index"
            >{{ item.label }}</el-checkbox
          >
        </el-checkbox-group>
        <div class="btnbox">
          <el-button size="mini" @click="reset">重置</el-button>
          <el-button type="primary" size="mini" @click="comfirm"
            >确定</el-button
          >
        </div>
      </div>
    </el-popover>
  </el-tooltip>
</template>

<script>
export default {
  props: ["qcList"],
  data() {
    return {
      visible: false,
      allcheckList: "", //质检员全选
      checkList: [], //质检员v-model
    };
  },
  components: {},
  methods: {
    //质检员全选
    allchecked(e) {
      if (e) {
        this.qcList.forEach((item) => {
          this.checkList.push(item.value);
        });
      } else {
        this.checkList = [];
      }
    },
    //质检员单选
    checked(e) {
      if (this.qcList.length == this.checkList.length) {
        this.allcheckList = true;
      } else {
        this.allcheckList = false;
      }
    },
    //质检员重置
    reset() {
      this.checkList = [];
      this.allcheckList = false;
    },
    //质检员确定
    comfirm() {
      this.visible = false;
      this.$emit("get_op_user_id", this.checkList);
    },
  },
};
</script>

<style scoped lang='scss'>
.btnbox {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 5px 0px 0;

  .btn {
    border: none;
    font-size: 26px;
    padding: 5px;
    margin-left: 0;
    background: #f1f2f5;
  }

  .el-popover__reference:focus,
  .el-popover__reference:hover {
    background: #e1e2e6;
    color:#606266 ;

  }

  span {
    margin: 0 5px;
  }


}
.checkboxgroup {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
::v-deep .el-checkbox {
  width: 100px;
  margin-right: 0px;
}
.content {
  width: 98%;
  margin: 0 auto 0px;
}
::v-deep .el-popover__reference-wrapper::after{
  content: "";
  display: inline-block;
  height: 13px;
  border: 1px solid;
  margin-left:  5px;
  color: rgba(182, 181, 181, 0.753);
}

</style>