<template>
    <Page>
        <div class="salesman">
            <MarketTree @selectUser="selectUser" />
            <div style='flex: 1'>
                <el-descriptions title="用户基本信息" class="mb10" :column="2" border>
                    <template slot="extra">
                        <el-button type="primary" size="small" icon="el-icon-plus" @click="getMarketEnginner">
                            添加工程
                        </el-button>
                    </template>
                    <el-descriptions-item>
                        <template slot="label">名称</template>
                        {{ user.name }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">手机号</template>
                        {{ user.phone }}
                    </el-descriptions-item>
                </el-descriptions>
                <el-table
                    stripe
                    style="width: 100%"
                    :data="tableData"
                    height='calc(100vh - 225px)'
                    border
                    highlight-current-row
                    v-loading="loading"
                    header-cell-class-name="table_header"
                >
                    <el-table-column prop="engineerName" label="工程名称"></el-table-column>
                    <el-table-column label="操作" width="240px" align="center">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="danger"
                                icon="el-icon-delete"
                                @click="deleteEngineering(scope.row)"
                            >
                                移除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-dialog title="添加工程" :visible.sync="dialogFormVisible" width="30%" class="hhgjk">
                <div style="display: flex; align-items: center" class="mb10">
                    <el-input
                        size="mini"
                        v-model="engineerName"
                        autocomplete="off"
                        placeholder="请输入工程名称"
                    ></el-input>
                    <el-button size="mini" class="ml10" type="primary" @click="engineerName = ''">重置</el-button>
                </div>
                <el-table
                    stripe
                    :cell-style="{ textAlign: 'center' }"
                    :header-cell-style="{ textAlign: 'center' }"
                    style="width: 100%"
                    :data="filterTableData2"
                    height="60vh"
                    border
                    v-loading="loading"
                    header-cell-class-name="table_header"
                    algin="center"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="name" label="工程名称"></el-table-column>
                </el-table>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addMarketData">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </Page>
</template>
<script>
import MarketTree from '../components/marketTree'
import { getMarketData, getMarketEnginner, removeMarketData, addMarketData } from '@/api/app/user'

export default {
    name: 'GovernDeviceSalesman',
    components: { MarketTree },
    data() {
        return {
            loading: false,
            tabHeight: 'calc(100vh - 210px)',
            defaultCheckedKeys: [],
            timeout: null,
            tableData: [],
            tableData2: [],
            dialogFormVisible: false,
            user: {},
            selectArr: [],
            engineerName: ''
        }
    },
    computed: {
        vth() {
            return window.sessionStorage.getItem('appheight') - 100
        },
        filterTableData2() {
            return this.tableData2.filter(item => {
                return item.name.includes(this.engineerName)
            })
        }
    },
    created() {},
    mounted() {},
    methods: {
        handleSelectionChange(val) {
            this.selectArr = val
        },
        addMarketData() {
            let arr = this.tableData.map(item => {
                return {
                    engineerId: item.engineerId,
                    userId: this.user.id
                }
            })
            arr.push(
                ...this.selectArr.map(item => {
                    return {
                        engineerId: item.id,
                        userId: this.user.id
                    }
                })
            )
            addMarketData(arr).then(res => {
                this.$message({
                    message: '操作成功',
                    type: 'success'
                })
                this.getMarketData()
                this.dialogFormVisible = false
            })
        },
        deleteEngineering(row) {
            console.log(row)
            removeMarketData(row.id).then(res => {
                this.$message({
                    message: '删除成功',
                    type: 'success'
                })
                this.getMarketData()
                this.dialogFormVisible = false
            })
        },
        selectUser(data) {
            this.selectArr = []
            this.user = data
            this.getMarketData()
        },
        getMarketData() {
            getMarketData(this.user.id).then(res => {
                this.tableData = res.data
            })
        },
        getMarketEnginner() {
            this.engineerName = ''
            getMarketEnginner(this.user.id).then(res => {
                this.tableData2 = res.data
                this.dialogFormVisible = true
            })
        }
    }
}
</script>
<style lang="scss">
.salesman {
    display: flex;
    .el-descriptions--small.is-bordered .el-descriptions-item__cell {
        padding: 8px 10px !important;
    }
}
</style>
