<!-- 企业设置模块 -->
<template>
  <div>
    <div class="content">
      <div class="left">
        <ul class="leftlist">
          <li
            v-for="(item,value) in leftmsg"
            :key="value"
            class="lia"
            :class="{activelia:item.state}"
            @click="leftstate(value)"
          >
            <span class="spa">{{ item.name }}</span>
          </li>
        </ul>
      </div>

      <div class="right">
        <div v-show="leftmsg[0].state" class="name1">
          <div class="top1 leftstyle">企业名称与logo设置</div>
          <div class="input1 inputall">
            <el-form :label-position="labelPosition" :model="companyMsg">
              <el-form-item label="企业全称">
                <el-input v-model="companyMsg.compName" :disabled="true" />
              </el-form-item>
              <el-form-item label="企业简称">
                <el-input v-model="companyMsg.compSimpleNameEn" />
              </el-form-item>
              <div class="uphead">
                <span class="imghead font font1">企业logo上传：</span>
                <img :src="companyMsg.compHeadimg" class="img">
                <input type="file" class="kyc-passin" @change="uploadPhoto($event)">
                <span class="talk">建议上传图像尺寸为640*640，大小不能超过1M视觉元素保持在方形区域内</span>
                <span class="lookImg" @click="looklogo">效果预览</span>
              </div>
              <el-form-item label="组织本币">
                <el-select v-model="companyMsg.organizationMonetaryKey" @change="handleMonetarySelectChange">
                  <el-option v-for="coin in allCoins" :value="coin.parameterKey" :key="coin.parameterKey" :label="coin.parameterValue"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <el-button type="primary" class="save1" @click="save1">保存</el-button>
          </div>
          <el-dialog title="企业logo效果" :visible.sync="showLogo" width="637px" center>
            <span class="setBefore">
              <div class="setTitle">
                <span>设置前</span>
              </div>
              <div class="img1">
                <img :src="url" class="imgshow">
              </div>
              <span class="text"></span>
            </span>
            <span class="setAfter">
              <div class="setTitle">
                <span>设置后</span>
              </div>
              <div class="img1 imgRight">
                <img :src="companyMsg.compHeadimg" class="imgshow">
              </div>
              <span class="text">登录到平台后，左上角会显示企业自定义的logo</span>
            </span>
          </el-dialog>
        </div>
        <!--修改管理密码-->
        <div v-show="leftmsg[1].state" class="name1">
          <div class="top1 leftstyle2"></div>
          <img
            src="../../static/images/components/businessSettings/setpassword.png"
            class="passwordimg"
          >
          <el-button class="setpasswordbutton" type="primary" @click="showSetPassword = true">修改管理密码</el-button>
          <el-dialog title="修改密码" :visible.sync="showSetPassword" width="600px" center>
            <div>
              <el-form
                ref="password"
                :label-position="labelPosition"
                :model="password"
                class="name3"
                :rules="rules"
              >
                <el-form-item label="当前密码：" prop="originalPassword">
                  <el-input
                    v-model="password.originalPassword"
                    type="password"
                    minlength="6"
                    maxlength="20"
                  />
                </el-form-item>
                <el-form-item label="新密码：" class="name5" prop="newPassword">
                  <el-input
                    v-model="password.newPassword"
                    type="password"
                    minlength="6"
                    maxlength="20"
                  />
                </el-form-item>
                <el-form-item label="确认密码：" prop="new2Password">
                  <el-input
                    v-model="password.new2Password"
                    type="password"
                    minlength="6"
                    maxlength="20"
                  />
                </el-form-item>
              </el-form>
              <span class="passworsMsg">新密码为6-20位数字、字母任意组合，且不能与旧密码相同</span>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="showSetPassword = false">取 消</el-button>
              <el-button type="primary" @click="savePassword('password')">确 定</el-button>
            </span>
          </el-dialog>
        </div>
        <!--更换企业管理员-->
        <div v-show="leftmsg[2].state" class="name1">
          <div class="top1 leftstyle3">{{ name1title }}</div>
          <div v-show="nowstyle" class="input1 inputall">
            <el-form
              ref="loginMsg"
              :label-position="labelPosition"
              :model="loginMsg"
              class="name3"
              :rules="rules"
            >
              <el-form-item label="当前管理员：" prop="userCellPhone">
                <span class="spanname">{{ loginMsg.userRealName }}</span>
              </el-form-item>
              <el-form-item label="手机号：" class="name3" prop="userCellPhone">
                <el-input v-model="loginMsg.userCellPhone" :disabled="true" />
              </el-form-item>
              <el-button
                :type="buttonState"
                class="sendnum"
                :disabled="buttonTf"
                :class="{stateS:buttonTf}"
                @click="sendNum(yanzhengphoneNum,userKind)"
              >{{ buttonMsg }}</el-button>
              <el-form-item label="验证码：" prop="veriCode">
                <el-input v-model="loginMsg.veriCode" />
              </el-form-item>
            </el-form>
            <el-button class="save1" @click="nextStyle('loginMsg')">下一步</el-button>
          </div>

          <div v-show="nextstyletf" class="input1 inputall newInput">
            <el-form
              ref="newLoginMsg"
              :label-position="labelPosition"
              :model="newLoginMsg"
              class="name3"
              :rules="rules"
            >
              <el-form-item label="新的企业管理员：" prop="userCellPhone">
                <el-autocomplete
                  v-model="state2"
                  class="inline-input"
                  :fetch-suggestions="querySearch"
                  placeholder="请输入内容"
                  :trigger-on-focus="false"
                  @select="handleSelect"
                />
              </el-form-item>
              <el-form-item label="手机号：" class="name4" prop="userCellPhone">
                <el-input v-model="newLoginMsg.userCellPhone" :disabled="true" />
              </el-form-item>
              <el-button
                :type="buttonState"
                class="sendnum"
                :disabled="buttonTf"
                :class="{stateS:buttonTf}"
                @click="sendNum(newLoginMsg.userCellPhone,newLoginMsg.userKind)"
              >{{ buttonMsg }}</el-button>
              <el-form-item label="验证码：" prop="veriCode">
                <el-input v-model="newLoginMsg.veriCode" />
              </el-form-item>
            </el-form>
            <el-button class="save1" type="primary" @click="saveStyle('newLoginMsg')">确定</el-button>
          </div>
        </div>
        <!--船舶管理-->
        <div v-show="leftmsg[3].state" class="name1">
          <div class="top1 leftstyle">{{ leftmsg[3].name }}</div>
          <div class="main-list rightlist">
            <div class="backgroundcolor">
              <el-button type="primary" class="addshipbutton" @click="addship">添加船舶</el-button>
            </div>
            <el-table stripe :data="shipList" height="66vh" @cell-mouse-enter="mouseEnter">
              <!-- <el-table-column type="selection" width="30" align="center" /> -->
              <el-table-column prop="roleId" label="序号" width="50" align="center">
                <template slot-scope="scope">{{ scope.$index+1 }}</template>
              </el-table-column>
              <el-table-column width="180" />
              <el-table-column prop="vesselName" label="船舶" />
              <el-table-column prop="vesselStatus" label="状态">
                <template slot-scope="scope">
                  <span
                    :class="scope.row.vesselStatus==='UNDER_CONTROL'?'jieguan':'tuichu'"
                  >{{ scope.row.vesselStatus==='UNDER_CONTROL'?'接管中':'已退出' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop label="操作" width="100" align="center">
                <yh-operaction :lable="lable" @del="delate" @skip="skp" />
              </el-table-column>
            </el-table>
            <el-pagination
              :current-page="page.currentPage"
              :page-sizes="[10,20,30,50]"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
          <el-dialog
            :title="addshiptitlename.value"
            :visible.sync="showaddship"
            width="600px"
            center
            :close-on-click-modal="false"
          >
            <div>
              <el-form
                ref="addShipMsg"
                :label-position="labelPosition"
                :model="addShipMsg"
                class="name3"
                :rules="rules"
              >
                <el-form-item label="船舶类型：" prop="vesselTypeName">
                  <el-input maxlength="50" v-model="addShipMsg.vesselTypeName" placeholder="请填写船舶类型" />
                </el-form-item>
                <el-form-item label="船舶全称：" prop="vesselName">
                  <el-input maxlength="50" v-model="addShipMsg.vesselName" placeholder="请输入船舶全名" />
                </el-form-item>
                <el-form-item label="船舶简称：" prop="vesselShortName">
                  <el-input maxlength="50" v-model="addShipMsg.vesselShortName" placeholder="请输入船舶简称" />
                </el-form-item>
                <el-form-item label="MMSI：" prop="mmsiCode">
                  <el-input v-model="addShipMsg.mmsiCode" maxlength="9" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="船舶状态：" prop="vesselStatus">
                  <el-radio-group v-model="addShipMsg.vesselStatus">
                    <el-radio label="UNDER_CONTROL">接管中</el-radio>
                    <el-radio label="EXITED">已退出</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item class="two-col" label="是否使用船上系统：" prop="clientFlag">
                  <el-select v-model="addShipMsg.clientFlag" placeholder="请选择">
                    <el-option
                      v-for="item in clientFlagList"
                      :key="item.constKey"
                      :label="item.constValue"
                      :value="item.constKey"
                    />
                  </el-select>
                </el-form-item>

              </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="cancelAddShip">取 消</el-button>
              <el-button type="primary" @click="saveAddShip('addShipMsg')">保 存</el-button>
              <el-button v-show="saves" @click="saveAddShip('addShipMsg','saves')">保存并继续添加</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import yhOperaction from '../../layout/components/operaction.vue';
import {
  getCompanyMsg,
  setCompany,
  getLoginInfo,
  sendMsg,
  checkMsg,
  findUsers,
  changeManager,
  changePasswordByPwd,
  findCompanyVessels,
  removeShip,
  addAndChangeShip,
  getSystemConsts
} from '../../api/businessSettings/businessSettings';
import {
  getOssInterimCredentials,
  GotOssAccessConfig
} from '../../api/upload';
import {
  client
} from '../../utils/alioss';
import {
  isNumber
} from '../../utils/validate';

export default {
  name: 'BusinessSettings',
  components: {
    yhOperaction
  },
  data() {
    const mmsi = (rule, value, callback) => {
      if (value == null || value === '') {
        callback();
      } else if (!isNumber(value)) {
        callback(
          this.$message({
            message: 'MMSI必须为数字',
            type: 'error',
            showClose: true,
          })
        );
      } else {
        callback();
      }
    };
    const validcodeId = (rule, value, callback) => {
      const reg = /^[0-9a-zA-Z]{6,20}$/;
      if (!reg.test(value)) {
        callback(new Error('密码必须是由6-20位数字和字母组合'));
      } else {
        callback();
      }
    };
    return {
      saves: true,
      allCoins: [],
      leftmsg: [{
        name: '企业信息',
        id: 0,
        state: false
      },
      {
        name: '修改管理密码',
        id: 1,
        state: false
      },
      {
        name: '更换企业管理员',
        id: 2,
        state: false
      },
      {
        name: '船舶管理',
        id: 3,
        state: false
      }
      ],
      bindlia: false,
      labelPosition: 'right',
      companyMsg: {
        compId: '',
        compHeadimg: '',
        compName: '',
        compSimpleName: '',
        organizationMonetaryKey: '',
        organizationMonetaryValue: ''
      },
      loginMsg: {
        userCellPhone: '',
        userRealName: '',
        veriCode: ''
      },
      yanzhengphoneNum: '',
      rules: {
        veriCode: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
        userCellPhone: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
        userRealName: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
        mmsiCode: [{
          validator: mmsi,
          message: '',
          trigger: 'blur'
        }],
        newPassword: [{
          required: true,
          message: '',
          trigger: 'blur'
        },
        {
          validator: validcodeId,
          trigger: 'blur'
        }
        ],
        new2Password: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
        originalPassword: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
        vesselName: [{
          required: true,
          trigger: 'blur',
        }],
        vesselTypeName: [{
          required: true,
          trigger: 'blur',
        }],
        vesselStatus: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
        vesselShortName: [{
          required: true,
          trigger: 'blur',
        }],
        clientFlag: [{
          required: true,
          trigger: 'change',
        }]
      },
      url: '',
      headState: '/businessSettings',
      name1: false,
      showLogo: false,
      buttonState: 'primary',
      buttonTf: false,
      buttonMsg: '发送验证码',
      timer: null,
      userKind: '',
      name1title: '换绑企业管理账号，需要验证当前企业管理账号的身份',
      nowstyle: true, // 本步页面的显示
      nextstyletf: false, // 下一步页面的显示
      state2: '', // input框动态搜索结果
      restaurants: [],
      newLoginMsg: {
        userCellPhone: '',
        userRealName: '',
        veriCode: '',
        userId: '',
        userKind: ''
      },
      showSetPassword: false, // 展示修改密码框
      password: {
        originalPassword: '', // 原始密码
        newPassword: '', // 新密码
        new2Password: '' // 二次输入密码
      },
      shipList: [],
      lable: [{
        lab: '编辑',
        click: 'skip1'
      }],
      showaddship: false,
      addshiptitlename: '', // 添加船舶title
      addShipMsg: '',
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      mouseEnterHisrory: '',
      ossInter: '',
      ossAccessConfig: {}
    };
  },
  computed:{
    clientFlagList() {
      return [
        {
          constValue: '是',
          constKey: '1'
        },
        {
          constValue: '否',
          constKey: '0'
        }
      ]
    }
  },
  created() {
    this.leftstate(0);
  },
  mounted() {
    for (let i = 0; i < document.getElementsByClassName('el-input__inner').length; i++) {
      document.getElementsByClassName('el-input__inner')[i].maxLength = '20';
    }
  },
  methods: {
    async leftstate(value) {
      /* 设置选中 */
      for (let i = 0; i < this.leftmsg.length; i++) {
        this.leftmsg[i].state = false;
      }
      this.leftmsg[value].state = true;
      /* 设置右边展示的数据 */
      /* 1.展示企业名称与logo设置 */
      if (value === 0) {
        this.getCompany();
        this.allCoins = await getSystemConsts({
          compId: localStorage.getItem('enterprise-front-companyId'),
          constCode: 'CURRENCY'
        })
      } else if (value === 2) {
        this.getloading();
        this.getAllPeople();
        this.nowstyle = true;
        this.nextstyletf = false;
      } else if (value === 3) {
        this.getshipMsg();
      }
    },
    handleMonetarySelectChange(value) {
      this.companyMsg.organizationMonetaryValue = this.allCoins.find(itm => itm.parameterKey === value).parameterValue;
    },
    /* 获取企业信息 */
    getCompany() {
      getCompanyMsg().then((response) => {
        this.companyMsg = response;
        this.url = this.companyMsg.compHeadimg;
      });
    },
    /* 保存企业信息 */
    save1() {
      setCompany(this.companyMsg).then(() => {
        this.$message({
          message: '保存成功',
          type: 'success',
          showClose: true,
        });
      }).catch(() => {
        this.$message({
          message: '保存失败',
          type: 'error',
          showClose: true,
        });
      });
    },
    /* 获取当前登录人信息 */
    getloading() {
      getLoginInfo().then((response) => {
        this.userKind = response.managerName;
        let phonenum = response.managerMobilePhone;
        this.yanzhengphoneNum = phonenum;
        phonenum = phonenum.split('');
        phonenum.splice(3, 4, '****');
        phonenum = phonenum.join('');
        this.loginMsg.userCellPhone = phonenum;
        this.loginMsg.userRealName = response.managerName;
      });
    },
    /* 发送验证码 */
    sendNum(mobilePhone, userKind) {
      if (mobilePhone === '' && userKind === '') {
        this.$message({
          message: '企业管理员及电话号不能为空',
          type: 'error',
          showClose: true,
        });
      } else {
        const data = {
          mobilePhone,
          domainName: 'yh',
          companyId: localStorage.getItem('enterprise-front-companyId')
        };
        sendMsg(data).then(() => {
          this.$message({
            message: '验证码已发出，请注意查收',
            type: 'success',
            showClose: true,
          });
          this.buttonMsg = '重试(  60  ) ';
          this.buttonState = 'info';
          this.buttonTf = true;
          this.setS();
        }).catch(() => {
          this.$message({
            message: '验证码发送失败，请重试',
            type: 'error',
            showClose: true,
          });
        });
      }
    },

    /* 计时器 */
    setS() {
      let s = 60;
      this.timer = setInterval(() => {
        if (s > 0) {
          s -= 1;
          this.buttonMsg = '重新(  ' + s + '  ) ';
        } else {
          this.buttonMsg = '重试';
          this.buttonState = 'primary';
          this.buttonTf = false;
          clearInterval(this.timer);
        }
      }, 1000);
    },
    /* 企业logo效果预览 */
    looklogo() {
      this.showLogo = true;
    },
    uploadPhoto(e) {
      let ossInter = null;
      let ossAccessConfig = null;
      let fileName = null;
      const fileTypes = ['.jpg', '.png'];
      const filePath = e.target.value;
      if (filePath) {
        let isNext = false;
        const fileEnd = filePath.substring(filePath.indexOf('.'));
        for (let i = 0; i < fileTypes.length; i++) {
          if (fileTypes[i] === fileEnd) {
            isNext = true;
            break;
          }
        }
        if (!isNext) {
          this.$message({
            message: '不接受此类型文件',
            type: 'error',
            showClose: true,
          });
          e.target.value = '';
          return false;
        }
      } else {
        return false;
      }
      const file = e.target.files[0];
      const filesize = file.size;
      fileName = file.name;
      if (filesize > 1048576) {
        this.$message({
          type: 'error',
          message: '图片大于1M',
          showClose: true,
        });
        return false
      }
      getOssInterimCredentials().then((response) => {
        ossInter = response;
        GotOssAccessConfig().then((res) => {
          ossAccessConfig = res;

          client(ossInter, ossAccessConfig)
            .put(fileName, file)
            .then((result) => {
              this.companyMsg.compHeadimg = result.url;
              this.$message({
                type: 'success',
                message: this.$t('upload.saveSuccessfully'),
                showClose: true,
              });
            });
        });
      });
    },
    querySearch(queryString, cb) {
      const restaurants = this.restaurants;
      const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    /* 搜索结果保存 */
    handleSelect(item) {
      this.newLoginMsg.userId = item.userId;
      this.newLoginMsg.userCellPhone = item.userCellPhone;
      this.newLoginMsg.userKind = item.userKind;
    },
    /* 获取部门下所有职员 */
    getAllPeople() {
      findUsers().then((response) => {
        this.restaurants = [];
        for (let i = 0; i < response.records.length; i++) {
          this.restaurants.push({
            value: response.records[i].userRealName,
            userId: response.records[i].userId,
            userCellPhone: response.records[i].userCellPhone,
            userKind: response.records[i].userKind
          });
        }
      });
    },
    /* 确认修改管理员 */
    saveStyle(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = {
            userId: this.newLoginMsg.userId,
            originalManagerVeriCode: this.loginMsg.veriCode,
            newManagerVeriCode: this.newLoginMsg.veriCode
          };
          changeManager(data).then(() => {
            this.$message({
              message: '修改成功',
              type: 'success',
              showClose: true,
            });
            this.leftstate(1);
          }).catch(() => {
            this.$message({
              message: '修改失败',
              type: 'error',
              showClose: true,
            });
          });
        } else {
          this.$message({
            message: '带*号为必填项',
            type: 'error',
            showClose: true,
          });
          return false;
        }
      });
    },
    /* 修改管理员密码 */
    savePassword(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.password.newPassword === this.password.originalPassword) {
            this.$message({
              message: '新密码不能和原密码相同',
              type: 'error',
              showClose: true,
            });
            return false;
          } if (this.password.newPassword !== this.password.new2Password) {
            this.$message({
              message: '两次输入密码不一致',
              type: 'error',
              showClose: true,
            });
            return false;
          }
          const data = {
            originalPassword: this.password.originalPassword,
            newPassword: this.password.newPassword
          };
          changePasswordByPwd(data).then(() => {
            this.$message({
              message: '修改成功',
              type: 'success',
              showClose: true,
            });
            this.showSetPassword = false;
            this.leftstate(1);
          }).catch((code) => {
            if (code === 'AUTH_005') {
              this.$message({
                message: '原始密码不正确',
                type: 'error',
                showClose: true,
              });
              return false;
            } if (code === 'AUTH_006') {
              this.$message({
                message: '新密码与原始密码相同',
                type: 'error',
                showClose: true,
              });
            }
          });
        } else {
          this.$message({
            message: '带*号为必填项',
            type: 'error',
            showClose: true,
          });
          return false;
        }
      });
    },

    /* 获取管理船舶列表信息 */
    getshipMsg() {
      const data = {
        currentPage: this.page.currentPage,
        pageSize: this.page.pageSize
      };
      findCompanyVessels(data).then((response) => {
        this.page.total = response.total;
        this.shipList = response.records;
      });
    },
    mouseEnter(row, column) {
      this.mouseEnterHisrory = row;
      if (column.label === '操作') {
        this.addShipMsg = row;
        if (row.vesselStatus === 'EXITED') {
          this.lable.splice(1, 1, {
            lab: '删除',
            click: 'delate'
          });
        } else {
          this.lable.splice(1, 1);
        }
      }
    },
    delate() {
      const data = {
        vesselIds: [this.addShipMsg.vesselId]
      };
      removeShip(data).then(() => {
        this.$message({
          message: '删除成功',
          type: 'success',
          showClose: true,
        });
        this.leftstate(3);
      }).catch(() => {
        this.$message({
          message: '删除失败',
          type: 'error',
          showClose: true,

        });
      });
    },
    skp() {
      this.saves = false;
      this.showaddship = true;
      this.addshiptitlename = {
        value: '编辑船舶',
        id: 'edit'
      };
    },
    addship() {
      this.saves = true;
      this.addShipMsg = {
        vesselName: '', // 船舶名称
        vesselShortName: '', // 船舶简称
        vesselTypeName: '', // 船舶类型名称
        vesselStatus: '', // 船舶管理状态
        mmsiCode: '' // MMSI号
      };
      this.addshiptitlename = {
        value: '添加船舶',
        id: 'add'
      };
      this.showaddship = true;
    },
    /* 保存添加船舶 */
    saveAddShip(formName, saves) {
      let url = '';
      let sussessmsg = '';
      if (this.addshiptitlename.id === 'add') {
        url = '/baseVessel/api/create';
        sussessmsg = '添加成功';
      } else {
        url = '/baseVessel/api/changeInfo';
        sussessmsg = '修改成功';
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addAndChangeShip(url, this.addShipMsg).then(() => {
            this.$message({
              message: sussessmsg,
              type: 'success',
              showClose: true,
            });
            if (saves === 'saves') {
              this.showaddship = true;
              this.addShipMsg = {};
            } else {
              this.showaddship = false;
              this.leftstate(3);
            }
          }).catch(() => {
            this.$message({
              message: 'errormsg',
              type: 'error',
              showClose: true,
            });
          });
        } else {
          this.$message({
            message: '带*号为必填项或格式填写错误',
            type: 'error',
            showClose: true,
          });
          return false;
        }
      });
    },
    cancelAddShip() {
      this.showaddship = false;
      this.getshipMsg();
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getshipMsg();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getshipMsg();
    }

  }
};

</script>
<style scoped lang="scss">
.content {
  width: 1200px;
}
.left {
  width: 260px;
  position: absolute;
}
.right {
  position: relative;
  width: 940px;
  height: calc(91vh);
  border-left: 1px solid #cccccc;
  margin-left: 260px;
}
.leftlist {
  margin-top: 5px;
  list-style: none;
  padding: 0;
}
.spa {
  display: inline-block;
  margin-left: 60px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #333333;
}
.lia {
  border-left: 10px solid rgba(0, 0, 0, 0);
  cursor: pointer;
}
.lia:after {
  content: "";
  width: 20px;
  background-color: #1d6ced;
}
.lia:hover {
  border-left: 10px solid #1d6ced;
  background-color: #dde9fc;
}
.activelia {
  border-left: 10px solid #1d6ced;
  background-color: #dde9fc;
}
.leftstyle {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #333333;
  padding-top: 5px;
  margin-left: 20px;
  font-weight: bold;
}
.leftstyle:before {
  content: "▍";
  color: #1d6ced;
  margin-right: 4px;
}
.inputall {
  margin-top: 30px;
  margin-left: 10px;
}
.inputall >>> .el-form-item__label,
.imghead {
  font-size: 12px;
  color: #666666;
}

.uphead {
  margin: 20px 0;
  height: 60px;
  line-height: 60px;
}
.img {
  display: inline-block;
  height: 48px;
  width: 48px;
  border-radius: 5px;
  border: 1px solid #cccccc;
  position:relative;
  left:10px;

}
.kyc-passin {
  margin-left: 20px;
  width: 140px;
}
.talk {
  color: #999999;
  font-size: 12px;
}
.save1 {
  margin-left: 133px;
  margin-top: 20px;
  width: 100px;
  height: 36px;
  font-size: 14px;
}
.lookImg {
  color: #1d6ced;
  display: inline-block;
  margin-left: 30px;
  cursor: pointer;
}
.setBefore,
.setAfter {
  display: inline-block;
}
.setAfter {
  float: right;
  right: 20px;
  border-left: 1px dashed #cccccc;
  padding-left: 15px;
}
.setTitle {
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: #666666;
}
.img1 {
  position: relative;
  margin: 10px 0;
  width: 278px;
  height: 135px;
  background-image: url("../../static/images/components/businessSettings/logoimg.png");
  border: 1px solid #999999;
}
.text {
  display: inline-block;
  font-size: 12px;
  color: #666666;
}
.imgshow {
  position: absolute;
  top: 3px;
  left: 3px;
  background-color: #666666;
  width: 23px;
  height: 23px;
  border-radius: 4px;
}
.leftstyle2 {
  width: 940px;
  height: 40px;
  line-height: 40px;
}
.leftstyle3 {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #333333;
  padding-top: 5px;
  padding-left: 20px;
  font-weight: bold;
  background-color: #e4e7ed;
}
.spanname {
  font-size: 12px;
  color: #666666;
}
/deep/.name3 .el-input.is-disabled .el-input__inner {
  width: 240px;
}
.name3 {
  position: relative;
}
.sendnum {
  position: absolute;
  top: 44px;
  left: 400px;
  /*width: 80px;*/
  height: 30px;
}
.stateS {
  color: #333333;
}
.el-button--info.is-disabled,
.el-button--info.is-disabled:active,
.el-button--info.is-disabled:focus,
.el-button--info.is-disabled:hover {
  color: #333333;
}
/deep/.name4.el-form-item .el-input__inner {
  width: 270px;
}
.passwordimg {
  position: absolute;
  left: 50%;
  top: 30%;
  margin-left: -65px;
}
.setpasswordbutton {
  position: absolute;
  left: 50%;
  top: 47%;
  margin-left: -48px;
  height: 40px;
}
.name5 {
  margin-bottom: 40px;
}

.rightlist {
  padding: 0 20px;
}
.backgroundcolor {
  background-color: #f6f6f6;
}
.addshipbutton {
  margin-left: 10px;
}
.jieguan {
  background-color: #22ac38;
  color: #ffffff;
  padding: 3px 6px;
  border-radius: 3px;
}
.tuichu {
  background-color: #e74c3c;
  color: #ffffff;
  padding: 3px 6px;
  border-radius: 3px;
}
.font {
  width: 120px;
}
/deep/ .newInput .el-form-item__label{
  flex: 0 0 140px !important;
}
.font1{
 position:relative;
  left:5px;
}
</style>
