<template>
  <basic-container>
    <avue-crud
      ref="crud"
      :table-loading="loading"
      @date-change="dateChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @on-load="onLoad"
      :option="option"
      :data="inviteCodeList"
      :page.sync="page"
      @row-del="rowDel"
      @search-change="searchChange"
      @refresh-change="refreshChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
    >
      <template slot="menuLeft">
        <el-button
          size="small"
          @click.stop="distributionCodeDialog = true; isEdit = false; inviteCodeForm = {}"
          type="primary"
          v-show="vaildData(permission.manage_station_inviteCode_edituser, false)"
        >绑定用户
        </el-button>
        <el-button
          size="small"
          @click.stop="handleCheck"
          type="primary"
        >审核用户
        </el-button>
      </template>
      <template slot="menu" slot-scope="{row}">
        <el-button type="text" size="small" @click="rowUpdate(row)">编辑</el-button>
        <el-button type="text" size="small" @click="rowDel(row)">删除</el-button>
      </template>
      <template slot="isEnabled" slot-scope="{ row }">
        <el-switch
          :value="row.isEnabled"
          :active-value="1"
          :inactive-value="0"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="changeEnabled(row)">
        </el-switch>
      </template>

    </avue-crud>
    <el-drawer
      title="绑定用户"
      :visible.sync="distributionCodeDialog"
      append-to-body
      width="40%"
    >
      <div class="drawer_content">
        <el-form :model="inviteCodeForm" :rules="inviteCodeRules" filterable ref="inviteCode" label-width="100px"
                 class="demo-ruleForm">
          <el-form-item label="用工单位:" prop="companyId">
            <el-select v-model="inviteCodeForm.inviteCompanyId" :disabled="isEdit" filterable placeholder="请选择"
                       style="width: 260px">
              <el-option
                v-for="item in enterpriseList"
                :key="item.id"
                :label="item.comname"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="绑定用户:" prop="realName">
            <el-input style="width: 260px" v-model="inviteCodeForm.realName" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="身份证:" prop="idNumber">
            <el-input style="width: 260px" v-model="inviteCodeForm.idNumber" placeholder="请输入身份证"></el-input>
          </el-form-item>
          <el-form-item label="手机号:" prop="phone">
            <el-input style="width: 260px" v-model="inviteCodeForm.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="备注:" prop="remarks">
            <el-input type="textarea" style="width: 260px" v-model="inviteCodeForm.remarks"
                      placeholder="请输入备注"></el-input>
          </el-form-item>
        </el-form>
        <span class="dialog-footer footer_btns">
        <el-button @click="distributionCodeDialog = false">取 消</el-button>
        <el-button type="primary" @click="inviteCodeSubmit">确 定</el-button>
      </span>
      </div>
    </el-drawer>
    <PromptDialog
      :visible="dialogFlag"
      title="审核"
      sub-title="请核对用工单位信息后再进行审核通过， 一旦驳回无法进行后续操作"
      :tips="[
        '该用户未达期望，建议重筛；',
        '不符合条件，请再评估；',
        '经审核，该用户资质不符，建议重评；',
        '用工单位资质不符；',
      ]"
      @onClose="dialogFlag = false"
      @onCancel="diaLogCancel"
      @onConfirm="diaLogConfirm"
    ></PromptDialog>
  </basic-container>
</template>
<script>
import {mapGetters} from "vuex";
import {check18IdCardNo, isExcel, isMobile} from "@/util/validate";
import {deepClone} from "@/util/util";
import {
  getEnterpriseList,
  saveEnterpriseItem,
  getInvitationCodeList,
  getInvitationStatusUpdate,
  getInviteApproval
} from "@/api/manage/station";
import {Message} from "element-ui";
import lodash from "lodash";
import {recruitStatus} from "@/common/dic";
import {Auditing} from "@/api/manage/mission";
import PromptDialog from "@/components/promptDialog/index.vue";
import {getDeptMyTree} from "@/api/tenant/talents";

const inviteCodeRules = {
  stationId: [
    {required: true, message: '请选择用工单位', trigger: 'blur'}
  ],
  realName: [
    {required: true, message: '请输入名称', trigger: 'blur'}
  ],
  phone: [
    {required: true, message: '请输入手机号', trigger: 'blur', pattern: /^1[3-9]{1}\d{9}/}
  ],
  idNumber: [
    {
      required: true,
      message: '请输入身份证',
      trigger: 'blur',
      pattern: /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}[\dX]$/
    }
  ],
}
const page = {
  pageSize: 10,
  currentPage: 1,
  total: 0,
}
const message = lodash.throttle(
  function (options) {
    Message(options);
  },
  3000,
  {trailing: false}
);
export default {
  name: "manage_station_inviteCode",
  components: {PromptDialog},
  data() {
    return {
      dialogFlag: false,
      selectIdList: [],
      distributionCodeDialog: false,
      inviteCodeRules: Object.assign({}, inviteCodeRules),
      enterpriseList: [], // 用工单位列表
      inviteCodeForm: {},
      inviteCodeList: [],
      selectionList: [],
      page: Object.assign({}, page),
      searchData: {},
      isEdit: false,
      loading: false,
      depTree: []
    }
  },
  created() {
    this.getDept()
  },
  activated() {
    this.getList() // 用工单位
  },
  computed: {
    ...mapGetters(["permission"]),
    option() {
      return {
        dateBtn: false,
        addBtn: false,
        tip: false,
        editBtn: false,
        delBtn: false,
        height: "auto",
        viewBtn: true,
        border: true,
        searchMenuSpan: 48,
        selection: true,
        index: true,
        indexLabel: "序号",
        dialogType: "drawer",
        align: 'center',
        column: [
          {
            label: "所属机构",
            prop: "deptId",
            type: "tree",
            multiple: false,
            dicData: this.depTree,
            props: {
              label: "title",
              value: 'value'
            },
            checkStrictly: true,
            search: true,
            span: 20,
            hide: true,
            searchLabelWidth: 80,
            searchSpan: 6,
          },
          {
            label: '机构名称',
            prop: 'companyName',
            search: true,
          }, {
            label: '用工单位',
            prop: 'comname',
            search: true,
          }, {
            label: '统一信用代码',
            prop: 'companyId',
            hide: true,
          }, {
            label: '绑定用户',
            prop: 'realName',
          },
          {
            label: '手机号',
            prop: 'phone',
            search: true,
          }, {
            label: '身份证',
            prop: 'idNumber',
            search: true,
            formatter: (_, value, label) => value
          },
          {
            label: '驳回原因',
            prop: 'reviewMsg',
          },
          {
            label: '启用状态',
            prop: 'isEnabled',
            type: 'select',
            dicData: [
              {label: '否', value: 0},
              {label: '是', value: 1},
            ],
            slot: true,
            width: 100
          },
          {
            label: '审核状态',
            prop: 'reviewStatus',
            width: 100,
            type: 'select',
            dicData: recruitStatus,
            display: false,
          },
          {
            label: '创建时间',
            prop: 'createTime',
            hide: true,
          },
          {
            label: '创建用户',
            prop: 'createUser',
            hide: true,
          }
        ]
      }
    }
  },
  methods: {
    async getDept() {
      let params = {
        tenantId: '000000'
      }
      let resData = await getDeptMyTree(params)
      if (resData.data.code === 200) {
        this.depTree = resData.data.data
      }
    },
    diaLogCancel(value) {
      if (!value) {
        return this.$message({
          type: "info",
          message: "请输入驳回原因!",
        });
      }
      this.handelFetchAuditing(this.selectIdList, 9, value, "成功驳回, 操作成功!").then(() => {
        this.dialogFlag = false
      })
    },
    diaLogConfirm(value) {
      this.handelFetchAuditing(this.selectIdList, 1, value).then(() => {
        this.dialogFlag = false
      })
    },
    handleCheck() {
      let self = this
      if (this.selectionList.length < 1) {
        message({
          type: "warning",
          message: "请至少选择一条数据",
        });
        return;
      }
      let idList = this.selectionList.map((v) => v.id)

      let h = this.$createElement;
      this.dialogFlag = true
      this.selectIdList = idList
      // this.$prompt(
      //   h("p", {style: "color: #F56C6C"}, "一旦驳回无法进行后续操作"),
      //   "请核对用工单位信息后再进行审核通过",
      //   {
      //     distinguishCancelAndClose: true,
      //     confirmButtonText: "通 过",
      //     cancelButtonText: "驳 回",
      //     type: "warning",
      //     center: true,
      //     inputType: "textarea",
      //     inputPlaceholder: "备注驳回原因",
      //     beforeClose: function (action, instance, done) {
      //       if (action === 'cancel') {
      //         if (!instance.inputValue) {
      //           return this.$message({
      //             type: "info",
      //             message: "请输入驳回原因!",
      //           });
      //         }
      //         self.handelFetchAuditing(idList, 9, instance.inputValue, "成功驳回, 操作成功!").then(() => done())
      //       } else if (action === 'confirm') {
      //         self.handelFetchAuditing(idList, 1, instance.inputValue).then(() => done())
      //       } else {
      //         done()
      //       }
      //     }
      //   }
      // )
    },
    handelFetchAuditing(idList, reviewState, msg, message) {
      return new Promise((resolve, reject) => {
        let arr = idList.map((item) => ({
          id: item,
          reviewStatus: reviewState,
          reviewMsg: msg || '',
        }))
        this.loading = true;
        getInviteApproval(arr).then(() => {
          this.loading = false;
          this.onLoad();
          this.$message({
            type: message ? "info" : "success",
            message: message || "审核通过，操作成功!",
          });
          resolve()
        }).catch(() => {
          this.loading = false;
          reject()
        });
      })
    },
    rowUpdate(row) {
      this.isEdit = true
      this.distributionCodeDialog = true
      this.inviteCodeForm = deepClone({
        inviteCompanyId: row.inviteCompanyId,
        phone: row.phone,
        remarks: row.remarks,
        id: row.id
      })
    },
    rowDel(row) {
      const h = this.$createElement;
      this.$confirm(
        h("div", null, [
          h("p", {style: "font-size: 16px"}, "您确定要删除此消息吗? "),
          h("p", {style: "color: red"}, "一旦删除则无法找回"),
        ]),
        {
          type: "warning",
          showClose: false,
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }
      )
        .then(() => {
          return getInvitationStatusUpdate({id: row.id, isDeleted: 1});
        })
        .then(() => {
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.refreshChange();
        })
        .catch(() => {
        });
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    async onLoad() {
      this.getInvitationCode()
    },
    currentChange(page) {
      this.page.currentPage = page
    },
    sizeChange(size) {
      this.page.pageSize = size
    },
    async changeEnabled(row) {
      const isEnabled = row.isEnabled ? 0 : 1
      let params = {id: row.id, isEnabled}
      console.log(params)
      let resData = await getInvitationStatusUpdate(params)
      if (resData.data.code === 200) {
        this.$message.success('状态修改成功');
        this.getInvitationCode()
      }
    },
    refreshChange() {
      this.getInvitationCode('refresh')
    },
    searchReset() {
      this.searchData = {};
      this.getInvitationCode('refresh')
    },
    searchChange(params, done) {
      this.searchData = params;
      this.getInvitationCode('refresh').then(() => done())
    },
    getInvitationCode(type = 'add') {
      return new Promise(async (resolve, reject) => {
        if (type === 'refresh') {
          this.page.currentPage = 1
        }
        let params = {
          ...this.searchData,
          current: this.page.currentPage,
          size: this.page.pageSize,
        }
        this.loading = true
        let resData = await getInvitationCodeList(params)
        this.loading = false
        if (resData.data.code === 200) {
          const {size, records, current, total} = resData.data.data
          this.inviteCodeList = records
          this.page = {pageSize: size, currentPage: current, total}
          resolve()
        } else {
          reject()
          this.$message.error('拉取失败');
        }
      })
    },
    async inviteCodeSubmit() {
      const companyName = this.enterpriseList.filter((item) => item.id === this.inviteCodeForm.inviteCompanyId)[0].comname;
      let params = {
        ...this.inviteCodeForm,
        companyName
      }
      let resData = null
      if (this.isEdit) {
        resData = await getInvitationStatusUpdate(params)
      } else {
        resData = await saveEnterpriseItem(params)
      }
      if (resData.data.code === 200) {
        const {code, data} = resData.data
        this.distributionCodeDialog = false
        this.getInvitationCode('refresh')
        this.$message.success('提交成功');
      } else {
        this.$message.error('创建失败');
      }
    },
    async getList() {
      let params = {}
      let resData = await getEnterpriseList(params)
      if (resData.data.code === 200) {
        const {code, data} = resData.data
        this.enterpriseList = data
      }
    }
  }
}
</script>
<style scoped>
.drawer_content {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.footer_btns {
  display: flex;
  justify-content: flex-end;
}
</style>
