<template>
    <!-- 工程管理页面 -->
    <div class="app-container">
        <!-- 表格 -->
        <TableModel
          :formLabel="formLabel"
          :columnsList="columnsList"
          :request-api="queryProjectListApi"
          ref="tableRef"
          @transIdList="getIdList"
        >
            <template slot="btn" slot-scope="{ queryParams }">
                <el-button type="primary" @click="handleAddData()"
                    >新建</el-button
                >
                <el-button @click="handleExportData(exportList, 'base/project/export', '工程清单', queryParams)"
                    >导出</el-button
                >
            </template>
            <template slot="handle" slot-scope="{ data }">
                <el-button
                    type="primary"
                    size="mini"
                    @click="handleEditData(data)"
                    >编辑</el-button
                >
                <el-button
                    type="danger"
                    size="mini"
                    @click="handleDeleteData(data.id, deleteProjectApi)"
                    >删除</el-button
                >
            </template>
            <template slot="isMatch" slot-scope="{ data }">
              {{ data.proId == null ? '不匹配' : '匹配' }}
            </template>
            <template slot="phone" slot-scope="{ data }">
              {{ phoneCrypto(data.phone) }}
            </template>
        </TableModel>

        <!-- 新增以及修改时的弹框 -->
        <DialogModel
            :dialogConfig="dialogConfig"
            @closeDialogOuter="closeDialogOuter"
        >
            <template slot="outerContent">
                <!-- 新增以及修改数据的表单组件 -->
                <FormProject
                    :editParams="editParams"
                    @closeDialog="closeDialog"
                />
            </template>
        </DialogModel>
    </div>
</template>

<script>
import { formLabel, columnsList, dialogConfig } from './config'
import { commonMixin } from '../mixins/common'
import FormProject from './components/form-project'
import { queryProjectListApi, deleteProjectApi } from '@/api/base/project'
export default {
    name: 'ProjectManage',
    methods: {
      queryProjectListApi,
      deleteProjectApi,
      getIdList(idList) {
        this.exportList = idList
      }
    },
    mixins: [commonMixin], // 混入公共方法和数据
    components: {
        FormProject,
    },
    data() {
        return {
            // 搜索区表单配置项
            formLabel,
            // 表格导出id列表
            exportList: undefined,
            // 列表区配置项
            columnsList,
            // 弹框区配置项
            dialogConfig,
            // 新建时弹框标题
            addDialogTitle: '新建工程',
            // 修改时弹框标题
            editDialogTitle: '修改工程',
        }
    },
}
</script>
