<template>
  <el-dialog
    top="10vh"
    width="80%"
    title="设置列"
    append-to-body
    :visible="dialogVisible"
    :before-close="beforeClose"
    :close-on-click-modal="false"
  >
    <el-row v-loading="loading" style="height: 600px">
      <el-col :span="8" style="height: 100%">
        <el-card class="box-card" shadow="never" style="height: 100%;">
          <div slot="header">
            <span>获取字段信息</span>
          </div>
          <div>
            <el-table
              :data="table"
              max-height="440px"
              @row-dblclick="rowDBClick"
              @selection-change="handleSelectionChange"
              ref="multipleTable"
              class="table-field"
            >
              <el-table-column
                align="center"
                type="selection"
              ></el-table-column>
              <el-table-column label="字段" :prop="isCustomQuery?'field':'fieldName'"></el-table-column>
              <el-table-column label="注解" prop="comment"></el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="1" style="height: 100%">
        <div class="right-arrow">
          <el-button
            circle
            type="primary"
            icon="el-icon-right"
            @click="addToField"
          />
        </div>
      </el-col>

      <el-col :span="15">
        <el-card class="box-card" shadow="never" style="height: 100%">
          <div slot="header">
            <span>字段设置</span>
          </div>
          <div>
            <el-tabs type="card" v-model="activeName">
              <el-tab-pane label="Y轴取值字段" name="yAxis">
                <el-table :data="yAxisField" max-height="440px">
                  <el-table-column label="字段名" prop="field">
                  </el-table-column>
                  <el-table-column label="显示名">
                    <template #default="{ row }">
                      <el-input
                        v-model="row.comment"
                        clearable
                        maxlength="50"
                        show-word-limit
                      />
                    </template>
                  </el-table-column>
                  <el-table-column label="回归曲线" v-if="chartStyle === 6">
                    <template slot="header">
                      回归曲线
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="注：在数据展示中选择列数据展示与数值轴时才生效"
                        placement="top-start"
                      >
                        <i class="el-icon-warning"></i>
                      </el-tooltip>
                    </template>
                    <template #default="{ row }">
                      <ht-select
                        style="width:150px"
                        v-model="row.regression"
                        :options="[
                          {key: 'none', value: '无'},
                          {key: 'linear', value: '线性回归'},
                          {key: 'exponential', value: '指数回归'},
                          {key: 'logarithmic', value: '对数回归'}
                        ]"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="类型"
                    v-if="chartStyle === 1 || chartStyle === 2"
                  >
                    <template #default="{ row }">
                      <ht-select
                        style="width:150px"
                        v-model="row.yAxis"
                        :options="[
                          {label: '第一Y轴', value: 1},
                          {label: '第二Y轴', value: 2}
                        ]"
                        :validate="{required: true}"
                        :props="{key: 'value', value: 'label'}"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="轴"
                    v-if="chartStyle === 1 || chartStyle === 2"
                  >
                    <template #default="{ row }">
                      <ht-select
                        style="width:150px"
                        v-model="row.type"
                        :options="[
                          {label: '折线图', value: 'line'},
                          {label: '柱状图', value: 'bar'}
                        ]"
                        :validate="{required: true}"
                        :props="{key: 'value', value: 'label'}"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column label="管理" width="100">
                    <template #default="{ $index }">
                      <el-button
                        icon="el-icon-close"
                        type="primary"
                        @click="deleteRow($index, yAxisField)"
                      />
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="X轴取值字段" name="xAxis">
                <el-table :data="xAxisField" max-height="440px">
                  <el-table-column label="字段名" prop="field">
                  </el-table-column>
                  <el-table-column label="显示名">
                    <template #default="{ row }">
                      <el-input
                        v-model="row.comment"
                        clearable
                        maxlength="50"
                        show-word-limit
                      />
                    </template>
                  </el-table-column>
                  <el-table-column label="管理" width="100">
                    <template #default="{ $index }">
                      <el-button
                        icon="el-icon-close"
                        type="primary"
                        @click="deleteRow($index, xAxisField)"
                      />
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="条件字段" name="condition">
                <span slot="label">
                  <el-tooltip
                    content="只对设置为x轴和y轴的取值字段有效"
                    placement="top"
                  >
                    <i class="el-icon-info"></i>
                  </el-tooltip>
                  条件字段
                </span>
                <el-table :data="conditionField" max-height="440px">
                    <el-table-column prop="field" label="字段名" width="150">
                  </el-table-column>
                  <el-table-column label="显示名" width="150">
                    <template #default="{ row }">
                      <el-input
                        clearable
                        maxlength="50"
                        show-word-limit
                        v-model="row.comment"
                        :disabled="isCustomQuery"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column label="条件">
                    <template #default="{ row }">
                      <ht-select
                        v-model="row.condition"
                        :options="numberOptionList"
                        :props="{key: 'key', value: 'value'}"
                        v-if="['int', 'number'].includes(row.dbType)"
                        style="width: 100%"
                        :disabled="isCustomQuery"
                      />
                      <ht-select
                        v-model="row.condition"
                        :options="stringOptionList"
                        :props="{key: 'key', value: 'value'}"
                        v-if="['clob', 'varchar'].includes(row.dbType)"
                        style="width: 100%"
                        :disabled="isCustomQuery"
                      />
                      <ht-select
                        v-model="row.condition"
                        :options="dateOptionList"
                        :props="{key: 'key', value: 'value'}"
                        v-if="row.dbType === 'date'"
                        style="width: 100%"
                        :disabled="isCustomQuery"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column label="值来源">
                    <template #default="{ row }">
                      <ht-select
                        v-model="row.defaultType"
                        :options="valueSourceList"
                        :props="{key: 'key', value: 'value'}"
                        style="width: 100px"
                        :disabled="isCustomQuery"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column label="默认值" width="200">
                    <template #default="{ row }">
                      <span v-if="row.defaultType === '1'">文本框输入</span>
                      <ht-input
                        v-model="row.defaultValue"
                        :maxlength="50"
                        :showWordLimit="true"
                        :disabled="isCustomQuery"
                        v-if="
                          (row.defaultType == '2' && row.dbType != 'date') ||
                            row.defaultType === '3'
                        "
                      />
                      <ht-date
                        v-model="row.defaultValue"
                        :disabled="isCustomQuery"
                        format="yyyy-MM-dd"
                        v-if="row.defaultType === '2' && row.dbType === 'date'"
                      />
                      <span
                        v-if="
                          row.defaultType === '2' &&
                            row.dbType === 'date' &&
                            row.condition === 'BETWEEN'
                        "
                      >
                        至
                        <ht-date v-model="row.endDate" :disabled="isCustomQuery" format="yyyy-MM-dd" />
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="管理" width="100" v-if="!isCustomQuery">
                    <template #default="{ $index }">
                      <el-button
                        icon="el-icon-close"
                        type="primary"
                        @click="deleteRow($index, conditionField)"
                      />
                    </template>
                  </el-table-column> 
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="排序字段" name="sort">
                <el-table :data="sortField" max-height="440px">
                  <el-table-column prop="field" label="字段" />
                  <el-table-column label="排序类型">
                    <template #default="{ row }">
                      <ht-select
                        v-model="row.sortType"
                        :options="sortOptionList"
                        :disabled="isCustomQuery"
                        :props="{key: 'key', value: 'value'}"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column label="管理" width="100" v-if="!isCustomQuery">
                    <template #default="{ $index }">
                      <el-button
                        icon="el-icon-close"
                        type="primary"
                        @click="deleteRow($index, sortField)"
                      />
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">{{
        $t('eip.common.cancel')
      }}</el-button>
      <el-button type="primary" @click="save">{{
        $t('eip.common.save')
      }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import form from '@/api/form.js'
import utils from '@/hotent-ui-util.js'
export default {
  props: {
    param: Object,
    yAxis: Array,
    xAxis: Array,
    sort: Array,
    condition: Array,
    chartStyle: Number,
    isCustomQuery:{
      type: Boolean,
      default: false
    },
  },
  mounted() {
    window.temp1 = this
  },
  data() {
    return {
      dialogVisible: false,
      table: [],
      selections: [],
      xAxisField: [],
      yAxisField: [],
      conditionField: [],
      sortField: [],
      loading: false,
      activeName: 'yAxis',
      numberOptionList: [
        {
          key: 'EQ',
          value: '等于'
        },
        {
          key: 'GE',
          value: '大于等于'
        },
        {
          key: 'LE',
          value: '小于等于'
        }
      ],
      stringOptionList: [
        {
          key: 'LK',
          value: 'like'
        },
        {
          key: 'EQ',
          value: '等于'
        },
        {
          key: 'IN',
          value: 'in'
        }
      ],
      dateOptionList: [
        {
          key: 'EQ',
          value: '等于'
        },
        {
          key: 'BETWEEN',
          value: 'between'
        },
        {
          key: 'GE',
          value: '大于等于'
        },
        {
          key: 'LE',
          value: '小于等于'
        }
      ],
      valueSourceList: [
        {
          key: '2',
          value: '固定值'
        },
        {
          key: '1',
          value: '动态传入'
        }
      ],
      sortOptionList: [
        {
          key: 'asc',
          value: '升序'
        },
        {
          key: 'desc',
          value: '降序'
        }
      ]
    }
  },
  methods: {
    async initData(customQueryData) {
      if(this.isCustomQuery){
        this.table =JSON.parse(customQueryData.resultfield)
        this.conditionField =JSON.parse(customQueryData.conditionfield)
        this.sortField = JSON.parse(customQueryData.sortfield)
      }else{
        let result = await form.getTable(this.param)
        this.table = result.table.columnList
        this.conditionField = [...this.condition]
        this.sortField = [...this.sort]   
      }
      this.yAxisField = [...this.yAxis]
      this.xAxisField = [...this.xAxis]
        
    },
    rowDBClick(row) {
      this.selections = []
      this.selections.push(row)
      this.addToField()
    },
    handleSelectionChange(val) {
      this.selections = val
    },
    addToField() {
      if (this.activeName === 'yAxis') {
        this.addToYAxisField()
      } else if (this.activeName === 'xAxis') {
        this.addToXAxisField()
      } else if (this.activeName === 'condition') {
        if(this.isCustomQuery){
          this.$message.warning('关联查询不允许编辑条件字段!')
          return
        }else{
          this.addToConditionField()
        }
      } else if (this.activeName === 'sort') {
        if(this.isCustomQuery){
          this.$message.warning('关联查询不允许编辑排序字段!')
          return
        }else{
          this.addToSortField()
        }   
      }
      this.$refs.multipleTable.clearSelection()
    },
    addToYAxisField() {
      for (let i = 0; i < this.selections.length; i++) {
        let item = {
          comment: this.selections[i].comment,
          dbType: this.selections[i].columnType,
          field:this.isCustomQuery?this.selections[i].field:this.selections[i].fieldName,
          nameKey: '0'
        }
        if (this.chartStyle === 1) {
          item.type = 'line'
          item.yAxis = 1
        }
        var isXField = false
        if (
          this.xAxisField.length > 0 &&
          JSON.stringify(item.field) == JSON.stringify(this.xAxisField[0].field)
        ) {
          isXField = true
          this.$message.error('该字段已经被设为x轴字段')
        }
        if (!isXField) {
          this.yAxisField.push(item)
        }
      }
      this.yAxisField = this.yAxisField.unique('field')
    },
    addToXAxisField() {
      let item = [
        {
          comment: this.selections[0].comment,
          dbType: this.selections[0].columnType,
          field: this.isCustomQuery?this.selections[0].field:this.selections[0].fieldName,
          nameKey: '0'
        }
      ]
      var isYField = false
      for (var i = 0; i < this.yAxisField.length; i++) {
        if (
          this.yAxisField.length > 0 &&
          JSON.stringify(item[0].field) ==
            JSON.stringify(this.yAxisField[i].field)
        ) {
          isYField = true
          this.$message.error('该字段已经被设为y轴字段')
        }
      }
      if (!isYField) {
        this.xAxisField = [...item]
      }
    },
    addToConditionField() {
      for (let i = 0; i < this.selections.length; i++) {
        let item = {
          comment: this.selections[i].comment,
          dbType: this.selections[i].columnType,
          field: this.isCustomQuery?this.selections[i].field:this.selections[i].fieldName,
          condition: 'LK',
          defaultType: '1',
          defaultValue: ''
        }
        this.conditionField.push(item)
      }
      this.conditionField = this.conditionField.unique('field')
    },
    addToSortField() {
      for (let i = 0; i < this.selections.length; i++) {
        let item = {
          field: this.isCustomQuery?this.selections[i].field:this.selections[i].fieldName,
          sortType: 'asc'
        }
        this.sortField.push(item)
      }
      this.sortField = this.sortField.unique('field')
    },
    deleteRow(index, rows) {
      rows.splice(index, 1)
    },
    save() {
      this.$emit('save', {
        yAxisField: this.yAxisField,
        xAxisField: this.xAxisField,
        conditionField: this.conditionField,
        sortField: this.sortField
      })
      this.dialogVisible = false
    },
    beforeClose() {
      this.dialogVisible = false
    },
    handleOpen(customQueryData) {
      this.dialogVisible = true
      this.loading = true
      this.$nextTick(() => {
        this.initData(customQueryData)
      })
      this.loading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.right-arrow {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/deep/ .table-field {
  .el-table__row {
    cursor: pointer;
  }
}
/deep/ .el-dialog__body {
  padding: 10px 20px;
}
</style>