<template>
  <ai-list class="AppAssessment">
    <template slot="title">
      <ai-title title="工作考核" isShowBottomBorder :isShowArea="true" v-model="search.areaId" :instance="instance" @change="getList"></ai-title>
    </template>
    <template slot="content">
      <div class="statistics-top">
        <div class="statistics-top__item">
          <span>活动登记数量</span>
          <h2 style="color: #2266FF;">{{ info['丧礼登记数量'] }}</h2>
        </div>
        <div class="statistics-top__item">
          <span>干部参与和操办登记数量</span>
          <h2 style="color: #22AA99;">{{ info['干部参与和操办登记数量'] }}</h2>
        </div>
        <div class="statistics-top__item">
          <span>婚礼登记数量</span>
          <h2 style="color: #F8B425">{{ info['婚礼登记数量'] }}</h2>
        </div>
        <div class="statistics-top__item">
          <span>丧礼登记数量</span>
          <h2 style="color: red">{{ info['丧礼登记数量'] }}</h2>
        </div>
      </div>
      <ai-card title="帮扶走访情况">
        <template #content>
          <ai-table
            :tableData="tableData"
            :col-configs="colConfigs"
            :total="total"
            style="margin-top: 12px;"
            :current.sync="search.current"
            :size.sync="search.size"
            @selection-change="(v) => (ids = v.map((e) => e.id))"
            @getList="getList">
            <el-table-column slot="options" width="90px" fixed="right" label="操作" align="center">
              <div class="table-options" slot-scope="{ row }">
                <el-button type="text" @click="toAdd(row.id)">编辑</el-button>
                <el-button type="text" @click="remove(row.id)">删除</el-button>
              </div>
            </el-table-column>
          </ai-table>
        </template>
      </ai-card>
    </template>
  </ai-list>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    name: 'AppAssessment',

    props: {
      instance: Function,
      dict: Object
    },

    data() {
      return {
        search: {
          current: 1,
          size: 10,
          title: '',
          areaId: ''
        },
        info: {

        },
        ids: [],
        total: 10,
        tableData: []
      }
    },

    computed: {
      ...mapState(['user']),

      colConfigs () {
        return [
          { prop: 'title', label: '审批负责人', align: 'left' },
          { prop: 'createUserName', label: '所属地区', align: 'center' },
          { prop: 'createTime', label: '操作时间', align: 'center' },
          { prop: 'createTime', label: '操作人', align: 'center' },
          { slot: 'options', label: '操作' }
        ]
      }
    },

    created () {
      this.search.areaId = this.user.info.areaId
      this.dict.load('epidemicRecentTestResult').then(() => {
        this.getList()
      })
    },

    methods: {
      getList() {
        this.instance.post(`/app/appmininotice/list`, null, {
          params: {
            ...this.search
          }
        }).then(res => {
          if (res.code == 0) {
            this.tableData = res.data.records
            this.total = res.data.total
          }
        })
      },

      removeAll () {
        var id = this.ids.join(',')
        this.remove(id)
      },

      remove(id) {
        this.$confirm('确定删除该数据？').then(() => {
          this.instance.post(`/app/appmininotice/delete?ids=${id}`).then(res => {
            if (res.code == 0) {
              this.$message.success('删除成功！')
              this.getList()
            }
          })
        })
      },

      toDetail (id) {
        this.$emit('change', {
          type: 'Detail',
          params: {
            id: id || ''
          }
        })
      },

      toAdd(id) {
        this.$emit('change', {
          type: 'Add',
          params: {
            id: id || ''
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .AppAssessment {
    .statistics-top {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      & > div {
        flex: 1;
        height: 96px;
        line-height: 1;
        margin-right: 20px;
        padding: 16px 24px;
        background: #FFFFFF;
        box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
        border-radius: 4px;

        &:last-child {
          margin-right: 0;
        }

        h3 {
          font-size: 24px;
        }

        span {
          display: block;
          margin-bottom: 16px;
          color: #888888;
          font-size: 16px;
        }
      }
    }
    ::v-deep .ai-list__content {
      width: 100%;
      .ai-list__content--right {
        width: 100%!important;

        .ai-list__content--right-wrapper {
          padding: 0!important;
          background: transparent!important;
          box-shadow: none!important;
        }
      }
    }
    ::v-deep.el-pager {
      li.active + li {
        border-left: 1px solid #D0D4DC;
      }
    } 

    .newPagination {
      width: 100%;
      display: flex;
      align-items: center;
      height: 64px;
      padding: 0 40px!important;

      .el-pagination {
        width: 100%;
        padding: 0;
      }
      ::v-deep .el-pager li.active {
        background-color: #fff !important;
        color: #2266FF !important;
        border-color: #2266FF;
      }

      ::v-deep .el-pager li {
        background-color: #fff;
        border: solid 1px #d0d4dc;
        margin-left: 8px;
        border-radius: 4px !important;
        line-height: 26px !important;
      }

      .paginationPre {
        display: flex;
        height: 28px;
        line-height: 1;
        font-size: 14px;
        font-weight: normal;
        align-items: center;

        .pagination-btns {
          display: flex;
          align-items: center;
          gap: 8px;
          color: #2266FF !important;

          ::v-deep span, ::v-deep div {
            font-size: 12px;
            cursor: pointer;
            color: #2266FF !important;

            &:hover {
              opacity: 0.8;
            }
          }
        }

        .paginationPre-total {
          font-size: 12px;
          color: #555;

          label {
            padding: 0 2px;
            font-weight: 700;
          }
        }

        & > * + * {
          margin-left: 24px;
        }

        ::v-deep .el-pagination button, .el-pagination span:not([class*=suffix]) {
          line-height: 1 !important;
        }

        ::v-deep.el-checkbox {
          padding-left: 14px;
          display: flex;
          align-items: center;

          .el-checkbox__input, .el-checkbox__inner {
            width: 14px;
            height: 14px;
            min-width: 0 !important;
            line-height: 1 !important;
          }

          .el-checkbox__label {
            font-size: 12px;
            color: #222222;
            height: auto !important;
            line-height: 1 !important;
            padding-left: 3px !important;
          }
        }
      }
    }

    .form-list__list {
      display: flex;
      flex-wrap: wrap;
      margin-top: 8px;

      .list-item {
        display: flex;
        position: relative;
        flex-direction: column;
        justify-content: space-between;
        margin-bottom: 12px;
        padding: 18px 16px 16px;

        .list-item__img {
          width: 100%;
          height: 140px;
          cursor: pointer;

          img {
            width: 100%;
            height: 140px;
            object-fit: none;
          }
        }

        &:hover {
          .list-item__operate {
            display: flex;
          }
        }

        .list-item__operate {
          display: none;
          align-items: center;
          position: absolute;
          left: 0;
          bottom: 0;
          z-index: 1;
          width: 100%;
          height: 52px;
          text-align: center;
          background: #F7F8FA;

          & > div {
            flex: 1;
          }

          ::v-deep .el-button {
            margin-left: 0;
            padding: 0;
            i {
              color: #8899BB;
              font-size: 14px;
              transition: all 0.3s;
            }

            .el-button + .el-button {
              margin-left: 0;
            }

            span {
              margin-left: 0;
              color: #555555;
              font-size: 12px;
              transition: all 0.3s;
            }

            &:hover {
              &.is-disabled {
                i {
                  color: #8899BB;
                }

                span {
                  color: #555555;
                }
              }
            }
          }

          .list-item__operate--item {
            flex: 1;

            &:hover {
              ::v-deep i, ::v-deep span {
                color: #2266FF;
              }
            }
          }
        }

        .list-item__bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #888888;
          font-size: 12px;

          i {
            font-style: normal;
          }

          .left {
            display: flex;
            align-items: center;

            .tag {
              height: 26px;
              line-height: 26px;
              margin-right: 8px;
              padding: 0 6px;
              border-radius: 4px;
              background: #42D784;
              color: #fff;
            }
          }
        }

        p {
          line-height: 22px;
          color: #333333;
          font-size: 14px;
          font-weight: 700;
        }

        .list-item__user {
          display: flex;
          align-items: center;
          margin-top: 12px;
          color: #888888;
          font-size: 12px;
          line-height: 20px;

          & > div:first-child {
            margin-right: 8px;
          }
        }

        .list-item__title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 14px;

          h2 {
            color: #2EA222;
            font-size: 12px;
          }

          span {
            width: 64px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            border-radius: 4px;
            font-size: 12px;
          }
        }
      }

      .list-add {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 0;
        cursor: pointer;

        span {
          font-size: 32px;
          color: #8899bb;
        }

        h2 {
          color: #555555;
          font-size: 12px;
        }

        &:hover {
          opacity: 0.6;
        }
      }

      & > div {
        width: calc((100% - 60px) / 4);
        height: 216px;
        margin: 0 20px 20px 0;
        background: #FFFFFF;
        box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.05);
        border-radius: 2px;

        &:nth-of-type(4n) {
          margin-right: 0;
        }
      }
    }
  }
</style>
