<script lang="ts" setup>
import zjfinish from './zjfinish.vue'
import zjwork from './zjwork.vue'

type ActivePanel = 'finish' | 'work'

const activePanel = ref<ActivePanel>('finish')

const panelOptions: Array<{ label: string; value: ActivePanel }> = [
  {
    label: '完成情况',
    value: 'finish'
  },
  {
    label: '工作量',
    value: 'work'
  }
]

const activeTitle = computed(() =>
  activePanel.value === 'finish' ? '钻井完成情况' : '钻井工作量情况'
)
</script>

<template>
  <div class="panel flex flex-col">
    <div class="panel-title flex items-center justify-between">
      <div class="kb-panel-title-text flex items-center">
        <div class="icon-decorator">
          <span></span>
          <span></span>
        </div>
        {{ activeTitle }}
      </div>
      <el-segmented v-model="activePanel" :options="panelOptions" size="small" class="zj-switch" />
    </div>
    <div class="flex-1 min-h-0">
      <zjfinish v-if="activePanel === 'finish'" embedded />
      <zjwork v-else embedded />
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url('@/styles/kb.scss');

.zj-switch {
  --el-segmented-item-selected-color: #03409b;
  --el-segmented-item-selected-bg-color: rgb(255 255 255 / 86%);
  --el-segmented-bg-color: rgb(31 91 184 / 10%);
  --el-segmented-item-hover-bg-color: rgb(255 255 255 / 56%);

  min-height: calc(26px * var(--kb-scale, 1));
  padding: calc(2px * var(--kb-scale, 1));
  border: 1px solid rgb(31 91 184 / 12%);
  transform: translateY(calc(-2px * var(--kb-scale, 1)));

  :deep(.el-segmented__item) {
    min-height: calc(22px * var(--kb-scale, 1));
    padding: 0 calc(8px * var(--kb-scale, 1));
    font-size: calc(13px * var(--kb-scale, 1));
    font-weight: 600;
    color: #29527f;
  }
}
</style>
