<template>
  <div class="form-cont">
    <el-form
      ref="diaForm"
      label-position="left"
      label-width="80px"
      :model="form"
      :rules="formRules"
    >
      <el-form-item label="时间长度" prop="CalculateValue">
        <el-input
          v-model="form.CalculateValue"
          style="width: 140px"
          :step="1"
          type="number"
          @change="(val) => {form.CalculateValue = Number(val);changeParams()}"
        />
        <el-select
          v-model="form.CalculateUnit"
          placeholder="请选择"
          style="width: 100px"
          @change="changeParams"
        >
          <el-option
            v-for="item in unitOpt"
            :key="item.val"
            :label="item.label"
            :value="item.val"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="X轴坐标" prop="TagX">
        <el-select
          v-model="form.TagX"
          style="width: 240px"
          placeholder="请选择"
          @change="changeSeries"
        >
          <el-option
            v-for="item in tagList"
            :key="item.ChartTagId"
            :label="item.ChartTagName"
            :value="item.ChartTagId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="Y轴坐标" prop="TagY">
        <el-select
          v-model="form.TagY"
          placeholder="请选择"
          style="width: 240px"
          @change="changeSeries"
        >
          <el-option
            v-for="item in tagList"
            :key="item.ChartTagId"
            :label="item.ChartTagName"
            :value="item.ChartTagId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="图表名称" prop="ChartName">
        <el-input
          v-model="form.ChartName"
          style="width: 240px"
          placeholder="请输入图表名称"
          @change="changeParams"
        />
      </el-form-item>
    </el-form>

    <div class="date-section">
      <label class="el-form-item__label">选择日期</label>
      <ul>
        <li class="date-li" v-for="(item,index) in form.DateConfigList" :key="index">
          <el-select
            v-model="item.DateType"
            style="width: 150px"
            placeholder="请选择"
            @change="changeParams"
          >
            <el-option
              v-for="item in dateOptions"
              :key="item.val"
              :label="item.label"
              :value="item.val"
            />
          </el-select>

          <el-input
            v-model="item.Num"
            v-if="item.DateType===2"
            style="width: 140px"
            :step="1"
            type="number"
            @change="(val) => {item.Num = Number(val);changeParams()}"
          />

          <el-button type="text" v-if="index===0" @click="addDateHandle">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 -2 16 16" fill="none">
              <path d="M5.23966 8.48046H7.51966V10.7605C7.51966 10.8265 7.57366 10.8805 7.63966 10.8805H8.35966C8.42566 10.8805 8.47966 10.8265 8.47966 10.7605V8.48046H10.7597C10.8257 8.48046 10.8797 8.42646 10.8797 8.36046V7.64046C10.8797 7.57446 10.8257 7.52046 10.7597 7.52046H8.47966V5.24046C8.47966 5.17446 8.42566 5.12046 8.35966 5.12046H7.63966C7.57366 5.12046 7.51966 5.17446 7.51966 5.24046V7.52046H5.23966C5.17366 7.52046 5.11966 7.57446 5.11966 7.64046V8.36046C5.11966 8.42646 5.17366 8.48046 5.23966 8.48046Z" fill="#0052D9"/>
              <path d="M13.52 2H2.48C2.2145 2 2 2.2145 2 2.48V13.52C2 13.7855 2.2145 14 2.48 14H13.52C13.7855 14 14 13.7855 14 13.52V2.48C14 2.2145 13.7855 2 13.52 2ZM12.92 12.92H3.08V3.08H12.92V12.92Z" fill="#0052D9"/>
            </svg>添加日期
          </el-button>

          <i 
            v-else 
            class="el-icon-delete" 
            style="cursor:pointer;color:#f00;"
            @click="() => {form.DateConfigList.splice(index,1);changeParams()}"
          />

        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    tagList: {
      type: Array,
    },
    chartInfo: {
      type: Object
    }
  },
  data() {
    return {
      form: {
        ChartName:'',
        Source: 10,
        CalculateValue: 6,
        CalculateUnit: '月',
        TagX: '',
        TagY: '',
        DateConfigList: [
          { DateType: 1,Num: 0 },
        ],
      },
      unitOpt: [
        { label: "年", val: "年" },
        { label: "季", val: "季" },
        { label: "月", val: "月" },
        { label: "周", val: "周" },
        { label: "天", val: "天" },
      ],

      dateOptions: [
        { label: '最新日期',val: 1 },
        { label: 'N天前',val: 2 },
      ]
    };
  },
  methods: {
    addDateHandle() {
      if(this.form.DateConfigList.length === 5) return this.$message.warning('日期数量已达上限')

      this.form.DateConfigList.push({
        DateType: 1,Num: 1
      })
      
      this.changeParams()
    },

    initData(data) {
      const { ChartName,CalculateValue,CalculateUnit,TagX,TagY,DateConfigList } = data;
      this.form = {
        ChartName,
        CalculateValue,
        CalculateUnit,
        TagX,
        TagY,
        DateConfigList
      }
    },

    changeSeries() {
      let xName = this.tagList.find(_ => _.ChartTagId===Number(this.form.TagX))?this.tagList.find(_ => _.ChartTagId===Number(this.form.TagX)).ChartTagName:'';
      let yName = this.tagList.find(_ => _.ChartTagId===Number(this.form.TagY))?this.tagList.find(_ => _.ChartTagId===Number(this.form.TagY)).ChartTagName:'';

      this.form.ChartName = (xName&&yName) ? `${xName}百分位和${yName}百分位` : '';
      this.changeParams()
    },

    changeParams() {
      this.$emit('getData')
    },
  },
};
</script>
<style scoped lang="scss">
.form-cont {
  width: 100%;
  display: flex;
  gap: 50px;

  .date-section {
    display: flex;
    .date-li {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
    }
  }
}
</style>
