// 催办记录
<template>
  <div>
    <van-popup
      v-model="show"
      round
      safe-area-inset-bottom
      position="bottom"
      duration="0"
      style="min-height: 40%; max-height: 80%"
    >
      <van-nav-bar
        title="催办记录"
        left-text="关闭"
        class="popup_header_fixed"
        @click-left="show = false"
      />

      <van-row class="vanRow popup_header_margin">
        <van-col span="24" v-for="(item, i) of dataList" :key="i">
          <van-row>
            <van-col span="24" class="colName">
              {{ item.nodeName }}
            </van-col>
          </van-row>
          <van-row>
            <van-col span="24">
              {{ item.content }}
            </van-col>
          </van-row>

          <div class="colPeople colPeople_item">
            <div class="colPeople_item_left">催办人： {{ item.promoter }}</div>
            <div class="colPeople_item_right">
              被催办人：

              <span v-if="item.appointee.split(',').length < 4">
                {{ item.appointee }}
              </span>
              <span v-else>
                {{ item.appointee.split(',').splice(0, 3).join(',') }}&nbsp;共{{
                  item.appointee.split(',').length
                }}人
                <van-icon
                  name="more-o"
                  class="more-icon"
                  @click="handleShowMoreUser(item.appointee)"
                />
              </span>
            </div>
          </div>

          <div class="colPeople_item">
            <div class="colPeople_item_left" span="10">
              催办类型： {{ typeMap[item.type] }}
            </div>
            <div class="colPeople_item_right" span="14">
              催办日期： {{ item.urgrntDate }}
            </div>
          </div>
        </van-col>
      </van-row>
      <van-empty
        v-if="dataList.length === 0"
        class="custom-image"
        :image="noDataImage"
        description="暂无内容"
      />
    </van-popup>

    <van-popup
      v-model="showAllPeople"
      round
      safe-area-inset-bottom
      position="bottom"
      duration="0"
      class="selectDialog"
      style="min-height: 40%; max-height: 80%"
    >
      <div class="head">
        <div class="close" @click="showAllPeople = false">关闭</div>
        <div class="title">
          已选人员
          <span>{{ allPeople.split(',').length }}</span>
        </div>
        <div class="close" style="visibility: hidden">清空</div>
      </div>

      <div class="content">
        {{ allPeople.replace(/,/g, '，') }}
      </div>
    </van-popup>
  </div>
</template>

<script>
  import { getUrgentById } from '@/api/process'
  import { mapState } from 'vuex'
  const TYPE_MAP = {
    mail: '邮件',
    sms: '短信',
    smsApproval: '短信审批',
    inner: '内部消息',
    voice: '语音',
    wxEnterprise: '微信',
    dingTalk: '钉钉',
    flyBook: '飞书',
  }
  export default {
    name: 'CuiBanRecord',
    props: {
      instId: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        show: false,
        typeMap: TYPE_MAP,
        pagination: {
          // 页码
          page: 1,
          pageSize: 20,
          total: 0,
        },
        showAllPeople: false,
        dataList: [],
        allPeople: '',
        noDataImage: require('@/assets/images/no_data_list.png'),
      }
    },
    computed: {
      ...mapState('user', ['currentUserDetail']),
    },
    methods: {
      showDialog() {
        this.show = true

        this.loadData()
      },
      // 加载表格中数据方法
      loadData(param) {
        const currentUserId = this.currentUserDetail.user?.id || '1'

        if (!this.instId || !currentUserId) {
          return
        }
        const pageBean = {
          pageBean: {
            page: 1,
            pageSize: 99999999,
            total: 0,
          },
          querys: [
            {
              property: 'PROMOTER_ID_',
              value: currentUserId,
              operation: 'EQUAL',
              relation: 'OR',
              group: 'sub',
            },
            {
              property: 'APPOINTEE_ID_',
              value: currentUserId,
              operation: 'EQUAL',
              relation: 'OR',
              group: 'sub',
            },
            {
              property: 'INST_ID_',
              value: this.instId,
              operation: 'EQUAL',
              relation: 'AND',
            },
          ],
        }

        getUrgentById(pageBean).then((response) => {
          this.pagination = {
            page: response.page,
            pageSize: response.pageSize,
            total: response.total,
          }
          this.dataList = response.rows
        })
      },
      handleShowMoreUser(val) {
        this.showAllPeople = true
        this.allPeople = val
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import '@/styles/matterButton.scss';
  .vanRow {
    padding: 16px;
    & > .van-col {
      padding: 12px;
      margin-bottom: 12px;
      background: #f9f9f9;
    }
  }
  .van-col {
    font-size: 12px;
    color: #8c8c8c;
    word-wrap: break-word;
    word-break: break-all;

    border-radius: 8px 8px 8px 8px;
  }
  .colName {
    color: #262626;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
  }
  .colPeople {
    margin: 18px 0;
  }
  .custom-image .van-empty__image {
    width: 268px;
    height: 196px;
  }
  .colPeople_item {
    display: flex;
    position: relative;
    &_left {
      width: calc(40% - 32px);
      margin-right: 32px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    &_right {
      width: 60%;
    }
  }
  .more-icon {
    color: #409eff;
    font-size: 16px;
    margin-top: 1px;
  }

  .selectDialog {
    display: flex;
    flex-direction: column;
    .head {
      display: flex;
      height: 44px;
      justify-content: space-between;
      align-items: center;
      .close {
        display: block;
        height: 44px;
        line-height: 44px;
        padding: 0 16px;
        font-size: 14px;
        color: #8c8c8c;
      }
      .title {
        flex: 1;
        height: 44px;
        text-align: center;
        line-height: 44px;
        font-weight: bold;
        color: #1a1a1a;
        font-size: 17px;
        span {
          padding: 0 6px;
          color: #409eff;
        }
      }
    }

    .content {
      padding: 16px;
      font-size: 16px;
    }
  }
</style>