var subScribeTemplate = `
<div class="sub-scribe">
<ul style="border-radius:.16rem;overflow:hidden">
  <li class="body-item area">
    <a class="item-container" :href="linkobj.area">
      <div class="item">
        <span class="item-l">
          <span class="leading jy-icon-loaction"></span>
          <span class="item-label">区域</span>
        </span>
        <span class="item-r">
          <span class="keywords-text ellipsis">已选：{{info.area}}</span>
          <span class="iconfont icon-arrow"></span>
        </span>
      </div>
    </a>
    </li>
    <li class="body-item industry">
    <a class="item-container" :href="linkobj.industry">
      <div class="item">
        <span class="item-l">
          <span class="leading jy-icon-industry"></span>
          <span class="item-label">采购单位行业</span>
        </span>
        <span class="item-r">
          <span class="keywords-text ellipsis">已选：{{info.industry}}</span>
          <span class="iconfont icon-arrow"></span>
        </span>
      </div>
    </a>
    </li>
    <li class="body-item keywords">
    <a class="item-container" :href="linkobj.keyword">
      <div class="item">
        <span class="item-l">
          <span class="leading jy-icon-keywords"></span>
          <span class="item-label">关键词</span>
        </span>
        <span class="item-r">
          <span class="keywords-text ellipsis">未分类</span>
          <span class="iconfont icon-arrow"></span>
        </span>
      </div>
    </a>
    </li>
    <li class="body-item match-way" @click="matchWay">
    <a class="item-container" href="javascript:;">
      <div class="item">
        <span class="item-l">
          <span class="leading jy-icon-matchkeywords"></span>
          <span class="item-label" style="white-space: nowrap;">关键词匹配方式</span>
        </span>
        <span class="item-r">
          <span class="keywords-text ellipsis match-way-value">{{info.defaultVal}}</span>
          <span class="iconfont icon-arrow"></span>
        </span>
      </div>
    </a>
    </li>
    <li class="body-item info-type">
    <a class="item-container" :href="linkobj.infotype">
      <div class="item">
        <span class="item-l">
          <span class="leading jy-icon-info-type"></span>
          <span class="item-label">信息类型</span>
        </span>
        <span class="item-r">
          <span class="info-type-text ellipsis">{{info.infoType}}</span>
          <span class="iconfont icon-arrow"></span>
        </span>
      </div>
    </a>
    </li>
    <li class="body-item project-match">
    <a class="item-container" href="javascript:;">
      <div class="item">
        <span class="item-l">
          <span class="leading jy-icon-project-match"></span>
          <span class="item-label">
            <span class="label-text">项目匹配</span>
            <i class="iconfont icon-bangzhu" @click="projectNotice"></i>
          </span>
        </span>
        <span class="item-r media_switch">
          <div class="weui-cell__ft">
            <button class="jy-switch switch" :class="{checked:checkedflag}" @click="switchs"></button>
          </div>
        </span>
      </div>
    </a>
    </li>
    <li class="body-item resultpreview">
      <a class="item-container" :href="linkobj.resultview">
        <div class="item">
          <span class="item-l">
            <span class="leading_ jy-icon-resultpreview-match"></span>
            <span class="item-label-other">
              <span class="label-text">推送结果预览<span class="threeInfo">{{resultTime}}</span></span>
              <span v-if="littleShow" class="info-little">当前匹配信息过少，请适当修改订阅条件</span>
            </span>
          </span>
          <span class="item-r media_switch">
            <span class="info-type-text ellipsis"></span>
            <span class="iconfont icon-arrow"></span>
          </span>
        </div>
      </a>
    </li>
    <li class="body-item push-set" v-if="pushsetShow">
      <a class="item-container" :href="linkobj.pushsetting">
        <div class="item">
          <span class="item-l">
            <span class="leading_ jy-icon-push-set"></span>
            <span class="item-label-other">
              <span class="label-text">推送设置</span>
            </span>
          </span>
          <span class="item-r media_switch">
            <span class="info-type-text ellipsis"></span>
            <span class="iconfont icon-arrow"></span>
          </span>
        </div>
      </a>
    </li>
  </ul>
  <!-- 匹配方式 -->
  <div class="match-keywords-actionsheet">
    <div class="weui-mask" id="iosMask" @click="iosMask" style="opacity: 1;display: none;"></div>
    <div class="weui-actionsheet" id="iosActionsheet">
      <div class="weui-actionsheet__title">
        <p class="weui-actionsheet__title-text">关键词匹配方式</p>
        <i class="weui-icon-clear" id="iosActionsheetCancel" @click="iosActionsheetCancel"></i>
      </div>
      <div class="weui-actionsheet__menu">
        <div class="weui-actionsheet__cell" :class="{active:active==0}" @click="actionSheet('按标题匹配', 0)">
          <p class="cell_title">按标题匹配</p>
        </div>
        <div class="weui-actionsheet__cell" :class="{active:active==1}" @click="actionSheet('按全文匹配', 1)">
          <p class="cell_title">按全文匹配</p>
          <p class="small-title">会产生无效信息，请根据需要选择</p>
        </div>
      </div>
      <!-- <div class="weui-actionsheet__action">
    <div class="weui-actionsheet__cell" id="iosActionsheetCancel" @click="iosActionsheetCancel">取消</div>
    </div> -->
    </div>
  </div>
</div>
`

var subComponent = {
  name: 'vip-subscribe-set-template',
  template: subScribeTemplate,
  props: {
    'linkobj': {
      type: Object,
      default: function() {
        return {}
      }
    },
    "initdata": {
      type: Object,
      default: function() {
        return {}
      }
    },
    "type": {
      type: String,
      default: function() {
        return ''
      }
    }
  },
  data: function() {
    return {
      info: {
        area: '',
        industry: '',
        defaultVal: '按标题匹配',
        infoType: '全部类型'
      },
      // 匹配方式
      active: 1,
      pushsetShow: true,
      resultTime: '(近3个月内共条信息)',
      checkedflag: false,
      littleShow: false
    }
  },
  mounted () {
    this.getData()
    this.getResultView()
  },
  watch: {
    initdata: function(newVal, oldVal) {
      if(newVal) {
        this.getData()
      }
    }
  },
  methods: {
    getData: function() {
      this.setArea()
      this.setIndustry()
      this.setKeyword()
      this.getActionDefault()
      this.getIndustryType()
      this.getProjectMatch()
    },
    // 设置区域
    setArea: function() {
      let _this = this
      if(this.initdata.area) {
        if(JSON.stringify(this.initdata.area) == '{}') {
          this.info.area = '全国'
        } else {
          let proStr = ''
          Object.keys(this.initdata.area).forEach(function(item,index) {
            console.log(_this.initdata.area[item])
            if(_this.initdata.area[item].length == 0) {
              proStr += item + '、'
            } else {
              let cityStr = ''
              _this.initdata.area[item].forEach(function(data, i) {
                console.log(data)
                cityStr += data + '、'
              })
              if (cityStr.length > 0) {
                cityStr = cityStr.substr(0,cityStr.length - 1);
              }
              proStr += item+ '(' + cityStr + ')' + '、'
            }
          })
          if(proStr[proStr.length - 1] == '、') {
            proStr = proStr.substr(0,proStr.length - 1);
          }
          _this.info.area = proStr
        }
      }
    },
    // 设置行业
    setIndustry: function() {
      let _this = this
      if(this.initdata.industry) {
        if(this.initdata.industry.length == 0) {
          this.info.industry = '全部行业'
        } else {
          this.info.industry = this.initdata.industry + ''
        }
      }
    },
    // 设置关键词
    setKeyword: function() {
      let state = this.initdata
      if(state) {
        if(state.items) {
          if (state.items.length === 0) {
            $('.body-item.keywords .keywords-text').text('已设置' +arr.length+ '组关键词')
          } else {
              var arr = []
              state.items.forEach(function (item, index) {
                  arr.push(item['s_item'])
              })
              // $('.body-item.keywords .keywords-text').text(arr.join('、'))
              $('.body-item.keywords .keywords-text').text('已设置' +arr.length+ '组关键词')
          }
        }
      } else {
        $('.body-item.keywords .keywords-text').text('已设置' +arr.length+ '组关键词')
      }
    },
    // 信息类型
    getIndustryType: function() {
      if(this.initdata) {
        if(this.initdata.infotype) {
          if (this.initdata.infotype.length === 0) {
            this.info.infoType = '全部类型'
          } else {
            this.info.infoType = this.initdata.infotype.join('、')
          }
        }
      }
    },
    // 项目匹配
    getProjectMatch: function() {
      if (this.initdata.projectmatch) {
        $('.switch').addClass('checked')
      } else {
          $('.switch').removeClass('checked')
      }
    },
    switchs: function() {
      // switch点击切换
      var $this = $(this);
      var hasChecked = this.checkedflag;
      console.log(hasChecked)
      if (!hasChecked) {
          this.checkedflag = true;
          this.setprojectmatch(1);
      } else {
        this.checkedflag = false;
          this.setprojectmatch(0);
          weui.toast('项目匹配已关闭', {
              duration: 1500,
              className: 'jy-toast',
              callback: function () {
                  console.log('close')
              }
          });
      }
    },
    setprojectmatch(index) {
      console.log(this.checkedflag)
      let _this = this
      if (this.checkedflag) {
        this.checkedflag = false;
        $.post("/subscribepay/afterPay/setUserInfo", {pageType: "projectMatch", pmindex: index}, function (r) {
            if (r.flag) {
              var subVipState = sessionStorage.getItem('sub_vip_state');
              var reqData = JSON.parse(subVipState);
              _this.checkedflag = true;
              reqData.projectmatch = index;
              sessionStorage.setItem('sub_vip_state', JSON.stringify(reqData))
            }
        })
      }
    },
    // 关键词匹配方式
    getActionDefault: function() {
      let _this = this
      let defaultTitle = ''
      if(this.initdata.matchWay == 1) {
        defaultTitle = '按标题匹配'
      } else if(this.initdata.matchWay == 2) {
        defaultTitle = '按全文匹配'
      }
      $('#iosActionsheet .weui-actionsheet__cell').each(function (index, item) {
        var t = $(item).children().text().trim();
        console.log(t, defaultTitle)
        if (t == defaultTitle) {
            $(this).addClass('active')
        }
      })
    },
    hideActionSheet: function() {
      var $iosMask = $('#iosMask');
      var $iosActionsheet = $('#iosActionsheet');
      $iosActionsheet.removeClass('weui-actionsheet_toggle');
      $iosMask.fadeOut(200);
    },
    iosMask: function() {
        this.hideActionSheet()
    },
    iosActionsheetCancel: function() {
      this.hideActionSheet()
    },
    matchWay: function() {
      var $iosMask = $('#iosMask');
      var $iosActionsheet = $('#iosActionsheet');
      $iosActionsheet.addClass('weui-actionsheet_toggle');
      $iosMask.fadeIn(200);
    },
    actionSheet: function(title, i) {
      this.active = i
      this.info.defaultVal = title
      var $iosMask = $('#iosMask');
      var $iosActionsheet = $('#iosActionsheet');
      $iosActionsheet.removeClass('weui-actionsheet_toggle');
      $iosMask.fadeOut(200);
      $('.match-way-value').text(title)
      var nowMode = title
      var ModeArr = ['按标题匹配', '按全文匹配']
      var nowIndex = ModeArr.indexOf(nowMode)
      if (nowIndex !== -1) {
          this.setMatchway(ModeArr.indexOf(nowMode) + 1)
      } else {
          // $(this).removeClass('active').siblings().addClass('active');
          $('.match-way-value').text($(this).siblings().children('.cell_title').text())
          weui.toast('关键词匹配方式修改失败', {
              duration: 1500,
              className: 'jy-toast',
              callback: function () {
                  console.log('close')
              }
          });
      }
    },
    setMatchway(index) {
      $.post("/subscribepay/afterPay/setUserInfo", {pageType: "saveSeniorset", matchtype: index}, function (r) {
          if (r.flag) {
            var subVipState = sessionStorage.getItem('sub_vip_state');
            var reqData = JSON.parse(subVipState);
            reqData.matchway = index;
            sessionStorage.setItem('sub_vip_state', JSON.stringify(reqData))
          }
      })
    },
    // 项目匹配问号点击事件
    projectNotice: function () {
      var str = '开启后，系统将根据你订阅的关键词自动匹配出相关联的项目，并将相关联项目的后续动态在超级订阅内一并推送。'
      weui.alert(str, {
          title: '项目匹配',
          className: 'jy-alert',
          buttons: [{
              label: '我知道了'
          }]
      });
    },
    // 最近三个月推送结果预览总数
    getResultView: function() {
      let _this = this
      $.ajax({
        type: 'POST',
        url: '/subscribepay/afterPay/getPushCount',
        success: function(res) {
          console.log(res)
          if(_this.type == 'introduce') {
            _this.pushsetShow = false
            _this.resultTime = '(近三个月)'
          } else {
            if(res.count < 30) {
              _this.littleShow = true
            }
            _this.resultTime = '(近3个月内共' + res.count + '条信息)'
          }
        }
      })
    }
  },
}