<style>
    .w590{width:590px!important;}
    .Diplomaticplat ._addUpload_box{
      display: block;
      margin-top:10px;
      width:590px;
    }
    .Diplomaticplat ._addUpload_box>div{
      float: left;
      width: 138px;
      height: 92px;
      border: 1px dashed rgba(210,210,210,1);
      border-radius: 2px;
      cursor: pointer;
      padding: 5px;
      margin:0 10px 10px 0;
      position: relative;
    }
    .Diplomaticplat .el-upload-dragger {
        width: 126px!important;
        height: 80px!important;
    }
    .Diplomaticplat ._addUpload_box .icon-guanbi1 {
        font-size: 12px;
        color: white;
        display: inline-block;
        margin-left: 15px;
        position: absolute;
        right: -6px;
        top: -9px;
        background-color: #f56c6c;
        border-radius: 50%;
        height: 20px;
        width: 20px;
        text-align: center;
        line-height: 20px;
    }
    .Diplomaticplat ._addUpload_box .icon-guanbi1:hover {
        font-size: 12px;
        color: #c94052;
    }
    .Diplomaticplat ._addUpload_box img{
        width:100%;
    }
    .DelDialog .el-form-item__label{
        line-height: 43px;
    }
    .DelDialog .el-form-item{
        margin-bottom:5px;
    }
</style>

<template>
  <div class="Diplomaticplat">
      <div class="query-box">
        <ul>
            <li>
            <span>
                <em>公司</em>
            </span>
            <el-select filterable v-model="obj.BranchId" >
                <el-option label="不限" :value='-1'></el-option>
                <el-option v-for="item in companyList" :label='item.BName' :value='item.Id' :key='item.Id'>
                </el-option>
            </el-select>
            </li>
             <li>
            <span>
                <em>平台名称</em>
            </span>
            <el-input v-model="obj.Name" placeholder="请输入内容"></el-input>
            </li>
             <li>
            <span>
                <em>联系人</em>
            </span>
            <el-input v-model="obj.Contact" placeholder="请输入内容"></el-input>
            </li>
             <li>
            <span>
                <em>联系电话</em>
            </span>
            <el-input v-model="obj.ContactMobile" placeholder="请输入内容"></el-input>
            </li>
            <li style="float:right;margin-bottom:10px">
                <input
                    type="button"
                    class="hollowFixedBtn"
                    value="查询"
                    @click="getList()"
                >
                <input
                    type="button"
                    class="hollowFixedBtn"
                    value="新增"
                    @click="addRule"
                >
            </li>            
        </ul>
      </div>
      
     <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
      <tr>
        <th>平台名称</th>
        <th>联系人</th>
        <th>联系电话</th>
        <th>是否有合同</th>
        <th>合同说明</th>
        <th>所属公司</th>
        <th width="500">备注</th>
        <!-- <th>图片</th> -->
        <th>操作人</th>
        <th>操作时间</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item,i) in dataList" :key="i">
        <td>{{item.Name}}</td>
        <td>{{item.Contact}}</td>
        <td>{{item.ContactMobile}}</td>
        <td>
            <span v-if="item.HaveContract==1">是</span>
            <span v-if="item.HaveContract==2">否</span>
        </td>
        <td>{{item.ContraceDateRange}}</td>
        
        <td>{{item.BranchName}}</td>
        <td>{{item.Remark}}</td>
        <!-- <td>
            <span v-for="(img,index2) in item.ImageList" :key="index2">
                <img :src="img"> 
            </span>        
        </td> -->
        <td>{{item.CreateBy}}</td>
        <td>{{item.CreateDate}}</td>
        <td>
            <el-button @click="SetRules(item)" style="padding:4px" type="primary" icon="el-icon-edit" circle></el-button>
            <el-button @click="Delete(item)" style="padding:4px" type="danger" icon="el-icon-delete" circle></el-button>
        </td>
      </tr>
      <tr v-if="dataList.length==0">
        <td colspan="9" align="center">暂无数据</td>
      </tr>
    </table>
    <el-pagination background @current-change="handleCurrentChange"
      layout="total,prev, pager, next, jumper" :page-size="obj.pageSize" :total='total'>
    </el-pagination> 

    <el-dialog
      custom-class="w800 DelDialog"
      :title="dialogTitle"
      :visible.sync="outerVisible"
      center
      :before-close="closeChangeMachie"
    >
        <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="100px">
            <table class="layerTable" style="width:100%">
                <tr>
                    <td>
                        <el-form-item :label="$t('system.table_company')" prop="BranchId">
                            <el-select
                            filterable
                            class="w217"
                            v-model="addMsg.BranchId"
                            :placeholder="$t('system.ph_choice')"
                            >
                            <el-option :label="$t('system.ph_buxian')" :value="-1" :key="-1"></el-option>
                            <el-option
                                v-for="item in CompanyList"
                                :label="item.BName"
                                :value="item.Id"
                                :key="item.Id"
                            ></el-option>
                            </el-select>
                        </el-form-item>
                    </td>
                    <td>
                        <el-form-item label="平台名称" prop="Name">
                            <el-input class="w217" type="text" v-model="addMsg.Name" :placeholder="$t('pub.pleaseImport')"></el-input>
                        </el-form-item>
                    </td> 
                </tr>
                <tr>
                    <td>
                        <el-form-item label="联系人" prop="Contact">
                            <el-input class="w217" type="text" v-model="addMsg.Contact" :placeholder="$t('pub.pleaseImport')"></el-input>
                        </el-form-item>
                    </td>
                    <td>
                        <el-form-item label="联系电话" prop="ContactMobile">
                            <el-input class="w217" type="text" v-model="addMsg.ContactMobile" @keyup.native="checkInteger(addMsg,'ContactMobile')"  :placeholder="$t('pub.pleaseImport')"></el-input>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td>
                        <el-form-item label="是否有合同">
                            <el-select class="w217" v-model="addMsg.HaveContract">
                                <el-option label="是" :value="1" :key="1"></el-option>
                                <el-option label="否" :value="2" :key="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </td>
                    <td>
                        <el-form-item label="合同说明" prop="ContraceDateRange">
                            <el-input class="w217" type="text" v-model="addMsg.ContraceDateRange" :placeholder="$t('pub.pleaseImport')"></el-input>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <el-form-item :label="$t('hotel.hotel_remark')">
                            <el-input v-model="addMsg.Remark" type="textarea" class="w590" :placeholder="$t('pub.pleaseImport')"/>
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <el-form-item label="合同图片">
                            <div class="_addUpload_box clearfix" >
                                <template v-for="(file,fIndex) in addMsg.ImageList">
                                    <div>
                                        <div style="width:100%;height:100%;overflow: hidden;">
                                            <img :src="file" @click="showUpLoadFile(file)">
                                        </div>
                                        <span class="iconfont icon-guanbi1" @click="deleteUploadFile(fIndex)"></span>
                                    </div>
                                </template>
                                <div class="_pic_upload">
                                    <el-upload
                                    drag
                                    :http-request="uploadFileBtn"
                                    :multiple="true"  :show-file-list="false"  action="">
                                    <i class="el-icon-plus avatar-uploader-icon"></i>
                                    <div class="el-upload__text">{{$t('active.ld_djscwj')}}</div>
                                    </el-upload>
                                </div>
                            </div>
                        </el-form-item>
                    </td>
                </tr>
            </table>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <button class="hollowFixedBtn" @click="InitMsgList()">{{$t('pub.cancelBtn')}}</button>
            &nbsp;
            <button class="normalBtn" type="primary" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button>
        </div>
    </el-dialog>
    <div v-if='picIsShow' class="_show_img_box" @click="picIsShow=false,picObj=[]">
        <div style="position: absolute; width: 800px; height: 600px; left: 50%; top: 50%; margin-left: -400px; margin-top: -300px;z-index:9999">
            <el-carousel :initial-index=initialIndex height="600px" :interval="5000" trigger="click">
            <el-carousel-item style="height: 600px;overflow:auto;"  v-for="(item,index) in picObj" :key="index">
                <img :src="item"  style=""/>
            </el-carousel-item>
            </el-carousel>
        </div>
    </div>
  </div>
</template>


<script>


export default {
  name: 'Diplomaticplat',

  created() {
    
  },
  data () {
    let validateCompany = (rule, value, callback) => {
        if (this.addMsg.BranchId == -1) {
            return callback(new Error('请选择公司'));
        } else {
            callback();
        }
    }
    let validatePhone = (rule, value, callback) => {
        var pattern = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
        if (this.addMsg.ContactMobile =='') {
            return callback(new Error('请填写手机号码'));
        }
        else if(!pattern.test(this.addMsg.ContactMobile)){
            return callback(new Error('请输入正确的号码'));
        }
         else {
            callback();
        }
    }
    return {
        companyList:[],
        loading:false,
        dataList:[],
        total:0,
        obj:{
            pageIndex:1,
            pageSize:10,
            BranchId:'',
            Name:'',
            Contact:'',
            ContactMobile:'',
        },
        addMsg:{
            ID:0,
            BranchId:-1,
            Name:'',
            Contact:'',
            ContactMobile:'',
            HaveContract:1, //是否有合同
            ContraceDateRange:'',
            ImageList:[],
            Remark:''	
        },
        companyListObj:{},
        dialogTitle:'',
        outerVisible:false,
        CompanyList: [],
        //上传数组
        saveMsg:[],
        picIsShow:false,
        picObj:[],
        imgList:[],
        initialIndex: 0,
        rules: {
            BranchId: [{ required: true, validator: validateCompany, trigger: "change" }],
            Name: [{ required: true, message: '请输入平台名称', trigger: "blur" }],
            Contact: [{ required: true, message: '请输入联系人', trigger: "blur" }],
            ContactMobile: [{ required: true, validator:validatePhone, trigger: "blur" }],
        },
    }
  },
  mounted() {
    this.getCompany();
    this.getList();
  },
  methods: {
    handleCurrentChange(val) {
        this.obj.pageIndex = val;
        this.getList();
    },
    getList(){
        this.loading=true;
        this.apipost(
            "Financial_get_GetDiplomacyPlatformPageList",
            this.obj,
            res => {
                this.loading=false;
            if (res.data.resultCode == 1) {
                this.dataList = res.data.data.pageData;
                this.total = res.data.data.count;
                
            } else {
                this.Error(res.data.message);
            }
            },
            err => {}
        );
    },
    getCompany() {
        this.apipost(
            "admin_get_BranchGetList",
            this.getCompanyMsg,
            res => {
            if (res.data.resultCode == 1) {
                this.companyList = res.data.data;
                this.companyList.map(item=>{
                    this.companyListObj[item.Id]=item.BName;
                })
            } else {
            }
            },
            err => {}
        );
    },
    //新增
    addRule(){
        this.outerVisible=true;
        this.dialogTitle='新增平台';
        this.addMsg.ID=0;
        this.getCompany();
    },
    getCompany() {
      this.apipost(
        "admin_get_BranchGetList",
        this.getCompanyMsg,
        res => {
          if (res.data.resultCode == 1) {
              this.CompanyList = res.data.data;
          } else {
          }
        },
        err => {}
      );
    },
    closeChangeMachie(done) {
      //弹出框关闭初始化弹框内表单
      done();
      this.InitMsgList();
    },
    // showUpLoadFile(i){  // 预览上传文件
    //     if(i.Type==3){
    //         this.picObj.push(i.Url);
    //         this.imgList.push(i.Url);
    //         this.picIsShow= true;
    //     }
    // },
    deleteUploadFile(i){  // 删除上传文件
        this.saveMsg.splice(i,1);
        this.addMsg.ImageList.splice(i,1);
    },

    uploadFileBtn(file) { //上传
        if(file.file.size > 1024 * 1024 * 10) {
            this.Error('文件大小不能超过10M！')
            return
        }
        //  1 文档  2 数据 3 图片
        let typeArr=[
            {stringArr:'GIF|JPG|JPEG|PNG|BMP',type:3}
        ]
        let ft=file.file.name.substring(file.file.name.lastIndexOf('.')+1,file.file.name.length).toUpperCase();
        let fileTypeNumber = 2;
        let typeOk  = false;
        typeArr.forEach(x=>{
            if(x.stringArr.indexOf(ft)!='-1')
            {
                fileTypeNumber=x.type
                typeOk = true;
            }
        })
        if (!typeOk) return this.Error('请上传图片！');
        let newArr = [];
        newArr.push(file.file)
        let path = "/Upload/Temporary/"
        this.$message.info('上传中...')
        this.UploadSelfFileT(path, newArr, x => {
            let fileSize = file.file.size<1024? file.file.size:(file.file.size / 1024).toFixed(0);
            this.saveMsg.push({
                // Content: x.data.FilePath,
                Url: this.domainManager().ViittoFileUrl + x.data.FilePath,
            })
            this.addMsg.ImageList.push(this.domainManager().ViittoFileUrl + x.data.FilePath);
            this.Success('上传成功');
        });
    },

    submitForm(addMsg) {
      //提交创建、修改表单
      this.$refs[addMsg].validate(valid => {
        if (valid) {
          this.addPlatform();
        } else {
          return false;
        }
      });
    },
    //点击新增平台
    addPlatform(){
        this.apipost("Financial_get_SetDiplomacyPlatformInfo",this.addMsg,res => {
            if (res.data.resultCode == 1) {
                this.Success(res.data.message);
                this.getList();
                this.outerVisible=false;
                this.InitMsgList();
            } else {
                this.Error(res.data.message);
            }
        },
        err => {}
        );
    },
    //初始化
    InitMsgList(){
        this.outerVisible=false;
        this.addMsg.BranchId=-1;
        this.addMsg.Name='';
        this.addMsg.Contact='';
        this.addMsg.ContactMobile='';
        this.addMsg.HaveContract=1;
        this.addMsg.ContraceDateRange='';
        this.addMsg.ImageList=[];
        this.addMsg.Remark='';
    },
    //修改
    SetRules(item){
        this.dialogTitle='修改平台';
        this.outerVisible=true;
        this.addMsg=Object.assign({},item);
        delete this.addMsg.CreateBy;
    },
    //删除
    Delete(item){
     this.$confirm('是否删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var msg = {
                    PlatformId: item.ID
                }
                this.apipost('Financial_get_DelDiplomacyPlatformInfo',msg,res=>{
                    if(res.data.resultCode==1){
                        this.Success(res.data.message)
                        this.getList()
                    }else{
                        this.Error(res.data.message)
                    }
                },err=>{})
            }).catch(() => {
						
            });
        }
    },
  
}
</script>
<style>


</style>
