import * as API from 'api/virtual/companies';
import * as AccountAPI from 'api/virtual/company_accounts';

export default {
  name: 'Companies',
  components: {
    UiEdit: resolve => require(['views/virtual/company_accounts/edit'], resolve)
  },
  data() {
    return {
      params: {
        name: '',
        accounts: {
          username: ''
        }
      },
      list_data: null,
      editObj: {
        show: false,
        data: null
      },
      search: {
        show: false
      },
      table_titles: [
        {
          title: 'ID',
          key: 'id',
          width: 80
        },
        {
          title: '企业名称',
          key: 'name',
          width: 300
        },
        {
          title: '用户名',
          key: '',
          render: (h, { row, column, index }) => {
            if (row.accounts && row.accounts.length) {
              return h('span', row.accounts[0].username);
            }
          }
        },
        {
          title: '电话',
          key: '',
          render: (h, { row, column, index }) => {
            if (row.accounts && row.accounts.length) {
              return h('span', row.accounts[0].mobile);
            }
          }
        },
        {
          title: '昵称',
          key: '',
          render: (h, { row, column, index }) => {
            if (row.accounts && row.accounts.length) {
              return h('span', row.accounts[0].nickname);
            }
          }
        },
        {
          title: '创建时间',
          key: 'created_at',
          width: 170
        },
        {
          title: '操作',
          key: 'action',
          render: (h, {
            row,
            column,
            index
          }) => {
            let html = [];

            if (this.haveJurisdiction('create')) {
              if (!row.accounts || !row.accounts.length) {
                html.push(h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small',
                    disabled: false,
                    icon: 'md-add'
                  },
                  class: ['btn'],
                  on: {
                    click: (event) => {
                      this.openEdit(true, row);
                    }
                  }
                }, '创建'));
              }
            }

            if (this.haveJurisdiction('update')) {
              if (row.accounts && row.accounts.length) {
                html.push(h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small',
                    disabled: false,
                    icon: 'md-create'
                  },
                  class: ['btn'],
                  on: {
                    click: (event) => {
                      this.openEdit(true, row);
                    }
                  }
                }, '编辑'));
              }
            }

            if (this.haveJurisdiction('destroy')) {
              if (row.accounts && row.accounts.length) {
                html.push(h('Button', {
                  props: {
                    type: 'error',
                    size: 'small',
                    disabled: false,
                    icon: 'md-trash'
                  },
                  class: ['btn'],
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '提示',
                        content: '删除后该账号不可使用，请谨慎操作',
                        onOk: () => {
                          AccountAPI.destroy({
                            ids: row.accounts[0].id
                          }).then(res => {
                            if (res.code == 0) {
                              this.$Message.success('删除成功');
                              this.request();
                            }
                          });
                        }
                      });
                    }
                  }
                }, '删除'));
              }
            }

            if (html.length) {
              return h('div', html);
            }
          }
        }
      ]
    };
  },
  created() {
    this.index(1);
  },
  methods: {
    /**
     * [index 列表]
     * @param  {Number} page [description]
     * @return {[type]}      [description]
     */
    index(page = 1) {
      let data = this.searchDataHandle(this.params, { page }, { 'with': 'accounts', 'orderBy': 'id', 'sortedBy': 'asc' });

      this.isShowLoading(true);
      API.index(data).then(res => {
        this.isShowLoading(false);
        if (res.code == 0) {
          this.list_data = res.data;
        }
      }).catch(() => {
        this.isShowLoading(false);
      });
    },

    /**
     * [openEdit 打开编辑弹窗]
     * @return {[type]} [description]
     */
    openEdit(bool, row = null) {
      let isUpdate = false;
      let data = {
        id: 0,
        company_id: row.id
      };

      if (row && row.accounts && row.accounts.length) {
        data = Object.assign(data, row.accounts[0]);
        isUpdate = true;
      }

      this.editObj = {
        show: bool,
        isUpdate,
        data
      };
    },

    /**
     * [request 刷新]
     * @return {[type]} [description]
     */
    request() {
      const result = this.list_data;
      let page = result.current_page;

      if (this.list_data.data.length == 1) {
        page = this.returnPage(result.total, result.current_page, result.per_page);
      }

      this.index(page);
    },

    resetSearch() {
      this.params.name = '';
      this.params.accounts.username = '';
      this.index(1);
    }
  }
};
