<template>
  <div id="shareholders">
    <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"> </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 :data="form" :fields="getFormField()" :default_span="12"></view-form>
    </el-dialog>
  </div>
</template>

<script>
const _ = require('lodash');
import viewForm from './util/view-form.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { gender } = require('@common/src/layout/deploy/dict');
const { mapActions } = createNamespacedHelpers('company_shareholders');
export default {
  name: 'shareholders',
  props: {
    title: { type: String },
  },
  components: { viewForm },
  data: function () {
    return {
      dialog: false,
      searchFrom: {},
      searchFields: [
        [
          { label: '股东类型', model: 'stock_type', type: 'select', span: 8, list: 'stockList' },
          { label: '姓名', model: 'name', span: 8 },
          { label: '联系电话', model: 'phone', span: 8 },
        ],
        [
          { label: '证件号码', model: 'card', span: 8 },
          { label: '性别', model: 'gender', span: 8, type: 'select', list: 'genderList' },
          { label: '股东经济类型', model: 'money_type', span: 8 },
        ],
        [
          { label: '现住址省市县', model: 'onhouse_city', span: 8 },
          { label: '所占股份百分比', model: 'shares_num', span: 8 },
          { label: '出资金额', model: 'out_money', span: 8 },
        ],
      ],
      list: [],
      total: 0,
      fields: [
        { label: '股东类型', model: 'stock_type' },
        { label: '姓名', model: 'name' },
        { label: '性别', model: 'gender' },
        { label: '证件号码', model: 'card' },
        { label: '出生日期', model: 'birth' },
        { label: '现住址省市县', model: 'onhouse_city' },
        { label: '联系电话', model: 'phone' },
        { label: '所占股份百分比', model: 'shares_num' },
        { label: '出资金额', model: 'out_money' },
      ],
      formFields: [{ label: '股东经济类型', model: 'money_type' }],
      form: {},
      opera: [
        { label: '详情', method: 'edit' },
        // { label: '删除', type: 'danger', method: 'delete', confirm: true },
      ],
      genderList: gender,
      stockList: ['法人股东'],
    };
  },
  created() {},
  mounted() {
    this.search();
  },
  methods: {
    ...mapActions(['query', 'fetch']),
    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;
    },
    getList(listName) {
      return _.get(this, listName, []);
    },
    clearSearch() {
      this.$set(this, `searchFrom`, {});
    },
    getFormField() {
      const dup1 = _.cloneDeep(this.fields);
      const dup2 = _.cloneDeep(this.formFields);
      return [...dup1, ...dup2];
    },
    toClose() {
      this.$set(this, `form`, {});
    },
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</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>
