<template>
  <div class="p-4">
    <ChartGroupCard class="enter-y" :loading="loading" type="bdc" />
    <BdcTabCard class="!my-4 enter-y" :loading="loading" />
    <Row>
      <Col :span="24">
        <Card :loading="loading" :class="{ 'anty-list-cust': true }" :bordered="false">
          <Tabs v-model:activeKey="indexBottomTab" size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }">
            <template #rightExtra>
              <div class="extra-wrapper">
                <RadioGroup v-model:value="indexRegisterType" @change="changeRegisterType">
                  <RadioButton value="转移登记">转移登记</RadioButton>
                  <RadioButton value="抵押登记">抵押登记</RadioButton>
                  <RadioButton value="">所有</RadioButton>
                </RadioGroup>
              </div>
            </template>

            <TabPane tab="业务流程限时监管" key="1">
              <Table :dataSource="dataSource" size="default" rowKey="reBizCode" :columns="table.columns" :pagination="ipagination" @change="tableChange">
                <template #flowRate="{ text, record, index }">
                  <Progress :strokeColor="getPercentColor(record.flowRate)" :format="getPercentFormat" :percent="getFlowRateNumber(record.flowRate)" style="width: 80px" />
                </template>
              </Table>
            </TabPane>

            <TabPane loading="true" tab="业务节点限时监管" key="2">
              <Table :dataSource="dataSource1" size="default" rowKey="reBizCode" :columns="table1.columns" :pagination="ipagination1" @change="tableChange1">
                <template #flowRate="{ text, record, index }">
                  <span style="color: red">{{ record.flowRate }}小时</span>
                </template>
              </Table>
            </TabPane>
          </Tabs>
        </Card>
      </Col>
    </Row>
  </div>
</template>
<script lang="ts" setup>
  import { ref, unref } from 'vue';
  import { Progress, Row, Col, Card, Tabs, TabPane, RadioGroup, RadioButton, Table } from 'ant-design-vue';
  import ChartGroupCard from '../components/ChartGroupCard.vue';
  import BdcTabCard from '../components/BdcTabCard.vue';
  import { table, table1 } from '../data';

  const loading = ref(true);

  setTimeout(() => {
    loading.value = false;
  }, 500);

  const indexBottomTab = ref('1');
  const indexRegisterType = ref('转移登记');
  const dataSource = ref([]);
  const dataSource1 = ref([]);
  const ipagination = ref(table.ipagination);
  const ipagination1 = ref(table1.ipagination);

  function changeRegisterType(e) {
    indexRegisterType.value = e.target.value;
    if (unref(indexBottomTab) == '1') {
      loadDataSource();
    } else {
      loadDataSource1();
    }
  }

  function tableChange(pagination) {
    ipagination.value.current = pagination.current;
    ipagination.value.pageSize = pagination.pageSize;
    loadDataSource();
  }

  function tableChange1(pagination) {
    ipagination1.value.current = pagination.current;
    ipagination1.value.pageSize = pagination.pageSize;
    loadDataSource1();
  }

  function getFlowRateNumber(value) {
    return +value;
  }

  function getPercentFormat(value) {
    if (value == 100) {
      return '超时';
    } else {
      return value + '%';
    }
  }

  function getPercentColor(value) {
    let p = +value;
    if (p >= 90 && p < 100) {
      return 'rgb(244, 240, 89)';
    } else if (p >= 100) {
      return 'red';
    } else {
      return 'rgb(16, 142, 233)';
    }
  }

  function loadDataSource() {
    dataSource.value = table.dataSource.filter((item) => {
      if (!unref(indexRegisterType)) {
        return true;
      }
      return item.type == unref(indexRegisterType);
    });
  }

  function loadDataSource1() {
    dataSource1.value = table1.dataSource.filter((item) => {
      if (!unref(indexRegisterType)) {
        return true;
      }
      return item.type == unref(indexRegisterType);
    });
  }

  loadDataSource();
  loadDataSource1();
</script>

<style lang="less" scoped>
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  .item-group {
    padding: 20px 0 8px 24px;
    font-size: 0;

    a {
      color: rgba(0, 0, 0, 0.65);
      display: inline-block;
      font-size: 14px;
      margin-bottom: 13px;
      width: 25%;
    }
  }

  .item-group {
    .more-btn {
      margin-bottom: 13px;
      text-align: center;
    }
  }

  .list-content-item {
    color: rgba(0, 0, 0, 0.45);
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    margin-left: 40px;
  }

  @media only screen and (min-width: 1600px) {
    .list-content-item {
      margin-left: 60px;
    }
  }

  @media only screen and (max-width: 1300px) {
    .list-content-item {
      margin-left: 20px;
    }

    .width-hidden4 {
      display: none;
    }
  }

  .list-content-item {
    span {
      line-height: 20px;
    }
  }

  .list-content-item {
    p {
      margin-top: 4px;
      margin-bottom: 0;
      line-height: 22px;
    }
  }

  .anty-list-cust {
    .ant-list-item-meta {
      flex: 0.3 !important;
    }
  }

  .anty-list-cust {
    .ant-list-item-content {
      flex: 1 !important;
      justify-content: flex-start !important;
      margin-left: 20px;
    }
  }
</style>
