<style>
  .companyManagement .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px;
    border-radius: 50%
  }

  .companyManagement .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .companyManagement .avatar-uploader-icon {
    font-size: 28px;
    color: white;
    width: 100px;
    height: 100px;
    line-height: 80px;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
  }

  /* 上传样式 */
  .companyManagement .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px;
    border-radius: 50%
  }

  .companyManagement .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .companyManagement .avatar-uploader-icon {
    font-size: 28px;
    color: white;
    width: 100px;
    height: 100px;
    line-height: 80px;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
  }

  .companyManagement .avatar {
    width: 100px;
    height: 100px;
    display: block;
    position: absolute;
    left: 0;
    top: 0
  }

</style>
<template>
  <div class="flexOne companyManagement">
    <div class="query-box">
      <ul>
        <li>
          <span><em>{{$t('admin.admin_company')}}</em>
            <el-input @keyup.enter.native="getList" v-model="msg.BName" :placeholder="$t('pub.pleaseImport')">
            </el-input>
          </span>
        </li>
        <li>
          <span><em>{{$t('admin.admin_domain')}}</em>
            <el-input @keyup.enter.native="getList" v-model="msg.Domain" :placeholder="$t('pub.pleaseImport')">
            </el-input>
          </span>
        </li>
        <li>
          <span><em>{{$t('admin.admin_status')}}</em>
            <el-select v-model="msg.Status" :placeholder="$t('pub.unlimitedSel')">
              <el-option :label="$t('pub.unlimitedSel')" value=''></el-option>
              <el-option :label="$t('pub.openSel')" value='0'></el-option>
              <el-option :label="$t('pub.closeSel')" value='1'></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')"
            @click="resetPageIndex(),getList()" /> &nbsp;
          <input type="button" class="normalBtn" :value="$t('pub.addBtn')"
            @click="outerVisible = true,dialogTitle=$t('objFill.xingzengs')" />

        </li>
      </ul>
    </div>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th width="300">{{$t('admin.admin_company')}}</th>
        <th>{{$t('hotel.suplier_contact')}}</th>
        <th>{{$t('restaurant.res_ContactNumber')}}</th>
        <th>{{$t('admin.admin_status')}}</th>
        <th>{{$t('admin.admin_isshow')}}</th>
        <th>{{$t('admin.B2BShow')}}</th>
        <th>{{$t('admin.IsParentCompany')}}</th>
        <th>{{$t('fnc.bweibi')}}</th>
        <th v-if="userInfo.RB_Group_id==2">{{$t('admin.isServiceFei')}}</th>
        <th v-if="userInfo.RB_Group_id==2">{{$t('admin.serviceFei')}}</th>
        <th width="200">{{$t('admin.admin_operate')}}</th>
      </tr>
      <tr v-for="(item,index) in DataList" v-loading='loading'>
        <td>{{item.BName}}</td>
        <td>{{item.ContactPersion}}</td>
        <td>{{item.MobilePhone}}</td>
        <td>{{item.Status==0? $t('pub.openSel'): $t('pub.closeSel')}}</td>
        <td>{{item.is_show==0?$t('system.table_isShows'):$t('MarketingActi.notShow')}}</td>
        <td>{{item.B2BShow==0?$t('system.table_isShows'):$t('MarketingActi.notShow')}}</td>
        <td>{{item.IsParentCompany=='1'?$t('objFill.zonggs'):$t('objFill.fengs')}}</td>
        <td>{{item.StandardCurrencyName?item.StandardCurrencyName:'-'}}</td>
        <td v-if="userInfo.RB_Group_id==2">{{item.IsFreeFee==0?$t('admin.fufei'):$t('advmanager.v_free')}}</td>
        <td v-if="userInfo.RB_Group_id==2">{{item.ServiceFee}}</td>
        <td>
          <el-row>
            <el-tooltip class="item" effect="dark" :content="$t('pub.updateMsg')" placement="top-start">
              <el-button @click="outerVisible = true,dialogTitle=$t('objFill.xiugaigsxx'),updateData(item.Id)" type="primary"
                icon="el-icon-edit" circle></el-button>
            </el-tooltip>
          </el-row>
        </td>
      </tr>
    </table>
    <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='w500' :title="dialogTitle" :visible.sync="outerVisible" center
      :before-close="closeChangeMachie">
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="120px">
        <el-form-item class='w400' :label="$t('fnc.bweibi')" prop="StandardCurrencyId">
          <el-select class='w280' :placeholder="$t('objFill.qingxuanzhebwd')" filterable v-model="addMsg.StandardCurrencyId" clearable @change="getStandardCurrencyId">
            <el-option v-for='item in coinGetList'
                :label='item.Name'
                :value='item.ID'
                :key='item.ID'>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class='w400' :label="$t('admin.admin_company')" prop="BName">
          <el-input type="text" v-model="addMsg.BName" :placeholder="$t('pub.pleaseImport')"></el-input>
        </el-form-item>
        <el-form-item class='w400' :label="$t('admin.CompanyTitle')" prop="CompanyTitle">
          <el-input type="text" v-model="addMsg.CompanyTitle" :placeholder="$t('admin.CompanyTitle')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('system.table_pvrg')" prop="Province">
          <el-select class='w280' :placeholder="$t('pub.pleaseSel')" filterable v-model="addMsg.Province"
            @change="getCityList(addMsg.Province,1)">
            <el-option :label="$t('pub.unlimitedSel')" :value='commonDefaultSelect'></el-option>
            <el-option v-for='item in ProvinceList' :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('system.table_city')" prop="City">
          <el-select class='w280' :placeholder="$t('pub.pleaseSel')" filterable v-model="addMsg.City">
            <el-option :label="$t('pub.unlimitedSel')" :value='commonDefaultSelect'></el-option>
            <el-option v-for='item in CityList' :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class='w400' :label="$t('admin.admin_address')" prop="Address">
          <el-input type="text" v-model="addMsg.Address" :placeholder="$t('pub.pleaseImport')"></el-input>
        </el-form-item>
        <el-form-item class='w400' :label="$t('pub.telphone')" prop="Tel">
          <el-input type="text" v-model="addMsg.Tel" :placeholder="$t('pub.pleaseImport')"></el-input>
        </el-form-item>
        <el-form-item class='w400' :label="$t('admin.admin_Contract')" prop="ContactPersion">
          <el-input type="text" v-model="addMsg.ContactPersion" :placeholder="$t('pub.pleaseImport')"></el-input>
        </el-form-item>
        <el-form-item class='w400' :label="$t('admin.admin_Mobile')" prop="MobilePhone">
          <el-input type="text" v-model="addMsg.MobilePhone" :placeholder="$t('pub.pleaseImport')"></el-input>
        </el-form-item>
        <el-form-item class='w400' :label="$t('admin.admin_jieji')" prop="AirportServicePerson">
          <el-input type="text" v-model="addMsg.AirportServicePerson" :placeholder="$t('pub.pleaseImport')"></el-input>
        </el-form-item>
        <el-form-item class='w400' :label="$t('admin.admin_jieMobile')" prop="AirportServicePhone">
          <el-input type="text" v-model="addMsg.AirportServicePhone" :placeholder="$t('pub.pleaseImport')"></el-input>
        </el-form-item>
        <el-form-item class='w400' :label="$t('admin.admin_chutuan')" prop="NoticesName">
          <el-input type="text" v-model="addMsg.NoticesName" :placeholder="$t('pub.pleaseImport')"></el-input>
        </el-form-item>
        <el-form-item class='w400' :label='$t("admin.admin_status")' prop="Status">
          <el-switch v-model="addMsg.Status" active-value="0" inactive-value="1"></el-switch>
        </el-form-item>
        <el-form-item class='w400' :label='$t("admin.admin_isshow")' prop="is_show">
          <el-switch v-model="addMsg.is_show" active-value="0" inactive-value="1"></el-switch>
        </el-form-item>
        <el-form-item class='w400' :label="$t('admin.B2BShow')" prop="B2BShow">
          <el-switch v-model="addMsg.B2BShow" active-value="0" inactive-value="1"></el-switch>
        </el-form-item>
        <el-form-item class='w400' :label="$t('admin.companyShow')" prop="IsParentCompany">
          <el-switch v-model="addMsg.IsParentCompany" active-value="1" inactive-value="2"></el-switch>
        </el-form-item>
        <el-form-item class='w400' :label="$t('admin.departChushi')" prop="BeginTier">
          <el-input type="text" v-model="addMsg.BeginTier" :placeholder="$t('pub.pleaseImport')"></el-input>
        </el-form-item>
        <el-form-item class='w400' :label='$t("admin.admin_leader")' prop="BranchManager">
          <el-select filterable clearable v-model='addMsg.BranchManager' :placeholder="$t('pub.pleaseSel')"
            class='w280'>
            <el-option :label="$t('pub.pleaseSel')" :value='0'></el-option>
            <el-option v-for='item in employeeList' :key="item.EmployeeId" :label="item.EmName"
              :value="item.EmployeeId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class='w400' :label='$t("admin.isServiceFei")'>
          <el-select v-model='addMsg.IsFreeFee' :placeholder="$t('pub.pleaseSel')" class='w280'>
            <el-option :label="$t('admin.fufei')" :value='0'></el-option>
            <el-option :label="$t('advmanager.v_free')" :value='1'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class='w400' :label="$t('admin.serviceFei')" v-if="addMsg.IsFreeFee==0">
          <el-input type="text" v-model="addMsg.ServiceFee"></el-input>
        </el-form-item>

        <el-form-item :label='$t("admin.companyZhang")'>
          <el-upload action="http://upload.oytour.com" class="avatar-uploader" :http-request="UploadImage" :show-file-list="false"
            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i class="el-icon-upload2  avatar-uploader-icon"></i>
            <span v-if="imageUrl" class="repUp">{{$t('system.up_againUp')}}</span>
            <span v-else class="repUp">{{$t('system.up_upImg')}}</span>
          </el-upload>
        </el-form-item>
        <el-form-item :label='$t("admin.tripLogo")'>
          <el-upload action="http://upload.oytour.com" class="avatar-uploader" :http-request="UploadImage_Logo" :show-file-list="false"
            :on-success="handleAvatarSuccessLogo" :before-upload="beforeAvatarUpload">
            <img v-if="imageUrlLogo" :src="imageUrlLogo" class="avatar">
            <i class="el-icon-upload2  avatar-uploader-icon"></i>
            <span v-if="imageUrlLogo" class="repUp">{{$t('system.up_againUp')}}</span>
            <span v-else class="repUp">{{$t('system.up_upImg')}}</span>
          </el-upload>
        </el-form-item>
        <el-form-item class='w400' :label='$t("hotel.hotel_remark")' prop="Remarks">
          <el-input type="textarea" v-model="addMsg.Remarks"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <button class="hollowFixedBtn"
          @click="outerVisible = false,resetForm('addMsg')">{{$t('pub.cancelBtn')}}</button>
        &nbsp;
        <button class="normalBtn" type="primary" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      let reg = /^([1-9][0-9]{0,1}|100)$/
      let validateBeginTier = (rule, value, callback) => {
        if (this.addMsg.IsParentCompany == '1' && value != '1') {
          return callback(new Error(this.$t('objFill.zonggscjy')));
        } else if (this.addMsg.IsParentCompany == '2' && !reg.test(value)) {
          return callback(new Error(this.$t('objFill.chengjiznwydybb')));
        } else {
          callback();
        }
      }
      return {
        userInfo: {}, //当前用户信息
        options: [{
          value: '0',
          label: this.$t('pub.openSel')
        }, {
          value: '1',
          label: this.$t('pub.closeSel')
        }],
        ProvinceList: [],
        CityList: [],
        commonDefaultSelect: 0,
        imageUrl: '',
        imageUrlLogo: '',
        loading: true,
        chosenIndex: -1,
        res: {},
        total: 0,
        pageSize: '',
        value: '',
        DataList: [],
        groupList: [],
        layerGroupList: [],
        employeeList: [],
        currentPage: 1,
        outerVisible: false,
        dialogTitle: '',
        msg: { //请求数据
          pageIndex: 1,
          pageSize: 15,
          Status: '',
          BName: '',
          Domain: '',
          RB_Group_Id: ''
        },
        groupMsg: {
          Status: '',
        },
        employeeMsg: {
          IsLeave: 0,
        },
        rules: { //表单验证
          GroupName: [{
            required: true,
            message: this.$t('objFill.qingxuanzhejt'),
            trigger: 'change'
          }],
          // StandardCurrencyId: [{
          //   required: true,
          //   message: this.$t('objFill..qingxuanzhebwd'),
          //   trigger: 'change'
          // }],
          BName: [{
            required: true,
            message: this.$t('objFill.qingxuanzhegsmc'),
            trigger: 'blur'
          }],
          Address: [{
            required: true,
            message: this.$t('visaT.qsradder'),
            trigger: 'blur'
          }],
          Tel: [{
            required: true,
            message: this.$t('objFill.qingshuruzuoji'),
            trigger: 'blur'
          }],
          ContactPersion: [{
            required: true,
            message: this.$t('objFill.qingshurulxxm'),
            trigger: 'blur'
          }],
          MobilePhone: [{
            required: true,
            message: this.$t('objFill.qingshurulxrdh'),
            trigger: 'blur'
          }],
          NoticesName: [{
            required: true,
            message: this.$t('objFill.qingshuructtzs'),
            trigger: 'blur'
          }],
          Remarks: [{
            required: false,
            message: '',
            trigger: 'blur'
          }],
          BeginTier: [{
            required: true,
            validator: validateBeginTier,
            trigger: 'blur'
          }],
          CompanyTitle: [{
            required: true,
            message: this.$t('objFill.qingshuruqrtt'),
            trigger: 'blur'
          }]

        },
        addMsg: {
          Id: '-1',
          BName: '',
          Domain: '',
          ContactPersion: '',
          MobilePhone: '',
          Tel: '',
          Address: '',
          Remarks: '',
          Status: '0',
          RB_Group_Id: '',
          NoticesName: '',
          AirportServicePerson: '',
          AirportServicePhone: '',
          is_show: '0',
          B2BShow: '0',
          BranchManager: '',
          IsParentCompany: '1',
          BeginTier: '',
          Province: '',
          City: '',
          ConfirmationSignet: '',
          GatheringTime: '',
          GatheringAddress: '',
          TravelLogo: '',
          CompanyTitle: '',
          IsFreeFee: 0,
          ServiceFee: 0,
          StandardCurrencyId: '0'
        },
        coinGetList: [],
        updateMsg: {
          GroupId: '1'
        },
        userInfoList: {},
      }
    },
    mounted() {
      this.userInfo = this.getLocalStorage();
      //获取用户登录信息
      if (this.$route.query.id != undefined) { //如果用户从集团页面跳到 公司页面， 那查询公司使用的是 选中集团id. 如果直接进入公司页面， 默认使用该用户登录信息中的 集团id
        this.addMsg.RB_Group_Id = this.msg.RB_Group_Id = this.$route.query.id;
      } else {
        this.addMsg.RB_Group_Id = this.msg.RB_Group_Id = this.userInfo.RB_Group_id
      }
      this.userInfoList = this.userInfo;
      this.getProvince();
      this.getList();
      this.getGroup();
      this.getEmployee();
      this.financeinfo_post_GetList()
    },
    methods: {
      financeinfo_post_GetList(TCID){ // 获取币种
          this.apipost('financeinfo_post_GetList',{Name:'', TCID: TCID}, res => {
              if(res.data.resultCode == 1) {
                  this.coinGetList = res.data.data;
              }
          }, err => {})
      },
      //上传图片
      UploadImage(file) {
        let newArr = [];
        newArr.push(file.file);
        let fileName = file.file.name;
        var path = "/Upload/Temporary/";
        this.UploadSelfFileT(path, newArr, x => {
          this.imageUrl = this.domainManager().ViittoFileUrl + x.data.FilePath;
          this.addMsg.ConfirmationSignet = x.data.FilePath;
        });
      },
      //上传图片
      UploadImage_Logo(file) {
        let newArr = [];
        newArr.push(file.file);
        let fileName = file.file.name;
        var path = "/Upload/Temporary/";
        this.UploadSelfFileT(path, newArr, x => {
          this.imageUrlLogo = this.domainManager().ViittoFileUrl + x.data.FilePath;
          this.addMsg.TravelLogo = x.data.FilePath;
        });
      },
      handleAvatarSuccess(res, file) { //上传
        if (res.resultCode == 1) {
          var img_path = res.data.FullFilePath
          this.addMsg.ConfirmationSignet = res.data.FilePath
          this.imageUrl = img_path
        }
      },
      handleAvatarSuccessLogo(res, file) { //上传
        if (res.resultCode == 1) {
          var img_path = res.data.FullFilePath
          this.addMsg.TravelLogo = res.data.FilePath
          this.imageUrlLogo = img_path
        }
      },
      beforeAvatarUpload(file) { //上传-
        // const isJPG = file.type === 'image/jpeg';
        // const isLt2M = file.size / 1024 / 1024 < 2;
        // if (!isJPG) {
        // this.$message.error(this.$t('objFill.shangctxznjpg'));
        // }
        // if (!isLt2M) {
        // this.$message.error(this.$t('objFill.shangctxdxemb'));
        // }
        // return isJPG && isLt2M;
      },
      getList() { //获取数据
        this.loading = true
        this.apipost('admin_get_BranchGetPageList', this.msg, res => {
          if (res.data.resultCode == 1) {
            this.DataList = res.data.data.pageData;
            this.total = res.data.data.count;
            this.loading = false
          } else {
            this.$message.error(res.data.message)
          }
        }, err => {})
      },
      getGroup() { //获取集团
        this.apipost('admin_get_GroupGetList', this.groupMsg, res => {
          this.layerGroupList = this.groupList = res.data.data;
        }, err => {})
      },

      getEmployee() { //员工
        this.apipost('admin_get_EmployeeGetList', this.employeeMsg, res => {
          this.employeeList = res.data.data;
        }, err => {})
      },
      getStandardCurrencyId(val){
        if(this.addMsg.StandardCurrencyId==''){this.addMsg.StandardCurrencyId=0}
      },
      submitForm(addMsg) { //提交创建、修改表单
        this.$refs[addMsg].validate((valid) => {
          if (valid) {
            this.addData()
          } else {
            return false;
          }
        });
      },
      addData() { //新增数据
        if(this.addMsg.StandardCurrencyId==''){
          this.addMsg.StandardCurrencyId = 0
        }
        this.apipost('admin_post_BranchSet', this.addMsg, res => {
          if (res.data.resultCode == 1) {
            this.$message.success(res.data.message);
            this.outerVisible = false;
            this.getList()
            this.resetForm('addMsg');
          } else {
            this.$message.error(res.data.message)
          }
        }, err => {})
        this.getList();
      },
      updateData(id) {
        this.apipost('admin_get_BranchGet', {
          branchId: id
        }, res => {
          if (res.data.resultCode == 1) {
            this.addMsg = res.data.data;
            this.getCityList(this.addMsg.Province, 2);
            this.addMsg.Status = this.addMsg.Status.toString();
            this.addMsg.is_show = this.addMsg.is_show.toString();
            this.addMsg.B2BShow = this.addMsg.B2BShow.toString();
            this.addMsg.IsParentCompany = this.addMsg.IsParentCompany.toString();
            // if(this.addMsg.StandardCurrencyId==0){
            //   this.addMsg.StandardCurrencyId = ''
            // }
            this.imageUrl = this.addMsg.ConfirmationSignet;
            this.imageUrlLogo = this.addMsg.TravelLogo;
          } else {}
        }, err => {})
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.currentPage = 1
      },
      closeChangeMachie(done) { //弹出框关闭初始化弹框内表单
        done();
        this.resetForm('addMsg');
      },
      resetForm(formName) { //弹出框取消 初始化谈框内表单
        this.$refs[formName].resetFields();
        this.addMsg.Id = '-1'
        this.addMsg.ConfirmationSignet = '';
        this.addMsg.TravelLogo = '';
        this.imageUrl = '';
        this.imageUrlLogo = '';
        this.addMsg.ServiceFee = 0;
      },
      //获取城市列表
      getProvince() {
        let msg = {
          Id: 2
        };
        this.apipost(
          "dict_post_Destination_GetChildList",
          msg,
          res => {
            this.ProvinceList = res.data.data;
          },
          err => {}
        );
      },
      //根据省份选择获取城市
      getCityList(Id, type) {
        this.CityList = [];
        if (type == 1) {
          this.addMsg.City = "";
        }
        let msg = {
          Id: Id
        };
        this.apipost(
          "dict_post_Destination_GetChildList",
          msg,
          res => {
            this.CityList = res.data.data;
          },
          err => {}
        );
      },
    },
  }

</script>