<style>
    .pictureRmg .avatar-uploader .el-upload {border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;}
    .pictureRmg .avatar-uploader .el-upload:hover {border-color: #409EFF;}
    .pictureRmg .avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;}
    .pictureRmg .avatar {width: 178px;height: 178px;display: block;}
    .pictureRmg .el-form-item__content .el-textarea{width: 217px;}
    .pictureRmg .query-box li label{display: inline-block;min-width: 80px;text-align: right;font-style: normal;margin: 0 20px 0 0;}
    .pictureRmg .addCompany .el-dialog__body{height: 486px;overflow: auto;}
    .pictureRmg .addCompany {width: 440px;max-height: 600px;}
    .pictureRmg .picturMG img{width: 135px;height: 90px;display: inline-block;margin: 20px auto;}
</style>
<template>
    <div  class='flexOne pictureRmg'>
        <div class='query-box'>
			<ul>
				<li>
                    <label class="">{{$t('system.query_airName')}}</label>
                    <el-input v-model="msg.Name"  :placeholder="$t('system.ph_in')" class="w210"></el-input>
                </li>
                <!-- <li>
                     <label class="">{{$t('admin.admin_status')}}</label>
                    <el-select v-model="msg.Country_id"  :placeholder="$t('system.ph_choice')">
                        <el-option  key="1" label="全部" value="1"></el-option>
                        <el-option  key="2" label="正常" value="2"></el-option>
                        <el-option  key="3" label="删除" value="3"></el-option>
                    </el-select>
                </li> -->
                <li>
                    <label class="">{{$t('admin.admin_type')}}</label>
                    <el-select v-model="msg.Type"  :placeholder="$t('system.ph_choice')" class="w210">
                        <el-option :label="$t('pub.unlimitedSel')" value='-1'></el-option>
                        <el-option v-for='item in PicTypeList'
                            :key="item.Id" 
                            :label="item.Name"
                            :value="item.Id">
                        </el-option>
                    </el-select>
                </li>
				<li><input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="resetPageIndex(),getList()"/>
                        <input type="button" class="normalBtn" :value="$t('pub.addBtn')"  @click="outerVisible=true,dialogTitle='添加地接图片'"/></li>
			</ul>
		</div>
        <table  class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
            <tr>
				<th>{{$t('system.label_img')}}</th>
				<th>{{$t('system.query_type')}}</th>
				<th>{{$t('system.query_airName')}}</th>
				<th width="300">{{$t('system.label_info')}}</th>
				<th>{{$t('admin.admin_czPerson')}}</th>
                <th>{{$t('hotel.table_operattime')}}</th>
                <th>{{$t('hotel.table_operat')}}</th>
			</tr>
			<tr v-for="(item,index) in DataList">
                <td class="picturMG">
                    <img v-if="!item.PicPath" src="../../assets/img/bg_c3@3x.png">
                    <img v-else :src="item.PicPath" :onerror='defaultImg'>
                </td>
				<td>{{item.TypeName}}</td>
                <td>{{item.Name}}</td>
				<td>{{item.DescriptionText}}</td>
				<td>{{item.OperateName}}</td>
				<td>{{item.UpdateDateStr}}</td>
				<td>
					<el-tooltip class="item" effect="dark" content="修改" placement="top">
						<el-button type="primary" icon="el-icon-edit" circle @click="outerVisible=true,dialogTitle='修改',updateData(index)"></el-button>
					</el-tooltip>
                    <el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top-start">
                        <el-button type="danger" icon="el-icon-delete" circle @click="deletelist(index)"></el-button>
                    </el-tooltip>	        
				</td>
			</tr>
        </table>
        <div class="noData" v-show="noData">
            {{$t('system.content_noData')}}
        </div>
           <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" layout="total,prev, pager, next, jumper" :page-size=msg.pageSize :total=total>
		</el-pagination>
        <el-dialog custom-class='addCompany' :title="dialogTitle" :visible.sync="outerVisible" center :before-close="closeChangeMachie">
			<el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="100px" >     
                <el-form-item :label="$t('admin.mane')" prop="Name">
                   <el-input type="text" v-model="addMsg.Name"  maxlength="20" class="w210"></el-input>
                </el-form-item>
                <el-form-item :label="$t('admin.admin_type')" prop="Type">
                    <el-select v-model="addMsg.Type" filterable :placeholder="$t('system.ph_choice')" class="w210">
                        <el-option v-for='item in PicTypeList'
                            :key="item.Id" 
                            :label="item.Name"
                            :value="item.Id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('system.label_img')">
                  <el-upload
                    class="avatar-uploader"
                    :action="importFileUrl"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                </el-form-item>
                <el-form-item :label="$t('system.label_info')">
                    <el-input type="textarea" v-model="addMsg.DescriptionText" class="w210"></el-input>
                </el-form-item>
			</el-form>                
			<div slot="footer" class="dialog-footer">
				<button class="normalBtn" type="primary" @click="submitForm('addMsg'),resetPageIndex()">{{$t('pub.saveBtn')}}</button> &nbsp;
				<button class="hollowFixedBtn" @click="outerVisible = false,resetForm('addMsg')">{{$t('pub.cancelBtn')}}</button>
			</div>
		</el-dialog>
    </div>
</template>
<script>
export default {
    data(){
        return{
            msg:{
                pageIndex:1,
                pageSize:5,
                Name:'',
                Type:'-1',
            },
            addMsg:{
                ID:0,
                Name:'',
                PicPath:'',
                DescriptionText:'',
                Type:''
            },
            PicTypeList:'',
            DataList:'',    
            total:0,  
            currentPage:1,
            loading:true,    
            outerVisible: false,
            noData:false,
            importFileUrl:   this.domainManager().UploadFileUrl+'?cmd=User_post_FileUpload&fileType=1&fileLimit=10', 
            defaultImg: 'this.src="' + require('../../assets/img/bg_z1@2x.png') + '"',
            dialogTitle:'',
            insideDialogTxt: '保存成功！',
            imageUrl: '',
            rules: {//表单必填验证
                Name: [
                    { required: true, message: '请输入名称', trigger: 'blur' }
                ],
                Type: [
                    { required: true, message: '请选择类型', trigger: 'change' }
                ],
            } 
        }
    },methods:{
        getList(){ //获取列表
            this.loading = true;
            this.apipost('Pictureresource_get_GetPageList',this.msg,res=>{
                if(res.data.resultCode==1){
                    this.total = res.data.data.count;
                    if(res.data.data.pageData.length<1){
                        this.noData= true;
                        this.DataList=[];
                        this.loading = false;
                    }else{
                        this.noData= false;
                        res.data.data.pageData.forEach(x => {
                            if(x.PicPath){
                                x.PicPath = 'https://reborndev.oss-cn-hangzhou.aliyuncs.com'+x.PicPath
                            }                    
                        });
                        this.DataList = res.data.data.pageData
                        this.loading = false;
                    }                  
                }else{
                    this.loading = false;
                }                               
            },err=>{})
        },
        addInstitutions(){ //添加图片资源
            this.apipost('Pictureresource_post_Set',this.addMsg,res=>{
                 if(res.data.resultCode == 1) {
                    this.tips("保存成功！",'success')
                    this.getList();
                    this.outerVisible = false;
                    this.initAddMsg();
                } else {
                    this.tips(res.data.message,'warning')
                }            
            },err=>{})
        },
        deletInstitutions(index){//删除
            let msg = {ID:this.DataList[index].ID}
            this.apipost('Pictureresource_post_Remove',msg,res=>{
                if(res.data.resultCode == 1) {
                    this.tips("删除成功",'success')          
                }
                this.getList();
            },err=>{})
        },
        initAddMsg(){//初始化添加、修改数据
            let newMsg = {
                ID:0,
                Name:'',
                PicPath:'',
                DescriptionText:'',
                Type:''
            }
            this.addMsg = newMsg;
        },
        updateData(index){//修改获取
            let msg = {ID:this.DataList[index].ID}
            this.apipost('Pictureresource_get_Get',msg,res=>{
                this.addMsg = res.data.data
                this.imageUrl = this.addMsg.PicPath
            },err=>{})
        },
        submitForm(addMsg) {//提交创建、修改表单
            this.$refs[addMsg].validate((valid) => {
                if (valid) {
                    this.addInstitutions()
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        handleAvatarSuccess(res, file) { //上传
            if(res.resultCode==1){
                var img_path = res.data.FullFilePath
                this.addMsg.PicPath=res.data.FilePath
                this.imageUrl = img_path
            }
        },
        beforeAvatarUpload(file) { //上传-
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        resetPageIndex() {//查询初始化页码
            this.msg.pageIndex = 1;
            this.currentPage = 1
        },
        handleCurrentChange(val) {//翻页功能按钮
            this.msg.pageIndex = val;
            this.getList();
        },
        closeChangeMachie(done){
             done();
            this.resetForm('addMsg');
        },
        resetForm(formName) {
         this.initAddMsg();
         this.$refs[formName].resetFields();
        },
        getPicTypeList(){
            this.apipost('Pictureresource_get_GetPicTypeList',{},res=>{
                this.PicTypeList = res.data.data
            },err=>{})
        }, 
        tips(msg,type) {
            this.$message({
                message: msg,
                duration:2000,
                type: type
            });
        },
        deletelist(index){
		    this.$confirm('是否删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });                    
                this.deletInstitutions(index)          
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    },mounted(){
        this.getList();
        this.getPicTypeList();  
    }
}
</script>


