<template>
    <!-- 单位选择弹窗 -->
    <div>
        <el-dialog
            custom-class="bbsl-location-dialog"
            top="15vh"
            :close-on-click-modal="false"
            :title="title"
            :visible.sync="showCompanyDia"
            width="70%"
            :before-close="close"
        >
            <el-table
                :data="tableData"
                :header-cell-style="{'text-align': 'center'}"
                :cell-style="{'text-align': 'center'}"
                @row-click="handleEdit"
            >
                <el-table-column
                    fixed
                    type="index"
                    width="55"
                    label="序号"
                ></el-table-column>
                <el-table-column
                    min-width="160"
                    fixed
                    sortable
                    prop="companyShortName"
                    label="单位简称"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    fixed
                    min-width="160"
                    sortable
                    prop="companyName"
                    label="单位名称"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    sortable
                    prop="companyCode"
                    label="单位编码"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    min-width="300"
                    sortable
                    prop="companyTypeShow"
                    label="单位类型"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">
                        <el-tag
                            class="type-tag"
                            v-for="(type, index) in scope.row.companyTypeShow"
                            :key="index"
                            type="success"
                            >{{ type }}</el-tag
                        >
                    </template>
                </el-table-column>
                <el-table-column
                    prop="companyAddress"
                    label="单位地址"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    sortable
                    prop="companyMan"
                    label="联系人"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    sortable
                    prop="companyTel"
                    label="联系电话"
                    show-overflow-tooltip
                ></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import SpareCompany from '@/api/device/SpareManage.js'
import dictUtils from '@/components/dict/DictSelectUtils.js'
export default {
    name: 'CompanyModal',
    props: {
        title: {
            type: String,
            default: '选择单位', // 弹窗标题 
        },
        companyType: {
            type: String,
            default: '4', // 单位类型 
        },
    },
    components: {},
    data() {
        return {
            showCompanyDia: false,
            tableData: [], //弹窗列表数据
        }
    },
    mounted() {
        this.companyTypeList = dictUtils.getDictItemsFromCache('dwlx')
        this.getDateList()
    },
    methods: {
        formatData(rows) {
            rows.forEach((row) => {
                let types = row.companyType.split(',')
                let temp = types.map((item) => {
                    let name
                    this.companyTypeList.forEach((dictItem) => {
                        if (dictItem.value == item) {
                            name = dictItem.name
                        }
                    })
                    return name
                })
                row.companyTypeShow = temp
            })
            return rows
        },
        // 弹窗打开
        open() {
            this.showCompanyDia = true
        },
        // 弹窗关闭
        close() {
            this.showCompanyDia = false
        },
        // 点击获取一行数据返回
        handleEdit(row) {
            this.$emit('setCompany', row)
            this.close()
        },
        // 获取数据
        getDateList() {
            this.tableData = []
            let params = {
                companyType: this.companyType,
            }
            SpareCompany.findCompanyList(params, (res) => {
                if (typeof res == 'object' && res) {
                    this.tableData = this.formatData(res)
                }
            })
        },
    },
}
</script>
<style lang="scss" scoped>
.type-tag{
    margin: 0 2px;
}
</style>
