<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='compressImg(item.PicPath, "filt", 213, "")'  :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 = this.domainManager().ViittoFileUrl + 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.domainManager().ViittoFileUrl + this.addMsg.PicPath
        }, err => {})
      },
      submitForm(addMsg) { //提交创建、修改表单
        this.$refs[addMsg].validate((valid) => {
          if (valid) {
            this.addInstitutions()
          } else {
            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>