<script lang="ts" setup>
import { SelectData } from '@idux/components/select/src/types'
import { useFormGroup } from '@idux/cdk'
import { TableColumn } from '@idux/components/table'
import { TablePagination } from '@idux/components/table/src/types'
import CreateTsp from '@/pages/tsp/create-tsp.vue'
import TspApi from '@/pages/tsp/tsp-api.ts'
import { ref } from 'vue'

const createTsp = ref<InstanceType<typeof CreateTsp> | null>(null)
const dataSource: SelectData[] = [
  {key: '', label: '所有'},
  {key: 'ZhengChang', label: '正常运营'},
  {key: 'FenZhengChang', label: '非正常运营'},
]

const pagination = reactive<TablePagination>({
  pageIndex: 1,
  pageSize: 10,
  total: 0,
  size: 'sm',
  showTotal: true,
  onChange(pageIndex: number, pageSize: number) {
    console.log('------', pageIndex, pageSize)
    pagination.pageIndex = pageIndex
    pagination.pageSize = pageSize
  }
})

const formGroup = useFormGroup<TspTypes.SearchParam>({
  pointName: [ '' ],
  status: [ '' ],
})
const datasource = ref<TspTypes.TspData[]>()
const columns: TableColumn[] = [
  {
    title: '名称',
    dataKey: 'pointName',
    customCell: 'pointName'
  },
  {
    title: '所属街道',
    dataKey: 'streetName',
  },
  {
    title: '所属小区',
    dataKey: 'microdistrict',
  },
  {
    title: '所属物业',
    dataKey: 'propertyManagement'
  },
  {
    title: '运营状态',
    dataKey: 'statusTxt',
    customCell: 'status',
  },
  {
    title: '操作',
    key: 'action',
    customCell: 'action',
  }
]
const tableSpin = ref(false)
const statisticsResult = reactive<TspTypes.StatisticsResult>({
  totalCount: 0,
  totalCountGrowthRate: 0,
  onlineCount: 0,
  onlineCountGrowthRate: 0,
  offlineCount: 0,
  offlineCountGrowthRate: 0,
})

function searchHandler() {
  tableSpin.value = true
  TspApi.paging({
    ...formGroup.getValue(),
    current: pagination.pageIndex ?? 1,
    size: pagination.pageSize ?? 10,
  })
      .then(res => {
        pagination.pageIndex = res.data.current
        pagination.pageSize = res.data.size
        pagination.total = res.data.total
        datasource.value = res.data.records
      })
      .finally(() => {
        tableSpin.value = false
      })
}

onMounted(() => {
  searchHandler()
  TspApi.statistics()
      .then(res => {
        Object.assign(statisticsResult, res.data)
      })
})
</script>
<template>
  <div class="tsp">
    <div class="title">临时收纳点管理</div>
    <div class="desc">管理和监控所有临时垃圾收纳点的运营状态</div>
    <IxSpace class="statistics-card" justify="space-between" size="1.5rem">
      <IxCard>
        <div>
          <div>收纳点总数</div>
          <div>{{ statisticsResult.totalCount }}</div>
          <div><i class="iconfont icon-arrow-up"></i>较上月增长 {{ statisticsResult.totalCountGrowthRate }}%</div>
        </div>
        <Iconfont name="map-pin" wrapper/>
      </IxCard>
      <IxCard>
        <div>
          <div>正常运营数量</div>
          <div>{{ statisticsResult.onlineCount }}</div>
          <div><i class="iconfont icon-arrow-up"></i>较上月增长 {{ statisticsResult.onlineCountGrowthRate }}%</div>
        </div>
        <Iconfont name="check-circle-fill" wrapper/>
      </IxCard>
      <IxCard>
        <div>
          <div>非正常运营数量</div>
          <div>{{ statisticsResult.offlineCount }}</div>
          <div><i class="iconfont icon-arrow-up"></i>较上月增长 {{ statisticsResult.offlineCountGrowthRate }}%</div>
        </div>
        <Iconfont name="exclamationcircle-f" wrapper/>
      </IxCard>
    </IxSpace>
    <IxCard class="table-card">
      <template #header>
        <div class="table-tool">
          <div>收纳点列表</div>
          <IxForm :control="formGroup" class="search-form" layout="inline" @submit.prevent="searchHandler">
            <IxTooltip placement="top" title="输入内容回车搜索">
              <IxFormItem messageTooltip>
                <IxInput clearable control="pointName" placeholder="请输入收纳点名称" @clear="searchHandler"/>
              </IxFormItem>
            </IxTooltip>
            <IxFormItem messageTooltip>
              <IxSelect :dataSource="dataSource" control="status" @change="searchHandler"/>
            </IxFormItem>
            <IxFormItem messageTooltip>
              <IxButton icon="search" mode="primary" type="submit"/>
            </IxFormItem>
          </IxForm>
          <IxButton icon="plus" mode="primary" @click="createTsp?.open()">添加收纳点</IxButton>
        </div>
      </template>
      <IxTable :columns="columns"
          :dataSource="datasource"
          :pagination="pagination" :spin="tableSpin" autoHeight class="data-table" getKey="id">
        <template #pointName="{record}">
          <Iconfont name="mapmarker" wrapper/>
          <span>{{ record.pointName }}</span>
        </template>
        <template #action>
          <IxButton class="video-btn" icon="eye" mode="text">查看监控</IxButton>
        </template>
        <template #status="{record}">
          <IxTag v-if="record.status === 'ZhengChang'" status="success">{{ record.statusTxt }}</IxTag>
          <IxTag v-else status="error">{{ record.statusTxt }}</IxTag>
        </template>
      </IxTable>
    </IxCard>
    <CreateTsp ref="createTsp"/>
  </div>
</template>

<style lang="stylus" scoped>
.tsp {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;

  .title {
    font-size: 1.75rem;
    font-weight bold
    color #1F2937
  }

  .desc {
    color #687280
    margin-top 1rem
  }

  .statistics-card {
    width 100%;
    margin 1rem 0

    & > :deep(.ix-space-item) {
      flex 1

      .ix-card-body {
        height 10rem
        display flex
        justify-content space-between

        & > div:first-child {
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          div:nth-child(1) {
            color #6B7280
            font-size 1.17rem
          }

          div:nth-child(2) {
            color #1D2129
            font-size 2.5rem
            font-weight 700
          }


          div:nth-child(3) {
            font-size 1rem

            i {
              margin-right 0.5rem
            }
          }
        }

        & > div:nth-child(2) i {
          display: block
        }
      }

    }


    & > :deep(.ix-space-item:nth-child(1)) {

      .ix-card-body {

        & > div:nth-child(1) > div:nth-child(3) {
          color: #00B42A
        }

        & > div:nth-child(2) {
          color: #165DFF;
          border-radius: 100%;
          background-color: #165DFF1A;
          width: 3.3rem;
          height: 3.3rem;
          display: flex;
          justify-content: center;
          align-items: center;

        }
      }
    }

    & > :deep(.ix-space-item:nth-child(2)) {

      .ix-card-body {

        & > div:nth-child(1) > div:nth-child(3) {
          color: #00B42A
        }

        & > div:nth-child(2) {
          color: #00B42A;
          border-radius: 100%;
          background-color: #00B42A1A;
          width: 3.3rem;
          height: 3.3rem;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

    & > :deep(.ix-space-item:nth-child(3)) {

      .ix-card-body {

        & > div:nth-child(1) > div:nth-child(3) {
          color: #F53F3F
        }

        & > div:nth-child(2) {
          color: #F53F3F;
          border-radius: 100%;
          background-color: #F53F3F1A;
          width: 3.3rem;
          height: 3.3rem;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }


  .table-card {
    display flex
    flex-direction column
    flex 1
    padding 0 1rem

    .table-tool {
      display: flex;
      justify-content: space-between;
      align-items center
      padding 1rem
      border-bottom 1px solid #E5E7EB

      & > div:nth-child(1) {
        flex 2
        color #1D2129
        font-weight 600
        font-size 1.25rem
      }

      & > form:nth-child(2) {
        flex 1
      }

      .search-form {
        :deep(.ix-form-item):nth-child(1) {
          flex 5
        }

        :deep(.ix-form-item):nth-child(2) {
          flex 2
        }

        :deep(.ix-form-item):nth-child(3) {
          flex 1
        }

        :deep(.ix-button ) {
          flex 1

        }
      }

    }

    & > :deep(.ix-card-body) {
      flex 1
      padding 0
    }

    .data-table {
      :deep(.ix-table-thead .ix-table-cell) {
        color: #6B7280
        background-color: #F9FAFB
        font-weight 500
      }

      :deep(.ix-table-thead th:not(:last-child))::before {
        width 0;
      }

      .iconfont-wrapper {
        color: #165DFF;
        border-radius: 100%;
        background-color: #165DFF1A;
        width: 2.25rem;
        height: 2.25rem;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        margin-right: 0.5rem

        i {
          display: block
        }
      }

      .video-btn {
        color var(--ix-button-primary-bg-color)
      }
    }
  }

}

</style>



