<template>
  <div class="editCom">
    <div class="container">
      <div class="top">
        <span>编辑</span>
        <img :src="imgUrl" alt @click="$store.state.editWindowState=false" />
      </div>
      <div class="titles">
        <div>
          <input type="radio" value="hang" v-model="radioSelect" />行
          <input type="radio" value="lie" v-model="radioSelect" />列
        </div>
        <div>
          <span @click="allSelect()">全选</span>
          <span>|</span>
          <span @click="fanselect()">反选</span>
        </div>
      </div>
      <div class="contanin">
        <div v-for="(item,index) in datalist" :key="index">
          <input type="checkbox" v-model="item.state" />
          {{item.text}}
        </div>
      </div>
      <!-- 确定取消 -->
      <div class="bottom">
        <div @click="trueEdit">确定</div>
        <div @click="$store.state.editWindowState=false">取消</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'editCom',
  data () {
    return {
      imgUrl: require('../../../static/nav/deleteImg.png'),
      radioSelect: 'hang',
      datalist: [
        { text: '接收到符合', state: false },
        { text: '接收到符合', state: false },
        { text: '接收到符合', state: false },
        { text: '接收到符合', state: false },
        { text: '接收到符合', state: false },
        { text: '接收到符合', state: false },
        { text: '接收到符合', state: false },
        { text: '接收到符合', state: false },
        { text: '接收到符合', state: false },
        { text: '接收到符合', state: false },
        { text: '接收到符合', state: false },
        { text: '接收到符合', state: false },
        { text: '接收到符合', state: false },
        { text: '接收到符合', state: false },
        { text: '接收到符合', state: false },
        { text: '接收到符合', state: false },
        { text: '接收到符合', state: false },
        { text: '接收到符合', state: false },
        { text: '接收到符合', state: false },
        { text: '接收到符合', state: false },
        { text: '接收到符合', state: false },
        { text: '接收到符合', state: false },
        { text: '接收到符合', state: false },
        { text: '接收到符合', state: false },
        { text: '接收到符合', state: false },
        { text: '接收到符合', state: false }
      ]
    }
  },
  watch: {
    radioSelect (newVal, oldVal) {
      console.log(newVal)
      if (newVal === 'hang') {
        // 行列新增渲染
        if (this.$route.query.type === 'area') {
          if (this.$store.state.SelecttDimension.row === 'sj' && this.$store.state.SelecttDimension.col === 'dq') {
            if (!this.$store.state.selectLabelHang) {
              this.datalist = this.$store.state.noChangeData.areaName.map((item, index) => {
                return {
                  text: item,
                  state: true,
                  id: index
                }
              })
            } else {
              this.datalist = this.$store.state.noChangeData.areaName.map((item, index) => {
                let state = true
                if (this.$store.state.selectLabelHang.indexOf(index) === -1) {
                  state = false
                } else {
                  state = true
                }
                console.log(state, 'state')
                return {
                  text: item,
                  state: state,
                  id: index
                }
              })
            }
          } else if (this.$store.state.SelecttDimension.row === 'dq' && this.$store.state.SelecttDimension.col === 'sj') {
            if (!this.$store.state.selectLabelHang) {
              this.datalist = this.$store.state.noChangeData.timeArr.map((item, index) => {
                return {
                  text: item,
                  state: true,
                  id: index
                }
              })
            } else {
              this.datalist = this.$store.state.noChangeData.timeArr.map((item, index) => {
                let state = true
                if (this.$store.state.selectLabelHang.indexOf(index) === -1) {
                  state = false
                } else {
                  state = true
                }
                console.log(state, 'state')
                return {
                  text: item,
                  state: state,
                  id: index
                }
              })
            }
          } else if (this.$store.state.SelecttDimension.row === 'sj' && this.$store.state.SelecttDimension.col === 'zb') {
            if (!this.$store.state.selectLabelHang) {
              this.datalist = this.$store.state.noChangeData.termsName.map((item, index) => {
                return {
                  text: item,
                  state: true,
                  id: index
                }
              })
            } else {
              this.datalist = this.$store.state.noChangeData.termsName.map((item, index) => {
                let state = true
                if (this.$store.state.selectLabelHang.indexOf(index) === -1) {
                  state = false
                } else {
                  state = true
                }
                console.log(state, 'state')
                return {
                  text: item,
                  state: state,
                  id: index
                }
              })
            }
          } else if (this.$store.state.SelecttDimension.row === 'zb' && this.$store.state.SelecttDimension.col === 'sj') {
            if (!this.$store.state.selectLabelHang) {
              this.datalist = this.$store.state.noChangeData.timeArr.map((item, index) => {
                return {
                  text: item,
                  state: true,
                  id: index
                }
              })
            } else {
              this.datalist = this.$store.state.noChangeData.timeArr.map((item, index) => {
                let state = true
                if (this.$store.state.selectLabelHang.indexOf(index) === -1) {
                  state = false
                } else {
                  state = true
                }
                console.log(state, 'state')
                return {
                  text: item,
                  state: state,
                  id: index
                }
              })
            }
          } else if (this.$store.state.SelecttDimension.row === 'zb' && this.$store.state.SelecttDimension.col === 'dq') {
            if (!this.$store.state.selectLabelHang) {
              this.datalist = this.$store.state.noChangeData.areaName.map((item, index) => {
                return {
                  text: item,
                  state: true,
                  id: index
                }
              })
            } else {
              this.datalist = this.$store.state.noChangeData.areaName.map((item, index) => {
                let state = true
                if (this.$store.state.selectLabelHang.indexOf(index) === -1) {
                  state = false
                } else {
                  state = true
                }
                console.log(state, 'state')
                return {
                  text: item,
                  state: state,
                  id: index
                }
              })
            }
          } else if (this.$store.state.SelecttDimension.row === 'dq' && this.$store.state.SelecttDimension.col === 'zb') {
            if (!this.$store.state.selectLabelHang) {
              this.datalist = this.$store.state.noChangeData.termsName.map((item, index) => {
                return {
                  text: item,
                  state: true,
                  id: index
                }
              })
            } else {
              this.datalist = this.$store.state.noChangeData.termsName.map((item, index) => {
                let state = true
                if (this.$store.state.selectLabelHang.indexOf(index) === -1) {
                  state = false
                } else {
                  state = true
                }
                console.log(state, 'state')
                return {
                  text: item,
                  state: state,
                  id: index
                }
              })
            }
          }
        } else {
          if (!this.$store.state.selectLabelHang) {
            this.datalist = this.$store.state.noChangeData.termsName.map((item, index) => {
              return {
                text: item,
                state: true,
                id: index
              }
            })
          } else {
            this.datalist = this.$store.state.noChangeData.termsName.map((item, index) => {
              let state = true
              if (this.$store.state.selectLabelHang.indexOf(index) === -1) {
                state = false
              } else {
                state = true
              }
              console.log(state, 'state')
              return {
                text: item,
                state: state,
                id: index
              }
            })
          }
        }
      } else if (newVal === 'lie') {
        if (!this.$store.state.selectLabelLie) {
          this.datalist = this.$store.state.noChangeData.timeArr.map((item, index) => {
            return {
              text: item,
              state: true,
              id: index
            }
          })
        } else {
          this.datalist = this.$store.state.noChangeData.timeArr.map((item, index) => {
            let state = true
            if (this.$store.state.selectLabelLie.indexOf(index) === -1) {
              state = false
            } else {
              state = true
            }
            console.log(state, 'state')
            return {
              text: item,
              state: state,
              id: index
            }
          })
        }
      }
    }
  },
  methods: {
    allSelect () {
      this.datalist.forEach((item, index) => {
        item.state = true
      })
    },
    fanselect () {
      this.datalist.forEach((item, index) => {
        item.state = !item.state
      })
    },
    // 筛选确定
    trueEdit () {
      if (this.radioSelect === 'hang') {
        if (this.$route.query.type !== 'area') {
          // 选中的下标
          let lebalIndex = this.datalist.filter((item, index) => {
            return item.state === true
          }).map((item, index) => {
            return item.id
          })
          this.$store.state.selectLabelHang = lebalIndex
          console.log(lebalIndex, '下标')

          this.$store.state.transBefore.termsExplain = this.$store.state.noChangeData.termsExplain.filter((item, index) => {
            return lebalIndex.indexOf(index) !== -1
          })
          this.$store.state.transBefore.termsName = this.$store.state.noChangeData.termsName.filter((item, index) => {
            return lebalIndex.indexOf(index) !== -1
          })
          this.$store.state.transBefore.transBeforeTermsData = this.$store.state.noChangeData.transBeforeTermsData.filter((item, index) => {
            return lebalIndex.indexOf(index) !== -1
          })
          this.$store.state.editWindowState = false
          this.$emit('emitState', true)
          console.log(this.$store.state.transBefore, 'this.$store.state.transBefore')
        } else {
          // 选中的下标
          let lebalIndex = this.datalist.filter((item, index) => {
            return item.state === true
          }).map((item, index) => {
            return item.id
          })
          this.$store.state.selectLabelHang = lebalIndex
          console.log(lebalIndex, '下标')
          switch (this.$store.state.SelecttDimension.col) {
            case 'dq':
              this.$store.state.transBefore.areaName = this.$store.state.noChangeData.areaName.filter((item, index) => {
                return lebalIndex.indexOf(index) !== -1
              })
              break
            case 'zb':
              this.$store.state.transBefore.termsExplain = this.$store.state.noChangeData.termsExplain.filter((item, index) => {
                return lebalIndex.indexOf(index) !== -1
              })
              this.$store.state.transBefore.termsName = this.$store.state.noChangeData.termsName.filter((item, index) => {
                return lebalIndex.indexOf(index) !== -1
              })
              break
            case 'sj':
              this.$store.state.transBefore.timeArr = this.$store.state.noChangeData.timeArr.filter((item, index) => {
                return lebalIndex.indexOf(index) !== -1
              })
              break
          }
          this.$store.state.transBefore.transBeforeAreaData = this.$store.state.noChangeData.transBeforeAreaData.filter((item, index) => {
            return lebalIndex.indexOf(index) !== -1
          })
          this.$store.state.editWindowState = false
          this.$emit('emitState', true)
          console.log(this.$store.state.transBefore, 'this.$store.state.transBefore')
        }
      } else if (this.radioSelect === 'lie') {
        if (this.$route.query.type !== 'area') {
          // 选中的下标
          let lebalIndex = this.datalist.filter((item, index) => {
            return item.state === true
          }).map((item, index) => {
            return item.id
          })
          this.$store.state.selectLabelLie = lebalIndex
          console.log(lebalIndex, '下标')

          // this.$store.state.transBefore.termsExplain = this.$store.state.transBefore.termsExplain.filter((item, index) => {
          //   return lebalIndex.indexOf(index) !== -1
          // })
          // this.$store.state.transBefore.termsName = this.$store.state.transBefore.termsName.filter((item, index) => {
          //   return lebalIndex.indexOf(index) !== -1
          // })
          // 数据转置
          let gdt = JSON.parse(JSON.stringify(this.$store.state.noChangeData.transBeforeTermsData))

          let waiBrr = gdt[0].map(function (col, index) {
            return gdt.map((row, key) => {
              return row[index]
            })
          })
          console.log(waiBrr, 'gdt125000')
          waiBrr = waiBrr.filter((item, index) => {
            return lebalIndex.indexOf(index) !== -1
          })
          console.log(waiBrr, 'waiBrr过滤后')
          // 转置回来
          waiBrr = waiBrr[0].map(function (col, index) {
            return waiBrr.map((row, key) => {
              return row[index]
            })
          })
          console.log(waiBrr, '转置回来')
          // 赋值
          this.$store.state.transBefore.transBeforeTermsData = waiBrr
          this.$store.state.transBefore.timeArr = this.$store.state.noChangeData.timeArr.filter((item, index) => {
            return lebalIndex.indexOf(index) !== -1
          })
          this.$store.state.editWindowState = false
          this.$emit('emitState', true)
          console.log(this.$store.state.transBefore, 'this.$store.state.transBefore')
        } else { // 地区列
          // 选中的下标
          let lebalIndex = this.datalist.filter((item, index) => {
            return item.state === true
          }).map((item, index) => {
            return item.id
          })
          this.$store.state.selectLabelLie = lebalIndex
          console.log(lebalIndex, '下标')

          // this.$store.state.transBefore.termsExplain = this.$store.state.transBefore.termsExplain.filter((item, index) => {
          //   return lebalIndex.indexOf(index) !== -1
          // })
          // this.$store.state.transBefore.termsName = this.$store.state.transBefore.termsName.filter((item, index) => {
          //   return lebalIndex.indexOf(index) !== -1
          // })
          // 数据转置
          let gdt = JSON.parse(JSON.stringify(this.$store.state.noChangeData.transBeforeAreaData))
          let waiBrr = gdt[0].map(function (col, index) {
            return gdt.map((row, key) => {
              return row[index]
            })
          })
          waiBrr = waiBrr.filter((item, index) => {
            return lebalIndex.indexOf(index) !== -1
          })
          // 转置回来
          waiBrr = waiBrr.map(function (col, index) {
            return waiBrr.map((row, key) => {
              return row[index]
            })
          })
          // 赋值
          this.$store.state.transBefore.transBeforeAreaData = waiBrr
          switch (this.$store.state.SelecttDimension.row) {
            case 'dq':
              this.$store.state.transBefore.areaName = this.$store.state.noChangeData.areaName.filter((item, index) => {
                return lebalIndex.indexOf(index) !== -1
              })
              break
            case 'zb':
              this.$store.state.transBefore.termsExplain = this.$store.state.noChangeData.termsExplain.filter((item, index) => {
                return lebalIndex.indexOf(index) !== -1
              })
              this.$store.state.transBefore.termsName = this.$store.state.noChangeData.termsName.filter((item, index) => {
                return lebalIndex.indexOf(index) !== -1
              })
              break
            case 'sj':
              this.$store.state.transBefore.timeArr = this.$store.state.noChangeData.timeArr.filter((item, index) => {
                return lebalIndex.indexOf(index) !== -1
              })
              break
          }
          this.$store.state.editWindowState = false
          this.$emit('emitState', true)
          console.log(this.$store.state.transBefore, 'this.$store.state.transBefore')
        }
      }
    }
  },
  mounted () {
    // 行列新增渲染
    this.radioSelect = 'hang'
    console.log(this.$store.state.selectLabelHang)
    if (this.$route.query.type === 'area') {
      if (this.$store.state.SelecttDimension.row === 'sj' && this.$store.state.SelecttDimension.col === 'dq') {
        if (!this.$store.state.selectLabelHang) {
          this.datalist = this.$store.state.noChangeData.areaName.map((item, index) => {
            return {
              text: item,
              state: true,
              id: index
            }
          })
        } else {
          this.datalist = this.$store.state.noChangeData.areaName.map((item, index) => {
            let state = true
            if (this.$store.state.selectLabelHang.indexOf(index) === -1) {
              state = false
            } else {
              state = true
            }
            console.log(state, 'state')
            return {
              text: item,
              state: state,
              id: index
            }
          })
        }
      } else if (this.$store.state.SelecttDimension.row === 'dq' && this.$store.state.SelecttDimension.col === 'sj') {
        if (!this.$store.state.selectLabelHang) {
          this.datalist = this.$store.state.noChangeData.timeArr.map((item, index) => {
            return {
              text: item,
              state: true,
              id: index
            }
          })
        } else {
          this.datalist = this.$store.state.noChangeData.timeArr.map((item, index) => {
            let state = true
            if (this.$store.state.selectLabelHang.indexOf(index) === -1) {
              state = false
            } else {
              state = true
            }
            console.log(state, 'state')
            return {
              text: item,
              state: state,
              id: index
            }
          })
        }
      } else if (this.$store.state.SelecttDimension.row === 'sj' && this.$store.state.SelecttDimension.col === 'zb') {
        if (!this.$store.state.selectLabelHang) {
          this.datalist = this.$store.state.noChangeData.termsName.map((item, index) => {
            return {
              text: item,
              state: true,
              id: index
            }
          })
        } else {
          this.datalist = this.$store.state.noChangeData.termsName.map((item, index) => {
            let state = true
            if (this.$store.state.selectLabelHang.indexOf(index) === -1) {
              state = false
            } else {
              state = true
            }
            console.log(state, 'state')
            return {
              text: item,
              state: state,
              id: index
            }
          })
        }
      } else if (this.$store.state.SelecttDimension.row === 'zb' && this.$store.state.SelecttDimension.col === 'sj') {
        if (!this.$store.state.selectLabelHang) {
          this.datalist = this.$store.state.noChangeData.timeArr.map((item, index) => {
            return {
              text: item,
              state: true,
              id: index
            }
          })
        } else {
          this.datalist = this.$store.state.noChangeData.timeArr.map((item, index) => {
            let state = true
            if (this.$store.state.selectLabelHang.indexOf(index) === -1) {
              state = false
            } else {
              state = true
            }
            console.log(state, 'state')
            return {
              text: item,
              state: state,
              id: index
            }
          })
        }
      } else if (this.$store.state.SelecttDimension.row === 'zb' && this.$store.state.SelecttDimension.col === 'dq') {
        if (!this.$store.state.selectLabelHang) {
          this.datalist = this.$store.state.noChangeData.areaName.map((item, index) => {
            return {
              text: item,
              state: true,
              id: index
            }
          })
        } else {
          this.datalist = this.$store.state.noChangeData.areaName.map((item, index) => {
            let state = true
            if (this.$store.state.selectLabelHang.indexOf(index) === -1) {
              state = false
            } else {
              state = true
            }
            console.log(state, 'state')
            return {
              text: item,
              state: state,
              id: index
            }
          })
        }
      } else if (this.$store.state.SelecttDimension.row === 'dq' && this.$store.state.SelecttDimension.col === 'zb') {
        if (!this.$store.state.selectLabelHang) {
          this.datalist = this.$store.state.noChangeData.termsName.map((item, index) => {
            return {
              text: item,
              state: true,
              id: index
            }
          })
        } else {
          this.datalist = this.$store.state.noChangeData.termsName.map((item, index) => {
            let state = true
            if (this.$store.state.selectLabelHang.indexOf(index) === -1) {
              state = false
            } else {
              state = true
            }
            console.log(state, 'state')
            return {
              text: item,
              state: state,
              id: index
            }
          })
        }
      }
    } else {
      if (!this.$store.state.selectLabelHang) {
        this.datalist = this.$store.state.noChangeData.termsName.map((item, index) => {
          return {
            text: item,
            state: true,
            id: index
          }
        })
      } else {
        this.datalist = this.$store.state.noChangeData.termsName.map((item, index) => {
          let state = true
          if (this.$store.state.selectLabelHang.indexOf(index) === -1) {
            state = false
          } else {
            state = true
          }
          console.log(state, 'state')
          return {
            text: item,
            state: state,
            id: index
          }
        })
      }
    }
    // console.log(this.datalist, 'this.dataList')
  }
}
</script>
<style lang="scss" scoped>
.editCom {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  & > .container {
    width: 43.3125rem;
    height: 44.125rem;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    & > .top {
      margin-top: 1rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 38.375rem;
      height: 3.875rem;
      border-bottom: 0.125rem solid #bdbdbd;
      & > 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;
      }
    }
    & > .titles {
      margin: 1rem 0;
      width: 38.375rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      & > div:nth-child(1) {
        & > input {
          margin: 0 0.5rem;
        }
        & > input:hover {
          cursor: pointer;
        }
      }
      & > div:nth-child(2) {
        & > span {
          margin: 0 0.5rem;
        }
        & > span:hover {
          cursor: pointer;
        }
      }
    }
    & > .contanin {
      padding: 0.5rem;
      width: 37.375rem;
      height: 27rem;
      border: 0.0625rem solid #bdbdbd;
      overflow: auto;
      & > div {
        width: 100%;
        height: 2rem;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
      }
    }
    & > .bottom {
      width: 38.375rem;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: flex-start;
      & > 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;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }
      & > div:nth-child(2) {
        width: 15.625rem;
        height: 3.1875rem;
        border: solid 0.125rem #dbdbdb;
        border-radius: 0.3125rem;
        font-size: 1.25rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #666666;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }
      & > div {
        margin: 3rem 1.2rem;
      }
      & > div:hover {
        cursor: pointer;
      }
    }
  }
}
</style>
