<template>
  <div class="AppCooperationPropagandaBeta">
    <AiTopFixed>
      <div class="tab-select">
        <div class="item" :class="tabIndex == index ? 'active' : ''" v-for="(item, index) in tabs" :key="index" @click="tabClick(item,index)">{{ item.name }}<span></span></div>
      </div>
      <div class="search">
        <div class="searchBox">
          <u-search placeholder="请输入任务名称" v-model="taskTitle" clearabled @search="searchBtn" @clear="taskTitle='',getList()" :show-action="false"></u-search>
        </div>
        <div class="filterBtn" @click="filterShow = true"><img src="./images/shaixuan.png" alt="">筛选</div>
      </div>
    </AiTopFixed>
    <div class="resident_list" v-if="list.length">
      <div class="card" @click="toDetail(item)" v-for="(item,index) in list" :key="index">
        <div class="card_title">
          <div class="card_left">{{ item.taskTitle }}</div>
          <div class="card_right"><span :class="item.status==0? 'status0': item.status==1? 'status1': item.status==2? 'status2':
           item.status == 3? 'status3':item.status==4? 'status4': 'status5'"></span>{{ $dict.getLabel('mstStatus', item.status) }}</div>
        </div>
        <div>群发时间：<span>{{ item.choiceTime }}</span></div>
        <div>共需<span class="num">{{ item.groupOwnerCount || 0 }}</span>名成员完成群发，目前已完成<span class="num">{{ item.completionRate || 0 }}%</span></div>
        <div>
          创建部门：
          <span v-if="item.createUserDeptName">{{ item.createUserDeptName }}</span>
          <!-- <span v-if="item.createUserSecondDept"><AiOpenData type="departmentName" :openid="item.createUserSecondDept" style="display: inline-block" /></span> -->
        </div>
      </div>
    </div>
    <AiEmpty description="暂无数据" v-if="!list.length"/>

    <div class="btn">
      <div class="addBtn" @click="toAdd">新增群发{{tabIndex==0? '居民群': tabIndex==1? '居民':'朋友圈'}}</div>
    </div>

    <u-popup v-model="filterShow" mode="bottom" border-radius="14">
      <div class="popup">
        <div class="tips"></div>
        <div class="title">
          <div
            class="cancel"
            @click.stop="(filterShow = false), (timeSelect = 0)"
          >
            取消
          </div>
          <p>筛选条件</p>
          <div class="confirm" @click.stop="selectConfirm">确定</div>
        </div>
        <scroll-view class="select-content" scroll-y="true">
          <div class="type-list">
            <div class="type-title">创建人</div>
            <AiPagePicker type="custom" :selected.sync="userIdList" nodeKey="createUserId" :ops="{url:`./selectUser?tabIndex=${this.tabIndex}`,label: 'id'}">
              <div class="page_picker">
                <span class="label" v-if="userIdList.length">已选择</span>
                <span v-else style="color:#999;">请选择</span>
                <u-icon name="arrow-right" color="#303133" size="24" style="margin-left:8px;"/>
              </div>
            </AiPagePicker>
          </div>
          <div class="type-list">
            <div class="type-title">任务状态</div>
            <div class="items">
              <AiSelect dict="mstStatus" v-model="status"></AiSelect>
            </div>
          </div>
          <div class="type-list">
            <div class="type-title">群发时间</div>
            <div class="item">
              <div>开始时间</div>
              <div style="display: flex;">
                <u-input v-model="startTime" disabled placeholder="请选择开始时间" @click="showStart = true" />
                <u-icon name="arrow-right"></u-icon>
              </div>
            </div>
            <div class="item">
              <div>结束时间</div>
              <div style="display: flex;">
                <u-input v-model="endTime" disabled placeholder="请选择结束时间" @click="showEnd = true" />
                <u-icon name="arrow-right"></u-icon>
              </div>
            </div>
          </div>
        </scroll-view>
        <u-picker mode="time" v-model="showStart" @confirm="confirmStart"></u-picker>
        <u-picker mode="time" v-model="showEnd" @confirm="confirmEnd"></u-picker>
        <div class="popBtn">
          <div @click="reset">重置</div>
          <div @click="selectConfirm">确认</div>
        </div>
      </div>
    </u-popup>
  </div>
</template>

<script>
export default {
  name: 'AppCooperationPropagandaBeta',
  appName: '协同宣发',
  data() {
    return {
      tabs: [
        {
          name: '群发居民群',
          value: 'ResidentsGroup'
        },
        {
          name: '群发居民',
          value: 'Residents'
        },
        {
          name: '群发朋友圈',
          value: 'CircleOfFriends'
        },
      ],
      tabIndex: 0,
      current: 1,
      name: '',
      list: [],
      filterShow: false,
      startTime: '',
      endTime: '',
      start: "",
      end: "",
      showStart: false,
      showEnd: false,
      taskTitle: '',
      createUserId: '',
      userList: [],
      userIdList: [],
      status: '',
      sendType: '',
    }
  },
  methods: {
    tabClick(item,index) {
      this.list = []
      this.current = 1
      this.tabIndex = index;
      this.sendType = item.value
      uni.removeStorageSync('userSelect')
      uni.removeStorageSync('wxGroupsUser')
      uni.removeStorageSync('girdSelect')
      uni.removeStorageSync('deptList')
      uni.removeStorageSync('sendScope')
      uni.removeStorageSync('ResidentTags')
      uni.removeStorageSync('ResidentTagsRemove')
      uni.removeStorageSync('circleTags')
      uni.removeStorageSync('circleTagsRemove')
      uni.removeStorageSync('startTime')
      uni.removeStorageSync('endTime')
      this.$dict.load('mstStatus').then(() => {
        this.getList()
      })
    },
    toDetail(item) {
      if(this.tabIndex == 0) {
        uni.navigateTo({url: `./cooperationDetail?id=${item.id}&time=${item.createTime}`})
      } else {
        uni.navigateTo({url: `./circleDetail??id=${item.id}&type=${this.sendType}`})
      }
    },
    searchBtn() {
      this.current = 1
      this.list = [],
      this.getList()
    },
    getList() {
      let url = ''
      let data = {
        current: this.current,
        taskTitle: this.taskTitle,
        startTime: this.start,
        endTime: this.end,
        createUserId: this.createUserId,
        status: this.status,
      }
      if(this.tabIndex==0) {
        url = `/app/appmasssendingtask/list`
      } else if(this.tabIndex==1 || this.tabIndex==2) {
        url = `/app/whchatmomentstask/list`
        data = {
          ...data,
          taskType: this.tabIndex == 0? '': this.tabIndex==1? 1:0
        }
      }
      this.$http.post(url,null, {params:{...data}}).then(res=> {
        if(res?.data) {
          this.list = this.current == 1?  res.data.records : [...this.list, ...res.data.records]
        }
      })
    },

    reset() {
      this.start = '',
      this.end = '',
      this.startTime = '',
      this.endTime = ''
      this.userIdList = []
      this.createUserId = ''
      this.status = ''
      uni.setStorageSync('userSelect', [])
    },

    selectConfirm() {
      if(this.userIdList.length) {
        this.createUserId = this.userIdList?.[0].userId
      }

      this.start = this.startTime,
      this.end = this.endTime
      let startTmp = this.start.split("-");
      let endTmp = this.end.split("-");
      let stT = new Date(startTmp[0], startTmp[1], startTmp[2]);
      let edT = new Date(endTmp[0], endTmp[1], endTmp[2]);
      if (stT.getTime() > edT.getTime()) {
        this.$u.toast("开始日期不能大于结束日期！");
        this.filterShow = true
        return
      }
      this.filterShow = false
      this.current = 1
      this.getList()
    },
    confirmStart(val) {
      this.startTime = val.year + '-' + val.month + '-' + val.day
    },
    confirmEnd(val) {
      this.endTime = val.year + '-' + val.month + '-' + val.day
    },
    toAdd() {
      uni.navigateTo({url: `./addPropaganda?type=${this.sendType}`})
    }
  },
  onShow() {
    document.title = '协同宣发'
    this.$dict.load('mstStatus').then(() => {
      this.list = []
      this.current = 1
      this.getList()
    })
  },
  onReachBottom() {
    this.current ++
    this.getList()
  },
}
</script>

<style lang="scss" scoped>
.AppCooperationPropagandaBeta {

  padding-bottom: 130px;
  box-sizing: border-box;

  ::v-deep .AiTopFixed .content {
    padding: 0;
  }

  .tab-select {
    width: 100%;
    height: 96px;
    line-height: 96px;
    background: #3975c6;
    display: flex;

    .item {
      flex: 1;
      text-align: center;
      font-size: 28px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #cddcf0;
    }

    .active {
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      position: relative;
      color: #fff;

      span {
        width: 48px;
        height: 4px;
        background: #fff;
        position: absolute;
        bottom: 14px;
        left: 50%;
        margin-left: -24px;
      }
    }
  }

  .search {
    display: flex;
    height: 100px;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px;
    box-sizing: border-box;

    .searchBox {
      width: 562px;
    }
    .filterBtn {
      img {
        width: 28px;
        height: 28px;
      }
    }
  }
  .resident_list {
    padding: 24px 32px 20px 32px;
    box-sizing: border-box;
    .card {
      background: #FFF;
      border-radius: 16px;
      padding: 30px;
      margin-bottom: 24px;
      & > div {
        padding: 10px 0;
      }
      .num {
        color: #3AA0FF;
      }
      .card_title {
        display: flex;
        justify-content: space-between;
        .card_left {
          font-size: 32px;
          color: #000000;
          font-weight: 600;
        }
        .card_right {
          span {
            display: inline-block;
            width: 16px;
            height: 16px;
            // background: #3399FF;
            border-radius: 50%;
            margin-right: 10px;
          }

          .status0 {
            background: #FFA938;
          }
          .status1 {
            background: #FF6758;
          }
          .status2 {
            background: #3399FF;
          }
          .status3 {
            background: #FF6758;
          }
          .status4 {
            background: #3399FF;
          }
          .status5 {
            background: #1CCEB0;
          }
          .status6 {
            background: #666666;
          }
        }
      }
    }
  }

  .btn {
    position: fixed;
    bottom: 0;
    left: 0;
    background: #FFF;
    display: flex;
    width: 100%;
    height: 128px;
    padding: 24px 32px;
    box-sizing: border-box;

    .addBtn {
      flex: 1;
      height: 80px;
      line-height: 80px;
      text-align: center;
      border-radius: 8px;
      border: 2px solid #CCCCCC;
      background: #1365DD;
      color: #FFF;
    }
  }

  .popup {
    box-sizing: border-box;
    // height: 800px;
    .tips {
      width: 80px;
      height: 6px;
      background: #dddddd;
      border-radius: 4px;
      padding: 0 32px;
      box-sizing: border-box;
      margin: 32px auto 8px auto;
    }
    .title {
      height: 48px;
      line-height: 48px;
      font-size: 34px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #222;
      padding: 0 32px;
      box-sizing: border-box;
      padding-bottom: 32px;
      .cancel {
        display: inline-block;
        width: 200px;
        color: #aaa;
      }
      .confirm {
        display: inline-block;
        width: 200px;
        text-align: right;
        color: #333;
      }
      p {
        display: inline-block;
        width: calc(100% - 400px);
        text-align: center;
        font-size: 28px;
      }
    }
    .select-content {
      height: calc(100% - 100px);
      overflow-y: scroll;
    }
    .type-list {
      padding: 0 32px;
      box-sizing: border-box;
      margin-bottom: 32px;
      .type-title {
        line-height: 108px;
        font-size: 32px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333;
      }
      .item {
        display: flex;
        justify-content: space-between;
        & > div:last-child {
          ::v-deep .uni-input-input,
          ::v-deep .uni-input-placeholder {
            text-align: right;
          }
        }
      }
      .items {
        ::v-deep .AiSelect .display {
          justify-content: space-between;
          width: 100%;
        }
      }
      .active {
        background: #1365dd;
        color: #fff;
      }
      .user {
        display: flex;
        justify-content: space-between;
      }
    }
    .popBtn {
      display: flex;
      height: 98px;
      line-height: 98px;
      div {
        width: 50%;
        border: 2px solid #3399ff;
        text-align: center;
      }
      div:first-child {
        color: #3399ff;
      }
      div:last-child {
        color: #fff;
        background: #3399ff;
      }
    }
  }
  ::v-deep .uicon-arrow-right::before {
    color: #606266 !important;
  }
  .page_picker {
    display: flex;
    justify-content: space-between;
  }
}
</style>
