{#layout name="public/layout" /#}
{#load href="__ROOT__/assets/css/companylist.css" /#}
<div class="content_wrapper" id="app">
  <div class="content" v-cloak>
    <div :class="showSelected ? 'filter_combo n_pd' : 'filter_combo'">
      <div class="filter_line">
        <div class="line_title">所在地区：</div>
        <div class="line_item">
          <a href="{#:P(['d1'=>null,'d2'=>null,'d3'=>null])#}"
            class="f_item {#if condition='!$Request.param.d1'#}active{#/if#}">不限</a>
          <a href="javascript:;" class="f_item back classifyReturn" data-type="cityReturn" style="display: none">上级</a>
          <span id="cityLinkArea">
            {#volist name="options_district" id="vo"#}
            <a href="{#$vo.url#}"
              class="f_item cityLink {#if condition='$Request.param.d3==$vo.id'#}active{#/if#}">{#$vo.text#}</a>
            {#/volist#}
          </span>
          <a href="javascript:;" class="f_item more toggleMore" style="display: none" data-type="cityLink">
            <span>更多</span>
          </a>
          <div class="clear"></div>
        </div>
        <div class="clear"></div>
      </div>
      <div class="filter_line">
        <div class="line_title">企业性质：</div>
        <div class="line_item">
          <a href="{#:P(['nature'=>null])#}"
            class="f_item {#if condition='!$Request.param.nature'#}active{#/if#}">不限</a>
          {#volist name="options_nature" id="vo"#}
          <a href="{#:P(['nature'=>$key])#}"
            class="f_item {#if condition='$Request.param.nature==$key'#}active{#/if#}">{#$vo#}</a>
          {#/volist#}
          <div class="clear"></div>
        </div>
        <div class="clear"></div>
      </div>
      <div class="filter_line">
        <div class="line_title">行业类别：</div>
        <div class="line_item">
          <a href="{#:P(['trade'=>null])#}" class="f_item {#if condition='!$Request.param.trade'#}active{#/if#}">不限</a>
          <span>
            {#volist name="options_trade" id="vo"#}
            <a href="{#:P(['trade'=>$key])#}"
              class="f_item tradeLink {#if condition='$Request.param.trade==$key'#}active{#/if#}">{#$vo#}</a>
            {#/volist#}
          </span>
          <a href="javascript:;" class="f_item more toggleMore" style="display: none" data-type="tradeLink">
            <span>更多</span>
          </a>
          <div class="clear"></div>
        </div>
        <div class="clear"></div>
      </div>
      <div class="filter_selected" v-if="showSelected">
        <div class="filter_line so_condition last">
          <div class="line_title">已选条件：</div>
          <div class="fse_group">
            <a href="{#:P(['keyword'=>null])#}" class="s_tag" v-if="keyword">{{keyword}}</a>
            <a href="{#:P(['d1'=>null,'d2'=>null,'d3'=>null])#}" class="s_tag" v-if="d1">{{citySelectedText}}</a>
            <a href="{#:P(['nature'=>null])#}" class="s_tag" v-if="nature">{{natSelectedText}}</a>
            <a href="{#:P(['trade'=>null])#}" class="s_tag" v-if="trade">{{tradeSelectedText}}</a>
          </div>
          <div class="clear"></div>
          <a href="{#:url('index/company/index')#}" class="remove">清空条件</a>
        </div>
      </div>
    </div>
    <div class="content_box2 clearfix">
      <div class="left_sidebar">
        {#if condition="count($dataset.items) gt 0"#}
        {#volist name="dataset.items" id="vo"#}
        <div class="company_list clearfix">
          <div class="text_wrapper clearfix">
            <div class="company_img">
              <img src="{#$vo.logo_src#}">
            </div>
            <div class="company_text_wrapper">
              <div class="company_text1 clearfix">
                <a class="cn" href="{#:url('index/company/show',['id'=>$vo.id])#}"
                  target="_blank">{#$vo.companyname#}</a>
                {#if condition="$vo.company_audit eq 1"#}
                <div class="ic1"></div>
                {#/if#}
                {#if condition="$vo.setmeal_icon!=''"#}
                <div class="ic2"><img class="setmeal_icon" src="{#$vo.setmeal_icon#}"></div>
                {#/if#}
              </div>
              <div class="company_text2">
                <p>
                  <span class="border">{#$vo.nature_text#}</span>
                  <span class="border">{#$vo.trade_text#}</span>
                  <span class="border">{#$vo.scale_text#}</span>
                </p>
                <span class="address">{#$vo.district_text#}</span>
              </div>
              <p class="company_text3">在招职位 <span>（{#$vo.jobnum#}）</span></p>
            </div>
          </div>
          <div class="btn_wrapper">
            <button onclick="javascript:window.open('{#:url(\'index/company/show\',[\'id\'=>$vo.id])#}')">查看详情</button>
          </div>
        </div>
        {#/volist#}
        {#else#}
        <div class="list_empty">
          <div class="emp_text">暂时没有数据哦</div>
        </div>
        {#/if#}
        {#$pagerHtml#}
      </div>
      <div class="right_sidebar">
        <div class="right_box4 nmt">
          <div class="recommend">
            推荐企业
          </div>
          <div class="enterprise_list">
            {#if condition="count($hot_company_list) gt 0"#}
            {#volist name="hot_company_list" id="vo"#}
            <div class="enterprise_item clearfix">
              <div class="enterprise_img">
                <img src="{#$vo.logo_src#}">
              </div>
              <div class="enterprise_text">
                <p class="enterprise_text1"><a href="{#:url('index/company/show',['id'=>$vo.id])#}"
                    target="_blank">{#$vo.companyname#}</a></p>
                <p class="enterprise_text2">在招职位<span class="color">({#$vo.jobnum#})</span></p>
              </div>
            </div>
            {#/volist#}
            {#else#}
            <div class="list_empty n_bd">
              <div class="emp_text">暂时没有推荐企业</div>
            </div>
            {#/if#}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  $(document).ready(function () {
    $(function () {
      var cityList = {}, tradeList = {};
      var d1 = 0, d2 = 0, d3 = 0, trade = 0;
      var cityLevel = parseInt('{#$district_level#}');
      var displayWordWidth = 870;

      // 筛选条件显示数量控制
      handleFilterConditionDisplay('cityLink');
      handleFilterConditionDisplay('tradeLink');
      function handleFilterConditionDisplay(className) {
        var showWidth = 0, $filterLink = $('.' + className);
        $filterLink.each(function (index, value) {
          if (showWidth > displayWordWidth) {
            $(this).hide();
            $('[data-type=' + className + ']').show();
          } else {
            $(this).addClass('sw');
            showWidth += value.clientWidth;
          }
        });
      }

      // ajax获取分类数据
      getClassify('citycategory');
      getClassify('trade');

      // 返回上一级
      $('.classifyReturn').click(function () {
        var thisType = $(this).data('type');
        if (thisType === 'cityReturn') {
          if (cityLevel === 3) {
            // 三级分类
            var returnArray = cityList.filter(function (item) {
              if (parseInt(item.value) === d1) {
                return item;
              }
            })[0].children;
            $('#cityLinkArea').html(generateList(returnArray, 2, thisType));
          } else {
            $('#cityLinkArea').html(generateList(cityList, 1, thisType));
            $('[data-type=cityReturn]').hide();
          }
          cityLevel = cityLevel - 1;
          handleFilterConditionDisplay('cityLink');
        }
      });

      // 返回上一级生成列表
      function generateList(data, level, type) {
        var listHtml = '';
        Object.values(data).forEach(function (item) {
          var listUrl = '';
          if (type === 'cityReturn') {
            if (level === 2) {
              listUrl = '{#:P([\'d1\'=>\'_d1_\',\'d2\'=>\'_d2_\',\'d3\'=>null])#}';
              listUrl = listUrl.replace('_d1_', d1);
              listUrl = listUrl.replace('_d2_', item.value);
            } else {
              listUrl = '{#:P([\'d1\'=>\'_d1_\',\'d2\'=>null,\'d3\'=>null])#}';
              listUrl = listUrl.replace('_d1_', item.value);
            }
            listHtml += '<a href="' + listUrl + '" class="f_item cityLink">' + item.label + '</a>';
          }
        });
        return listHtml;
      }

      // 显示和收起更多分类
      $('.toggleMore').click(function () {
        var className = $(this).data('type');
        if ($(this).hasClass('open')) {
          $(this).removeClass('open').find('span').html('更多');
          toggleClassify(className, true);
        } else {
          $(this).addClass('open').find('span').html('收起');
          toggleClassify(className, false);
        }
      });

      /**
       * 显示和隐藏操作节点的公用方法
       * @param className 节点类名
       * @param num 可以显示的数量
       * @param status 区分显示还是隐藏 true->需要隐藏
       */
      function toggleClassify(className, status) {
        var num = $('.' + className + '.sw').length;
        $('.' + className).each(function (index) {
          $(this).show();
          if (status) {
            if (index > (num - 1)) {
              $(this).hide();
            }
          }
        });
      }

      // 获取分类数据
      function getClassify(type) {
        httpget(qscms.apiList.classify + '?type=' + type, {}).then(function (res) {
          if (res.code === 200) {
            if (type === 'citycategory') {
              cityList = res.data;
              d1 = parseInt('{#$Request.param.d1#}');
              d2 = parseInt('{#$Request.param.d2#}');
              d3 = parseInt('{#$Request.param.d3#}');
              if (cityLevel !== 1) {
                $('[data-type=cityReturn]').show();
              }
            } else if (type === 'trade') {
              tradeList = res.data;
              trade = parseInt('{#$Request.param.trade#}');
            }
          } else {
            console.log(res.message);
          }
        }).catch(function (err) {
          console.log(err);
        });
      }
    });
  });
  var app = new Vue({
    el: '#app',
    data: {
      keyword: '{#$Request.param.keyword#}',
      d1: parseInt('{#$Request.param.d1#}'),
      d2: parseInt('{#$Request.param.d2#}'),
      d3: parseInt('{#$Request.param.d3#}'),
      cityLevel: parseInt('{#$district_level#}'),
      citySelectedText: '',
      nature: '{#$Request.param.nature#}',
      natSelectedText: '',
      trade: '{#$Request.param.trade#}',
      tradeSelectedText: '',
      showSelected: false,
    },
    mounted: function () {
      // 已选条件展示
      if (this.d1) {
        this.getClassify('citycategory'); // 地区
      }
      // 企业性质
      if (this.nature) {
        this.getClassify('companyNature');
      }
      // 行业类别
      if (this.trade) {
        this.getClassify('trade');
      }
      // 是否显示已选条件
      if (this.keyword || this.d1 || this.nature || this.trade) {
        this.showSelected = true;
      }
    },
    methods: {
      getClassify: function (type) {
        var _this = this;
        httpget(qscms.apiList.classify + '?type=' + type, {}).then(function (res) {
          if (res.code === 200) {
            if (type === 'citycategory') {
              var cityList = res.data;
              if (_this.d1) {
                if (_this.cityLevel === 2) {
                  // 地区为二级
                  _this.citySelectedText = cityList.filter(function (item) {
                    if (parseInt(item.value) === _this.d1) {
                      return item;
                    }
                  })[0].label;
                }
                if (_this.cityLevel === 3) {
                  // 地区为三级
                  var levelTwoList = cityList.filter(function (item) {
                    if (parseInt(item.value) === _this.d1) {
                      return item;
                    }
                  })[0].children;
                  if (_this.d3) {
                    var levelThreeList = levelTwoList.filter(function (item) {
                      if (parseInt(item.value) === _this.d2) {
                        return item;
                      }
                    })[0].children;
                    _this.citySelectedText = levelThreeList.filter(function (item) {
                      if (parseInt(item.value) === _this.d3) {
                        return item;
                      }
                    })[0].label;
                  } else {
                    _this.citySelectedText = levelTwoList.filter(function (item) {
                      if (parseInt(item.value) === _this.d2) {
                        return item;
                      }
                    })[0].label;
                  }
                }
              }
            } else if (type === 'trade') {
              var tradeList = res.data;
              _this.tradeSelectedText = tradeList.filter(function (item) {
                if (parseInt(item.id) === parseInt(_this.trade)) {
                  return item;
                }
              })[0].name;
            } else if (type === 'companyNature') {
              var natureList = res.data;
              _this.natSelectedText = natureList.filter(function (item) {
                if (parseInt(item.id) === parseInt(_this.nature)) {
                  return item;
                }
              })[0].name;
            }
          } else {
            console.log(res.message);
          }
        }).catch(function (err) {
          console.log(err);
        });
      },
    },
  });
</script>