var home = {
  // 入口方法,执行页面开始的操作
  // 第一步
  created: function () {
    home.getListOfData();
  },
  // 第二步
  getListOfData: function () {
    var url = 'http://132.232.87.95:3000/api/film/getList '
    axios.get(url).then(function (response) {
      // debugger;
      if (response.data.status == 0) {

        home.renderList(response.data.films)
      } else {
        alert(response.data.msg)

      }
    })
      .catch(function (error) {
        alert(error)
      });

  },
  // 第三步
  // 渲染列表
  renderList: function (renderList) {
    var htmlStr = '';
    for (var i = 0; i < renderList.length; i++) {

      var render = renderList[i]
      var actor = home.actorsToString(render.actors)

      var str = `<div class="flex-sb mg-t-8 bd-gray pd-b-15 mg-l-17 rel">
                <a class="flex-sb w100pc" >

                  <img class="" style="height:80px;width:50px;" src="${render.poster}" alt="">
                    <div class="lh20 fg1 mg-l-15">
                        <div class="flex ai-center">
                      
                            <p class="f14">${render.name}</p>
                            
                            <span class="lable2D f10" style="">2D</span>
                        </div>
                        <div class="f12 gray mg-t-5">
                            <p>观众评分 <span style="color:#fed177;">${render.grade}</span> </p>
                            <p class="display w100">主演: ${actor}</p>
                            <p>${render.nation} | ${render.runtime} 分钟</p>
                        </div>
                    </div>
                    <a class="abs" style="right:0" href="../html/cinema.html">
                        <button class="bg-fff h20 w50 orangr mg-r-18"
                            style="height:24px; border: 1px solid#ef7131; border-radius: 3px;">购票</button>
                    </a>
                </a>
            </div>`

      htmlStr += str
      document.querySelector('.list').innerHTML = htmlStr;
    }

  },
  //  第四步
  // 字符串演员列表的拼接
  actorsToString: function (actors) {
    if (!actors) {
      return ''
    } else {
      var str = ''
      for (var i = 0; i < actors.length; i++) {
        var actor = actors[i]
        str += actor.name + ' '
      }
      return str
    }
  },

 
}
// 第五步
home.created();

var yingyuan = {

  // 第一步
  created: function () {
    yingyuan.getListOfData()
  },
  // 第二步
  // 获取数据
  getListOfData: function () {
    var url = `http://132.232.87.95:3000/api/cinema/getList`

    axios.get(url)
      .then(function (response) {
        if (response.data.status == 0) {

          yingyuan.getCinemaList(response.data.cinemas)
        } else {
          alert(response.data.msg);
        }
      })
      .catch(function (error) {
        alert(error);
      });
  },
  // 第三步
  // 渲染列表
  getCinemaList: function (cinemaDay) {
    var htmlStr = '';
    for (var i = 0; i < cinemaDay.length; i++) {
      var res = cinemaDay[i]
      var address = res.Distance.toFixed(2);
      var str = `
                  <div class="bd-bottom pd-l-16 pd-r-16 cinemasList " style="height:75px ">
            <p class="flex-sb pd-t-13">
                <span class="f16">${res.name} </span>
                <span class="" style="color:#ff8d6b ">
                    <span class="f14 ">&yen</span>
                    <span>${res.lowPrice / 100}</span>
                    <span class="f14">起</span>
                </span>
            </p>
            <p class="flex-sb pd-t-13 f12" style="color:#899dc0">
                <span class="ell" style="width:260px;">${res.address}</span>
                <span>${address}km</span>
            </p>
        </div>`
      htmlStr += str
    }

    document.querySelector('.cinemasList').innerHTML = htmlStr
  },


}
// 第四步
yingyuan.created()