<template>
  <basic-container>
    <avue-crud
      ref="crud"
      @date-change="dateChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @on-load="onLoad"
      :option="option"
      :data="inviteCodeList"
      :page.sync="page"
      @search-change="searchChange"
      @refresh-change="refreshChange"
      @search-reset="searchReset"
    >
      <template slot="menuLeft">
        <el-button
          size="small"
          @click.stop="distributionCodeDialog = true"
          type="primary"
        >新增邀请码</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-dialog
      title="新增邀请码"
      :visible.sync="distributionCodeDialog"
      append-to-body
      width="30%">
      <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" placeholder="请选择企业" style="width: 260px" >
            <el-option
              v-for="item in enterpriseList"
              :key="item.id"
              :label="item.companyName"
              :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 slot="footer" class="dialog-footer">
        <el-button @click="distributionCodeDialog = false">取 消</el-button>
        <el-button type="primary" @click="inviteCodeSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </basic-container>
</template>
<script>
import { mapGetters } from "vuex";
import { check18IdCardNo, isExcel, isMobile } from "@/util/validate";
import {
  getEnterpriseList,
  saveEnterpriseItem,
  getInvitationCodeList,
  getInvitationStatusUpdate
} from "@/api/manage/station";
import { Message } from "element-ui";
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 curdOptions = {
  dateBtn: false,
  addBtn: false,
  editBtn: false,
  delBtn: false,
  height: "auto",
  menu:false,
  searchMenuSpan: 48,
  index: true,
  indexLabel: "序号",
  column: [{
    label: '企业名称',
    prop: 'companyName',
    search: true,
  }, {
    label: '邀请码',
    prop: 'inviteCode',
    search: true,
  },{
    label: '手机号',
    prop: 'phone',
    search: true,
  },{
    label: '身份证',
    prop: 'idNumber',
    search: true,
    formatter:(_,value,label) => value
  },{
    label: '启用状态',
    prop: 'isEnabled',
    slot: true,
    width: 100
  },{
    label: '备注',
    prop: 'remarks',
  },]
}
const page = {
  pageSize: 10,
  currentPage: 1,
  total: 0,
}
export default {
  name: "manage_station_inviteCode",
  data(){
    return {
      distributionCodeDialog: false,
      inviteCodeRules: Object.assign({}, inviteCodeRules),
      enterpriseList: [], // 企业列表
      inviteCodeForm: {},
      inviteCodeList:[],
      option: Object.assign({}, curdOptions),
      page: Object.assign({}, page),
      searchData: {},
    }
  },
  created() {
    this.getList() // 企业
  },
  methods:{
    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,
        }
        let resData = await getInvitationCodeList(params)
        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].companyName;
      let params = {
        ...this.inviteCodeForm,
        companyName
      }
      let 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>

</style>
