<template>
  <!-- 弹出框表单 -->
  <el-drawer
    :title="title"
    :visible.sync="open"
    :direction="direction"
    size="50%"
  >
    <el-form
      ref="form"
      class="window_form_content"
      :model="form"
      :rules="rules"
      label-width="120px"
    >
      <el-row>
        <Field
          label="负责人姓名"
          prop="name"
          v-model="form.name"
          placeholder="请输入负责人姓名"
        />
        <Field
          label="联系电话："
          prop="phone"
          maxLength="11"
          v-model="form.phone"
          placeholder="请输入联系电话"
        />
        <el-col style="width: 100%;" :span="12">
          <el-form-item label="选择部门">
            <el-select v-model="form.deptId" style="width: 100%;">
              <el-option
                v-for="item in deptArr"
                :key="item.id"
                :label="item.deptName"
                :value="item.id"
              >
              </el-option
            ></el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <div class="bottom_content">
          <div class="content_top">
            <span>请选择窗口工作人员：</span>
            <div class="search_box">
              <el-select v-model="deptValue" style="width: 100%;">
                <el-option
                  v-for="item in deptArr"
                  :key="item.id"
                  :label="item.deptName"
                  :value="item.id"
                >
                </el-option
              ></el-select>
              <el-input
                v-model="keywords"
                placeholder="请输入姓名关键字搜索"
                style="width: 200px;margin: 0 10px;"
              ></el-input>
              <el-button type="primary" @click="handleSearch"> 搜索 </el-button>
            </div>
          </div>
          <div class="table_box">
            <LayoutTable
              :data="tableData"
              notAdd
              notDel
              notSearch
              notPagination
              :config="tableConfig"
            >
            </LayoutTable>
          </div>
        </div>
      </el-row>
      <form-buttons @submit="submitForm" noCancelBtn />
    </el-form>
    <!-- <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <Field
            label="部门id号"
            prop="deptId"
            v-model="form.deptId"
            placeholder="请输入部门id号"
          />
          <Field
            label="部门名称"
            prop="deptName"
            v-model="form.deptName"
            placeholder="请输入部门名称"
          />
          <Field
            label="姓名"
            prop="name"
            v-model="form.name"
            placeholder="请输入姓名"
          />
          <Field
            label="工号"
            prop="number"
            v-model="form.number"
            placeholder="请输入工号"
          />
          <Field
            label="电话号码"
            prop="phone"
            v-model="form.phone"
            placeholder="请输入电话号码"
          />
          <Field
            label="负责窗口数量"
            prop="windowCount"
            v-model="form.windowCount"
            placeholder="请输入负责窗口数量"
          />
          <Field
            label="备注"
            prop="remark"
            v-model="form.remark"
            type="textarea"
            placeholder="请输入备注"
          />
        </el-row>
  
        <form-buttons @submit="submitForm" noCancelBtn />
      </el-form> -->
  </el-drawer>
</template>

<script>
import form from "@/assets/mixins/formdialog";
import table from "@/assets/mixins/table";

export default {
  name: "WindowOwnerDetail",
  mixins: [form, table],
  components: {},
  created() {
    this.changePath("window/owner");
    // 获取部门列表
    this.$post("/dept/list", { page: 1, size: -1 }).then((res) => {
      if (res.code == 1) {
        this.deptArr = res.data.data;
      } else {
        this.deptArr = [];
      }
    });
    // this.getData();
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "窗口负责人",
      // 是否显示弹出层
      open: false,
      direction: "rtl",
      deptValue: "",
      toString: [],
      toDate: [],
      deptArr: [],
      // 表单校验
      rules: {},
      keywords: "",
      checkArr: [],
      urls: {
        saveUrl: "/window/owner/save",
      },
      config: {
        isshowTabPane: false,
        search: [],
        columns: [
          { type: "index", label: "序号", width: 50 },

          { label: "姓名", prop: "name" },

          { label: "工号", prop: "workNum" },

          { label: "部门", prop: "deptName" },

          { label: "职位", prop: "positionName" },

          { label: "员工状态", prop: "status", formatter: this.formatter },

          { label: "手机号码", prop: "phoneNumber" },

          {
            label: "操作",
            width: 100,
            formatter: (row) => {
              if (row.check) {
                return <span style="cursor:pointer;color:#ff0000">已选中</span>;
              } else {
                return <span style="cursor:pointer;color:#1890ff">选择</span>;
              }
            },
          },
        ],
      },
    };
  },

  methods: {
    handleSearch() {
      this.getData();
    },
    getData() {
      this.$post("/staff/list", {
        page: 1,
        size: -1,
        deptId: this.deptValue,
        name: this.keywords,
      }).then((res) => {
        if (res.code == 1) {
          this.tableData = res.data;
          this.checkArr.length > 0
            ? this.checkArr.forEach((val) => {
                this.tableData.data.forEach((v) => {
                  val.id == v.id ? (v.check = val.check) : "";
                });
              })
            : this.tableData.data.forEach((v) => {
                v.check = false;
              });
          this.tableData.data = [...this.tableData.data];
          this.$forceUpdate(this.tableData);
        } else {
          this.deptArr = [];
        }
      });
    },
    handleRowClick(val) {
      val.check = !val.check;
      val.check
        ? this.checkArr.push(val)
        : (this.checkArr = this.checkArr.filter((v) => v.id !== val.id));
      this.checkArr.length > 0
        ? this.checkArr.forEach((val) => {
            val.staffId = val.id;
            this.tableData.data.forEach((v) => {
              val.id == v.id ? (v.check = val.check) : "";
            });
          })
        : "";
      this.tableData.data = [...this.tableData.data];
      this.form.windowOwnerDetailList = this.checkArr;
      this.$forceUpdate(this.tableData.data);
    },

    /** 编辑 */
    edit(row) {
      this.reset();
      this.query = { id: row.id };
      this.deptValue = "";
      this.keywords = "";

      this.checkArr = [];
      this.$get("/window/owner/info", { id: row.id }).then((res) => {
        if (res.code == 1) {
          this.form = res.data;

          this.checkArr = res.data.windowOwnerDetailList;
          res.data.windowOwnerDetailList.length > 0
            ? res.data.windowOwnerDetailList.forEach((val) => {
                val.check = true;
                val.id = val.staffId;
                this.tableData.data.forEach((v) => {
                  v.check = false;
                  val.staffId == v.id ? (v.check = true) : "";
                });
              })
            : "";
          this.tableData.data = [...this.tableData.data];
          this.$forceUpdate(this.tableData);
        } else {
          this.form = {};
        }
        this.open = true;
      });
      this.getData();
      // this.urls.currUrl = "window/owner/edit";
      // this.getData();
      this.pageInfo.type = "edit";
      this.title = "修改窗口负责人";
    },
    /** 新增 */
    add(row) {
      this.reset();
      // this.urls.currUrl = "window/owner/add";
      // this.getData();
      this.deptValue = "";
      this.checkArr = [];
      this.keywords = "";
      this.getData();
      this.open = true;
      this.pageInfo.type = "add";
      this.title = "新增窗口负责人";
    },
    /** 查看*/
    view(row) {
      this.reset();
      this.query = { id: row.id };
      // this.urls.currUrl = "window/owner/view";
      // this.getData();
      this.pageInfo.type = "view";
      this.title = "窗口负责人详细";
    },
    /**取消按钮 */
    cancel() {
      this.open = false;
    },
    /**获取数据后弹框 */
    afterRender(data) {
      this.open = true;
    },

    afterSubmit(data) {
      this.open = false;
      this.$emit("ok");
    },

    // 表单重置
    reset() {
      this.form = {
        deptId: "",
        deptName: "",
        name: "",
        number: "",
        phone: "",
        windowCount: null,
        remark: "",
      };
      this.resetForm("form");
    },
    resetForm(refName) {
      if (this.$refs[refName]) {
        this.$refs[refName].resetFields();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.window_form_content {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  .bottom_content {
    width: 100%;
    height: 680px;
    background-color: rgba(242, 246, 252, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(223, 233, 238, 1);
    border-radius: 4px;
    padding: 20px;
    .content_top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
  }
}
</style>
