<template>
  <div class="chartsContainer">
    <div class="chartsContainer-title">明细情况</div>
    <div class="chartsContainer-list">
      <div class="chartsContainer-content" v-for="(item, index) in detailsInfo " :key="item.name">
        <div class="chartsContainer-content-top">
          <div class="chartsContainer-content-name">{{ item.name }}</div>
        </div>
        <div class="chartsContainer-content-describe">
          <CustomStyleSegmented v-model="item.stateActive" :options="item.stateOptions" />
          <CustomStyleSelect style="margin-left: auto; margin-right: 10px; width: 140px;" :options="item.options"
            v-model="item.active" @change="(row) => dataChange(row, index)"/>
          <span>开放数量：{{ item.onDutyChannelCount || 0 }}</span>
        </div>
        <div class="chartsContainer-content-content">
          <div style="height: 100%; overflow: hidden;" v-if="item.stateActive === item.stateOptions[0]">
            <el-table v-auto-scroll :data="item.data"
              border style="width: 100%" height="100%">
              <el-table-column prop="channelName" label="通道名称" width="90">
                <template #default=" scope ">
                  {{ scope.row.channelName.split( '/' ).at( -1 ) }}
                </template>
              </el-table-column>
              <el-table-column prop="onDutyTeamName" label="上岗班组" />
              <el-table-column prop="onDutyTime" label="上岗时间" width="130" />
              <el-table-column prop="onDutyCount" label="在岗人数" width="80" />
            </el-table>
          </div>
          <div style="height: 100%; overflow: hidden;" v-if="item.stateActive === item.stateOptions[1]">
            <el-table v-auto-scroll :data="item.waitList"
              border style="width: 100%" height="100%">
              <el-table-column prop="waitTeamName" label="待岗班组" width="100"/>
              <el-table-column prop="waitCount" label="待岗人数" width="80" />
              <el-table-column prop="checkOutTime" label="下通道时间" />
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import CustomStyleSelect from './CustomStyleSelect.vue'
import CustomStyleSegmented from './CustomStyleSegmented.vue'


const detailsInfo = defineModel({
  default: []
})

const dataChange = (row, index) => {
  detailsInfo.value[index].data = row.data
}

</script>

<style lang="scss" scoped>
.chartsContainer {
  width: 100%;
  height: 100%;
  position: relative;
  background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .chartsContainer-title {
    height: 42px;
    width: 100%;
    background: linear-gradient(to right, #004387 0%, #090B18 100%);
    border-left: 1px solid #1892CE;
    line-height: 42px;
    color: #fff;
    font-weight: 900;
    font-size: 20px;
    text-indent: 1em;
  }

  .chartsContainer-list {
    padding: 20px 15px 10px;
    box-sizing: border-box;
    display: flex;
    column-gap: 20px;
    flex: 1;
    overflow: hidden;
  }

  .chartsContainer-content {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    flex: 1;
    overflow: hidden;

    .chartsContainer-content-top {
      display: flex;
      align-items: center;
      color: #78DEF5;

      .chartsContainer-content-name {
        color: #fff;
        font-weight: bold;
        font-size: 16px;
        display: flex;
        align-items: center;

        &::before {
          content: '';
          display: inline-block;
          border-left: 9px solid #1CB6FF;
          border-top: 8px solid transparent;
          border-right: 9px solid transparent;
          border-bottom: 8px solid transparent;
        }
      }
    }

    .chartsContainer-content-describe {
      color: #78DEF5;
      font-size: 12px;
      font-weight: bold;
      display: flex;
      align-items: center;
    }

    .chartsContainer-content-content {
      flex: 1;
      overflow: hidden;
      --el-bg-color: transparent;
      --el-fill-color-blank: transparent;
      --el-border-color-lighter: #1887A6;
      --el-text-color-regular: #fff;
      --el-fill-color-light: #5e93a1;

      :deep(.el-table) {
        .el-table__header-wrapper th {
          background-color: #1CA7C8 !important;
          color: #fff;
        }

        .cell {
          font-weight: bold;
        }
      }
    }
  }
}
</style>