<template>
  <el-dialog
    :title="'设置处理人'"
    :center="true"
    align="left"
    top="5vh"
    width="900px"
    @close="showModelThis = false"
    :close-on-click-modal="false"
    :visible.sync="showModelThis"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    append-to-body
  >
    <el-card style="margin-top: -20px">
      <el-row :gutter="10">
        <el-col :span="24">
          <el-transfer
            style="text-align: left; width: 100%; height: 500px"
            v-model="checkedValue"
            filterable
            filter-placeholder="搜索人名"
            :left-default-checked="leftChecked"
            :right-default-checked="rightChecked"
            :render-content="renderFunc"
            :titles="['未选择', '已选择']"
            :format="{
              noChecked: '${total}',
              hasChecked: '${checked}/${total}',
            }"
            @change="handleChange"
            :data="data"
          >
          </el-transfer>
        </el-col>
        <el-col :span="24" style="padding: 15px 0 0 0" class="tr">
          <el-button type="primary" :size="'mini'" @click="submitForm"
            >确 定</el-button
          >
          <el-button :size="'mini'" @click="showModelThis = false"
            >取 消</el-button
          >
        </el-col>
      </el-row>
    </el-card>
  </el-dialog>
</template>

<script>
import asyncRequest from "@/apis/service/purchaseAndSale/adjust";
import resToken from "@/mixins/resToken";
export default {
  name: "selectHandlerModel",
  props: ["showModel", "id", "type"],
  mixins: [resToken],
  data() {
    return {
      data: [],
      leftChecked: [],
      rightChecked: [],
      checkedValue: [],
      renderFunc(h, option) {
        return (
          <span>
            {option.key} - {option.label}
          </span>
        );
      },

      loading: false,

      showModelThis: this.showModel,
    };
  },
  watch: {
    showModel: function (val) {
      this.showModelThis = val;
      if (val) {
        this.initForm();
      }
    },
    showModelThis(val) {
      if (!val) {
        this.$emit("cancel");
      }
    },
  },
  methods: {
    itemidChange(e) {
      this.ruleForm.itemid = e;
      this.$refs.ruleForm.validateField("itemid");
    },
    async initForm() {
      this.loading = true;
      await this.getAlluser();

      this.loading = false;
    },
    async getAlluser() {
      this.data = [];
      const res = await asyncRequest.allUser({});
      if (res && res.code === 0) {
        let list = res.data;
        let arr = [];
        list.forEach((v) => {
          let model = {
            key: v.id,
            label: v.nickname,
          };
          arr.push(model);
        });
        this.data = arr;
        await this.getMuser();
        // console.log(this.data);
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.$message.warning(res.message);
      }
    },
    async getMuser() {
      this.checkedValue = [];
      const res = await asyncRequest.MUser({ manange_name: this.type });
      if (res && res.code === 0) {
        let list = res.data;
        this.data.forEach((x) => {
          list.forEach((y) => {
            if (x.key === y.manange_id) {
              this.checkedValue.push(x.key);
            }
          });
        });
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.$message.warning(res.message);
      }
    },
    async submitForm() {
      this.loading = true;
      let model = {
        manange_name: this.type,
        id: this.checkedValue,
      };
      let res = await asyncRequest.MUpdate(model);
      this.loading = false;
      if (res && res.code === 0) {
        this.$notify.success({
          title: "设置成功！",
          message: "",
        });
        this.showModelThis = false;
        // 刷新
        this.$emit("refresh");
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.$message.warning(res.message);
      }
    },
  },
};
</script>

  <style lang="scss" scoped>
/deep/ .el-transfer-panel {
  width: 356px !important;
  height: 500px !important;
}
/deep/ .el-transfer-panel__list.is-filterable {
  height: 396px !important;
}
.kanban {
  &.todo {
    .board-column-header {
      background: #4a9ff9;
    }
  }
  &.working {
    .board-column-header {
      background: #f9944a;
    }
  }
  &.done {
    .board-column-header {
      background: #2ac06d;
    }
  }
}
</style>