<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"
          v-model="form.phone"
          placeholder="请输入联系电话"
        />
        <el-col style="width: 100%;" :span="24">
          <Field
            label="选择部门："
            prop="deptId"
            v-model="form.deptId"
            placeholder="选择部门"
            :enumData="deptGroup"
            type="select"
          />
        </el-col>
      </el-row>
      <el-row>
        <div class="bottom_content">
          <div class="content_top">
            <span>请选择窗口工作人员：</span>
            <div class="search_box">
              <el-select v-model="type" placeholder="请选择部门">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  style="width: 200px;"
                >
                </el-option>
              </el-select>
              <el-input
                v-model="keywords"
                placeholder="请输入姓名关键字搜索"
                style="width: 200px;margin: 0 10px;"
              ></el-input>
              <el-button type="primary"> 搜索 </el-button>
            </div>
          </div>
          <div class="table_box">
            <el-table
              :data="tableData"
              border
              style="width: 100%"
              height="520"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column type="index" label="序号" width="50">
              </el-table-column>
              <el-table-column prop="name" label="姓名" width="180">
              </el-table-column>
              <el-table-column prop="id" label="工号"> </el-table-column>
              <el-table-column prop="deptaName" label="部门"> </el-table-column>
              <el-table-column prop="zhiwei" label="职位"> </el-table-column>
              <el-table-column prop="status" label="状态"> </el-table-column>
              <el-table-column prop="phone" label="手机号"> </el-table-column>
              <el-table-column fixed="right" label="操作" width="120">
                <template slot-scope="scope">
                  <span>{{ scope.row.check ? "已选择" : "选择" }}</span>
                </template>
              </el-table-column>
            </el-table>
          </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";
export default {
  name: "WindowOwnerDetail",
  mixins: [form],
  components: {},
  created() {
    this.changePath("window/owner");
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "窗口负责人",
      // 是否显示弹出层
      open: false,
      direction: "rtl",
      toString: [],
      toDate: [],
      // 表单校验
      rules: {},
      deptGroup: { 1: "部门1", 2: "部门2", 3: "部门3", 4: "部门4", 5: "部门5" },
      options: [
        {
          value: "1",
          label: "部门1",
        },
        {
          value: "2",
          label: "部门2",
        },
      ],
      type: "",
      keywords: "",
      tableData: [
        {
          id: "123456",
          name: "xxx",
          deptName: "部门1",
          zhiwei: "工作人员",
          status: "正式",
          phone: "130****8888",
          check: false,
        },
        {
          id: "123456",
          name: "xxx",
          deptName: "部门1",
          zhiwei: "工作人员",
          status: "正式",
          phone: "130****8888",
          check: false,
        },
      ],
    };
  },

  methods: {
    handleSelectionChange(val) {
      console.log(val);
      this.tableData.forEach((v) => (v.check = false));
      val.forEach((v) => {
        v.check = true;
      });
    },
    /** 编辑 */
    edit(row) {
      this.reset();
      this.query = { id: row.id };
      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.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: 0,
        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: 600px;
    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>
