<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>{{$t('sm.company')}}</em>
          </span>
          <el-select filterable v-model="obj.BranchId">
            <el-option :label="$t('pub.unlimitedSel')" :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>{{$t('objFill.v101.administrative.pingtaimincheng')}}</em>
          </span>
          <el-input v-model="obj.Name" :placeholder="$t('fnc.qsrneirong')"></el-input>
        </li>
        <li>
          <span>
            <em>{{$t('hotel.suplier_contact')}}</em>
          </span>
          <el-input v-model="obj.Contact" :placeholder="$t('fnc.qsrneirong')"></el-input>
        </li>
        <li>
          <span>
            <em>{{$t('restaurant.res_ContactNumber')}}</em>
          </span>
          <el-input v-model="obj.ContactMobile" :placeholder="$t('fnc.qsrneirong')"></el-input>
        </li>
        <li style="float:right;margin-bottom:10px">
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="getList()">
          <input type="button" class="hollowFixedBtn" :value="$t('pub.addBtn')" @click="addRule">
        </li>
      </ul>
    </div>

    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
      <tr>
        <th>{{$t('objFill.v101.administrative.pingtaimincheng')}}</th>
        <th>{{$t('hotel.suplier_contact')}}</th>
        <th>{{$t('restaurant.res_ContactNumber')}}</th>
        <th>{{$t('objFill.v101.administrative.shifouyht')}}</th>
        <th>{{$t('objFill.v101.administrative.hetongsm')}}</th>
        <th>{{$t('system.query_company')}}</th>
        <th width="500">{{$t('pub.pubRemark')}}</th>
        <!-- <th>{{$t('system.label_img')}}</th> -->
        <th>{{$t('admin.admin_czPerson')}}</th>
        <th>{{$t('hotel.table_operattime')}}</th>
        <th>{{$t('system.table_operation')}}</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">{{$t('pub.yes')}}</span>
          <span v-if="item.HaveContract==2">{{$t('pub.no')}}</span>
        </td>
        <td>{{item.ContraceDateRange}}</td>

        <td>{{item.BranchName}}</td>
        <td>{{item.Remark}}</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">{{$t('system.content_noData')}}</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="$t('objFill.v101.administrative.pingtaimincheng')" 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="$t('hotel.suplier_contact')" 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="$t('scen.sc_tel')" 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="$t('objFill.shifouyht')">
                <el-select class="w217" v-model="addMsg.HaveContract">
                  <el-option :label="$t('pub.yes')" :value="1" :key="1"></el-option>
                  <el-option :label="$t('pub.no')" :value="2" :key="2"></el-option>
                </el-select>
              </el-form-item>
            </td>
            <td>
              <el-form-item :label="$t('objFill.v101.administrative.hetongsm')" 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="$t('objFill.v101.administrative.hetongtup')">
                <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="UploadAttachment" :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(this.$t('rule.company')));
        } 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(this.$t('objFill.qingtxsjhm')));
        } else if (!pattern.test(this.addMsg.ContactMobile)) {
          return callback(new Error(this.$t('objFill.v101.administrative.qingsrzqdhm')));
        } 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: this.$t('objFill.v101.administrative.qingshurpintmc'),
            trigger: "blur"
          }],
          Contact: [{
            required: true,
            message: this.$t('rule.EnterContratPerson'),
            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.$t('objFill.v101.administrative.xinzenpint');
        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();
      },

      deleteUploadFile(i) { // 删除上传文件
        this.saveMsg.splice(i, 1);
        this.addMsg.ImageList.splice(i, 1);
      },

      UploadAttachment(file) { //上传
        if (file.file.size > 1024 * 1024 * 10) {
          this.Error(this.$t('tips.wjdxbncgsz'))
          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(this.$t('tips.qsctpian'));
        let newArr = [];
        newArr.push(file.file)
        let path = "/Upload/Temporary/"
        this.$message.info(this.$t('tips.shangchuanzhong'))
        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(this.$t('tips.scchenggong'));
        });
      },
      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.$t('objFill.v101.administrative.xiugaipintai');
        this.outerVisible = true;
        this.addMsg = Object.assign({}, item);
        delete this.addMsg.CreateBy;
      },
      //删除
      Delete(item) {
        this.$confirm(this.$t('tips.shifoushanchu'), this.$t('tips.tips'), {
          confirmButtonText: this.$t('pub.sureBtn'),
          cancelButtonText: this.$t('pub.cancelBtn'),
          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>