<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"
              @keyup.native.enter="initData"
              v-model="msg.Name"
              class="permiss-input w150"
              :placeholder="$t('pub.pleaseImport')"
            ></el-input>
          </span>
        </li>
        <li>
          <span>
            <em>{{ $t("hotel.suplier_contact") }}</em>
            <el-input
              maxlength="50"
              @keyup.native.enter="initData"
              v-model="msg.Contact"
              class="permiss-input w150"
              :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
      >
        <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('fnc.fkfangshi')" prop="Address">
            <el-select
              v-model="addMsg.PayType"
              filterable
              :placeholder="$t('pub.pleaseSel')"
              class="w300"
            >
              <el-option
                v-for="item in PayTypeList"
                :key="item.Id"
                :label="item.name"
                :value="item.Id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('ground.shifouyouspf')">
            <el-switch
              v-model="addMsg.IsHaveShouPeiFee"
              :active-value="inActive"
              :inactive-value="notInActive"
            >
            </el-switch>
          </el-form-item>
          <el-form-item
            v-if="addMsg.IsHaveShouPeiFee == 1"
            :label="$t('ground.shoupeije')"
          >
            <el-input
              type="text"
              class="w300"
              maxlength="10"
              @keyup.native="checkPrice(addMsg, 'ShouPeiMoney')"
              v-model="addMsg.ShouPeiMoney"
            ></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"
        style="height:270px;"
      >
        <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('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>
          <button class="hollowFixedBtn HS_financial" @click="GoHotel(item)">
            {{ $t("ground.jiudianfkfspz") }}
          </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,
      isRight: true,
      loading: true,
      dialogTitle: "",
      countryList: "",
      provinceList: "",
      cityList: "",
      district: "",
      deleteID: "",
      typeList: "",
      TypeOne: "",
      inActive: 1, //有手配费
      notInActive: 0, //无手配费

      msg: {
        pageIndex: 1,
        pageSize: 18,
        Name: "",
        Contact: "",
        Type: 1,
        CountryStr: "",
        ProvinceStr: "",
        CityStr: "",
        DistrictStr: ""
      },
      addMsg: {
        ID: 0,
        Name: "",
        Country: "",
        Province: "",
        City: "",
        District: "",
        Address: "",
        Tel: "",
        Contact: "",
        Fax: "",
        Remark: "",
        Type: "1",
        PayType: "",
        //是否有手配费
        IsHaveShouPeiFee: 0,
        //手配费金额
        ShouPeiMoney: 0
      },
      //付款方式
      PayTypeList: [
        {
          name: this.$t("ground.xianfu"),
          Id: 1
        },
        {
          name: this.$t("ground.qiandan"),
          Id: 2
        },
        { name: this.$t("ground.yufu"), Id: 4 }
      ],
      rules: {
        Name: [
          {
            required: true,
            message: this.$t("visaT.qsrgysname"),
            trigger: "blur"
          }
        ],
        Contact: [
          {
            required: true,
            message: this.$t("ground.qingshurulxr"),
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    //跳转到供应商酒店配置页面
    GoHotel(item) {
      this.$router.push({
        path: "HotelSupplierHotel",
        query: {
          ID: item.ID,
          Name: item.Name,
          tab: "供应商酒店备注",
          blank: "y"
        }
      });
    },
    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")
          });
          this.delsuppli();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: this.$t("tips.cancleDelete")
          });
        });
    },
    delsuppli() {
      let msg = {
        supplierID: this.deleteID
      };
      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
      );
    },
    saveInfo() {
      if (this.addMsg.ShouPeiMoney == "") {
        this.addMsg.ShouPeiMoney = 0;
      }
      this.apipost(
        "supplier_post_Set",
        this.addMsg,
        res => {
          if (res.data.resultCode == 1) {
            this.initData();
            this.Success(this.$t("tips.saveYes"));
            this.outerVisible = false;
          } else {
            this.Error(res.data.message);
          }
        },
        null
      );
    },
    clearinputInfo() {
      (this.addMsg = {
        Name: "",
        Country: "",
        Province: "",
        City: "",
        District: "",
        Address: "",
        Tel: "",
        Contact: "",
        Fax: "",
        Remark: "",
        Type: 1,
        PayType: "",
        IsHaveShouPeiFee: 0,
        ShouPeiMoney: 0
      }),
        (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 = 1;
        },
        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();
    },
    trim(str) {
      //去除空格
      return str.replace(/\s+/g, "");
    },
    gettypeList() {
      //获取类型
      let msg = {};
      this.apipost(
        "hotel_post_GetResourceType",
        msg,
        res => {
          this.typeList = res.data.data;
        },
        err => {}
      );
    },
    //账户管理
    AccountManage(item) {
      this.$router.push({
        name: "empBankAccount",
        query: {
          id: item.ID,
          type: 1,
          blank: "y",
          tab: "账户管理"
        }
      });
    }
  },

  mounted() {
    this.initData();
    this.getCountryList(); //初始化国家下拉
  }
};
</script>
