<template>
  <d2-container>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="工序单元">
        <el-select
           v-model="formInline.workingSubclass"
           filterable
           clearable
           placeholder="工序单元"
           @change="getCodesByWorkingSubclass(formInline.workingSubclass)">
          <el-option
            v-for="workingSubclass in workingSubclasses"
            :key="workingSubclass"
            :value="workingSubclass">
          </el-option>
        </el-select>
      </el-form-item>
       <el-form-item label="采集时间">
        <el-date-picker
          v-model="formInline.time"
          type="datetimerange"
          :clearable="false"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="timestamp"
          align="right">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="节点编码">
        <el-select
          v-model="formInline.code"
          filterable
          clearable
          placeholder="节点编码">
          <el-option
            v-for="code in codes"
            :key="code"
            :value="code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getData">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="exportExcel">导出EXCEL</el-button>
      </el-form-item>
    </el-form>

    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="值筛选">
        <el-select v-model="chosenType" @change="changeChosenType">
          <el-option v-for="filterType in filterTypes" :key="filterType.value" :label="filterType.label" :value="filterType.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-show="chosenType === 'bool'">
        <el-radio v-model="selected.bool" :label=true>TRUE</el-radio>
        <el-radio v-model="selected.bool" :label=false>FALSE</el-radio>
      </el-form-item>
      <el-form-item v-show="chosenType === 'number'">
        <div class="chosing">
          <el-select v-model="selected.numberCompareMethod" placeholder="请选择" style="width:85px;">
            <el-option v-for="numberCompareMethod in numberCompareMethods" :key="numberCompareMethod.value" :label="numberCompareMethod.label" :value="numberCompareMethod.value">
            </el-option>
          </el-select>
          <el-form-item v-if="selected.numberCompareMethod === 'between'">
            <el-input-number v-model="selected.range[0]" placeholder="最小值" style="width:100px;" :controls='false' />
            至
            <el-input-number v-model="selected.range[1]" placeholder="最大值" style="width:100px;" :controls='false' />
          </el-form-item>
          <el-input-number v-else v-model="selected.threshold" placeholder="阈值" style="width:100px;" :controls='false' />
        </div>
      </el-form-item>
      <el-form-item v-show="chosenType == 'string'">
        <div class="chosing">
          <el-select v-model="selected.stringCompareMethod" placeholder="请选择" style="width:85px;">
            <el-option v-for="stringCompareMethod in stringCompareMethods" :key="stringCompareMethod.value" :label="stringCompareMethod.label" :value="stringCompareMethod.value">
            </el-option>
          </el-select>
          <el-input v-model="selected.targetString" placeholder="请输入" style="width:100px;" />
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="reRender">筛选</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="restore"> 还原</el-button>
      </el-form-item>
    </el-form>

    <c-grid
      :filter="tableFilter"
      :key='key'
      :loading="loading"
      :data="data">
      <c-grid-column
        field="id"
        width="5%">
      序号
      </c-grid-column>
      <c-grid-column
        field="name"
        width="16.25%">
      节点名称
      </c-grid-column>
      <c-grid-column
        field="value"
        width="16.25%"
        sort="true">
      值
      </c-grid-column>
      <c-grid-column
        field="device_code"
        width="16.25%"
        sort="true">
      设备
      </c-grid-column>
      <c-grid-column
        field="batch"
        width="16.25%"
        sort="true">
      批次
      </c-grid-column>
      <c-grid-column
        field="capture_time"
        width="30%"
        sort="true">
      采集时间
      </c-grid-column>
    </c-grid>
  </d2-container>
</template>

<script>
class CustomFuctions {
  isEqual (value, other) {
    return value === other
  }

  notEqual (value, other) {
    return typeof value === typeof other && value !== other
  }

  contains (value, other) {
    return typeof value === 'string' && value.includes(other)
  }

  notContains (value, other) {
    return typeof value === 'string' && !value.includes(other)
  }

  greaterThan (value, other) {
    return typeof value === 'number' && value > other
  }

  greaterAndEqualThan (value, other) {
    return typeof value === 'number' && value >= other
  }

  smallerThan (value, other) {
    return typeof value === 'number' && value < other
  }

  smallerAndEqualThan (value, other) {
    return typeof value === 'number' && value <= other
  }

  between (value, other) {
    return typeof value === 'number' && value >= other[0] && value <= other[1]
  }
}
const callCustomFuctions = new CustomFuctions()

const now = new Date()

export default {
  data () {
    return {
      columns: [
        {
          label: '序号',
          prop: 'id'
        },
        {
          label: '节点名称',
          prop: 'name'
        },
        {
          label: '值',
          prop: 'value'
        },
        {
          label: '设备',
          prop: 'device_code'
        },
        {
          label: '批次',
          prop: 'batch'
        },
        {
          label: '采集时间',
          prop: 'capture_time'
        }
      ],
      formInline: {
        workingSubclass: '',
        time: [now - 3600 * 1000 * 24 * 7, +now],
        code: ''
      },
      loading: false,
      workingSubclasses: [],
      codes: [],
      data: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      excelData: [],
      chosenType: '',
      key: false,
      selected: {
        numberCompareMethod: '',
        threshold: 0,
        range: [],
        bool: false,
        targetString: '',
        stringCompareMethod: '',
        intervalNumber: {
          min: 0,
          max: 0
        }
      },
      filterTypes: [
        {
          value: 'string',
          label: 'string (字符串)'
        },
        {
          value: 'number',
          label: 'number (数字)'
        },
        {
          value: 'bool',
          label: 'bool (逻辑值)'
        }
      ],
      stringCompareMethods: [
        {
          value: 'isEqual',
          label: '等于'
        },
        {
          value: 'notEqual',
          label: '不等于'
        },
        {
          value: 'contains',
          label: '包含'
        },
        {
          value: 'notContains',
          label: '不包含'
        }
      ],
      numberCompareMethods: [
        {
          value: 'greaterThan',
          label: '>'
        },
        {
          value: 'greaterAndEqualThan',
          label: '≥'
        },
        {
          value: 'smallerThan',
          label: '<'
        },
        {
          value: 'smallerAndEqualThan',
          label: '≤'
        },
        {
          value: 'isEqual',
          label: '='
        },
        {
          value: 'notEqual',
          label: '≠'
        },
        {
          value: 'between',
          label: '介于'
        }
      ]
    }
  },
  methods: {
    async getworkingSubclasses () {
      try {
        this.workingSubclasses = await this.$api.QUERY_WORKING_SUBCLASSES()
      } catch (e) {
        console.log(e)
      }
    },
    async getCodesByWorkingSubclass (workingSubclass) {
      try {
        this.codes = await this.$api.QUERY_CODES(workingSubclass)
      } catch (e) {
        console.log(e)
      }
    },
    async getData () {
      this.loading = true
      this.excelData = []
      if (!this.formInline.workingSubclass) {
        this.$message.error('请选择工序单元')
      }
      try {
        this.data = await this.$api.QUERY_NODE_DATA({
          workingSubclass: this.formInline.workingSubclass,
          startTime: this.formInline.time[0],
          endTime: this.formInline.time[1],
          code: this.formInline.code
        })
      } catch (e) {
        console.log(e)
      }
      this.loading = false
    },
    async exportExcel () {
      const data = this.excelData.length === 0 ? this.data : this.excelData
      const columns = this.columns
      this.$export.excel({
        columns,
        data
      }).then(() => {
        this.$message.error('导出EXCEL成功！')
      })
    },
    changeChosenType (e) {
      this.chosenType = e
    },
    // 还原
    restore () {
      this.chosenType = ''
      this.selected = {
        numberCompareMethod: '',
        threshold: 0,
        range: [],
        bool: false,
        targetString: '',
        stringCompareMethod: '',
        intervalNumber: {
          min: 0,
          max: 0
        }
      }
      this.excelData = []
      this.key = !this.key // 取反重新渲染组件
    },
    // 筛选
    reRender () {
      if (this.selected.range[1] <= this.selected.range[0]) {
        this.$message.error('区间筛选所设定最大值不能小于或等于最小值')
        return false
      }
      if (this.selected.numberCompareMethod === '' && this.selected.stringCompareMethod === '') {
        this.$message.error('请先选择比较方法！')
        return false
      }

      this.excelData = []
      this.key = !this.key // 取反重新组件渲染
    },
    tableFilter (e) {
      switch (this.chosenType) {
        case 'string':
          if (callCustomFuctions[this.selected.stringCompareMethod](e.value, this.selected.targetString)) {
            this.excelData.push(e)
            return e
          }
          break
        case 'bool':
          if (e.value === this.selected.bool) {
            this.excelData.push(e)
            return e
          }
          break
        case 'number':
          if (callCustomFuctions[this.selected.numberCompareMethod](
            e.value,
            this.selected.numberCompareMethod === 'between'
              ? this.selected.range
              : this.selected.threshold
          )) {
            this.excelData.push(e)
            return e
          }
          break
        default:
          return e
      }
    }
  },
  mounted () {
    this.getworkingSubclasses()
  }
}
</script>
<style scoped>
.chosing {
  border-radius: 4px;
  border: 1px solid #DCDFE6;
}

:deep(.chosing) .el-input__inner:hover {
  border-color: #fff
}

:deep(.chosing) .el-input.is-active .el-input__inner,
.el-input__inner:focus {
  border-color: #fff
}

:deep(.chosing) .el-input__inner {
  border: 1px solid #fff;
}

:deep(.chosing) .el-select:hover .el-input__inner {
  border-color: #fff;
}

:deep(.chosing) .el-select .el-input.is-focus .el-input__inner {
  border-color: #fff;
}
</style>
