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

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

  .scmHotelManagement .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);
  }

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

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

  .scmHotelManagement .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);
  }

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

</style>

<template>
  <div class="flexOne scmHotelManagement">
    <div class="query-box">
      <ul>
        <li>
          <span><em>{{$t('system.query_airName')}}</em>
            <el-input class='w210' v-model="msg.HName" :placeholder="$t('pub.pleaseImport')"
              @keyup.enter.native="getList"></el-input>
          </span>
        </li>
        <li>
          <span><em>{{$t('advmanager.v_type')}}</em>
            <el-select class='w210' v-model="msg.HType" :placeholder="$t('pub.unlimitedSel')">
              <el-option :label="$t('pub.unlimitedSel')" :value='-0'></el-option>
              <el-option v-for="item in TypeList" :key="item.Id" :label="item.Name" :value="item.Id"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span><em>{{$t('admin.admin_status')}}</em>
            <el-select class='w210' v-model="msg.Status" :placeholder="$t('pub.unlimitedSel')">
              <el-option :label="$t('pub.unlimitedSel')" :value='-1'></el-option>
              <el-option :label="$t('pub.normalSel')" :value='0'></el-option>
              <el-option :label="$t('system.ph_shanchu')" :value='1'></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')"
            @click="resetPageIndex(),getList()" />
          <input type="button" @click="outerVisible = true,dialogTitle=$t('objFill.v101.myOrdersAllType.xinzjdpzxxi'),clearData()" class="normalBtn"
            :value="$t('pub.addBtn')" />
        </li>
      </ul>
    </div>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th  style="width:80px">{{$t('hotel.hotel_SerialNumber')}}</th>
        <th  style="width:100px">{{$t('objFill.v101.myOrdersAllType.peizhixmc')}}</th>
        <th  style="width:100px">{{$t('objFill.v101.myOrdersAllType.riyuminc')}}</th>

        <th  style="width:100px">{{$t('advmanager.v_type')}}</th>
        <th  style="width:100px">{{$t('admin.admin_status')}}</th>
        <th  style="width:100px">{{$t('admin.admin_czPerson')}}</th>
        <th  style="width:100px">{{$t('hotel.table_operattime')}}</th>
        <th  style="width:100px">{{$t('hotel.table_operat')}}</th>
      </tr>
      <tr v-for="(item,index) in DataList" v-loading='loading' :key="index">
        <td>{{item.HConfigId}}</td>
        <td>{{item.HName}}</td>
        <td>{{item.JapanName}}</td>
        <td>{{item.HTypeStr}}</td>
        <td>{{item.StatusStr}}</td>
        <td>{{item.UpdateByName}} </td>
        <td>{{item.UpdateTimeStr}}</td>
        <td>
          <el-tooltip class="item" effect="dark" :content="$t('pub.updateMsg')" placement="top-start">
            <el-button @click="outerVisible = true,dialogTitle=$t('objFill.v101.myOrdersAllType.xiugjdpzxxin'),GetHotelConfig(item.HConfigId)" type="primary"
              icon="el-icon-edit" circle></el-button>
          </el-tooltip>
          <el-tooltip v-if="item.Status==0" class="item" effect="dark" :content="$t('system.table_delete')" placement="top-start">
            <el-button @click="DeleteHotelConfig(item)" type="danger"
              icon="el-icon-delete" circle></el-button>
          </el-tooltip>
        </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>
      <el-form :model="addMsg" ref="addMsg" label-width="120px">
        <el-form-item class='w400' :label="$t('system.query_airName')">
          <el-input type="text" v-model="addMsg.HName" :placeholder="$t('system.ph_name')"></el-input>
        </el-form-item>
         <el-form-item class='w400' :label="$t('objFill.v101.myOrdersAllType.riyuminc')">
          <el-input type="text" v-model="addMsg.JapanName" :placeholder="$t('system.ph_name')"></el-input>
        </el-form-item>
        <el-form-item class='w400' :label="$t('system.query_type')">
          <el-select class='w210' v-model="addMsg.HType" :placeholder="$t('pub.unlimitedSel')">
            <el-option :label="$t('pub.unlimitedSel')" :value='-0'></el-option>
            <el-option v-for="item in TypeList" :key="item.Id" :label="item.Name" :value="item.Id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <button class="hollowFixedBtn" @click="outerVisible = false,clearData()">{{$t('pub.cancelBtn')}}</button> &nbsp;
        <button class="normalBtn" type="primary" @click="saveSCMAccount()" >{{$t('pub.saveBtn')}}</button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        loading: true,
        DataList: '',
        total: 0,
        currentPage: 1,
        outerVisible: false,
        dialogTitle: '',
        msg: {
          //请求数据
          pageIndex: 1,
          pageSize: 15,
          Status: 0,
          HName: '',
          HType: 0,
        },
        TypeList: [], //类型列表
        addMsg: {
          HConfigId: 0, //编号
          HType: 0, //配置类型(1-公共设施,2-客房设施，3-活动设施服务,4-酒店服务,5-前台语言)
          HName: "", //配置名称
          JapanName:'',
        },
      }
    },
    mounted() {
      this.GetConfigTypeList();
      this.getList();
    },
    methods: {
      //保存信息
      saveSCMAccount() {
        this.apipost('scm_post_SetHotelConfigService', this.addMsg, res => {
          if (res.data.resultCode == 1) {
            this.outerVisible = false;
            this.$message.success(res.data.message);
            this.getList()
            this.clearData();
          } else {
            this.$message.error(res.data.message)
          }
        }, err => {})
      },
      //清空数据
      clearData() {
        this.addMsg.HConfigId = 0;
        this.addMsg.HType = 0;
        this.addMsg.HName = "";
        this.addMsg.JapanName = "";

      },
      getList() { //获取数据
        this.loading = true
        this.apipost('scm_get_GetHotelConfigPageListService', this.msg, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.DataList = res.data.data.pageData;
            this.total = res.data.data.count;
          } else {}
        }, err => {})
      },
      //获取账号信息
      GetConfigTypeList() {
        this.apipost('scm_post_GetHotelConfigTypeService', {}, res => {
          if (res.data.resultCode == 1) {
            this.TypeList = res.data.data;
          }
        }, err => {})
      },
      //获取账号信息
      GetHotelConfig(id) {
        this.apipost('scm_get_GetHotelConfigService', {
          HConfigId: id
        }, res => {
          if (res.data.resultCode == 1) {
            this.addMsg = res.data.data;
          }
        }, err => {})
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.currentPage = 1
      },
      //删除酒店配置
      DeleteHotelConfig(item) {
        var that = this;
        this.Confirm(that.$t('tips.shifoushanchu'), function () {
          var msg = {
            HConfigId: item.HConfigId
          };
          that.apipost(
            "scm_post_RemoveHotelConfigService",
            msg,
            res => {
              if (res.data.resultCode == 1) {
                that.Success(this.$t('tips.shanchuchenggong'));
                that.getList();
              } else {
                that.Error(res.data.data);
              }
            },
            null
          );
        });
      }
    }
  }

</script>