<template>
  <div class="main">
    <a-row>
      <!-- 组织架构 -->
      <a-col :span="5" class="left-tree">
        <a-input-search
          style="margin-bottom: 8px"
          placeholder="请输入搜索信息"
          @change="onChange"
        />
        <div>
          <a-button type="link">+&nbsp;新建分组</a-button>
          <a-button type="link" icon="form"> </a-button>
          <a-button type="link" style="color:#FF4D4F" icon="delete" @click="del()"> </a-button>
        </div>
        <a-tree
          checkable
          v-model="checkedKeys"
          :expanded-keys="expandedKeys"
          :auto-expand-parent="autoExpandParent"
          :selected-keys="selectedKeys"
          :tree-data="treeData"
          @expand="onExpand"
          @select="onSelect"
        />
      </a-col>
      <!-- right 员工 -->
      <a-col :span="19">
        <div class="search-box">
          <a-space size="large">
            <a-input placeholder="请输入申请人/公司名" />
            <a-select style="width: 200px" placeholder="选择状态" />
            <a-button type="primary">查 询</a-button>
            <a-button>重 置</a-button>
          </a-space>
        </div>
        <!-- 表格 -->
        <div id="commonTable">
          <div style="margin-bottom: 16px">
            <a-space size="large">
              <a-button type="primary" :loading="loading" @click="addStaff()">
                新增员工
              </a-button>
              <a-button :disabled="!hasSelected" :loading="loading">
                批量操作
              </a-button>
            </a-space>
            <span style="margin-left: 8px">
              <template v-if="hasSelected">
                {{ `已选择 ${selectedRowKeys.length} 条` }}
              </template>
            </span>
          </div>
          <a-table
            :scroll="{ x: 1300 }"
            :columns="columns"
            :data-source="tableData"
            :pagination="pagination"
            @change="handleTableChange"
            :row-selection="{
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange,
            }"
            :row-key="
              (record, index) => {
                return index;
              }
            "
          >
            <!-- 操作 -->
            <span slot="action" slot-scope="scope">
              <a-space size="small">
                <a class="ant-dropdown-link" @click='detail(scope)'>详情</a>
                <a class="ant-dropdown-link" @click='del(scope)'>重置密码</a>
              </a-space>
            </span>
            <span slot="formatter" slot-scope="scope">{{
              scope === 1 ? "可" : ""
            }}</span>
          </a-table>
        </div>
      </a-col>
    </a-row>
    <!-- 添加员工信息 -->
    <a-drawer
      title="添加员工信息"
      :width="720"
      :visible="show.addStaffShow"
      :body-style="{ paddingBottom: '80px' }"
      @close="addStaffClose"
    >
      <div class="drawer-content">
        <a-form-model
        title='1d2'
          layout='vertical'
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :wrapper-col="{span:18}"
        >
          <div>基本信息</div>
          <a-divider></a-divider>
          <a-row>
            <a-col :span='12'>
              <a-form-model-item label="真实姓名" prop="actualName">
                <a-input v-model="form.actualName" placeholder="请输入真实姓名"/>
              </a-form-model-item>
            </a-col>
            <a-col :span='12'>
              <a-form-model-item label="性别" prop="sex">
                <a-select v-model="form.sex" placeholder="请选择性别"></a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span='12'>
              <a-form-model-item label="身份证号" prop="idCard">
                <a-input v-model="form.idCard" placeholder="请输入身份证号"/>
              </a-form-model-item>
            </a-col>
            <a-col :span='12'>
              <a-form-model-item ref="tel" label="手机号" prop="tel">
                <a-input v-model="form.tel" placeholder="请输入身份证号" @blur="()=>{$refs.tel.onFieldBlur();}"/>
              </a-form-model-item>
            </a-col>
            <a-col :span='12'>
              <a-form-model-item  label="出生日期" prop="birthday">
                <a-date-picker v-model="form.birthday"/>
              </a-form-model-item>
            </a-col>
            <a-col :span='12'>
              <a-form-model-item  label="密码" prop="password">
                <a-input type="password" placeholder='不输入默认为手机号后6位' v-model="form.password"/>
              </a-form-model-item>
            </a-col>
            <a-col :span='12'>
              <a-form-model-item  label="电子邮箱" prop="email">
                <a-input  placeholder='请输入电子邮箱' v-model="form.email"/>
              </a-form-model-item>
            </a-col>
            <a-col :span='12'>
              <a-form-model-item  label="居住地址" prop="address">
                <a-input  placeholder='请输入居住地址' v-model="form.address"/>
              </a-form-model-item>
            </a-col>
            <a-col>
              <a-form-model-item  label="">
                <template>
                  上传身份证照片
                  <a-upload
                  action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                  list-type="picture-card"
                  :file-list="fileList"
                  @preview="handlePreview"
                  @change="handleChange"
                >
                  <div v-if="fileList.length < 2">
                    <a-icon type="plus" />
                    <div class="ant-upload-text">
                      点击上传
                    </div>
                  </div>
                  </a-upload>
                  <span style='color:#00000073'>单张最多不超过4M，最多上传2张，支持JPG,PNG格式</span>
                </template>
              </a-form-model-item>
            </a-col>
          </a-row>
          <div>入职信息</div>
          <a-divider></a-divider>
          <a-row>
            <a-col :span='12'>
              <a-form-model-item  label="岗位" prop="address">
                <a-select  placeholder='请选择' v-model="form.address"/>
              </a-form-model-item>
            </a-col>
            <a-col :span='12'>
              <a-form-model-item  label="入职时间" prop="entryDate">
                <a-date-picker  placeholder='请选择入职时间' v-model="form.entryDate"/>
              </a-form-model-item>
            </a-col>
            <a-col :span='12'>
              <a-form-model-item  label="薪资" prop="salary">
                <a-input  placeholder='请输入薪资' v-model="form.salary"/>
              </a-form-model-item>
            </a-col>
            <a-col :span='24'>
              <div>上传资料</div>
              <a-upload
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                list-type="picture"
                :default-file-list="fileList"
              >
                <a-button> <a-icon type="upload" /> 点击上传 </a-button>
              </a-upload>
              <span style='color:#00000073'>支持上传PNG，JPG,PDF文件</span>
            </a-col>
          </a-row>
          <div style='margin-top:20px'>联系信息</div>
          <a-divider></a-divider>
          <a-row>
            <a-col :span='12'>
              <a-form-model-item  label="紧急联系人" prop="emergencyContact">
                <a-input  placeholder='请输入紧急联系人' v-model="form.emergencyContact"/>
              </a-form-model-item>
            </a-col>
            <a-col :span='12'>
              <a-form-model-item  label="紧急联系电话" prop="emergencyContactNumber">
                <a-input  placeholder='请输入紧急联系电话' v-model="form.emergencyContactNumber"/>
              </a-form-model-item>
            </a-col>
            <a-col :span='24'>
              <a-form-model-item  label="紧急联系地址" prop="emergencyContactAddress">
                <a-input  placeholder='请输入紧急联系地址' v-model="form.emergencyContactAddress"/>
              </a-form-model-item>
            </a-col>
          </a-row>
          <div>其他信息</div>
          <a-divider></a-divider>
          <a-row>
            <a-col :span='12'>
              <a-form-model-item  label="婚姻状态" prop="maritalStatus">
                <a-select  placeholder='请选择婚姻状态' v-model="form.maritalStatus"/>
              </a-form-model-item>
            </a-col>
            <a-col :span='12'>
              <a-form-model-item  label="民族" prop="nation">
                <a-select  placeholder='请输入民族' v-model="form.nation"/>
              </a-form-model-item>
            </a-col>
            <a-col :span='12'>
              <a-form-model-item  label="政治面貌" prop="politicalOutlook">
                <a-select  placeholder='请选择政治面貌' v-model="form.politicalOutlook"/>
              </a-form-model-item>
            </a-col>
            <a-col :span='12'>
              <a-form-model-item  label="户口类型" prop="accountType">
                <a-select  placeholder='请选择类型' v-model="form.accountType"/>
              </a-form-model-item>
            </a-col>
            <a-col :span='24'>
              <a-form-model-item  label="备注" prop="remake">
                <a-textarea v-model="form.remake" placeholder="请输入备注"></a-textarea>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <div class="drawer-footer">
        <a-button :style="{ marginRight: '8px' }" @click="addStaffClose">
          关闭
        </a-button>
        <a-button type="primary" @click="addStaffClose"> 提交 </a-button>
      </div>
    </a-drawer>
  </div>
</template>
<script>
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
const treeData = [
  {
    title: "0-0",
    key: "0-0",
    children: [
      {
        title: "0-0-0",
        key: "0-0-0",
        children: [
          { title: "0-0-0-0", key: "0-0-0-0" },
          { title: "0-0-0-1", key: "0-0-0-1" },
          { title: "0-0-0-2", key: "0-0-0-2" },
        ],
      },
      {
        title: "0-0-1",
        key: "0-0-1",
        children: [
          { title: "0-0-1-0", key: "0-0-1-0" },
          { title: "0-0-1-1", key: "0-0-1-1" },
          { title: "0-0-1-2", key: "0-0-1-2" },
        ],
      },
      {
        title: "0-0-2",
        key: "0-0-2",
      },
    ],
  },
  {
    title: "0-1",
    key: "0-1",
    children: [
      { title: "0-1-0-0", key: "0-1-0-0" },
      { title: "0-1-0-1", key: "0-1-0-1" },
      { title: "0-1-0-2", key: "0-1-0-2" },
    ],
  },
  {
    title: "0-2",
    key: "0-2",
  },
];

export default {
  data() {
    return {
      previewVisible: false,
      previewImage: '',
      fileList: [
      ],
      form: {
        actualName: "",
        sex: null,
        idCard: "",
        tel: "",
      },
      rules: {
        actualName: [{ required: true, message: "请输入真实姓名", trigger: "blur" }],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        idCard: [{ required: true, message: "请输入身份证号", trigger: "blur" }],
        tel: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { min: 11, max: 11, message: "手机号只能为11位", trigger: "blur" },
        ],
      },
      show: {
        addStaffShow: false,
      },
      expandedKeys: [],
      autoExpandParent: true,
      checkedKeys: [],
      selectedKeys: [],
      treeData,
      // 搜索项
      searchForm: {
        name: "",
        code: "",
      },
      //   列
      columns: [
        {
          title: "真实名称",
          dataIndex: "actualName",
          width: "20%",
        },
        {
          title: "手机号",
          dataIndex: "tel",
          width: "20%",
        },
        {
          title: "所属部门",
          dataIndex: "departmentName",
          width: "20%",
        },
        {
          title: "岗位",
          dataIndex: "positionName",
          width: "20%",
        },
        {
          title: "备注",
          dataIndex: "remake",
          width: "300",
        },
        {
          title: "操作",
          dataIndex: "action",
          key: "action",
          width: "180",
          fixed: "right",
          scopedSlots: { customRender: "action" },
        },
      ],
      //   数据
      tableData: [{},],
      //   分页
      pagination: {
        current: 1,
        total: 0,
        pageSize: 10,
        showTotal: (total) => `共 ${total} 条`,
        showSizeChanger: true,
        showQuickJumper: true,
      },
      loading: false,
      selectedRowKeys: [],
    };
  },
  methods: {
    // 新增组织架构
    del() {
      this.$confirm({
        title: "是否删除",
        // okText:'删除',
        // cancelText:'取消',
        icon: "",
        onOk: function () {
          console.log(1);
        },
      });
    },
    // 新增员工
    addStaff() {
      this.show.addStaffShow = true;
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
    addStaffClose() {
      this.show.addStaffShow = false;
    },
    onExpand(expandedKeys) {
      console.log("onExpand", expandedKeys);
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    onCheck(checkedKeys) {
      console.log("onCheck", checkedKeys);
      this.checkedKeys = checkedKeys;
    },
    onSelect(selectedKeys, info) {
      console.log("onSelect", info);
      this.selectedKeys = selectedKeys;
    },
    detail(data) {
      console.log(data);
      this.$router.push({ name: "settle_detail" });
    },
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    handleTableChange(pagination) {
      console.log(pagination);
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      this.pagination = pager;
    },
    onChange() {},
     handleCancel() {
      this.previewVisible = false;
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    handleChange({ fileList }) {
      this.fileList = fileList;
    },
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
  },
  watch: {
    checkedKeys(val) {
      console.log("onCheck", val);
    },
  },
};
</script>
<style lang="less" scoped>
.left-tree {
  padding: 10px;
  border-right: 1px solid #0000000f;
  height: 100vh;
}
#commonTable {
  padding: 10px;
}
</style>