<template>
  <custom-modal v-model="visible" :width="1280" title="Interactive Analyse Tools" :footer="null">
    <div class="interactive-analysis-tools">
      <div class="interactive-analysis-tools-left">
        <div class="chart">
          <custom-chart :option="option" />
        </div>
        <div class="thumbnail"></div>
        <div class="table">
          <p class="title">
            <span @click="handleChangeMarkLine('prev')">&lt; </span>
            6 Peaks with Anthro.Nuclides
            <span @click="handleChangeMarkLine('next')">&gt;</span>
          </p>
          <custom-table
            :class="list.length ? 'has-data' : ''"
            :list="list"
            :columns="columns"
            :scroll="{ y: 288 }"
            :selectedRowKeys.sync="selectedKeys"
          >
          </custom-table>
          <div class="operators">
            <a-button type="primary" @click="nuclideReviewModalVisible = true">Nuclide Review Window</a-button>
            <a-button type="primary" @click="handleAddComment('Peak')">Add Peak Comment</a-button>
            <a-button type="primary" @click="handleAddComment('General')">Add General Comment</a-button>
          </div>
        </div>
      </div>
      <div class="interactive-analysis-tools-right">
        <title-over-boarder title="Peak">
          <div class="peak-box">
            <!-- 按钮组1 -->
            <template v-if="btnGroupType == 1">
              <div class="peak-box-item">
                <a-button type="primary">Insert</a-button>
              </div>
              <div class="peak-box-item">
                <a-button type="primary">Delete</a-button>
              </div>
              <div class="peak-box-item">
                <a-button type="primary">Fit</a-button>
              </div>

              <div class="peak-box-item symbol" :key="4">
                <a-button type="primary" @click="handleChangeMarkLine('prev')">&lt;</a-button>
                <a-button type="primary" @click="handleChangeMarkLine('next')">&gt;</a-button>
              </div>

              <div class="peak-box-item base-line">
                <a-button type="primary" @click="btnGroupType = 2">BaseLine</a-button>
              </div>
            </template>
            <!-- 按钮组2 -->
            <template v-if="btnGroupType == 2">
              <div class="peak-box-item">
                <a-button type="primary">(A)dd CP</a-button>
              </div>
              <div class="peak-box-item">
                <a-button type="primary">(R)emove CP</a-button>
              </div>
              <div class="peak-box-item">
                <a-button type="primary">(M)odify CP</a-button>
              </div>
              <div class="peak-box-item">
                <a-button type="primary">Edit (S)lope</a-button>
              </div>
              <div class="peak-box-item">
                <a-button type="primary">Undo</a-button>
              </div>
              <div class="peak-box-item">
                <a-button type="primary">Replot</a-button>
              </div>
              <div class="peak-box-item">
                <a-button type="primary" @click="btnGroupType = 1">Accept</a-button>
              </div>
              <div class="peak-box-item">
                <a-button type="primary" @click="btnGroupType = 1">Cancel</a-button>
              </div>
            </template>
          </div>
        </title-over-boarder>
        <div class="reset-btn-box">
          <a-button type="primary">Reset Chart</a-button>
        </div>
        <div class="identify-box">
          <title-over-boarder title="Nuclide Identify">
            <a-form-model class="tolerance">
              <a-form-model-item label="Tolerance">
                <a-input-number></a-input-number>
              </a-form-model-item>
            </a-form-model>
            <div class="identify-item">
              <div class="title">
                Possible Nuclide
              </div>
              <div class="content"></div>
            </div>
            <div class="identify-item">
              <div class="title">
                Nuclide Identified
              </div>
              <div class="content"></div>
            </div>
            <div class="identify-operators">
              <a-space>
                <a-input></a-input>
                <a-button type="primary">Add</a-button>
                <a-button type="primary" @click="handleDel">Del</a-button>
              </a-space>
            </div>
          </title-over-boarder>
        </div>
      </div>
    </div>

    <!-- Comment弹窗 开始 -->
    <comment-modal v-model="commentModalVisible" :type="commentType" />
    <!-- Comment弹窗 结束 -->
    <!-- Fit Peaks and Baseline弹窗 开始 -->
    <fit-peaks-and-base-line-modal v-model="fitPeaksAndBaselineModalVisible" />
    <!-- Fit Peaks and Baseline弹窗 结束 -->
    <!-- Nuclide Review 弹窗开始 -->
    <nuclide-review-modal v-model="nuclideReviewModalVisible" />
    <!-- Nuclide Review 弹窗结束 -->
  </custom-modal>
</template>

<script>
import CustomChart from '@/components/CustomChart/index.vue'
import TitleOverBoarder from '../../TitleOverBoarder.vue'
import CommentModal from './components/CommentModal.vue'
import FitPeaksAndBaseLineModal from './components/FitPeaksAndBaselineModal.vue'
import NuclideReviewModal from './components/NuclideReviewModal.vue'

const initialOption = {
  grid: {
    top: 20,
    bottom: 20,
    left: 100,
    right: 20
  },
  xAxis: {
    min: 1,
    max: 8192,
    interval: 1143,
    axisLabel: {
      color: '#fff'
    },
    splitLine: {
      show: false
    },
    axisTick: {
      show: false
    }
  },
  yAxis: {
    min: 1,
    max: 994914,
    axisLabel: {
      color: '#fff'
    },
    name: 'Counts',
    nameLocation: 'center',
    nameGap: 60,
    nameTextStyle: {
      fontSize: 16,
      color: '#5b9cba'
    },
    splitLine: {
      show: false
    },
    axisTick: {
      show: false
    }
  },
  series: [
    {
      type: 'line',
      data: [],
      itemStyle: {
        color: '#FCFE02'
      },
      markLine: {
        data: [
          {
            xAxis: 1000
          }
        ],
        symbol: 'none',
        lineStyle: {
          color: '#f00'
        },
        label: {
          show: false
        }
      }
    },
    {
      type: 'line',
      data: [],
      itemStyle: {
        color: '#F87E28'
      }
    },
    {
      type: 'line',
      data: [],
      itemStyle: {
        color: '#01F6FE'
      }
    }
  ]
}

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    width: 60
  },
  {
    title: 'Energy (keV)',
    dataIndex: 'energy',
    width: 120
  },
  {
    title: 'Centroid (C)',
    dataIndex: 'centroid',
    width: 120
  },
  {
    title: 'FWHM (keV)',
    dataIndex: 'fwhm',
    width: 120
  },
  {
    title: 'Area',
    dataIndex: 'area',
    width: 120
  },
  {
    title: 'Detectability',
    dataIndex: 'detectability',
    width: 120
  },
  {
    title: 'Cmnt',
    dataIndex: 'cmnt',
    width: 120
  },
  {
    title: 'Nuclides',
    dataIndex: 'nuclides',
    width: 120
  }
]

export default {
  props: {
    value: {
      type: Boolean
    }
  },
  components: {
    CustomChart,
    TitleOverBoarder,
    CommentModal,
    FitPeaksAndBaseLineModal,
    NuclideReviewModal
  },
  data() {
    this.columns = columns
    return {
      option: initialOption,
      list: [],
      commentModalVisible: false, // Comment 弹窗是否显示
      commentType: 'Peak',

      btnGroupType: 1, // 右侧 Peak 中的按钮组切换

      selectedKeys: [], // 选中的列表

      fitPeaksAndBaselineModalVisible: false, // Fit Peaks And Base Line 弹窗
      nuclideReviewModalVisible: false // Nuclide Review 弹窗
    }
  },
  methods: {
    // 切换图表上的红色竖线
    handleChangeMarkLine(direction) {
      if (direction == 'prev') {
        this.option.series[0].markLine.data[0].xAxis = 900
      } else if (direction == 'next') {
        this.option.series[0].markLine.data[0].xAxis = 1100
      }
      this.list = new Array(20).fill(0).map((_, index) => ({
        id: index.toString(),
        energy: 'energy',
        centroid: 'centroid',
        fwhm: 'fwhm',
        area: 'area',
        detectability: 'detectability',
        cmnt: 'cmnt',
        nuclides: 'nuclides'
      }))
    },
    // 显示comment弹窗
    handleAddComment(type) {
      this.commentType = type
      this.commentModalVisible = true
    },

    // 删除
    handleDel() {
      if (!this.selectedKeys.length) {
        this.$message.warn('Please Select At Least 1 Peak To Delete')
        return
      }

      this.$warning({
        title: 'Warning',
        content: 'Are you sure to delete this peak?',
        onOk: () => {
          console.log('%c [  ]-294', 'font-size:13px; background:pink; color:#bf2c9f;', this.selectedKeys)
        }
      })
    }
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.interactive-analysis-tools {
  display: flex;

  &-left {
    width: 75%;
    margin-right: 20px;

    .chart {
      height: 331px;
    }

    .thumbnail {
      height: 50px;
      margin-top: 10px;
      margin-bottom: 35px;
      background-color: #255369;
    }

    .table {
      .title {
        color: #0cebc9;
        font-size: 20px;
        text-align: center;
        margin-bottom: 10px;

        span {
          cursor: pointer;
          margin: 0 5px;
        }
      }

      .custom-table {
        &.has-data {
          ::v-deep {
            .ant-table-body {
              height: 288px;
              background-color: #06282a;
            }
          }
        }

        ::v-deep {
          .ant-table-placeholder {
            height: 289px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }

      .operators {
        display: flex;
        margin-top: 10px;
        gap: 10px;

        .ant-btn {
          flex: 1;
        }
      }
    }
  }

  &-right {
    .peak-box {
      height: 326px;

      &-item:not(:last-child) {
        margin-bottom: 10px;
      }

      .symbol {
        display: flex;

        .ant-btn {
          flex: 1;

          &:first-child {
            margin-right: 10px;
          }
        }
      }
    }

    .base-line {
      margin-top: 136px;
    }

    .reset-btn-box {
      margin-top: 20px;
      margin-bottom: 30px;
    }

    .identify-box {
      .tolerance {
        ::v-deep {
          .ant-form-item {
            margin-bottom: 10px;

            &-control-wrapper {
              flex: 1;
            }

            &-control {
              width: 100%;
            }
          }
        }

        .ant-input-number {
          width: 100%;
        }
      }

      .identify-item {
        .title {
          background-color: #497e9d;
          height: 30px;
          line-height: 30px;
          text-align: center;
          font-size: 16px;
        }

        .content {
          height: 80px;
          background-color: #275466;
          margin: 10px 0;
        }
      }

      .identify-operators {
        display: flex;

        .ant-btn {
          width: 50px;
          padding-left: 5px;
          padding-right: 5px;
        }
      }
    }
  }

  .ant-btn {
    width: 100%;
  }
}
</style>
