<template>
  <div class="busStockManager">
    <div class="query-box" style="border-bottom: none;">
      <ul>
        <li><span>
            <em>{{$t('ground.park')}}</em>
            <el-input maxlength="50" v-model="msg.ParkName" class="permiss-input w150"
              @keyup.native.enter="getList();resetPageIndex()" :placeholder="$t('ground.park')"></el-input>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('system.quety_area')}}</em>
            <el-select v-model="msg.Country" clearable class="w150" filterable @change="getProvinceList(msg.Country,1)"
              :placeholder="$t('hotel.hotel_country')">
              <el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
              <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.Province,2)"
              :placeholder="$t('hotel.hotel_province')">
              <el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
              <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 :placeholder="$t('hotel.hotel_city')">
              <el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
              <el-option v-for="item in cityList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <input type="button" class="normalBtn" :value="$t('pub.searchBtn')" @click="getList();resetPageIndex()" />
          <input type="button" class="normalBtn" :value="$t('pub.addBtn')" @click="IsShow=true,resetMsg()" />
        </li>
      </ul>
    </div>

    <div style="width: 100%;  overflow-x: auto;padding-bottom: 10px; margin-top: 10px; " class="ownScrollbarStyle">
      <table style="width: 100%;" border="0" cellspacing="1" cellpadding="0" class="busManagerTalbe"
        v-loading='msg.loading'>
        <tr>
          <th width="5%">{{$t('active.ad_xuhao')}}</th>
          <th width="5%">{{$t('ground.tccmingchen')}}</th>
          <th width="5%">{{$t('ground.tccdizhi')}}</th>
          <th width="5%">{{$t('restaurant.res_ContactNumber')}}</th>
          <th width="10%">{{$t('pub.area')}}</th>
          <th width="10%">{{$t('ground.zkc')}}/{{$t('ground.shiyongkucun')}}/{{$t('ground.sheyvkucun')}}</th>
          <th width="10%">{{$t('Operation.Op_price')}}</th>
          <th width="10%">{{$t('admin.admin_czPerson')}}</th>
          <th width="10%">{{$t('admin.admin_operate')}}</th>
        </tr>
        <tr v-for="(item,index) in DataList">
          <td>
            {{item.Id}}
          </td>
          <td style="text-align:left;padding:0 20px;">
            {{item.ParkName}}
          </td>
          <td>
            {{item.Address}}
          </td>
          <td style="text-align:left;padding:0 20px;">
            {{item.ParkTel}}
          </td>
          <td>
            {{item.CountryName}}-{{item.ProvinceName}}-{{item.CityName}}-{{item.DistrictName}}
          </td>
          <td>
            {{item.StockNum}}/{{item.UseNum}}/{{item.ShengYu}}
          </td>
          <td>
            {{item.ParkPrice}}
          </td>
          <td>
            {{item.CreatyByName}}
            <br />
            {{item.UpdateDateStr}}
          </td>
          <td>
            <el-tooltip class="item" effect="dark" :content="$t('pub.updateMsg')" placement="top-start">
              <el-button type="primary" icon="el-icon-edit" @click="IsShow=true,GetPark(item.Id)" circle></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top-start">
              <el-button type="danger" icon="el-icon-delete" @click="delPark(item.Id)" circle></el-button>
            </el-tooltip>
          </td>
        </tr>
      </table>
    </div>
    <div class="noDataNotice" v-if="!DataList||DataList.length==0">
      <i class="iconfont icon-kong"></i>
      <p>{{$t('active.ld_noData')}}</p>
    </div>

    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="msg.currentPage"
      layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total="msg.total"></el-pagination>

    <div class="combottomDiv" v-if="IsShow">
      <el-row>
        <el-col :span="18">
          <div class="combottomTitle">{{$t('ground.tccguanli')}}</div>
        </el-col>
        <el-col :span="4" class="Bus_BtnList">
          <input type="button" class="hollowFixedBtn" @click="IsShow=false" :value="$t('pub.cancelBtn')" />
          <input type="button" class="normalBtn" :value="$t('pub.saveBtn')" @click="SaveData()" />
        </el-col>
      </el-row>
      <el-form label-width="100px">

        <el-col :span="5">
          <el-form-item :label="$t('ground.park')">
            <el-input v-model="PostMsg.ParkName" class="w210"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item :label="$t('system.table_country')">
            <el-select v-model="PostMsg.Country" clearable class="w210" filterable
              @change="getAddProvince(PostMsg.Country,1)" :placeholder="$t('hotel.hotel_country')">
              <el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
              <el-option v-for="item in countryList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        
        <el-col :span="5">
          <el-form-item :label="$t('hotel.hotel_detailinfo')">
            <el-input :placeholder="$t('fnc.qsrneirong')" class="w210" v-model="PostMsg.Address">
              <el-button slot="append" @click="selectAddress = true" icon="iconfont icon-img_dw"></el-button>
            </el-input>
          </el-form-item>
        </el-col>
 
        <el-col :span="5">
          <el-form-item :label="$t('hotel.table_tel')">
            <el-input v-model="PostMsg.ParkTel" class="w210" max-length="30"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item :label="$t('Operation.Op_price')">
            <el-input v-model="PostMsg.ParkPrice" @keyup.native="checkPrice(PostMsg,'ParkPrice')" class="w210"
              max-length="15">
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="5">
          <el-form-item :label="$t('ground.kcsl')">
            <el-input v-model="PostMsg.StockNum" @keyup.native="checkInteger(PostMsg,'StockNum')" class="w210">
            </el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </div>

    <el-dialog custom-class="mapList" :title="$t('hotel.hotel_mapLocation')" center :visible.sync="selectAddress">
      <googleMap @refList="googleMap" v-bind:address="PostMsg.Address" @headCallBack="headCall"></googleMap>
    </el-dialog>

  </div>
</template>
<script>
  import googleMap from "../commonPage/googleMap.vue";
  export default {
    data() {
      return {
        msg: {
          ParkName: "",
          pageIndex: 1,
          pageSize: 15,
          loading: false,
          currentPage: 1,
          total: 0,
          Country: 0,
          Province: 0,
          City: 0,
        },
        DataList: [],
        IsShow: false,
        PostMsg: {
          Id: 0,
          ParkName: "",
          Country: 0,
          Province: 0,
          City: 0,
          District: 0,
          Address: "",
          Lng: "",
          Lat: "",
          StockNum: 0,
          ParkPrice: 0,
          ParkTel: ""
        },
        countryList: [],
        provinceList: [],
        cityList: [],
        provinceList2: [],
        cityList2: [],
        selectAddress: false,

      }
    },
    methods: {
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.msg.currentPage = 1;
      },
      getList() {
        this.msg.loading = true;
        this.apipost('buspark_get_GetPageList', this.msg, res => {
          this.msg.loading = false;
          if (res.data.resultCode == 1) {
            this.msg.total = res.data.data.count;
            this.DataList = res.data.data.pageData;
          } else {
            this.$message.error(res.data.message)
          }
        }, err => {})
      },
      GetPark(Id) {
        this.apipost('buspark_get_GetPark', {
          ID: Id
        }, res => {
          if (res.data.resultCode == 1) {
            this.PostMsg = res.data.data;
            if (this.PostMsg.Country > 0) {
              this.getPrivince(this.PostMsg.Country, 1);
            }
            if (this.PostMsg.Province > 0) {
              this.getPrivince(this.PostMsg.Province, 2);
            }
          } else {
            this.$message.error(res.data.message)
          }
        }, err => {})
      },
      SaveData() {
        this.apipost('buspark_post_SetPark', this.PostMsg, res => {
          if (res.data.resultCode == 1) {
            this.IsShow = false;
            this.Success(res.data.message);
            this.PostMsg.Id = 0;
            this.PostMsg.ParkName = "";
            this.PostMsg.Country = 0;
            this.PostMsg.Province = 0;
            this.PostMsg.City = 0;
            this.PostMsg.District = 0;
            this.PostMsg.Address = "";
            this.PostMsg.Lng = "";
            this.PostMsg.Lat = "";
            this.PostMsg.StockNum = 0;
            this.PostMsg.ParkPrice = 0;
            this.PostMsg.ParkTel = "";
            this.getList();
          } else {
            this.$message.error(res.data.message)
          }
        }, err => {})
      },
      //删除停车场
      delPark(Id) {
        if (Id > 0) {
          var that = this;
          this.Confirm(that.$t('tips.shifoushanchu'), function () {
            var msg = {
              ID: Id
            };
            that.apipost("buspark_post_RemovePark", msg,
              res => {
                if (res.data.resultCode == 1) {
                  that.Success(this.$t('tips.shanchuchenggong'));
                  that.getList();
                } else {
                  that.Error(res.data.data);
                }
              }, null);
          });
        }
      },
      //获取国家
      getCountryList() {
        this.apipost(
          "dict_post_Destination_GetCountry", {},
          res => {
            this.countryList = res.data.data;
          },
          err => {}
        );
      },
      getProvinceList(ID, type) {
        //根据省份获取城市
        let msg = {
          Id: ID
        };
        if (type == 1) {
          this.msg.Province = "";
          this.msg.City = "";
        } else if (type == 2) {
          this.msg.City = "";
        }
        if (this.msg.Country !== "") {
          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;
              }
            },
            err => {}
          );
        }
      },
      getAddProvince(ID, type) {
        //根据省份获取城市
        let msg = {
          Id: ID
        };
        if (type == 1) {
          this.PostMsg.Province = "";
          this.PostMsg.City = "";
        } else if (type == 2) {
          this.PostMsg.City = "";
        }
        if (this.PostMsg.Country !== "") {
          this.apipost(
            "dict_post_Destination_GetChildList",
            msg,
            res => {
              if (type == 1) {
                this.provinceList2 = res.data.data;
              } else if (type == 2) {
                this.cityList2 = res.data.data;
              }
            },
            err => {}
          );
        }
      },
      //初始化对应下拉
      getPrivince(ID, type) {
        let msg = {
          Id: ID
        };
        this.apipost(
          "dict_post_Destination_GetChildList",
          msg,
          res => {
            if (type == 1) {
              this.provinceList2 = res.data.data;
            } else if (type == 2) {
              this.cityList2 = res.data.data;
            }
          },
          err => {}
        );
      },

      //重置
      resetMsg() {
        let msg = {
          Id: 0,
          ParkName: "",
          Country: 0,
          Province: 0,
          City: 0,
          District: 0,
          Address: "",
          Lng: "",
          Lat: "",
          StockNum: 0,
        }
        this.PostMsg = msg;
      },
      googleMap() {
        this.selectAddress = false;
      },
      headCall(msg) {
        this.PostMsg.Lng = msg.lng;
        this.PostMsg.Lat = msg.lat;
        this.PostMsg.Address = msg.address;
      },

    },
    mounted() {
      this.getCountryList();
      this.getList();
    },
    components: {
      googleMap: googleMap,
    }
  }

</script>

<style>
  .busManagerTalbe {
    background: #ccc;
  }

  .busManagerTalbe tr th {
    background: #E6E6E6;
    height: 40px;
    font-size: 12px;
    color: #333;
  }

  .busManagerTalbe tr {
    background: #fff;
    text-align: center;
    height: 40px;
  }

  .busManagerTalbe tr:nth-child(2n+1) {
    background: #fafafa;
  }

  .busManagerTalbe tr td {
    font-size: 12px;
  }

  .busManagerTalbe tr td .pDateStyle {
    border-bottom: 1px solid #ccc;
    min-height: 24px;
    line-height: 24px;
    margin-top: 0;
    box-sizing: content-box;
    padding: 0 10px;
  }

  .busManagerTalbe tr td .pDateStyle:last-child {
    border-bottom: none;
  }

  .busManagerTalbe tr td .link p:hover {
    text-decoration: underline;
    cursor: pointer;
  }

  .busManagerTalbe tr td .link span:hover {
    text-decoration: underline;
    cursor: pointer;
  }

  .busStockManager .w150 .el-input {
    width: 150px;
  }

  .busStockManager .el-button.is-circle {
    padding: 5px;
  }

  .busStockManager .mapList {
    width: 850px;
    height: 510px;
  }

</style>