<!-- 流量池 -->
<template>
  <div class="container">
    <!-- 搜索条件区 -->
    <div class="search-section">
      <a-form :model="searchForm" layout="inline">
        <a-form-item field="label" :label="$t('flowPool.label')">
          <a-input v-model="searchForm.label" :placeholder="$t('lotCard.please') + $t('flowPool.label')"
                   allow-clear/>
        </a-form-item>
        <a-form-item field="label" :label="$t('flowPool.status')">
          <a-select v-model="value" :style="{width:'240px'}" :placeholder="$t('flowPool.flowPoolStatus')">
            <a-option v-for="item of trafficList" :value="item.id" :label="item.label"/>
          </a-select>
        </a-form-item>
        <a-form-item field="label" :label="$t('flowPool.operator')">
          <a-select v-model="value" :style="{width:'240px'}" :placeholder="$t('flowPool.operatorName')">
            <a-option v-for="item of sourceList" :value="item.id" :label="item.label"/>
          </a-select>
        </a-form-item>
        <a-form-item field="label" :label="$t('flowPool.start_time')">
          <a-date-picker style="width: 200px;" :placeholder="$t('flowPool.start_timeName')"/>
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="handleSearch">{{ $t('form.Search') }}</a-button>
            <a-button @click="resetSearch">{{ $t('form.Reset') }}</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </div>

    <div class="audit-btn">
      <a-button @click="dictShowModel(1, null)" type="text" v-if="role == 1">
        <template #icon>
          <icon-plus-circle/>
        </template>
        <template #default>
          {{ $t('form.Add') }}
        </template>
      </a-button>
    </div>

    <a-table row-key="id" :data="dataSource" :columns="columns" :pagination="pagination" :scroll="{ x: 'auto' }"
             @page-change="evChangePage">
      <template #id="{ record }">
        <!-- 修改 -->
        <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="dictShowModel(2, record)"
           v-if="role == 1">{{
            $t('form.Edit')
          }}</a>
        <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="handelForewring(record)"
           v-if="role == 1">预警</a>
        <!-- 删除 -->
        <a-popconfirm :content="$t('form.Delete')" :ok-text="$t('form.Confirm')"
                      :cancel-text="$t('form.Cancel')" @ok="handleDel(record.id)">
          <a class="a-link" href="javascript:;" style="margin-right: 1rem" v-if="role == 1">{{
              $t('form.Delete')
            }}</a>
        </a-popconfirm>
      </template>

    </a-table>



    <add  v-model:model-value="showAdd" status="1" :typeCurrent="typeCurrent" :record="record" @submit="intData()"></add>
    <Forewarning v-model:modelValue="visibleForewarning" :FormDataList="FormDataList" @submit="intData()"/>

    <a-modal v-model:visible="openExport" @ok="handleOk" @cancel="handleCancel" width="1000px">
      <template #title>
        批量导入
      </template>
      <div class="export-box">
        <div class="export-box-item">
          <div class="box-item-title">
            <div class="title-icon"></div>
            批量导入
          </div>
          <div class="box-item-content">
            <a-form :model="searchForm">
              <a-form-item field="label" :label="$t('flowPool.label')">
                <a-input v-model="searchForm.label" :placeholder="$t('lotCard.please') + $t('flowPool.label')"
                         allow-clear/>
              </a-form-item>
              <a-form-item field="label" :label="$t('flowPool.status')">
                <a-select v-model="value" :style="{width:'240px'}" :placeholder="$t('flowPool.flowPoolStatus')">
                  <a-option v-for="item of trafficList" :value="item.id" :label="item.label"/>
                </a-select>
              </a-form-item>
              <a-form-item field="label" :label="$t('flowPool.operator')">
                <a-select v-model="value" :style="{width:'240px'}" :placeholder="$t('flowPool.operatorName')">
                  <a-option v-for="item of sourceList" :value="item.id" :label="item.label"/>
                </a-select>
              </a-form-item>
              <a-form-item field="label" :label="$t('flowPool.start_time')">
                <a-date-picker style="width: 200px;" :placeholder="$t('flowPool.start_timeName')"/>
              </a-form-item>
            </a-form>
          </div>
        </div>
        <div class="export-box-item" style="margin-top:20px;">
          <div class="box-item-title">
            <div class="title-icon"></div>
            导入结果
          </div>
          <div class="box-item-content">
            <a-table :columns="columnsExport" :data="dataExport" :pagination="paginationCard" :scroll="{ x: 'auto' }"
                     @page-change="evChangePageCard">
              <template #operate="{ record }">
                <a-button @click="openContract(record)" type="text">下载</a-button>
              </template>
              <template #status="{ record }">
                <div class="export-status" v-if="record.status == 1">
                  <div class="status-icon" style="background: rgba(82, 196, 27, 1);"></div>
                  导入成功
                </div>
                <div class="export-status" v-if="record.status == 2">
                  <div class="status-icon" style="background: rgba(250, 173, 20, 1);"></div>
                  部分成功
                </div>
                <div class="export-status" v-if="record.status == 3">
                  <div class="status-icon" style="background: rgba(247, 66, 75, 1);"></div>
                  校验失败
                </div>
              </template>
            </a-table>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import {onMounted, ref, reactive, getCurrentInstance, nextTick, watch, toRefs} from "vue";
import {columns} from "./config";
import {Message, Notification} from '@arco-design/web-vue'
import {
  deleteTrafficPool,
  lotCatdList,
} from "@/api/path/flowPool.api"
import {useSystemStore} from "@/store/modules/systemStore"
import Forewarning from "./forewarning.vue";
import add from './add.vue'
const systemStore = useSystemStore()
const state = ref({
  role: systemStore.getRole,
  formRef: null,
  searchForm: {
    "label": "",
    "trafficPoolType": "1"
  },
  pagination: {
    total: 0,
    pageSize: 10,
    current: 1,
  },
  paginationCard: {
    total: 0,
    pageSize: 10,
    current: 1,
  },
  sourceList: [],
  trafficList: [],
  typeList: [],
  tariffIdList: [],
  openExport: false,
  dataExport: [],
  visibleForewarning:false,
  showAdd:false,
  typeCurrent:1,
  record:{},
  dataSource:[],
  FormDataList:{}
})
const {
  role,
  searchForm,
  pagination,
  paginationCard,
  typeCurrent,
  sourceList,
  trafficList,
  openExport,
  dataExport,
  visibleForewarning,
  showAdd,
  record,
  dataSource,
  FormDataList
} = toRefs(state.value)
const {proxy} = getCurrentInstance()
const columnsExport = [
  {title: '序号', dataIndex: 'index', align: 'center', render: ({rowIndex}) => rowIndex + 1},
  {
    title: '操作人',
    dataIndex: 'name',
  },
  {
    title: '导入时间',
    dataIndex: 'exportTime',
  },
  {
    title: '完成时间',
    dataIndex: 'successTime',
  },
  {
    title: '状态',
    slotName: 'status',
    align: 'center'
  },
  {title: '操作', slotName: 'operate', align: 'center'},
];
const intData = async () => {
  const param = {
    current: pagination.value.current,
    size: pagination.value.pageSize,
    ...searchForm.value,
    type: 1
  }
  const {data} = await lotCatdList(param)
  dataSource.value = (data.records || []).map((item, index) => {
    // const trafficPoolType = typeList.value.find(val => val.value == item.trafficPoolType)?.label
    const trafficPoolStatus = trafficList.value.find(val => val.value == item.status)?.label
    const sourceName = sourceList.value.find(val => val.value == item.source)?.label
    const Activated = 0 + '/' + item.iccids?.length
    const HaveBeenUsed = 0 + '/' + item.size + item.sizeType
    return {
      ...item,
      sourceName,// 运营商名称
      trafficPoolStatus,
      Activated: Activated,
      HaveBeenUsed: HaveBeenUsed,
    }
  })

  pagination.value.total = data.total
}
// 删除
const handleDel = async (id) => {
  const {code} = await deleteTrafficPool({id})
  if (code == 200) {
    Message.success({
      content: "删除成功！",
      duration: 2000,
    })
    intData()
  }
};

const evChangePage = (page) => {
  pagination.value.current = page
  intData()
}
// 卡信息
const evChangePageCard = (page) => {
  paginationCard.value.current = page
  intData()
}

const handleSearch = () => {
  intData()
}
const resetSearch = () => {
  searchForm.value.label = ''
  intData()
}

// 弹框
const dictShowModel = (type, data) => {
  typeCurrent.value = type
  record.value = data
  showAdd.value = true
}

const handelForewring = (item)=>{
  FormDataList.value = item
  visibleForewarning.value = true
}

onMounted(async () => {
  await intData()
})

</script>

<style scoped lang="less">
.m-r-10 {
  margin-right: 10px;
}

.head-title-right {
}

.search-section {
  margin-top: 20px;
  margin-bottom: 20px;
}

.container {
  .head-title {
    display: flex;
    justify-content: space-between;
  }

  .form-row {
    display: flex;

    .form-row-col {
      width: 25%;
      display: flex;
      align-items: center;

      .form-row-label {
        width: 120px;
        text-align: right;
      }
    }
  }
}

silent-expire-alarm {
  padding: 20px !important;
  // background: #fcf;
}

.search-section {
  margin-bottom: 20px;
}

.audit-btn {
  margin-bottom: 10px;
}


.echarts-box {
  // width: 100%;
  display: flex;
  justify-content: center;
  overflow: hidden;

  .chart-dom {
    width: 700px !important;
    height: 400px !important;
  }
}

.form-item-space-item {
  background-color: #f2f3f5;
  display: flex;
  align-items: center;
  font-size: 14px;
}


.export-box {
  .export-box-item {
    .box-item-title {
      display: flex;
      align-items: center;
      font-family: PingFang SC;
      font-size: 16px;
      font-weight: 600;
      line-height: 24px;
      color: rgba(0, 0, 0, 0.85);
      margin-bottom: 10px;

      .title-icon {
        margin-right: 10px;
        width: 4px;
        height: 16px;
        background: #1B5DF8;

      }
    }

    .box-item-content {
      .item-txt {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        .item-txt-title {
          width: 300px;
          text-align: right;
          margin-right: 10px;
        }

        .item-txt-text {
          font-family: PingFang SC;
          font-size: 14px;
          font-weight: 400;
          line-height: 22px;
          text-align: left;
          color: #1B5DF8;

        }
      }

      .export-status {
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        text-align: left;
        color: rgba(51, 51, 51, 1);
        display: flex;
        align-items: center;

        .status-icon {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          margin-right: 10px;
        }
      }
    }
  }
}
</style>