<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="clearinputInfo(),outerVisible = true,dialogTitle='添加供应商'">{{$t('pub.addBtn')}}</button>
                        </li>
                    </ul>
                    <el-dialog custom-class='addCompany' :title="dialogTitle" :visible.sync="outerVisible" center>
                        <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" 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">{{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='修改供应商信息',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: "",
      msg: {
        pageIndex: 1,
        pageSize: 18,
        Name: "",
        Contact: "",
        Type: 5,
        CountryStr: "",
        ProvinceStr: "",
        CityStr: "",
        DistrictStr: ""
      },
      addMsg: {
        ID: 0,
        Name: "",
        Country: "",
        Province: "",
        City: "",
        District: "",
        Address: "",
        Tel: "",
        Contact: "",
        Fax: "",
        Remark: "",
        Type: "5"
      },
      rules: {
        Name: [
           { required: true, message:this.$t('visaT.qsrgysname'), trigger: "blur" }
        ],
        Contact: [{ required: true, message:this.$t('rule.EnterContratPerson'), trigger: "blur" }]
      }
    };
  },
  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;
      var that = this;
      this.Confirm("是否删除此供应商?", function() {
        that.delsuppli();
      });
    },
    delsuppli() {
      let msg = {
        supplierID: this.deleteID
      };
      this.apipost(
        "supplier_post_Remove",
        msg,
        response => {
          if (response.data.resultCode == 1) {
            this.Success("删除成功");
            this.initData();
          } else {
            this.Error(response.data.message);
          }
        },
        null
      );
    },
    saveInfo() {
      this.apipost(
        "supplier_post_Set",
        this.addMsg,
        res => {
          if (res.data.resultCode == 1) {
            this.initData();
            this.Success("保存成功");
            this.outerVisible = false;
          } else {
            this.Error(res.data.message);
          }
        },
        null
      );
    },
    clearinputInfo() {
      (this.addMsg = {
        Name: "",
        Country: "",
        Province: "",
        City: "",
        District: "",
        Address: "",
        Tel: "",
        Contact: "",
        Fax: "",
        Remark: "",
        Type: 5
      }),
        (this.provinceList = "");
      this.cityList = "";
      this.district = "";
    },
    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 = 5;
        },
        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 => {}
      );
    },
    submitForm(addMsg) {
      //提交创建、修改表单
      let that = this;
      that.$refs[addMsg].validate(valid => {
        if (valid) {
          that.saveInfo();
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //账户管理
    AccountManage(item) {
        this.$router.push({
        name: "empBankAccount",
        query: { id: item.ID, type: 4,blank:'y',tab:'账户管理'}
      });
    }
  },
  mounted() {
    this.initData();
    this.getCountryList(); //初始化国家下拉
  }
};
</script>