<template lang="pug">
    el-dialog( :close-on-click-modal='false', :visible.sync='visible' :append-to-body='true')
        div(slot='title')
            span().title-bold 应急团队详情
        el-form(:model='dataForm', ref='dataForm',  label-width='100px')
            el-row(:gutter='20')
                el-col(:span='12')
                    el-form-item(label="姓名:", prop="name")
                        el-input.mywidth(readonly  v-model="dataForm.name" placeholder=" " clearable)
                el-col(:span='12')
                    el-form-item(label='性别:', prop='gender')
                        el-radio-group.my_radio(disabled v-model='dataForm.gender')
                            el-radio(:label='1') 男
                            el-radio(:label='0') 女
            el-row(:gutter='20')
                el-col(:span='12')
                    el-form-item(label='出生日期:', prop='birthday')
                        el-date-picker.mywidth(readonly  style='width:100%;' v-model='dataForm.birthday', type="date", placeholder=' ')
                el-col(:span='12')
                    el-form-item(label='政治面貌:', prop='politicCountenance')
                        el-input.mywidth(readonly v-model="dataForm.politicCountenances")
                        //- el-select(style='width:100%;'  v-model="dataForm.politicCountenance" placeholder=" " clearable)
                            el-option(v-for="(item, index) in politicCountenances" :key='index' :label="item.name" :value="item.id")
            el-row(:gutter='20')
                el-col(:span='12')
                    el-form-item(label='民族:', prop='nationName')
                        el-input.mywidth(readonly v-model='dataForm.nationName')
                        //- el-select(readonly  style='width:100%;'  v-model="dataForm.nation" placeholder=" " clearable)
                            el-option(v-for="(item, index) in nations" :key='index' :label="item.name" :value="item.id")
                el-col(:span='12')
                    el-form-item(label='证件类型:' prop='cardTypeName')
                        el-input.mywidth(readonly style='width:100%' v-model='dataForm.cardTypeName')
                        //- el-select(readonly  style='width:100%;'  v-model="dataForm.cardType" placeholder=" " clearable)
                            el-option(v-for="(item, index) in cardTypeList" :key='index' :label="item.name" :value="item.id")
            el-row(:gutter='20')
                el-col(:span='12')
                    el-form-item(label='证件号码:', prop='cardNumber',)
                        el-input.mywidth(readonly  v-model='dataForm.cardNumber', placeholder=' ')
                el-col(:span='12')
                    el-form-item(label='移动电话:', prop='mobile')
                        el-input.mywidth(readonly  v-model='dataForm.mobile', placeholder=' ')
            el-row(:gutter='20')
                el-col(:span='24')
                    el-form-item(label='人员专长:', prop='types')
                        el-checkbox-group.my_checkbox(disabled v-model="dataForm.types" placeholder=" " clearable)
                            el-checkbox(v-for="(item, index) in types" :key="index" :label="item.id") {{item.name}}
                el-col(:span='24')
                    el-form-item(label='人员类型:', prop='personnelType')
                        el-radio-group.my_radio(disabled  v-model='dataForm.personnelType')
                            el-radio(:label='1') 应急专家
                            el-radio(:label='2') 应急人员
                el-col(:span='24')
                    el-form-item(label='人员说明:', prop='skill')
                        el-input.mywidth(readonly  type="textarea" :rows="4" resize='none'  v-model='dataForm.skill', placeholder=' ' clearable)
                el-col(:span='24')
                    el-form-item(label='状态:', prop='status')
                        el-radio-group.my_radio(disabled v-model='dataForm.status')
                            el-radio(:label='1') 正常
                            el-radio(:label='0') 禁用
        span.dialog-footer(slot='footer')
            el-button(type='primary' size='medium' @click='visible = false') 关闭
</template>

<script>
    export default {
        data() {
            return {
                nations: [],
                types: [
                    { id: '1', name: '医学救援' },
                    { id: '2', name: '消防' },
                    { id: '3', name: '抢险' },
                    { id: '4', name: '防爆' },
                    { id: '5', name: '谈判' },
                    { id: '6', name: '人道救援' }
                ],
                cardTypeList: [
                    { id: '1', name: '身份证' },
                    { id: '2', name: '工作证' },
                    { id: '3', name: '户籍证' },
                    { id: '4', name: '护照' }
                ],
                dataList: [],
                dataListLoading: false,
                visible: false,
                dataForm: {},
                politicCountenances: [
                    { id: '1', name: '共青团员' },
                    { id: '2', name: '预备党员' },
                    { id: '3', name: '党员' },
                    { id: '4', name: '群众' },
                    { id: '5', name: '其它' }
                ]
            }
        },
        methods: {
            init(row) {
                this.getNation()
                // this.getAllTypes()
                // this.getCardTypeList()
                this.visible = true
                this.getData(row.id)
                //- console.log(row)
            },
            //转化参数
            transition(value, pool) {
                let result = value
                 pool.forEach(item => {
                    if (item.id === value) {
                         result = item.name
                    }
                })
                return result
            },
            //查询基本信息
            getData(id) {
                if (id) {
                    this.$http({
                        url: this.$http.adornUrl(`/emProficient/getId/` + id),
                        method: 'get'
                    }).then(data => {
                        let da = data.bean
                        da.types = da.types.split(',')
                        da.politicCountenances = this.transition(da.politicCountenance, this.politicCountenances)
                        da.cardTypeName = this.transition(da.cardType, this.cardTypeList)
                        this.dataForm = da
                        //- console.log('dataForm', this.dataForm)
                    })
                } else {
                    this.show = true
                    this.dataForm = {
                        name: '',
                        gender: '',
                        birthday: '',
                        politicCountenance: '',
                        nation: '',
                        cardNumber: '',
                        mobile: '',
                        types: [],
                        skill: '',
                        status: 1,
                        personnelType: ''
                    }
                }
            },
            //获取证件类型
            getCardTypeList() {
                this.$http({
                    url: this.$http.adornUrl('/sysDictionary/getCardTypeList'),
                    method: 'get'
                }).then(data => {
                    if (data && data.code === 0) {
                        this.cardTypeList = data.list
                    }
                })
            },
            //获取人员专长
            getAllTypes() {
                this.$http({
                    url: this.$http.adornUrl('/emPerson/getAllTypes'),
                    method: 'get',
                    params: { stationId: localStorage.getItem('stationId') }
                }).then(data => {
                    // console.log('data', data)
                    if (data && data.code === 0) {
                        this.types = data.result
                    }
                })
            },
            //获取民族信息
            getNation() {
                this.$http({
                    url: this.$http.adornUrl('/emPerson/getAllNation'),
                    method: 'get'
                }).then(data => {
                    // console.log("data", data)
                    if (data && data.code === 0) {
                        this.nations = data.result
                    }
                })
            }
        }
    }
</script>
<style lang="scss">
    .el-table__header {
        width: 100% !important;
    }

    .el-table__body {
        width: 100% !important;
    }
</style>
