<style>
    @import "../../assets/css/comSupplier.css";
</style>
<template>
            <div class="flexOne suppierManage">
                <div class="query-box">
                    <ul>
                        <li>
                           <span>
                                <em>{{$t('system.quety_area')}}</em>
                                <el-select v-model="msg.CountryStr" 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.ProvinceStr"  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.CityStr" 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.DistrictStr" 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.Contact" 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="clearInfo(),outerVisible = true,dialogTitle=$t('ground.tianjiagys')">{{$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')">
                                <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('hotel.suplier_contact')" prop="Contact">
                                <el-input type="text" class="w300" maxlength="20" v-model="addMsg.Contact"></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('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="supplierList clearfix" >
                    <div class="supList" v-for="item in tabelDate" :key="item.subCode">
                        <div class="suTop">
                            <img src="../../assets/img/suplier.jpg">
                            <div class="topCircle">{{item.Number}}</div>
                        </div>
                        <div class="supTitle">{{item.Name}}</div>
                        <div class="telNumber">{{item.Tel}}</div>
                        <div class="Address">
                            <div v-show="item.Contact">
                                <i class="iconfont icon-img_dz"></i>
                                <el-tooltip class="item" effect="dark" :content="item.Contact" placement="top-start">
                                    <div class="AddressInner">{{item.Contact}}</div>
                                </el-tooltip>
                            </div>
                        </div>
                        <div class="updataBtn">
                            <button class="normalBtn UPBtn" @click="outerVisible = true,dialogTitle=$t('ground.xiuggysxx'),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,
      loading: true,
      dialogTitle: "",
      countryList: "",
      provinceList: "",
      cityList: "",
      district: "",
      typeList: "",
      msg: {
        pageIndex: 1,
        pageSize: 15,
        Name: "",
        Contact: "",
        Type: 2,
        CountryStr: "",
        ProvinceStr: "",
        CityStr: "",
        DistrictStr: ""
      },
      addMsg: {
        ID: 0,
        Name: "",
        Type: "2",
        Country: "",
        Province: "",
        City: "",
        District: "",
        Address: "",
        Tel: "",
        Contact: "",
        Fax: "",
        Remark: ""
      },
      rules: {
        Name: [
          { required: true, message: this.$t('visaT.qsrgysname'), trigger: "change" }
        ],
        Contact: [
          { required: true, message: this.$t('rule.EnterContratPerson'), trigger: "change" }
        ]
      }
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.msg.pageIndex = val;
      this.initData();
    },
    resetPageIndex() {
      this.msg.pageIndex = 1;
      this.currentPage = 1;
    },
    initData() {
      this.loading = true;
      this.apipost(
        "supplier_get_GetPageList",
        this.msg,
        res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.tabelDate = res.data.data.pageData;
            this.total = res.data.data.count;
          }
        },
        null
      );
    },
    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(() => {
          this.$message({
            type: "success",
            message: this.$t('tips.shanchuchenggong')
          });
          let msg = {
            supplierID: ID
          };
          this.apipost(
            "supplier_post_Remove",
            msg,
            response => {
              if (response.data.resultCode == 1) {
                this.Success(this.$t('tips.shanchuchenggong'));
                this.initData();
              } else {
                this.Error(response.data.message);
              }
            },
            null
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: this.$t('ground.yiquxsc')
          });
        });
    },
    saveInfo() {
      this.apipost(
        "supplier_post_Set",
        this.addMsg,
        res => {
          if (res.data.resultCode == 1) {
            this.initData();
            this.Success(this.$t('tips.baocunchenggong'));
            this.outerVisible = false;
          } else {
            this.Error(res.data.message);
          }
        },
        null
      );
    },
    clearInfo() {
      this.addMsg = {
        ID: 0,
        Name: "",
        Type: "2",
        Country: "",
        Province: "",
        City: "",
        District: "",
        Address: "",
        Tel: "",
        Contact: "",
        Fax: "",
        Remark: ""
      };
    },
    updateInfo(ID) {
      this.addMsg.ID = ID;
      let msg = {
        supplierID: ID
      };
      this.apipost(
        "supplier_post_Get",
        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.addMsg.Type = "2";
        },
        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;
        }
      });
    },
    closeChangeMachie(done) {
      //弹出框关闭初始化弹框内表单
      done();
      this.resetForm("addMsg");
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    trim(str) {
      //去除空格
      return str.replace(/\s+/g, "");
    },
    //账户管理
    AccountManage(item) {
      this.$router.push({
        name: "empBankAccount",
        query: { id: item.ID, type: 3,blank:'y', tab:'账户管理' }
      });
    }
  },

  mounted() {
    this.initData();
    this.getCountryList();
  }
};
</script>