<style>
    @import "../../assets/css/comSupplier.css";
</style>
<template>
            <div class="flexOne suppierManage VisaSuplier">
                <div class="query-box">
                    <ul>
                        <li>
                           <span>
                                <em>{{$t('system.quety_area')}}</em>
                                <el-select v-model="msg.Country" clearable class="w150"  filterable @change="getProvinceList(msg.CountryStr,1)" :placeholder="$t('hotel.hotel_country')">
                                    <el-option v-for='item in countryList'
                                        :key="item.ID" 
                                        :label="item.Name"
                                        :value="item.ID">
                                    </el-option>
                                </el-select>
                                <el-select v-model="msg.Province"  class="w150"  filterable @change="getProvinceList(msg.ProvinceStr,2)" :placeholder="$t('hotel.hotel_province')">
                                    <el-option v-for='item in provinceList'
                                        :key="item.ID" 
                                        :label="item.Name"
                                        :value="item.ID">
                                    </el-option>
                                </el-select>
                                <el-select v-model="msg.City" class="w150"  filterable @change="getProvinceList(msg.CityStr,3)" :placeholder="$t('hotel.hotel_city')">
                                    <el-option v-for='item in cityList'
                                        :key="item.ID" 
                                        :label="item.Name"
                                        :value="item.ID">
                                    </el-option>
                                </el-select>
                                <el-select v-model="msg.District" class="w150"  filterable :placeholder="$t('hotel.hotel_area')">
                                    <el-option v-for='item in district'
                                        :key="item.ID" 
                                        :label="item.Name"
                                        :value="item.ID">
                                    </el-option>
                                </el-select>
                           </span>
                        </li>
                        <li>
                            <span>
                                <em>{{$t('hotel.suplier_name')}}</em><el-input maxlength="50" v-model="msg.Name" class="permiss-input w150" @keyup.native.enter="initData" :placeholder="$t('pub.pleaseImport')"></el-input>
                            </span>
                        </li>
                        <li>
                            <span>
                                <em>{{$t('hotel.suplier_contact')}}</em><el-input maxlength="50"  v-model="msg.PersonInCharge" class="permiss-input w150" @keyup.native.enter="initData" :placeholder="$t('pub.pleaseImport')"></el-input>
                            </span>
                        </li>
                        <li>
                            <button class="hollowFixedBtn" type="button" @click="resetPageIndex(),initData()">{{$t('pub.searchBtn')}}</button>
                            <button class="normalBtn" type="button" @click="clearinputInfo(),outerVisible = true, dialogTitle=$t('visaT.Addingsuppliers')">{{$t('pub.addBtn')}}</button>
                        </li>
                    </ul>
                    <el-dialog custom-class='addCompany' :title="dialogTitle" :visible.sync="outerVisible" center :before-close="closeChangeMachie">
                        <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="100px" >
                            <el-form-item :label="$t('hotel.suplier_name')" prop="Name">
                                <el-input type="text" class="w300" maxlength="50" v-model="addMsg.Name"></el-input>
                            </el-form-item>
                            <el-form-item :label="$t('restaurant.res_belongArea')" class="is-required">
                                <el-select v-model="addMsg.Country" clearable class="w150"  filterable @change="getProvinceList(addMsg.Country,1)" :placeholder="$t('hotel.hotel_country')">
                                    <el-option v-for='item in countryList'
                                        :key="item.ID" 
                                        :label="item.Name"
                                        :value="item.ID">
                                    </el-option>
                                </el-select>
                                <el-select v-model="addMsg.Province" class="w150"  filterable @change="getProvinceList(addMsg.Province,2)" :placeholder="$t('hotel.hotel_province')">
                                    <el-option v-for='item in provinceList'
                                        :key="item.ID" 
                                        :label="item.Name"
                                        :value="item.ID">
                                    </el-option>
                                </el-select>                           
                                <el-select v-model="addMsg.City" class="w150"  filterable @change="getProvinceList(addMsg.City,3)" :placeholder="$t('hotel.hotel_city')">
                                    <el-option v-for='item in cityList'
                                        :key="item.ID" 
                                        :label="item.Name"
                                        :value="item.ID">
                                    </el-option>
                                </el-select>
                                <el-select v-model="addMsg.District" class="w150"  filterable :placeholder="$t('hotel.hotel_area')">
                                    <el-option v-for='item in district'
                                        :key="item.ID" 
                                        :label="item.Name"
                                        :value="item.ID">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item :label="$t('hotel.table_HotelAddress')" prop="Address">
                                <el-input type="text" class="w300" maxlength="50" v-model="addMsg.Address" :placeholder="$t('hotel.table_areaDetail')"></el-input>
                            </el-form-item>
                            <el-form-item :label="$t('hotel.table_tel')" prop="Tel">
                                <el-input type="text" class="w300" maxlength="20" v-model="addMsg.Tel"></el-input>
                            </el-form-item>
                            <el-form-item :label="$t('admin.admin_leader')" prop="PersonInCharge">
                                <el-input type="text" class="w300" maxlength="20" v-model="addMsg.PersonInCharge"></el-input>
                            </el-form-item>
                            <el-form-item :label="$t('visa.v_zongjingli')" prop="Representative">
                                <el-input type="text" class="w300" maxlength="20" v-model="addMsg.Representative"></el-input>
                            </el-form-item>
                            <el-form-item :label="$t('hotel.hotel_fax')" prop="Fax">
                                <el-input type="text" class="w300" maxlength="20" v-model="addMsg.Fax"></el-input>
                            </el-form-item>
                            <el-form-item :label="$t('leader.leader_Leader')" prop="JapanLeader">
                                <el-input type="text" class="w300" maxlength="20" v-model="addMsg.JapanLeader"></el-input>
                            </el-form-item>
                            <el-form-item :label="$t('visa.v_lingduitel')" prop="JapanLeaderTel">
                                <el-input type="text" class="w300" maxlength="20" v-model="addMsg.JapanLeaderTel"></el-input>
                            </el-form-item>
                            <el-form-item :label="$t('visaT.Vendortemplate')" prop="TempleteType">
                              <el-select v-model="addMsg.TempleteType" class="w300"  filterable>
                                  <el-option v-for='item in VisaTempleteTypeList'
                                      :key="item.Id" 
                                      :label="item.Name"
                                      :value="item.Id">
                                  </el-option>
                              </el-select>
                            </el-form-item>
                            <el-form-item :label="$t('visa.v_yinzhang')">
                              <el-upload
                                class="avatar-uploader"
                                :action="importFileUrl"
                                :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('hotel.hotel_remark')" prop="Remark">
                                <el-input type="textarea" class="w300" maxlength="200" v-model="addMsg.Remark"></el-input>
                            </el-form-item>
                        </el-form>	
                        <div slot="footer" class="dialog-footer">
                            <button class="hollowFixedBtn" @click="resetForm('addMsg'),outerVisible = false">{{$t('pub.cancelBtn')}}</button> &nbsp;
                            <button class="normalBtn" type="primary" @click="submitForm('addMsg')">{{$t('pub.sureBtn')}}</button>
                        </div>
                    </el-dialog>
                </div>
                <div class="noData" v-show="noData">
                    {{$t('system.content_noData')}}
                </div>
                <div class="supplierList clearfix" v-loading="loading">
                    <div class="supList" v-for="item in tabelDate" :key="item.subCode">
                        <div class="suTop">
                            <img src="../../assets/img/suplier.jpg">
                            <div class="topCircle"><img :src="item.Icon" alt=""></div>
                        </div>
                        <div class="supTitle">{{item.Name}}</div>
                        <div class="telNumber">{{item.Tel}}</div>
                        <div class="Address">
                            <div v-show="item.PersonInCharge">
                                <i class="iconfont icon-img_dz"></i>
                                <el-tooltip class="item" effect="dark" :content="item.PersonInCharge" placement="top-start">
                                    <div class="AddressInner">{{item.PersonInCharge}}</div>
                                </el-tooltip>
                            </div>
                        </div>
                        <div class="updataBtn">
                            <button class="normalBtn UPBtn" @click="outerVisible = true,dialogTitle=$t('visaT.xiugaigysxx'),updateInfo(item.Id)">{{$t('pub.updateMsg')}}</button>
                            <button class="hollowFixedBtn UPBtn" @click="isdelete(item.Id)">{{$t('system.table_delete')}}</button>
                            <button class="hollowFixedBtn HS_financial" @click="AccountManage(item)">{{$t('visaT.Accountmanagement')}}</button>
                        </div>
                    </div>
                </div>
                <el-pagination 
                background
                @current-change="handleCurrentChange" 
                :current-page.sync="currentPage"
                layout="total,prev, pager, next, jumper"
                :page-size="this.msg.pageSize"
                :total="total">
                </el-pagination>
            </div>
        
</template>

<script>
export default {
  data() {
    return {
      total: 0,
      currentPage: 1,
      tabelDate: "",
      outerVisible: false,
      isDeleteNote: true,
      isRight: true,
      loading: true,
      dialogTitle: "",
      countryList: "",
      provinceList: "",
      cityList: "",
      district: "",
      deleteID: "",
      typeList: "",
      TypeOne: "",
      importFileUrl:this.domainManager().UploadFileUrl+'?cmd=User_post_FileUpload&fileType=1&fileLimit=10',
      imageUrl: '',
      noData:false,
      msg: {
        pageIndex: 1,
        pageSize: 18,
        Name: "",
        PersonInCharge: "",
        Country: "",
        City: "",
        District: "",
        Province: ""
      },
      addMsg: {
        Id: 0,
        Name: "",
        Address: "",
        Icon: "",
        Representative: "",
        PersonInCharge: "",
        Tel: "",
        Fax: "",
        Remark: "",
        Country: "",
        Province: "",
        City: "",
        District: "",
        JapanLeaderTel:'',
        JapanLeader:'',
        TempleteType:1,
      },
      rules: {
        Name: [
          { required: true, message: this.$t('visaT.qsrgysname'), trigger: "blur" }
        ],
        Address: [
          { required: true, message: this.$t('visaT.qsradder'), trigger: "blur" }
        ],
         Country: [
          { required: true, message: this.$t('visaT.qxzguojia'), trigger: "change" }
        ],
        Fax: [{ required: true, message: this.$t('visaT.qsrchuanzhen'), trigger: "blur" }],
        Tel: [{ required: true, message: this.$t('visaT.qsrphone'), trigger: "blur" },
        { pattern: this.$commonUtils.Regex.el_IsFax, message: this.$t('visaT.qsryesphone')}],
        Representative: [{ required: true, message: this.$t('visaT.qsrtopmanager'), trigger: "blur" }],
        PersonInCharge: [{ required: true, message: this.$t('visaT.qsrfuzheren'), trigger: "blur" }],
        JapanLeaderTel:[{required: true, message: this.$t('visaT.qsrlingduiphone'), trigger: "blur" },
        { pattern: this.$commonUtils.Regex.el_IsFax, message: this.$t('visaT.qsryesphone')}],
        JapanLeader:[{required: true, message: this.$t('visaT.qsrlingdui'), trigger: "blur" }],
        TempleteType:[{required: true, message: this.$t('visaT.qxzmoban'), trigger: "blur" }],
      },
      VisaTempleteTypeList:[]
    };
  },
  methods: {
    getVisaTempleteTypeList(){ // 获取模版类型枚举
        this.apipost("dmc_get_visa_GetVisaTempleteTypeList",{},res => {
          if(res.data.resultCode==1){
            this.VisaTempleteTypeList = res.data.data;
          }else{
            this.$message.error(res.data.message)
          }
        },err => {});
    },
    handleAvatarSuccess(res, file) { //上传
        console.log('上传文件', res)
        if(res.resultCode==1){
            var img_path = res.data.FullFilePath
            this.addMsg.Icon=res.data.FilePath
            this.imageUrl = img_path
        }
    },
    beforeAvatarUpload(file) { //上传-
        // const isJPG = file.type === 'image/jpeg';
        // const isLt2M = file.size / 1024 / 1024 < 2;
        // if (!isJPG) {
        // this.$message.error('上传头像图片只能是 JPG 格式!');
        // }
        // if (!isLt2M) {
        // this.$message.error('上传头像图片大小不能超过 2MB!');
        // }
        // return isJPG && isLt2M;
    },
    handleCurrentChange(val) {
      this.msg.pageIndex = val;
      this.initData();
    },
    resetPageIndex() {
      this.msg.pageIndex = 1;
      this.currentPage = 1;
    },
    initData() {
      this.loading = true;
      this.apipost(
        "dmc_post_visa_GetCommuneInfoPageList",
        this.msg,
        res => {
          if(res.data.data.pageData.length==0){
            this.noData=true
            this.loading = false;
            this.tabelDate=[]
          }else{
            this.tabelDate = res.data.data.pageData;
            this.total = res.data.data.count;
            this.loading = false;
            this.noData=false
          }
        },
        null
      );
    },
       closeChangeMachie(done){
             done();
            this.resetForm('addMsg');
        },
    isdelete(ID) {
      this.deleteID = ID;
      this.$confirm(this.$t('tips.shifoushanchu'), this.$t('tips.tips'), {
        confirmButtonText: this.$t('pub.sureBtn'),
        cancelButtonText: this.$t('pub.cancelBtn'),
        type: "warning"
      })
        .then(() => {
            let msg = {
                Id: this.deleteID
            };
            this.apipost(
                "dmc_post_visa_RemoveCommuneInfo",
                msg,
                response => {
                if (response.data.resultCode == 1) {
                    this.$message.success(this.$t('tips.shanchuchenggong'))
                    this.initData();
                } else {
                    this.tips(response.data.message, "error");
                }
                },
                null
            );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: this.$t('tips.cancleDelete')
          });
        });
    },
    saveInfo() {
      if(!this.addMsg.Country){
        this.$message.error(this.$t('visaT.qxzguojia'))
        return
      }else if(!this.addMsg.Province){
        this.$message.error(this.$t('visaT.qxzshengfeng'))
        return
      }else{
        this.apipost(
          "dmc_post_visa_SetCommuneInfo",
          this.addMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.initData();
              this.tips(this.$t('tips.baocunchenggong'), "success");
              this.outerVisible = false;
            } else {
              this.tips(res.data.message, "error");
            }
          },
          null
        );
      }
      },
      
    clearinputInfo() {
      (this.addMsg = {
        Id: 0,
        Name: "",
        Address: "",
        Icon: "",
        Representative: "",
        PersonInCharge: "",
        Tel: "",
        Fax: "",
        Remark: "",
        Country: "",
        Province: "",
        City: "",
        District: "",
        TempleteType:1,
      }),
        (this.provinceList = "");
      this.cityList = "";
      this.district = "";
    },
    updateInfo(ID) {
      this.addMsg.ID = ID;
      let msg = {
        Id: ID
      };
      this.apipost(
        "dmc_post_visa_GetCommuneInfoEntity",
        msg,
        res => {
          this.addMsg.Country = res.data.data.Country;
          if (res.data.data.Country !== 0) {
            this.getProvinceList(res.data.data.Country, 1);
          }
          if (res.data.data.Province !== 0) {
            this.getProvinceList(res.data.data.Province, 2);
          }
          if (res.data.data.City !== 0) {
            this.getProvinceList(res.data.data.City, 3);
          }
          this.addMsg = res.data.data;
          this.imageUrl = this.addMsg.Icon
        },
        null
      );
    },
    getProvinceList(ID, type) {
      //根据省份获取城市
      let msg = { Id: ID };
      if (type == 1) {
        this.addMsg.Province = "";
        this.addMsg.City = "";
        this.addMsg.District = "";
        this.msg.ProvinceStr = "";
        this.msg.CityStr = "";
        this.msg.DistrictStr = "";
      } else if (type == 2) {
        this.addMsg.City = "";
        this.addMsg.District = "";
        this.msg.CityStr = "";
        this.msg.DistrictStr = "";
      } else if (type == 3) {
        this.addMsg.District = "";
        this.msg.DistrictStr = "";
      }
      if (this.addMsg.Country != "" || this.msg.CountryStr != "") {
        this.apipost(
          "dict_post_Destination_GetChildList",
          msg,
          res => {
            if (type == 1) {
              this.provinceList = res.data.data;
            } else if (type == 2) {
              this.cityList = res.data.data;
            } else if (type == 3) {
              this.district = res.data.data;
            }
          },
          err => {}
        );
      }
    },
    getCountryList() {
      //获取国家
      let msg = {};
      this.apipost(
        "dict_post_Destination_GetCountry",
        msg,
        res => {
          this.countryList = res.data.data;
        },
        err => {}
      );
    },
    goUrl(path, id) {
      this.$router.push({ path: path, query: { id: id } });
    },
    submitForm(addMsg) {
      //提交创建、修改表单
      let that = this;
      that.$refs[addMsg].validate(valid => {
        if (valid) {
          that.saveInfo();
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    tips(msg, type) {
      this.$message({
        message: msg,
        duration: 2000,
        type: type
      });
    },
    trim(str) {
      //去除空格
      return str.replace(/\s+/g, "");
    },
    gettypeList() {
      //获取类型
      let msg = {};
      this.apipost(
        "hotel_post_GetResourceType",
        msg,
        res => {
          this.typeList = res.data.data;
        },
        err => {}
      );
    },
    //账户管理
    AccountManage(obj) {
        this.$router.push({
            name: "empBankAccount",
            query: {
              type: 5,
              id: obj.Id,
              blank:'y', 
              tab:'账户管理'
            }
        });
    }
  },
  mounted() {
    this.initData();
    this.getCountryList(); //初始化国家下拉
    this.getVisaTempleteTypeList()
  }
};
</script>