<template>
  <div id="index">
    <el-row>
      <el-col :span="24">
        <!-- <el-col :span="24" class="add" style="text-align:right;padding: 10px 20px;">
          <el-button size="mini" type="primary" @click="toAdd" icon="el-icon-plus">添加{{ theme }}</el-button>
        </el-col> -->
        <el-col :span="24" class="main">
          <data-table :fields="fields" :opera="opera" @edit="toEdit" :data="list" :total="total" @delete="toDelete" @query="search"></data-table>
        </el-col>
        <el-dialog :title="theme" width="60%" :visible.sync="dialog" @closed="handleClose" :destroy-on-close="true">
          <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="用户状态" v-if="form.role !== '1'">
              <el-radio-group v-model="form.status">
                <el-radio label="0" disabled>已注册</el-radio>
                <el-radio label="1">审核成功</el-radio>
                <el-radio label="2">审核未通过</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="用户名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入用户名称"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入手机号" :minlength="11" :maxlength="11"></el-input>
            </el-form-item>
            <el-form-item label="用户类别" prop="role">
              <el-radio-group v-model="form.role">
                <el-radio label="4">个人</el-radio>
                <el-radio label="5">机构管理员</el-radio>
                <el-radio label="6">专家</el-radio>
              </el-radio-group>
            </el-form-item>
            <span v-if="form.role == '4' || form.role == '5'">
              <el-form-item label="身份证号" prop="cardnumber">
                <el-input v-model="form.cardnumber" placeholder="请输入身份证号" :minlength="18" :maxlength="18"></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
              </el-form-item>
              <el-form-item label="地址" prop="addr">
                <el-input v-model="form.addr" placeholder="请输入地址"></el-input>
              </el-form-item>
              <el-form-item label="头像图片" prop="img_path">
                <upload :limit="1" :data="form.img_path" type="img_path" :url="'/files/imgpath/upload'" @upload="uploadSuccess"></upload>
              </el-form-item>
              <el-form-item label="身份证正面" prop="cardfile_a">
                <upload :limit="1" :data="form.cardfile_a" type="cardfile_a" :url="'/files/cardfilea/upload'" @upload="uploadSuccess"></upload>
              </el-form-item>
              <el-form-item label="身份证背面" prop="cardfile_b">
                <upload :limit="1" :data="form.cardfile_b" type="cardfile_b" :url="'/files/cardfileb/upload'" @upload="uploadSuccess"></upload>
              </el-form-item>
              <el-form-item label="办公电话" prop="office_phone">
                <el-input v-model="form.office_phone" placeholder="请输入办公电话"></el-input>
              </el-form-item>
              <el-form-item label="所属行业" prop="profession">
                <el-input v-model="form.profession" placeholder="请输入所属行业"></el-input>
              </el-form-item>
            </span>
            <span v-if="form.role == '4'">
              <el-form-item label="个人简历" v-if="form.role == '4'">
                <el-input type="textarea" v-model="form.resume" placeholder="请输入个人简介"></el-input>
              </el-form-item>
            </span>
            <span v-else-if="form.role == '5'">
              <el-form-item label="组织机构图片" v-if="form.role == '5'" prop="img_qy">
                <upload :limit="1" :data="form.img_qy" type="img_qy" :url="'/files/imgqy/upload'" @upload="uploadSuccess"></upload>
              </el-form-item>
              <el-form-item label="机构类型" prop="institution_type">
                <el-input v-model="form.institution_type" placeholder="请输入机构类型"></el-input>
              </el-form-item>
              <el-form-item label="机构名称" prop="institution_name">
                <el-input v-model="form.institution_name" placeholder="请输入机构名称"></el-input>
              </el-form-item>
              <el-form-item label="机构代码" prop="institution_code">
                <el-input v-model="form.institution_code" placeholder="请输入机构代码"></el-input>
              </el-form-item>
              <el-form-item label="机构性质" prop="institution_nature">
                <el-input v-model="form.institution_nature" placeholder="请输入机构性质"></el-input>
              </el-form-item>
            </span>
            <span v-else-if="form.role == '6'">
              <el-form-item label="头像">
                <upload :limit="1" :data="form.expertimage" type="expertimage" :url="'/files/imgpath/upload'" @upload="uploadSuccess"></upload>
              </el-form-item>
              <el-form-item label="最高学历">
                <el-input v-model="form.education" placeholder="请输入最高学历"></el-input>
              </el-form-item>
              <el-form-item label="毕业院校">
                <el-input v-model="form.school" placeholder="请输入毕业院校"></el-input>
              </el-form-item>
              <el-form-item label="出生日期">
                <el-date-picker v-model="form.birthDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"> </el-date-picker>
              </el-form-item>
              <el-form-item label="QQ&微信">
                <el-input v-model="form.qqwx" placeholder="请输入QQ&微信"></el-input>
              </el-form-item>
              <el-form-item label="电子邮箱">
                <el-input v-model="form.email" placeholder="请输入电子邮箱"></el-input>
              </el-form-item>
              <el-form-item label="工作单位">
                <el-input v-model="form.company" placeholder="请输入工作单位"></el-input>
              </el-form-item>
              <el-form-item label="职务职称">
                <el-input v-model="form.zwzc" placeholder="请输入职务职称"></el-input>
              </el-form-item>
              <el-form-item label="擅长领域">
                <el-input v-model="form.expertise" placeholder="请输入擅长领域"></el-input>
              </el-form-item>
              <el-form-item label="工作经历">
                <el-input
                  v-model="form.workexperience"
                  type="textarea"
                  maxlength="300"
                  show-word-limit
                  :autosize="{ minRows: 2, maxRows: 5 }"
                  placeholder="请输入工作经历"
                ></el-input>
              </el-form-item>
              <el-form-item label="科研综述">
                <el-input
                  v-model="form.scientific"
                  type="textarea"
                  maxlength="300"
                  show-word-limit
                  :autosize="{ minRows: 2, maxRows: 5 }"
                  placeholder="请输入科研综述"
                ></el-input>
              </el-form-item>
              <el-form-item label="承担项目">
                <el-input
                  v-model="form.undertakingproject"
                  type="textarea"
                  maxlength="300"
                  show-word-limit
                  :autosize="{ minRows: 2, maxRows: 5 }"
                  placeholder="请输入承担项目"
                ></el-input>
              </el-form-item>
              <el-form-item label="科技奖励">
                <el-input
                  v-model="form.scienceaward"
                  type="textarea"
                  maxlength="300"
                  show-word-limit
                  :autosize="{ minRows: 2, maxRows: 5 }"
                  placeholder="请输入科技奖励"
                ></el-input>
              </el-form-item>
              <el-form-item label="社会任职">
                <el-input
                  v-model="form.social"
                  type="textarea"
                  maxlength="300"
                  show-word-limit
                  :autosize="{ minRows: 2, maxRows: 5 }"
                  placeholder="请输入社会任职"
                ></el-input>
              </el-form-item>
            </span>
            <el-form-item>
              <el-button @click="handleClose">返回</el-button>
              <el-button type="primary" @click="handleSave()">提交</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import upload from '@/components/uploadone.vue';
import dataTable from '@/components/data-table.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: users } = createNamespacedHelpers('users');
const { mapActions: expertsuser } = createNamespacedHelpers('expertsuser');
export default {
  name: 'index',
  props: {},
  components: {
    dataTable,
    upload,
  },
  data: function() {
    return {
      theme: '用戶',
      opera: [
        {
          label: '审核',
          icon: 'el-icon-edit',
          method: 'edit',
        },
        {
          label: '删除',
          icon: 'el-icon-delete',
          method: 'delete',
          confirm: true,
        },
      ],
      fields: [
        { label: '姓名', prop: 'name', filter: 'input' },
        { label: '电话', prop: 'phone', filter: 'input' },
        { label: '用戶类型', prop: 'role', format: i => (i == '4' ? '个人用户' : i == '5' ? '企业用户' : i == '6' ? '专家' : '临时用户') },
        { label: '状态', prop: 'status', format: i => (i == '0' ? '待审核' : i == '1' ? '审核成功' : i == '2' ? '审核不成功' : '待认证') },
      ],
      list: [],
      total: 0,
      dialog: false,
      form: {},
      editData: {},
    };
  },
  created() {
    this.search();
  },
  methods: {
    ...users(['fetch', 'create', 'query', 'update', 'delete', 'userquery']),
    ...expertsuser({ exportuserFetch: 'fetch', exportuserCreate: 'create', exportuserUpdate: 'update' }),
    async search({ skip = 0, limit = 10, pid = '', ...info } = {}) {
      if (this.user.code == 'JLCJGLY') {
        const res = await this.userquery({ skip, limit, ...info });
        if (this.$checkRes(res)) {
          this.$set(this, `list`, res.data);
          this.$set(this, `total`, res.total);
        }
      } else {
        const res = await this.userquery({ skip, limit, pid, code: this.user.code, ...info });
        if (this.$checkRes(res)) {
          this.$set(this, `list`, res.data);
          this.$set(this, `total`, res.total);
        }
      }
    },
    // 添加
    toAdd() {
      console.log('添加');
    },
    // 修改
    async toEdit({ data }) {
      if (data.role == '6') {
        const res = await this.exportuserFetch(data.uid);
        if (this.$checkRes(res)) {
          this.$set(this, `form`, res.data);
        }
      } else {
        const res = await this.fetch(data.uid);
        if (this.$checkRes(res)) {
          this.$set(this, `form`, res.data);
        }
      }
      this.$set(this, `editData`, data);
      this.dialog = true;
    },
    // 提交
    async handleSave() {
      let data = this.editData;
      data.status = this.form.status;
      if (data.role == '4' || data.role == '5') {
        data.id = data.uid;
        let res = await this.update(data);
        if (this.$checkRes(res)) {
          this.$message({
            message: '审核信息成功',
            type: 'success',
          });
          this.handleClose();
        }
      } else if (data.role == '6') {
        data.id = data.uid;
        let res = await this.exportuserUpdate(data);
        if (this.$checkRes(res)) {
          this.$message({
            message: '修改信息成功',
            type: 'success',
          });
          this.handleClose();
        }
      }
    },
    // 删除
    toDelete() {},
    // 取消
    handleClose() {
      this.dialog = false;
      this.form = {};
    },
    uploadSuccess({ type, data }) {
      this.$set(this.form, `${type}`, data.uri);
    },
    setIsQy(data) {
      let val = '0';
      data == '2' ? (val = '0') : (val = '1');
      this.$set(this.form, `is_qy`, val);
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped></style>
