<!--
 * @Author: 一日看尽长安花
 * @since: 2019-10-12 15:43:18
 * @LastEditTime: 2020-04-03 20:52:21
 * @LastEditors: 一日看尽长安花
 * @Description:
 -->
<template>
  <div>
    <general-page
      :metadata="metadata"
      :tabledata.sync="tabledata"
      :loading="loading"
      :search-method="searchMethod"
      @pagination="pagination"
      @filter-search="filterSearch"
      @create-data="createData"
      @delete-data="deleteData"
      @update-data="updateData"
    >
      <!-- 往搜索栏中添加搜索条件 -->
      <template #filter-condition="{filterData:filterData}">
        <div class="filter-item-container">
          <el-form-item>
            <el-cascader
              v-model="filterData['orgId']"
              :props="orgIdCascaderProps"
              :options="orgIdCascaderProps.options"
              :show-all-levels="false"
              clearable
              placeholder="部门"
            ></el-cascader>
          </el-form-item>
        </div>
        <div class="filter-item-container">
          <el-form-item>
            <el-cascader
              v-model="filterData['jobType']"
              :props="jobTypeCascaderProps"
              :options="jobTypeCascaderProps.options"
              clearable
              placeholder="岗位/职务"
            ></el-cascader>
          </el-form-item>
        </div>
        <div class="filter-item-container">
          <el-form-item>
            <el-cascader
              v-model="filterData['state']"
              :props="stateCascaderProps"
              :options="stateCascaderProps.options"
              clearable
              placeholder="状态"
            ></el-cascader>
          </el-form-item>
        </div>
      </template>
      <!-- 往操作按钮组中添加自定义操作按钮 -->
      <template #operation-btn-group>
        <el-button
          class="filter-item"
          style="margin-left: 10px;"
          type="primary"
          size="mini"
          icon="el-icon-edit"
          @click="editUserRoles"
        >
          操作角色
        </el-button>
        <el-button
          class="filter-item"
          style="margin-left: 10px;"
          type="primary"
          icon="el-icon-edit"
          size="mini"
          @click="exportUserExcel"
        >
          导出Excel
        </el-button>
      </template>
      <!-- 编辑弹窗的插槽 -->
      <template #dialog-form-item="{dialogData:dialogData}">
        <el-form-item key="orgIdKey" label="所在机构" prop="org_id">
          <el-cascader
            v-model="dialogData['org_id_value']"
            :props="orgIdCascaderProps"
            :options="orgIdCascaderProps.options"
            :show-all-levels="false"
            clearable
            placeholder="所在机构"
            class="sp-form-item"
          ></el-cascader>
        </el-form-item>
        <el-form-item key="jobTypeKey" label="岗位职务" prop="job_type">
          <el-cascader
            v-model="dialogData['job_type_value']"
            :props="jobTypeCascaderProps"
            :options="jobTypeCascaderProps.options"
            :show-all-levels="false"
            clearable
            placeholder="岗位职务"
            class="sp-form-item"
          ></el-cascader>
        </el-form-item>
        <el-form-item key="stateKey" label="用户状态" prop="state">
          <el-cascader
            v-model="dialogData['state_value']"
            :props="stateCascaderProps"
            :options="stateCascaderProps.options"
            :show-all-levels="false"
            clearable
            placeholder="用户状态"
            class="sp-form-item"
          ></el-cascader>
        </el-form-item>

        <el-form-item key="fileKey" label="上传文档" prop="file">
          <file-upload
            ref="fileUpload"
            :file-batch-id="dialogData.attachment_id"
            :on-success="onUploadSuccess"
          >
            <el-button slot="trigger" size="small" type="primary">
              选取文件
            </el-button>
            <el-button
              style="margin-left: 10px;"
              size="small"
              type="success"
              @click="submitUpload"
            >
              上传到服务器
            </el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </file-upload>
        </el-form-item>
      </template>
    </general-page>
  </div>
</template>

<script>
import GeneralPage from '@/components/GeneralPage';
import FileUpload from '@/components/Upload/FileUpload';

import {
  users,
  usersMetadata,
  saveUserData,
  updateUserData,
  deleteUserData,
  exportExcelUserData
} from '@/api/user';
import { download } from '@/api/file';
import { immaditeLoadDicts } from '@/api/dict';
import { immaditeLoadOrgs } from '@/api/org';
import { layzyLoadDictTree, handleCascaderValue } from '@/services/dict';
import { layzyLoadOrgTree } from '@/services/org';

export default {
  name: 'CoreUsersView',
  components: { GeneralPage, FileUpload },
  props: {},
  data() {
    return {
      // 整个页面的数据
      metadata: {},
      tabledata: {
        data: [],
        total: 0
      },
      loading: true,
      orgIdCascaderProps: {
        checkStrictly: true,
        options: []
      },
      jobTypeCascaderProps: {
        checkStrictly: true,
        options: []
      },
      stateCascaderProps: {
        checkStrictly: true,
        options: []
      }
    };
  },
  computed: {},
  mounted() {
    immaditeLoadDicts({
      parentId: 0,
      type: 'job_type'
    }).then(result => {
      const { code, data } = { ...result };
      this.jobTypeCascaderProps.options = data;
    });
    immaditeLoadDicts({
      parentId: 0,
      type: 'user_state'
    }).then(result => {
      const { code, data } = { ...result };
      this.stateCascaderProps.options = data;
    });

    immaditeLoadOrgs({
      parentId: 0
    }).then(result => {
      const { code, data } = { ...result };
      this.orgIdCascaderProps.options = data;
    });
    this.obtainMetadata();
    this.obtainData({ page: 1, limit: 10 });
  },
  methods: {
    obtainMetadata() {
      this.loading = true;
      usersMetadata()
        .then(result => {
          const { code, data } = { ...result };
          this.metadata = Object.assign({}, data);
        })
        .catch(err => {})
        .finally(() => {
          this.loading = false;
        });
    },
    obtainData(queryParams) {
      this.loading = true;
      queryParams = handleCascaderValue(queryParams, 'orgId', ['org_id']);
      queryParams = handleCascaderValue(queryParams, 'jobType', [
        'job_type0',
        'job_type1'
      ]);
      queryParams = handleCascaderValue(queryParams, 'state', ['state']);
      const _lodash = this.$lodash;
      users(queryParams)
        .then(result => {
          const { code, data } = { ...result };
          /**
           * 这一步是因为编辑弹窗在创建时，v-model不能使用json多级获取，不然会报错；
           * 所以将其处理为一级节点
           */
          for (let i in result.data) {
            let item = result.data[i];
            item['org_id_value'] = _lodash.get(item, 'org.id');
            item['state_value'] = _lodash.get(item, 'state.value');
            if (item['job_type0']) {
              item['job_type_value'] = _lodash.get(item, 'job_type0.value');
            }
            if (item['job_type1']) {
              item['job_type_value'] = _lodash.get(item, 'job_type1.value');
            }
          }
          this.tabledata = Object.assign({}, result);
        })
        .catch(err => {})
        .finally(() => {
          this.loading = false;
        });
    },
    pagination(queryParams) {
      this.obtainData(queryParams);
    },
    searchMethod(search, tableData) {
      return tableData.filter(
        d => !search || d.name.toLowerCase().includes(search.toLowerCase())
      );
    },
    filterSearch(queryParams) {
      this.obtainData(Object.assign({ page: 1, limit: 10 }, queryParams));
    },
    createData(dialogData) {
      dialogData = this.handleEditorDataObject(dialogData, 'org_id_value', {
        org_id: 'org.id'
      });
      dialogData = this.handleEditorDataObject(dialogData, 'state_value', {
        state: 'state.value'
      });
      dialogData = this.handleEditorDataObject(dialogData, 'job_type_value', {
        job_type0: 'job_type0.value',
        job_type1: 'job_type1.value'
      });
      const Vue = this;
      saveUserData(dialogData)
        .then(result => {
          Vue.$children[0].$refs.searchPaneGP.$refs.searchButton.$emit('click');
          this.$nextTick(() => {
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            });
          });
        })
        .catch(err => {
          this.$nextTick(() => {
            this.$notify({
              title: '失败',
              message: '创建失败',
              type: 'error',
              duration: 2000
            });
          });
        });
    },
    updateData(dialogData) {
      dialogData = this.handleEditorDataObject(dialogData, 'org_id_value', {
        org_id: 'org.id'
      });
      dialogData = this.handleEditorDataObject(dialogData, 'state_value', {
        state: 'state.value'
      });
      dialogData = this.handleEditorDataObject(dialogData, 'job_type_value', {
        job_type0: 'job_type0.value',
        job_type1: 'job_type1.value'
      });
      const Vue = this;
      updateUserData(dialogData)
        .then(result => {
          /** 刷新数据表格数据，懒得重新写个方法挂载在组件上了 */
          Vue.$children[0].$refs.searchPaneGP.$refs.searchButton.$emit('click');
          /**
           *  将回调延迟到下次 DOM 更新循环之后执行。
           * 而数据更新就代表dom更新，所以如果创建成功，数据就会更新
           */
          this.$nextTick(() => {
            this.$notify({
              title: '成功',
              message: '修改成功1',
              type: 'success',
              duration: 2000
            });
          });
        })
        .catch(err => {
          this.$nextTick(() => {
            this.$notify({
              title: '失败',
              message: '修改用户失败',
              type: 'error',
              duration: 2000
            });
          });
        });
    },
    handleEditorDataObject(dialogData, arrayKey, keyPathMap) {
      let _valType = Object.prototype.toString.call(dialogData[arrayKey]);
      if (_valType === '[object Array]') {
        dialogData = handleCascaderValue(
          dialogData,
          arrayKey,
          this.$lodash.keys(keyPathMap)
        );
      } else {
        for (let key in keyPathMap) {
          dialogData[key] = this.$lodash.get(dialogData, keyPathMap[key]);
        }
      }
      return dialogData;
    },
    deleteData(index, row) {
      /**todo  补上对话框 */
      const Vue = this;
      deleteUserData({ ids: [row.id] })
        .then(result => {
          /** 刷新数据表格数据，懒得重新写个方法挂载在组件上了 */
          Vue.$children[0].$refs.searchPaneGP.$refs.searchButton.$emit('click');
          /**
           *  将回调延迟到下次 DOM 更新循环之后执行。
           * 而数据更新就代表dom更新，所以如果创建成功，数据就会更新
           */
          this.$nextTick(() => {
            this.$notify({
              title: '成功',
              message: '删除用户成功',
              type: 'success',
              duration: 2000
            });
          });
        })
        .catch(err => {
          this.$nextTick(() => {
            this.$notify({
              title: '失败',
              message: '删除用户失败',
              type: 'error',
              duration: 2000
            });
          });
        });
    },
    submitUpload() {
      this.$refs.fileUpload.$refs.upload.submit();
    },
    onUploadSuccess(response, file, fileList) {
      const { code, message, data } = { ...response };
      if (data) {
        this.$children[0].$refs.detailPageGP.$props.dialogData.attachment_id =
          response.data;
      }
    },
    exportUserExcel() {
      let queryParams = this.$lodash.mapValues(
        this.$children[0].$refs.searchPaneGP.$data.filterData
      );
      queryParams = handleCascaderValue(queryParams, 'orgId', ['org_id']);
      queryParams = handleCascaderValue(queryParams, 'jobType', [
        'job_type0',
        'job_type1'
      ]);
      queryParams = handleCascaderValue(queryParams, 'state', ['state']);
      /**
       * 导出Excel文件的两步：
       * 1、通过查询条件由后台生成Excel临时文件，返回临时文件path
       * 2、通过path去下载该文件
       */
      exportExcelUserData(queryParams).then(res => {
        const { code, data, message } = { ...res };
        console.log(`...download path is ${data}`);
        download({ path: data });
      });
    },
    editUserRoles() {
      const _router = this.$router;
      _router.push({ name: 'ManagerUserRole', params: { id: 1 } });
    }
  }
};
</script>
