<template>
  <div class="ele-body">
    <el-card shadow="never" v-loading="loading">
      <search-table @search="reload" :typeOptions="typeOptions"></search-table>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        cache-key="systemRoleTable"
        :pageSize="20"
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <el-button
            v-if="$hasPermission('eom:aftersalesfaultknowledgebase:save')"
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="openAdd('', 'add')"
            >新建</el-button
          >
        </template>
        <template v-slot:attachments="{ row }">
          <fileMain type="view" v-model="row.attachments"></fileMain>
        </template>
        <template v-slot:code="{ row }">
          <el-link
            type="primary"
            :underline="false"
            @click="openEdit(row, 'view')"
            >{{ row.code }}</el-link
          >
        </template>
        <!-- eom:aftersalesfaultknowledgebase:delete -->
        <template v-slot:action="{ row }">
          <!-- v-if="!row.workId" -->
          <el-link
            v-if="!row.workId && $hasPermission('eom:aftersalesfaultknowledgebase:update')"
            type="primary"
            :underline="false"
            @click="openEdit(row, 'edit')"
            >修改</el-link
          >
          <el-popconfirm
            v-if="$hasPermission('eom:aftersalesfaultknowledgebase:delete')"
            class="ele-action"
            title="确定要删除当前故障吗？"
            @confirm="deleteFault(row)"
          >
            <template v-slot:reference>
              <el-link type="danger" icon="el-icon-delete" :underline="false"
                >删除</el-link
              >
            </template>
          </el-popconfirm>
        </template>
      </ele-pro-table>
    </el-card>
    <!-- 新建或编辑弹窗 -->
    <knowledeDialog ref="knowledeDialog" @refresh="reload" />
    <EditDialog ref="editDialog" @refresh="reload" :typeOptions="typeOptions" />
  </div>
</template>
<script>
  import searchTable from './components/searchTable.vue';
  import {
    knowledgePage,
    faultDelete
  } from '@/api/salesServiceManagement/index';
  import knowledeDialog from './components/knowledeDialog.vue';
  import EditDialog from './components/editDialog.vue';
  // import fileMain from '@/components/addDoc/index.vue';
  // import dictMixins from '@/mixins/dictMixins';
  export default {
    //   mixins: [dictMixins],
    components: {
      // search
      knowledeDialog,
      EditDialog,
      // fileMain,
      searchTable
    },
    data() {
      return {
        // 加载状态
        loading: false,
        typeOptions: [
          { label: '维修', value: '1' },
          { label: '保养', value: '2' },
          { label: '安装', value: '3' }
        ]
      };
    },
    computed: {
      columns() {
        return [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            slot: 'code',
            prop: 'code',
            label: '编码',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'type',
            label: '故障类型',
            align: 'center',
            showOverflowTooltip: true,
            formatter: (row) => {
              return this.typeOptions.find((item) => item.value == row.type)
                ?.label;
            }
          },
          {
            prop: 'faultPhenomenon',
            label: '故障现象',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'faultReason',
            label: '故障原因',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'maintenanceProcess',
            label: '维修过程',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            columnKey: 'attachments',
            prop: 'attachments',
            label: '附件',
            align: 'center',
            slot: 'attachments',
            showOverflowTooltip: true
          },
          {
            columnKey: 'action',
            slot: 'action',
            label: '操作',
            align: 'center',
            width: 180,
            resizable: false,
            showOverflowTooltip: true
          }
        ];
      }
    },
    created() {},
    methods: {
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        return knowledgePage({ pageNum: page, size: limit, ...where });
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where });
      },

      // 打开详情/修改
      openEdit(row, type) {
        this.$refs.editDialog.init(row, type);
      },
      // 打开新增
      openAdd() {
        this.$refs.knowledeDialog.init();
      },
      // 删除
      deleteFault(row) {
        faultDelete([row.id]).then((res) => {
          if (res) {
            this.$message.success('操作成功!');
            this.reload();
          }
        });
      }
    }
  };
</script>

<style lang="scss" scoped></style>
