<template>
  <div class="express_wrapper">
    <Row :gutter="24" align="middle" justify="center" type="flex" v-show="showPanel">
      <Col span="12">
        <Row>
          <!-- <Input class="express_input" disabled placeholder="公式" v-model="expressionChina" /> -->
          <div class="expresShowStyle">{{expressionChina}}</div>
          <Button
            :disabled="showIndexSct"
            @click="handleShowSelect"
            class="btn-select-index"
          >{{ selectEle }}</Button>
          <Modal
            :mask-closable="false"
            :title="selectEle"
            @on-ok="handleSureSelect"
            class="modal_factor-select"
            ref="tett"
            v-model="selectIndex"
          >
            <Select
              :label-in-value="true"
              :loading="searchTagetLoading"
              :remote-method="handleSearchFactor"
              @on-change="handleSelectFactor"
              @on-clear="handleClearFactor"
              clearabl
              filterable
              placeholder="请输入"
              remote
              style="width: 200px;"
              v-if="selectWays === 'sctFactor'"
              v-model="valueFactorName"
            >
              <Option
                :key="item.uuid"
                :label="item.factorName"
                :value="item.uuid"
                v-for="item in factorTargets"
              >{{item.factorName}}</Option>
            </Select>
            <Select
              :label-in-value="true"
              :loading="searchTagetLoading"
              :remote-method="handleSearchFactor"
              @on-change="handleSelectFactor"
              @on-clear="handleClearFactor"
              clearabl
              filterable
              placeholder="请输入"
              remote
              style="width: 200px;"
              v-else-if="selectWays === 'sctIndex'"
              v-model="valueIndexName"
            >
              <Option
                :key="item.uuid"
                :label="item.name"
                :value="item.uuid"
                v-for="item in factorTargets"
              >{{item.name}}</Option>
            </Select>
            <Select
              :label-in-value="true"
              @on-change="expressByModel"
              clearable
              style="width: 200px;"
              v-else-if="selectWays === 'sctModelName'"
              v-model="modelName"
            >
              <Option
                :key="index"
                :label="item"
                :value="index + 1"
                v-for="(item, index) in modelNameArr"
              >{{ item }}</Option>
            </Select>
            <div slot="close">
              <Icon @click="handleCloseModal" type="ios-close" />
            </div>
          </Modal>
        </Row>
        <Button :key="index" @click="setSign" v-for="(sign, index) in signGroup">{{ sign.content }}</Button>
        <Button @click="handleBack" class="btn_opt_express">回退</Button>
        <Button @click="handleClear" class="btn_opt_express">清空</Button>
      </Col>
    </Row>
    <Row v-show="!showPanel">
      <Input
        class="express_input"
        disabled
        placeholder="公式"
        style="width: 100%"
        type="textarea"
        v-model="expressionChina"
      />
    </Row>
  </div>
</template>
<script>
import { MODEL_NAME } from '@conf/dict'
export default {
  name: 'SetExpression',
  props: {
    value: Array,
    text: String,
    subtext: String,
    apiOption: Object,
    showPanel: Boolean,
    showSelectPanel: Boolean,
    selectEle: String,
    selectWays: String,
    sctTypeCode: Number,
    isAddOption: Boolean,
    showIndexSct: Boolean,
    arrExpressIn: Array,
    arrExpressIdIn: Array
  },
  data () {
    return {
      selectTmpItem: null,
      factor: '',
      expression: '',
      expressionChina: '',
      showExpress: '',
      arrExpress: [],
      arrExpressId: [],
      valueIndexName: '',
      valueFactorName: '',
      indexName: [],
      factorTargets: [],
      expressId: '',
      selectIndex: false,
      searchTagetLoading: false,
      factoridArr: [],
      modelName: '',
      modelNameArr: MODEL_NAME,
      indexSearch: {},
      signGroup: [
        { content: '7' },
        { content: '8' },
        { content: '9' },
        { content: '(' },
        { content: ')' },
        { content: '4' },
        { content: '5' },
        { content: '6' },
        { content: '+' },
        { content: '-' },
        { content: '1' },
        { content: '2' },
        { content: '3' },
        { content: '*' },
        { content: '/' },
        { content: '0' },
        { content: '%' }
      ]
    }
  },
  mounted () {
    // this.arrExpress = this.arrExpressIn
    // this.arrExpressId = this.arrExpressIdIn
    // this.expressionChina = this.arrExpress.join('')
  },
  watch: {
    arrExpressIn (newVal) {
      this.arrExpress = newVal
      this.expressionChina = this.arrExpress.join('')
    },
    arrExpressIdIn (newVal) {
      this.arrExpressId = newVal
    }
  },
  methods: {
    // 点击设置公式
    setSign (e) {
      let signItem = e.target
      this.arrExpress.push(signItem.innerText.trim())
      this.arrExpressId.push(signItem.innerText.trim())
      this.expressionChina = this.arrExpress.join('')
      this.expressId = this.arrExpressId.join(',')
      this.expression = this.arrExpress.join(',')
      this.$emit(
        'getExpress',
        this.expressId,
        this.expression,
        this.arrExpressId
      )
    },
    //  回退
    handleBack () {
      if (this.arrExpress.length > 0) {
        this.arrExpress.pop()
        let delItem = this.arrExpressId.pop()
        if (delItem.indexOf('#') > -1) {
          this.factoridArr.pop()
          this.$emit('getFactorids', this.factoridArr.join(','))
        }
        this.expression = this.arrExpress.join(',')
        this.expressId = this.arrExpressId.join(',')
        this.expressionChina = this.arrExpress.join('')
        this.$emit(
          'getExpress',
          this.expressId,
          this.expression,
          this.arrExpressId
        )
      }
    },
    // 清空
    handleClear () {
      this.arrExpress = []
      this.arrExpressId = []
      this.factoridArr = []
      this.expressId = ''
      this.expression = this.arrExpress.join(',')
      this.expressionChina = this.arrExpress.join('')
      this.$emit('getFactorids', this.factoridArr.join(''))
      this.$emit(
        'getExpress',
        this.expressId,
        this.expression,
        this.arrExpressId
      )
    },
    // 打开选择因子项
    handleShowSelect () {
      this.selectIndex = true
      this.factorTargets = []
      if (this.selectWays === 'sctFactor') {
        this.valueFactorName = ''
      } else if (this.selectWays === 'sctIndex') {
        this.valueIndexName = ''
      } else if (this.selectWays === 'sctModelName') {
        this.modelName = ''
      }
    },
    // 模糊搜索
    handleSearchFactor (value) {
      if (value !== '') {
        const searchName = value.trim()
        if (this.selectWays === 'sctFactor') {
          this.searchTagetLoading = true
          this.factorTargets = []
          this.apiOption.getlist({ searchName }).then(({ data }) => {
            this.searchTagetLoading = false
            if (data.status === 'success') {
              this.factorTargets = data.data.filter(
                (item, index) => item.factorName.indexOf(searchName) > -1
              )
            }
          })
        } else if (this.selectWays === 'sctIndex') {
          this.searchTagetLoading = true
          this.indexSearch.name = searchName
          this.indexSearch.typecode = this.sctTypeCode
          this.indexSearch.iscalculate = 1
          this.apiOption
            .getlistByName({ ...this.indexSearch })
            .then(({ data }) => {
              this.searchTagetLoading = false
              if (data.status === 'success') {
                if (data.data.length > 0) {
                  this.factorTargets = data.data.filter(
                    (item, index) => item.searchStr.indexOf(searchName) > -1
                  )
                } else {
                  this.factorTargets = []
                }
              }
            })
        }
      } else {
        this.factorTargets = []
      }
    },
    // 选择因子项
    handleSelectFactor (option) {
      if (option) {
        this.selectTmpItem = option
        // this.factoridArr.push(option.value)
        // this.arrExpress.push(option.label)
        // this.arrExpressId.push('#' + option.value + '#')
      }
    },
    // 选择模型名称
    expressByModel (option) {
      if (option) {
        this.selectTmpItem = option
      }
      // this.factoridArr.push(option.value)
      // this.arrExpress.push(option.label)
      // this.arrExpressId.push('#' + option.value + '#')
    },
    // 清空因子选项
    handleClearFactor () {
      this.factoridArr.pop()
      this.arrExpress.pop()
      this.arrExpressId.pop()
    },
    // 确定-选择因子
    handleSureSelect () {
      if (this.selectTmpItem) {
        if (this.selectTmpItem.value) {
          if (this.isAddOption) {
            this.factoridArr = []
          }
          this.factoridArr.push(this.selectTmpItem.value)
          this.arrExpressId.push('#' + this.selectTmpItem.value + '#')
        }
        if (this.selectTmpItem.label) {
          this.arrExpress.push(this.selectTmpItem.label)
        }
        this.selectTmpItem = null
      }

      this.expressId = this.arrExpressId.join(',')
      this.expression = this.arrExpress.join(',')
      this.expressionChina = this.arrExpress.join('')
      this.$emit('getFactorids', this.factoridArr.join(','))
      this.$emit(
        'getExpress',
        this.expressId,
        this.expression,
        this.arrExpressId
      )
      if (this.selectWays === 'sctFactor') {
        this.valueFactorName = ' '
      } else if (this.selectWays === 'sctIndex') {
        this.valueIndexName = ' '
      } else if (this.selectWays === 'sctModelName') {
        this.modelName = ' '
      }
    },
    // 关闭
    handleCloseModal () {
      // this.arrExpress = []
      // this.arrExpressId = []
      // this.factoridArr = []
      if (this.selectWays === 'sctFactor') {
        this.valueFactorName = ' '
      } else if (this.selectWays === 'sctIndex') {
        this.valueIndexName = ' '
      } else if (this.selectWays === 'sctModelName') {
        this.modelName = ' '
      }
    }
  }
}
</script>
<style lang="less">
.express_wrapper {
  .ivu-btn {
    margin: 4px 0.5% 0;
    width: 19%;
  }
  .btn_opt_express {
    width: 29%;
  }
  .express_input {
    .ivu-input-disabled {
      height: 40px;
      background-color: #fdfafa;
      color: #000;
      font-size: 14px;
    }
  }
  .btn-select-index {
    width: 100%;
  }
}
.modal_factor-select .ivu-modal-footer .ivu-btn:first-child {
  display: none;
}
.expresShowStyle {
  width: 100%;
  max-height: 40px;
  min-height: 30px;
  border-radius: 4px;
  border: 1px solid #dcdee2;
  padding: 3px;
}
</style>
