<!--
 * @Author: Liugh
 * @Date: 2021-05-17 14:52:53
 * @LastEditTime: 2021-05-18 14:41:23
 * @LastEditors: Do not edit
 * @Description: 
-->
<template>
  <main class="user-attributes">
    <!-- 搜索项 -->
    <search-bar ref="searchbar" :conditionForm="conditionForm" @submitSearch="receiveSearch"></search-bar>
    <!-- 操作栏 -->
    <operate-bar :pageOptList="pageOptList" @submitPageOpt="receviceOpt">
      <dg-button type="primary" @click="receviceOpt('同步')" icon="el-icon-refresh" v-permission="'QXGL_SQGL_ZTGL_RYTB'"
        >同步</dg-button
      >
      <dg-button
        type="primary"
        @click="receviceOpt('增量同步')"
        icon="el-icon-refresh"
        v-permission="'QXGL_SQGL_ZTGL_RYZLTB'"
        >增量同步</dg-button
      >
    </operate-bar>
    <!-- 表格 -->
    <new-table ref="table" :tableUrl="tableUrl" :tableHeader="UserTableData" :condition="condition">
      <!-- 单位名称 -->
      <!-- <template #orgName="{ row }">
        <span v-if="row.userType + '' === '30'"></span>
        <span v-else>{{ row.orgName }}</span>
      </template> -->
      <!-- 人员类型 -->
      <template #manType="slotProps">
        <!-- 辅警 20 -->
        <span
          v-if="slotProps.row.userType + '' === '20'"
          class="u-detail__text"
          v-translate="{ code: 'DM_AUXILIARY_TYPE' }"
        >
          {{ slotProps.row.auxiliaryType }}
        </span>
        <!-- 施工人员 30 -->
        <span v-else-if="slotProps.row.userType + '' === '30'" class="u-detail__text"></span>
        <span v-else class="u-detail__text" v-translate="{ code: 'DM_MAN_TYPE' }">
          {{ slotProps.row.manType }}
        </span>
      </template>
      <!-- 警种 -->
      <template #policeCategory="{ row }">
        <span v-if="row.userType + '' === '30'"></span>
        <span v-else class="u-detail__text" v-translate="{ code: 'T_MD_POLICE_TYPE' }">{{ row.policeCategory }}</span>
      </template>
      <dg-table-column label="操作" align="center">
        <template slot-scope="scope">
          <div class="u-table__operation">
            <el-tooltip content="详情" effect="dark" placement="top-end">
              <i class="el-icon-document" @click="handleViewDetail(scope.row)"></i>
            </el-tooltip>
          </div>
        </template>
      </dg-table-column>
    </new-table>
  </main>
</template>

<script>
import newTable from '@/components/new-table';
import { UserTableData, userPropConditionForm } from '../DataConfig';
import { authUserTableUrl } from '@/api/data-auth';
import { userSyncUrl, userAddSyncUrl } from '@/api/sync';
import baseApi from '@/api/jz-base';
import detail from './detail';
import { userImportUrl } from '@/api/import';
import searchBar from '@/components/search-bar';
import operateBar from '@/components/operate-bar';
import { searchOpt, importOpt, syncOpt } from '@/mixins/page-opt';
export default {
  name: 'user-attributes', // 组件名称
  components: { newTable, searchBar, operateBar }, // 注册局部组件
  mixins: [searchOpt, importOpt, syncOpt],
  props: {
    // 接收父组件的数据
  },
  data() {
    // 组件内部参数
    return {
      conditionForm: userPropConditionForm,
      UserTableData,
      tableUrl: authUserTableUrl,
      pageOptList: ['导入'],
      LatestSyncTime: ''
    };
  },
  computed: {}, // 计算属性
  watch: {}, // 侦听器（扩展的计算属性）
  methods: {
    receviceOpt(type) {
      if (type == '导入') {
        this.handleImport(userImportUrl, 'user');
      }  else if (type == '同步') {
        this.handleSync(userSyncUrl);
      } else if (type == '增量同步') {
        this.handleSync(userAddSyncUrl);
      }
    },
    /**
     * @description:详情
     */
    handleViewDetail(row) {
      // const userTypeName = this.userType.find((item) => item.value == row.userType).label;
      const layer = this.$dgLayer({
        title: `详情`,
        shade: [0.4, '#FFF'],
        content: detail,
        props: {
          userInfo: row
        },
        on: {
          success() {
            layer.close(layer.dialogIndex);
          }
        },
        area: ['900px', '600px']
      });
    }
  },
  created() {
    baseApi.fetchEnum('UserTypeEnum').then((res) => {
      this.userType = res.data;
    });
  } // 组件创建完成后
};
</script>
<style lang="scss" scoped>
@import '../index.scss';
</style>
