<template>
  <div class="insertLabel">
    <div class="container">
      <div class="top">
        <span>新增指标</span>
        <img :src="imgUrl" alt @click="closeX" />
      </div>
      <!-- 行列转换 -->
      <div class="rowCol">
        <input type="radio" name="rowCols" value="hang" v-model="radioValue" />行
        <input type="radio" name="rowCols" value="lie" v-model="radioValue" />列
      </div>
      <!-- 运算框 -->
      <div class="computkuang">
        <div class="left">
          <input type="text" placeholder="请输入新增指标名称" v-model="insertName" />
          <div class="label">
            <div
              v-for="(item,index) in labelData"
              :key="index"
              :class="{bgcolor:item.state}"
              @click="labelSelInd(index)"
            >{{item.text}}</div>
          </div>
        </div>
        <div class="center">
          <div>=</div>
          <div @click="bgclick(inds)">></div>
        </div>
        <div class="right">
          <textarea v-model="fontComput"></textarea>
          <div class="computer">
            <div
              v-for="(item,index) in computers"
              :key="index"
              @click="computSS(index)"
            >{{item.text}}</div>
          </div>
        </div>
      </div>
      <!-- 提示 -->
      <div class="explains">说明：指标只能从上表中显示</div>
      <!-- 确认取消 -->
      <div class="bnottom">
        <div @click="trueVerify">确认</div>
        <div @click="closeX">取消</div>
      </div>
    </div>
  </div>
</template>
<script>
import verify from '../../assets/js/verifyMathematicalExpression'
export default {
  name: 'insertLabel',
  data () {
    return {
      imgUrl: require('../../../static/nav/deleteImg.png'),
      radioValue: 'hang',
      fontComput: '',
      insertName: '',
      labelData: [
        { text: '健康的说法更健康', state: false },
        { text: '健康的说jksdfhjjk', state: false },
        { text: '健聚划算df覅㐇', state: false },
        { text: '健聚dfgs划算覅㐇', state: false },
        { text: '健聚jdskfasdfhn 划算覅㐇', state: false },
        { text: '健聚sdg划asd算覅㐇', state: false },
        { text: '健聚dsfg划f算覅㐇', state: false },
        { text: '健聚划sdasdffasf算覅㐇', state: false },
        { text: '健聚划sdasdff算覅㐇', state: false },
        { text: '健聚划sdf算覅s㐇', state: false },
        { text: '健聚划sdafsdf算ssd覅㐇', state: false },
        { text: '健聚划sasdfdf算覅㐇', state: false },
        { text: '健聚划ssadfdf算覅㐇', state: false },
        { text: '健聚划sdf算覅㐇', state: false },
        { text: '健聚划ssdafgfdf算s覅㐇', state: false },
        { text: '健聚划sdaasfdf算s覅㐇', state: false },
        { text: '健聚划sdasfdfa算覅㐇', state: false }
      ],
      computers: [
        { text: '*', state: false },
        { text: '-', state: false },
        { text: '7', state: false },
        { text: '8', state: false },
        { text: '9', state: false },
        { text: '/', state: false },
        { text: '+', state: false },
        { text: '4', state: false },
        { text: '5', state: false },
        { text: '6', state: false },
        { text: '(', state: false },
        { text: ')', state: false },
        { text: '1', state: false },
        { text: '2', state: false },
        { text: '3', state: false },
        { text: '.', state: false },
        { text: '0', state: false }
      ],
      // 左侧选中的指标下标
      inds: false
    }
  },
  watch: {
    radioValue (newValue, oldValue) {
      console.log(newValue)
      if (newValue === 'hang') {
        // 行列新增渲染
        if (this.$route.query.type === 'area') {
          switch (this.$store.state.SelecttDimension.col) {
            case 'dq':
              this.labelData = this.$store.state.transBefore.areaName.map((item, index) => {
                return {
                  text: item,
                  state: false
                }
              })
              break
            case 'sj':
              this.labelData = this.$store.state.transBefore.timeArr.map((item, index) => {
                return {
                  text: item,
                  state: false
                }
              })
              break
            case 'zb':
              this.labelData = this.$store.state.transBefore.termsName.map((item, index) => {
                return {
                  text: item,
                  state: false
                }
              })
              break
          }
        } else {
          this.labelData = this.$store.state.transBefore.termsName.map((item, index) => {
            return {
              text: item,
              state: false
            }
          })
        }
      } else if (newValue === 'lie') {
        // 行列新增渲染
        if (this.$route.query.type === 'area') {
          console.log(this.$store.state.SelecttDimension.row, this.$store.state.SelecttDimension.col)
          switch (this.$store.state.SelecttDimension.row) {
            case 'dq':
              this.labelData = this.$store.state.transBefore.areaName.map((item, index) => {
                return {
                  text: item,
                  state: false
                }
              })
              break
            case 'sj':
              this.labelData = this.$store.state.transBefore.timeArr.map((item, index) => {
                return {
                  text: item,
                  state: false
                }
              })
              break
            case 'zb':
              this.labelData = this.$store.state.transBefore.termsName.map((item, index) => {
                return {
                  text: item,
                  state: false
                }
              })
              break
          }
        } else {
          this.labelData = this.$store.state.transBefore.timeArr.map((item, index) => {
            return {
              text: item,
              state: false
            }
          })
        }
      }
    }
  },
  methods: {
    labelSelInd (ind) {
      this.inds = ind
      this.labelData.forEach((item, index) => {
        /*eslint-disable*/
        index === ind ? (item.state = true) : item.state = false
      })

    },
    bgclick(ind) {
      console.log(ind)
      if (ind !== false) {
        this.labelData.forEach((item, index) => {
          /*eslint-disable*/
          index === ind ? (this.fontComput += '#' + item.text + '#') : ''
        })
      } else {
        // alert('请选择指标！')
        this.$alert('请选择指标！', '温馨提示', {
          confirmButtonText: '确定',
        })
      }

    },
    closeX() {
      this.$store.state.insertWindowState = false
    },
    // 计算器
    computSS(ind) {
      // console.log(ind)
      // console.log(this.fontComput,'this.fontComput')
      this.computers.forEach((item, index) => {
        index === ind ? (item.state = true, this.fontComput += item.text) : item.state = false
      })
    },
    // 确定
    trueVerify() {
      let Str = JSON.parse(JSON.stringify(this.fontComput)).replace(/#.*?#/gi, '$').split('')
      console.log(Str, '处理成表达式')
      let bty = Str.map((item, index) => {
        let sft = item
        if (item === '$') {
          if (index === 0) {
            sft = (/^[0-9]+/.test(Str[index + 1]) || /^[$]+/.test(Str[index + 1])) ? '1*' : '1'
          } else if (index === Str.length - 1) {
            sft = (/^[0-9]+/.test(Str[index - 1]) || /^[$]+/.test(Str[index - 1])) ? '*1' : '1'
          } else {
            if ((/^[$]+/.test(Str[index + 1]))) {
              sft = '1*'
            } else if ((/^[$]+/.test(Str[index - 1]))) {
              sft = '*1'
            } else {
              sft = '1'
            }

          }
        } else {
          sft = item
        }
        return sft
      })
      console.log(bty.join(''))
      // 验证表达式是否正确
      // verify(bty.join(''), {})
      if (verify(bty.join(''), {})) {
        let newArrat = this.fontComput.split('#').filter((item, index) => {
          return item !== ''
        })
        console.log(newArrat)
        // 定义一个新数组用来存放新增指标的数据
        let newarr = []
        if (this.radioValue === 'hang') {
          if (this.$route.query.type !== 'area') {
            // 循环指标名称    回调一个计算后的数组

            let dataStrArr = this.$store.state.transBefore.termsName.map((item, index) => {//外层
              // console.log(this.$store.state.transBefore.transBeforeTermsData[index])
              // 定义拼接计算的字符串
              let comStr = ''
              newArrat.forEach((list, key) => {
                if (this.$store.state.transBefore.termsName.indexOf(list) !== -1) {
                  comStr += this.$store.state.transBefore.transBeforeTermsData[index][this.$store.state.transBefore.termsName.indexOf(list)]
                } else {
                  comStr += list
                }
              })
              // console.log(comStr)
              // console.log(eval(comStr))
              return eval(comStr).toString()
            })
            // 将处理完的数据放到全局变量中
            this.$store.state.transBefore.termsName.push(this.insertName)
            this.$store.state.transBefore.termsExplain.push('')
            this.$store.state.transBefore.transBeforeTermsData.push(dataStrArr)
            this.closeX()
            this.$emit('emitState', true)
          } else {
            let dataStrArr = null
            switch (this.$store.state.SelecttDimension.col) {
              case 'dq':
                // 循环地区名称    回调一个计算后的数组
                dataStrArr = this.$store.state.transBefore.areaName.map((item, index) => {//外层
                  // console.log(this.$store.state.transBefore.transBeforeAreaData[index])
                  // 定义拼接计算的字符串
                  let comStr = ''
                  newArrat.forEach((list, key) => {
                    if (this.$store.state.transBefore.areaName.indexOf(list) !== -1) {
                      comStr += this.$store.state.transBefore.transBeforeAreaData[index][this.$store.state.transBefore.areaName.indexOf(list)]
                    } else {
                      comStr += list
                    }
                  })
                  // console.log(comStr)
                  // console.log(eval(comStr))
                  return eval(comStr).toString()
                })
                // 将处理完的数据放到全局变量中
                this.$store.state.transBefore.areaName.push(this.insertName)
                break
              case 'sj':
                // 循环地区名称    回调一个计算后的数组
                dataStrArr = this.$store.state.transBefore.timeArr.map((item, index) => {//外层
                  // console.log(this.$store.state.transBefore.transBeforeAreaData[index])
                  // 定义拼接计算的字符串
                  let comStr = ''
                  newArrat.forEach((list, key) => {
                    if (this.$store.state.transBefore.timeArr.indexOf(list) !== -1) {
                      comStr += this.$store.state.transBefore.transBeforeAreaData[index][this.$store.state.transBefore.timeArr.indexOf(list)]
                    } else {
                      comStr += list
                    }
                  })
                  // console.log(comStr)
                  // console.log(eval(comStr))
                  return eval(comStr).toString()
                })
                // 将处理完的数据放到全局变量中
                this.$store.state.transBefore.timeArr.push(this.insertName)
                break
              case 'zb':
                // 循环地区名称    回调一个计算后的数组
                dataStrArr = this.$store.state.transBefore.termsName.map((item, index) => {//外层
                  // console.log(this.$store.state.transBefore.transBeforeAreaData[index])
                  // 定义拼接计算的字符串
                  let comStr = ''
                  newArrat.forEach((list, key) => {
                    if (this.$store.state.transBefore.termsName.indexOf(list) !== -1) {
                      comStr += this.$store.state.transBefore.transBeforeAreaData[index][this.$store.state.transBefore.termsName.indexOf(list)]
                    } else {
                      comStr += list
                    }
                  })
                  // console.log(comStr)
                  // console.log(eval(comStr))
                  return eval(comStr).toString()
                })
                // 将处理完的数据放到全局变量中
                this.$store.state.transBefore.termsName.push(this.insertName)
                this.$store.state.transBefore.termsExplain.push('')
                break
            }
            // 将处理完的数据放到全局变量中
            this.$store.state.transBefore.transBeforeAreaData.push(dataStrArr)
            this.closeX()
            this.$emit('emitState', true)
          }

        } else {
          if (this.$route.query.type !== 'area') {
            // console.log(this.$store.state.transBefore.transBeforeTermsData)
            let bsfyu = this.$store.state.transBefore.transBeforeTermsData
            // 将数据进行转置
            let datarts = bsfyu[0].map(function (col, index) {
              return bsfyu.map((row, key) => {
                return row[index]
              })
            })
            console.log(datarts)
            // 循环年
            let dataStrArr = this.$store.state.transBefore.timeArr.map((item, index) => {//外层
              // console.log(this.$store.state.transBefore.transBeforeTermsData[index])
              // 定义拼接计算的字符串
              let comStr = ''
              newArrat.forEach((list, key) => {
                if (this.$store.state.transBefore.timeArr.indexOf(list) !== -1) {
                  comStr += datarts[index][this.$store.state.transBefore.timeArr.indexOf(list)]
                } else {
                  comStr += list
                }
              })
              // console.log(comStr)
              // console.log(eval(comStr))
              return eval(comStr).toString()
            })
            console.log(dataStrArr, '101025')
            datarts.push(dataStrArr)
            // 将数据转置回来
            let newZz = datarts[0].map(function (col, index) {
              return datarts.map((row, key) => {
                return row[index]
              })
            })
            // 将处理完的数据放到全局变量中
            this.$store.state.transBefore.timeArr.push(this.insertName)
            this.$store.state.transBefore.transBeforeTermsData = newZz
            this.closeX()
            this.$emit('emitState', true)
          } else {
            // console.log(this.$store.state.transBefore.transBeforeAreaData)
            let bsfyu = this.$store.state.transBefore.transBeforeAreaData
            // 将数据进行转置
            let datarts = bsfyu[0].map(function (col, index) {
              return bsfyu.map((row, key) => {
                return row[index]
              })
            })
            console.log(datarts)
            let dataStrArr = null
            let newZz = null
            switch (this.$store.state.SelecttDimension.row) {
              case 'dq':
                // 循环年
                dataStrArr = this.$store.state.transBefore.areaName.map((item, index) => {//外层
                  // console.log(this.$store.state.transBefore.transBeforeAreaData[index])
                  // 定义拼接计算的字符串
                  let comStr = ''
                  newArrat.forEach((list, key) => {
                    if (this.$store.state.transBefore.areaName.indexOf(list) !== -1) {
                      comStr += datarts[index][this.$store.state.transBefore.areaName.indexOf(list)]
                    } else {
                      comStr += list
                    }
                  })
                  // console.log(comStr)
                  // console.log(eval(comStr))
                  return eval(comStr).toString()
                })
                console.log(dataStrArr, '101025')
                datarts.push(dataStrArr)
                // 将数据转置回来
                newZz = datarts[0].map(function (col, index) {
                  return datarts.map((row, key) => {
                    return row[index]
                  })
                })
                // 将处理完的数据放到全局变量中
                this.$store.state.transBefore.areaName.push(this.insertName)
                break
              case 'sj':
                // 循环年
                dataStrArr = this.$store.state.transBefore.timeArr.map((item, index) => {//外层
                  // console.log(this.$store.state.transBefore.transBeforeAreaData[index])
                  // 定义拼接计算的字符串
                  let comStr = ''
                  newArrat.forEach((list, key) => {
                    if (this.$store.state.transBefore.timeArr.indexOf(list) !== -1) {
                      comStr += datarts[index][this.$store.state.transBefore.timeArr.indexOf(list)]
                    } else {
                      comStr += list
                    }
                  })
                  // console.log(comStr)
                  // console.log(eval(comStr))
                  return eval(comStr).toString()
                })
                console.log(dataStrArr, '101025')
                datarts.push(dataStrArr)
                // 将数据转置回来
                newZz = datarts[0].map(function (col, index) {
                  return datarts.map((row, key) => {
                    return row[index]
                  })
                })
                // 将处理完的数据放到全局变量中
                this.$store.state.transBefore.timeArr.push(this.insertName)
                break
              case 'zb':
                // 循环年
                dataStrArr = this.$store.state.transBefore.termsName.map((item, index) => {//外层
                  // console.log(this.$store.state.transBefore.transBeforeAreaData[index])
                  // 定义拼接计算的字符串
                  let comStr = ''
                  newArrat.forEach((list, key) => {
                    if (this.$store.state.transBefore.termsName.indexOf(list) !== -1) {
                      comStr += datarts[index][this.$store.state.transBefore.termsName.indexOf(list)]
                    } else {
                      comStr += list
                    }
                  })
                  // console.log(comStr)
                  // console.log(eval(comStr))
                  return eval(comStr).toString()
                })
                console.log(dataStrArr, '101025')
                datarts.push(dataStrArr)
                // 将数据转置回来
                newZz = datarts[0].map(function (col, index) {
                  return datarts.map((row, key) => {
                    return row[index]
                  })
                })
                // 将处理完的数据放到全局变量中
                this.$store.state.transBefore.termsName.push(this.insertName)
                this.$store.state.transBefore.termsExplain.push('')
                break
            }
            // 将处理完的数据放到全局变量中
            // this.$store.state.transBefore.timeArr.push(this.insertName)
            this.$store.state.transBefore.transBeforeAreaData = newZz
            this.closeX()
            this.$emit('emitState', true)
          }


        }
      } else {
        // alert('您输入的表达式正确，请重新输入！')
        this.$alert('您输入的表达式正确，请重新输入！', '温馨提示', {
          confirmButtonText: '确定',
        })
      }
    }
  },
  mounted() {
    // 行列新增渲染
    if (this.$route.query.type === 'area') {
      if (this.$store.state.SelecttDimension.row === 'sj' && this.$store.state.SelecttDimension.col === 'dq') {
        this.labelData = this.$store.state.transBefore.areaName.map((item, index) => {
          return {
            text: item,
            state: false
          }
        })
      } else if (this.$store.state.SelecttDimension.row === 'dq' && this.$store.state.SelecttDimension.col === 'sj') {
        this.labelData = this.$store.state.transBefore.timeArr.map((item, index) => {
          return {
            text: item,
            state: false
          }
        })
      } else if (this.$store.state.SelecttDimension.row === 'sj' && this.$store.state.SelecttDimension.col === 'zb') {
        this.labelData = this.$store.state.transBefore.termsName.map((item, index) => {
          return {
            text: item,
            state: false
          }
        })
      } else if (this.$store.state.SelecttDimension.row === 'zb' && this.$store.state.SelecttDimension.col === 'sj') {
        this.labelData = this.$store.state.transBefore.timeArr.map((item, index) => {
          return {
            text: item,
            state: false
          }
        })
      } else if (this.$store.state.SelecttDimension.row === 'zb' && this.$store.state.SelecttDimension.col === 'dq') {
        this.labelData = this.$store.state.transBefore.areaName.map((item, index) => {
          return {
            text: item,
            state: false
          }
        })
      } else if (this.$store.state.SelecttDimension.row === 'dq' && this.$store.state.SelecttDimension.col === 'zb') {
        this.labelData = this.$store.state.transBefore.termsName.map((item, index) => {
          return {
            text: item,
            state: false
          }
        })
      }
    } else {
      this.labelData = this.$store.state.transBefore.termsName.map((item, index) => {
        return {
          text: item,
          state: false
        }
      })
    }
  }

}
</script>
<style lang="scss" scoped>
.insertLabel {
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  & > .container {
    width: 51.25rem;
    height: 51.25rem;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    & > .top {
      margin-top: 1.875rem;
      width: 46.25rem;
      height: 3.875rem;
      border-bottom: 0.125rem solid #bdbdbd;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      & > span {
        font-size: 1.375rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #333333;
      }
      & > img {
        width: 1.3125rem;
        height: 1.3125rem;
      }
      & > img:hover {
        cursor: pointer;
      }
    }
    & > .rowCol {
      margin: 1.25rem 0;
      width: 46.25rem;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      & > input {
        margin: 0 0.4rem;
      }
    }
    & > .computkuang {
      width: 46.25rem;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      & > .left {
        width: 16rem;
        & > input {
          width: 16rem;
          font-size: 0.8rem;
          letter-spacing: 0.0625rem;
        }
        & > .label {
          margin: 0.75rem 0;
          width: 16.16rem;
          height: 30rem;
          border: 0.0625rem solid #bdbbdb;
          overflow: auto;
          & > div {
            width: 100%;
            height: 2.125rem;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            font-size: 0.8rem;
            letter-spacing: 0.0625rem;
          }
          & > div:hover {
            cursor: pointer;
          }
          & > .bgcolor {
            background-color: #25aff3;
            color: #fff;
          }
        }
      }
      & > .center {
        margin: 0 1rem;
        width: 5rem;
        height: 30rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        & > div {
          width: 2rem;
          height: 2rem;
          font-size: 1.5rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        & > div:nth-child(2) {
          background-color: #25aff3;
          color: #fff;
        }
        & > div:nth-child(2):hover {
          cursor: pointer;
        }
      }
      & > .right {
        width: 25rem;
        height: 32.875rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        & > textarea {
          width: 24rem;
          height: 16rem;
        }
        & > .computer {
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: flex-start;
          flex-wrap: wrap;
          border: 1px solid #bdbdbd;
          & > div {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            margin: 0.75rem 0.82rem;
            width: 3rem;
            height: 1.8rem;
            border: 0.0625rem solid #bdbdbd;
            background: url("../../../static/data/bt_counter.jpg") repeat-x;
          }
          & > div:hover {
            cursor: pointer;
          }
        }
      }
    }
    & > .explains {
      width: 46.25rem;
      font-size: 1rem;
    }
    & > .bnottom {
      width: 46.25rem;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      & > div:nth-child(1) {
        width: 15.625rem;
        height: 3.1875rem;
        background-color: #52b6e3;
        border-radius: 0.3125rem;
        font-size: 1.25rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #ffffff;
      }
      & > div:nth-child(2) {
        width: 15.625rem;
        height: 3.1875rem;
        border-radius: 0.3125rem;
        border: solid 0.125rem #dbdbdb;
        border-radius: 0.3125rem;
        font-size: 1.25rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
      }
      & > div {
        margin: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      & > div:hover {
        cursor: pointer;
      }
    }
  }
}
</style>
