<template>
  <div v-loading="DaysNeedleloading" class="mainBox">
    <div class="headerBox">
      <el-row type="flex" align="middle">
        <el-col :span="7">
          <div class="targetBox">
            <span>{{$t(`bian.goal`)}}：</span>
            <el-select
              v-model="target"
              filterable
              size="small"
              :placeholder="$t(`bian.please`)"
              @change="handelTarget"
            >
              <el-option
                v-for="item in targetList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="targetBox">
            <span>{{$t(`bian.cycle`)}}：</span>
            <el-select
              v-model="cycle"
              filterable
              size="small"
              :placeholder="$t(`bian.please`)"
              @change="handelCycle"
            >
              <el-option
                v-for="item in cycleList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="targetBox">
            <span>{{$t(`bian.lines`)}}：</span>
            <el-select
              v-model="KLine"
              filterable
              size="small"
              :placeholder="$t(`bian.kLineCycle`)"
              @change="handelKLine"
            >
              <el-option
                v-for="item in KLineList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="3">
          <button @click="handelSubmit">{{$t(`bian.scanning`)}}</button>
        </el-col>
      </el-row>
    </div>
    <hr />
    <!-- -----------------表格---------------- -->
    <div id="tebelBox" ref="tabelBox">
      <el-row type="flex" justify="center">
        <el-col :span="24">
          <el-table
            :data="tabelData"
            border
            style="font-size: 12px"
            height="650"
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }"
            :default-sort="{prop: 'date', order: 'ascending'}"
          >
            <el-table-column
              type="index"
              :label="$t(`bian.serialNumber`)"
              :key="Math.random()"
            ></el-table-column>
            <!-- 处理时间格式 -->
            <el-table-column prop="date" :label="$t(`bian.date`)"  sortable >
              <template slot-scope="scope">
                {{ formatTime(scope.row.date) }}
              </template>
            </el-table-column>
            <el-table-column prop="symbol" :label="$t(`bian.trading`)"  :show-overflow-tooltip="true" > </el-table-column>
            <el-table-column prop="level" :label="$t(`bian.level`)"  :show-overflow-tooltip="true" > </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      target: "天针",
      targetList: [
        {
          value: "天针",
          label: "天针",
        },
        { value: "地针", label: "地针" },
      ],
      cycle: "",
      cycleList: [
        {
          value: "1h",
          label: "1h",
        },
        {
          value: "4h",
          label: "4h",
        },
        {
          value: "1d",
          label: "1d",
        },
      ],
      KLine: "",
      KLineList: [],
      KLineList1H: [
        {
          value: "25",
          label: "25",
        },
        {
          value: "50",
          label: "50",
        },
        {
          value: "75",
          label: "75",
        },
        {
          value: "100",
          label: "100",
        },
        {
          value: "125",
          label: "125",
        },
      ],
      KLineList4H: [
        {
          value: "50",
          label: "50",
        },
        {
          value: "90",
          label: "90",
        },
        {
          value: "180",
          label: "180",
        },
      ],
      KLineList1D: [
        {
          value: "7",
          label: "7",
        },
        {
          value: "15",
          label: "15",
        },
        {
          value: "30",
          label: "30",
        },
        {
          value: "60",
          label: "60",
        },
        {
          value: "90",
          label: "90",
        },
      ],
      tabelData: [],
      DaysNeedleloading: false,
    };
  },
  mounted() {},
  methods: {
    async fetchDaysNeedle(interval, limit) {
      this.DaysNeedleloading = true;
      const { data } = await this.$API.getDaysNeedle(interval, limit);

      this.tabelData = data.data.data;
      this.DaysNeedleloading = false;
    },
    //选择目标
    handelTarget() {},
    //选择K线周期
    handelCycle() {
      switch (this.cycle) {
        case "1h":
          this.KLineList = this.KLineList1H;
          break;
        case "4h":
          this.KLineList = this.KLineList4H;
          break;
        case "1d":
          this.KLineList = this.KLineList1D;
          break;
        default:
          break;
      }
    },
    //选择K线根数
    handelKLine() {},
    //点击开始扫描
    handelSubmit() {
      switch (this.target) {
        case "天针":
          this.fetchDaysNeedle(this.cycle, this.KLine);

          break;
        case "地针":
          this.$message({
            message: "地针待开发",
            type: "warning",
          });
          return;

          break;

        default:
          break;
      }
    },

    formatTime(value) {    
      let year;
      let mouth;
      if (!value) {
        year = "";
        mouth = "";
      } else {
        year = value.split("T")[0];
        mouth = value.split("T")[1].split(".")[0];
      }

      return `${year} ${mouth}`;
    },
  },
};
</script>

<style  scoped>
.mainBox{
  /* background: gold; */
  margin-top: 10px;
}
#tebelBox {
  padding: 0 !important;
  margin: 0 !important;
}
.headerBox {
  padding-left: 50px;
}
span {
  display: inline-block;
  text-align: center;
  /* border: 1px solid red; */
  line-height: 25px;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.8);
}
button {
  background: #fff;
  width: 100px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  height: 30px;
  border-radius: 4px;
  font-size: 14px;
}
button:hover {
  background: rgba(255, 231, 147, 0.4);

}
</style>