// 跟踪
<template>
  <div>
    <van-popup
      v-model="show"
      round
      duration="0"
      safe-area-inset-bottom
      position="bottom"
      class="dialog__min-height"
      style="min-height: 40vh; max-height: 80%"
    >
      <van-nav-bar
        title="跟踪"
        left-text="取消"
        right-text="确定"
        @click-left="show = false"
        @click-right="onClicshowkRight"
      />
      <van-form validate-first ref="vanForm">
        <van-field
          label="跟踪节点"
          readonly
          input-align="right"
          v-model="form.rejectMethodname"
          :rules="[
            {
              required: true,
              message: '请选择跟踪节点',
            },
          ]"
          placeholder="请选择"
          class="contentButton"
          @click="showSelectNode = true"
        >
          <template #button>
            <van-button size="small" icon="arrow"></van-button>
          </template>
        </van-field>
      </van-form>
    </van-popup>

    <van-popup
      v-model="showSelectNode"
      round
      :overlay="false"
      duration="0"
      position="bottom"
      style="min-height: 40vh; max-height: 80%"
    >
      <van-nav-bar
        title="选择节点"
        left-text="取消"
        right-text="确定"
        @click-left="
          () => {
            showSelectNode = false
            showDialog()
          }
        "
        @click-right="onClickRight"
        class="popup_header_fixed"
      />
      <van-search
        v-model="value"
        shape="square"
        placeholder="搜索"
        @input="searchClick"
        class="popup_header_margin"
      >
        <template #left-icon>
          <ht-icon name="search1" width="22" height="22" fill="#8C8C8C" />
        </template>
      </van-search>

      <div class="selectConten">
        <van-checkbox
          v-if="searchList.length > 0"
          v-model="checked"
          shape="square"
          @click="changeChecked"
        >
          全选
        </van-checkbox>

        <van-divider />
        <van-checkbox-group v-model="checkedNodes" ref="checkboxGroup">
          <template v-for="(item, i) of searchList">
            <van-checkbox
              :name="item.nodeId"
              shape="square"
              :key="i"
              @click="handleCheck(item.nodeId)"
            >
              {{ item.name }}
            </van-checkbox>
            <van-divider v-if="i + 1 !== List.length" />
          </template>
        </van-checkbox-group>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import { taskFollowSave } from '@/api/process'
  export default {
    name: 'tracking',
    props: {
      instId: {
        type: String,
        default: '',
      },
      defId: {
        type: String,
        default: '',
      },
      instId: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        show: false,
        showSelectNode: false,
        showRejectMethod: false,
        form: {
          rejectMethodname: '',
        },
        value: '',
        checked: false,

        datachecked: [],
        searchList: [],
        checkedNodes: [],
      }
    },

    watch: {
      checkedNodes: {
        handler(val) {
          if (val.length > 0 && this.searchList.length > 0) {
            if (val.length === this.searchList.length) {
              this.checked = true
            } else {
              let list = []
              val.forEach((item) => {
                this.searchList.forEach((i) => {
                  if (item === i.nodeId) {
                    list.push(item)
                  }
                })
              })

              if (list.length === this.searchList.length) {
                this.checked = true
              } else {
                this.checked = false
              }
            }
          } else {
            this.checked = false
          }
        },
        immediate: true,
        deep: true,
      },
      searchList: {
        handler(val) {
          if (val.length > 0 && this.searchList.length > 0) {
            if (val.length === this.checkedNodes.length) {
              this.checked = true
            } else {
              let list = []
              val.forEach((i) => {
                this.checkedNodes.forEach((item) => {
                  if (item === i.nodeId) {
                    list.push(item)
                  }
                })
              })

              if (list.length === this.searchList.length) {
                this.checked = true
              } else {
                this.checked = false
              }
            }
          } else {
            this.checked = false
          }
        },
        immediate: true,
        deep: true,
      },
      datachecked: {
        handler(val) {
          if (val.length > 3) {
            let valChange = JSON.parse(JSON.stringify(val))
            valChange.length = 3
            this.form.rejectMethodname = valChange.join(',')
            this.form.rejectMethodname = this.form.rejectMethodname + '...'
          } else this.form.rejectMethodname = val.join(',')
        },
        immediate: true,
        deep: true,
      },
      '$store.state.process.checkedNodes': {
        handler(val) {
          this.datachecked = []
          this.List.forEach((item) => {
            val.map((i) => {
              if (item.nodeId == i) {
                this.datachecked.push(item.name)
              }
            })
          })
        },
        immediate: true,
        deep: true,
      },
      showSelectNode: {
        handler(val) {
          if (val) {
            this.value = ''
            this.searchList = this.$store.state.process.nodes
            this.checkedNodes = this.$store.state.process.checkedNodes
          }
        },
      },
    },
    computed: {
      List() {
        return this.$store.state.process.nodes
      },
    },
    created() {
      this.searchList = this.$store.state.process.nodes
    },
    methods: {
      showDialog() {
        this.show = true
        const data = {
          defId: this.defId,
          proInst: this.instId,
        }
        this.$store.dispatch('process/getTaskNodeById', data)
      },

      changeChecked() {
        if (!this.checked) {
          this.searchList.forEach((item) => {
            this.checkedNodes.forEach((i, index) => {
              if (i === item.nodeId) {
                this.checkedNodes.splice(index, 1)
              }
            })
          })
        } else {
          this.searchList.forEach((item) => {
            this.checkedNodes.push(item.nodeId)
          })
        }

        this.checkedNodes = Array.from(new Set(this.checkedNodes))
      },
      handleCheck(nodeId) {
        const index = _.findIndex(this.checkedNodes, (item) => item == nodeId)
        if (index != -1) {
          this.$store.dispatch('process/setCheckedSplice', index)
        } else {
          this.$store.dispatch('process/setCheckedPush', nodeId)
        }
      },
      onClickRight() {
        if (this.checkedNodes.length < 1) {
          this.$toast({
            message: '请选择节点',
            position: 'top',
          })

          return
        }
        this.$store.commit('process/setCheckedNodeSempty')
        this.checkedNodes.forEach((item) => {
          this.$store.commit('process/setCheckedPush', item)
        })
        this.showSelectNode = false
      },
      //跟踪确认
      onClicshowkRight() {
        const { length } = this.checkedNodes
        this.$refs.vanForm.validate().then((res) => {
          const data = { taskId: '' }
          for (let i = 0; i < length; i++) {
            data.taskId = data.taskId + this.checkedNodes[i] + ','
          }
          data.proInst = this.instId
          taskFollowSave(data, (res) => {
            if (res.state) {
              this.showFllowSetting = false
              this.$toast.success(res.message)
              this.show = false
            } else {
              this.$toast.fail(res.message)
            }
          })
        })
      },
      //搜索
      searchClick() {
        this.searchList = []
        if (this.value) {
          this.List.forEach((item) => {
            if (item.name.indexOf(this.value) > -1) {
              this.searchList.push(item)
            }
          })
        } else this.searchList = this.List
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import '@/styles/matterButton.scss';
  .van-checkbox {
    font-size: 14px;
    padding: 0 12px;
  }
  .selectConten {
    padding: 12px 0 16px;
  }
  .popup_header_margin {
    .van-search__content {
      border-radius: 8px 8px 8px 8px;
      padding-left: 5px;
    }
  }
</style>