<template>
  <div id="trainer">
    <el-row>
      <el-col :span="24" class="one">
        <el-col :span="24" class="one_1"> {{ title || '培训机构师资信息查询' }} </el-col>
        <el-col :span="24" class="one_2">
          <el-form ref="searchFrom" :model="searchFrom" label-width="140px">
            <el-col :span="24" class="one_2txt" v-for="(l, li) in searchFields" :key="`searchBar-line-${li}`">
              <el-col v-for="(f, fi) in l" :key="`searchBar-col-${li}-${fi}`" :span="f.span || 12">
                <el-form-item :label="f.label">
                  <template v-if="f.type === 'select'">
                    <el-select v-model="searchFrom[f.model]" filterable placeholder="请选择" clearable style="width: 100%">
                      <el-option v-for="(item, index) in getList(f.list)" :key="index" :label="item" :value="item"></el-option>
                    </el-select>
                  </template>
                  <template v-else-if="f.type === 'daterange'">
                    <e-date-range v-model="searchFrom[f.model]"></e-date-range>
                  </template>
                  <template v-else>
                    <el-input v-model="searchFrom[f.model]"></el-input>
                  </template>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24" class="one_2txt">
              <el-col :span="24" class="btn">
                <el-button type="primary" size="mini" @click="search">查询</el-button>
                <el-button size="mini" @click="clearSearch">清空</el-button>
              </el-col>
            </el-col>
          </el-form>
        </el-col>
      </el-col>

      <el-col :span="24">
        <data-table :fields="fields" :opera="opera" :data="list" :total="total" @edit="toEdit" @material="toMaterial"> </data-table>
      </el-col>
    </el-row>
    <el-dialog title="培训师信息" :close-on-click-modal="false" :visible.sync="dialog" center :destroy-on-close="true" @closed="toClose">
      <view-form :fields="getFormField()" :data="form" labelWidth="130px"> </view-form>
    </el-dialog>
    <el-dialog title="管理人电子资料" :close-on-click-modal="false" :visible.sync="mDialog" center :destroy-on-close="true" @closed="toClose">
      <m-upload :basic_id="form.id" :uri="`/files/baoan/company_teacher_${form.id}_material/upload`" :noUpload="true"></m-upload>
    </el-dialog>
  </div>
</template>

<script>
const _ = require('lodash');
import mUpload from './util/m-upload.vue';
import viewForm from './util/view-form.vue';
const { nation, gender } = require('@common/src/layout/deploy/dict');
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('company_teachers');
export default {
  name: 'trainer',
  props: {
    title: { type: String },
  },
  components: { mUpload, viewForm },
  data: function () {
    return {
      dialog: false,
      mDialog: false,
      searchFrom: {},
      searchFields: [
        [
          { label: '姓名', model: 'name', span: 8 },
          { label: '公民身份证号码', model: 'card', span: 8 },
          { label: '性别', model: 'gender', span: 8, type: 'select', list: 'genderList' },
        ],
      ],
      list: [],
      total: 0,
      fields: [
        { label: '姓名', model: 'name', sort: 1 },
        { label: '身份证号码', model: 'card', options: { maxLength: 18 }, sort: 2 },
        { label: '民族', model: 'nation', type: 'select', list: 'nationList', sort: 3 },
        { label: '性别', model: 'gender', type: 'select', list: 'genderList', sort: 4 },
        { label: '出生日期', model: 'birth', type: 'date', sort: 5 },
        { label: '联系电话', model: 'phone', sort: 6 },
        { label: '学历', model: 'education', sort: 7 },
        { label: '联系电话', model: 'phone', sort: 8 },
      ],
      formFields: [
        { label: '户籍地省市县', model: 'household', sort: 9 },
        { label: '保安职业等级代码', model: 'exam_grade', type: 'select', list: 'codeList', sort: 10 },
        { label: '保安员证编号', model: 'baoan_num', sort: 11 },
        { label: '保安员证发证日期', model: 'baoan_cert_date', type: 'date', sort: 12 },
        {
          label: '相关工作经历',
          model: 'work',
          type: 'textarea',
          options: { autosize: { minRows: 4, maxRows: 8, maxlength: '1000', 'show-word-limit': true } },
          sort: 13,
        },
      ],
      form: {},
      opera: [
        { label: '详情', method: 'edit' },
        { label: '资料管理', method: 'material' },
        // { label: '删除', type: 'danger', method: 'delete', confirm: true },
      ],
      nationList: nation,
      codeList: ['不知道'],
      genderList: gender,
    };
  },
  mounted() {
    this.search();
  },
  methods: {
    ...mapActions(['query', 'fetch', 'create', 'update']),
    async search({ skip, limit } = {}) {
      const condition = _.cloneDeep(this.searchFrom);
      const res = await this.query({ skip, limit, ...condition, company_id: this.id });
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
        this.$set(this, `total`, res.total);
      }
    },
    async toEdit({ data }) {
      if (!data.id) {
        this.$message.error('未找到该数据的标识,请检查数据是否正确');
        return;
      }
      const res = await this.fetch({ id: data.id });
      if (this.$checkRes(res, null, res.errmsg || '未找到数据')) {
        this.$set(this, `form`, res.data);
      }
      this.dialog = true;
    },
    getFormField() {
      const dup1 = _.cloneDeep(this.fields);
      const dup2 = _.cloneDeep(this.formFields);
      let fields = [...dup1, ...dup2];
      fields = _.orderBy(fields, ['sort'], ['asc']);
      return fields;
    },
    clearSearch() {
      this.$set(this, `searchFrom`, {});
    },
    getList(listName) {
      return _.get(this, listName, []);
    },
    toMaterial({ data }) {
      this.$set(this, 'form', data);
      this.mDialog = true;
    },
    toClose() {
      this.$set(this, `form`, {});
    },
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
  },
};
</script>

<style lang="less" scoped>
.one {
  .one_1 {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ccc;
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: bold;
  }
  .one_2 {
    .one_2txt {
      border: 1px solid #ccc;
      /deep/.el-form-item {
        margin: 0;
      }
      /deep/.el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: 100%;
      }
      /deep/.el-select {
        width: 100%;
      }
      .btn {
        text-align: right;
        padding: 5px 5px;
      }
    }
  }
}
</style>
