<template>
  <div>
    <vxe-modal
      :value="visible"
      show-footer
      :z-index="zIndex"
      title="流转"
      show-zoom
      :fullscreen="$store.getters.device === 'mobile'"
      show-confirm-button
      :width="640"
      :height="540"
      @input="e => $emit('update:visible',e)"
    >
      <div>
        <div class="steps">
          <el-steps :space="120" finish-status="success" align-center>
            <el-step
              :title="node.name"
              status="finish"
              :icon="isLastNode ? 'el-icon-check' : 'el-icon-edit'"
            ></el-step>
            <el-step
              v-if="!isLastNode"
              title="流转到下一节点"
              icon="el-icon-right"
              status="wait"
            ></el-step>
          </el-steps>
        </div>

        <el-divider></el-divider>

        <template v-if="!isLastNode">
          <div class="next-nodes">
            <div class="next-nodes__label">下一节点</div>

            <div>
              <el-radio-group v-model="form.next_node_id" @change="pickUsers = node2Users.get(form.next_node_id)">
                <el-radio v-for="node in node.nextNodes" :label="node.id">{{ node.name }}</el-radio>
              </el-radio-group>
            </div>
          </div>

          <el-divider></el-divider>

          <div class="users">
            <div class="users__label">承办人员</div>

            <template v-if="isJointlySign">
              <div>
                <div>
                  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                </div>
                <el-checkbox-group v-model="form.user_id" @change="handleCheckedUsersChange">
                  <div v-for="group in pickUsers" :key="group.id">
                    <div class="group-name">{{ group.name }}</div>
                    <el-checkbox v-for="user in group.users" :label="user.id">{{ user.name }}</el-checkbox>
                  </div>
                </el-checkbox-group>
              </div>
            </template>
            <template v-else>
              <div>
                <el-radio-group v-model="form.user_id">
                  <div v-for="group in pickUsers" :key="group.id">
                    <div class="group-name">{{ group.name }}</div>
                    <el-radio v-for="user in group.users" :label="user.id">{{ user.name }}</el-radio>
                  </div>
                </el-radio-group>
              </div>
            </template>
          </div>

<!--          抄送-->
          <template v-if="node.cc_open">
            <el-divider></el-divider>
            <div class="users">
              <div class="users__label">抄送人员</div>

              <div>
                <div>
                  <el-checkbox :indeterminate="ccIsIndeterminate" v-model="ccCheckAll" @change="handleCCCheckAllChange">全选</el-checkbox>
                </div>
                <el-checkbox-group v-model="form.cc_users" @change="handleCCCheckedUsersChange">
                  <div v-for="group in shareConfig.cc_users" :key="group.id">
                    <div class="group-name">{{ group.name }}</div>
                    <el-checkbox v-for="user in group.users"
                                 :key="user.id"
                                 :disabled="(shareConfig.flow && shareConfig.flow.ccs) ? (!!shareConfig.flow.ccs.find(j => j.user_id === user.id)) : false"
                                 :label="user.id">{{ user.name }}{{ user.position ? `(${user.position})` : '' }}</el-checkbox>
                  </div>
                </el-checkbox-group>
              </div>
            </div>
          </template>
        </template>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit"
          >{{ isLastNode ? '结束流程' : '确 定'}}</el-button
        >
      </span>
    </vxe-modal>
  </div>
</template>

<script>
import { getNextNode, getNextNodeUsers, assign, preShare } from "@/api/flow";
import { PopupManager } from 'element-ui/lib/utils/popup'

export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    config: Object,
    result: {
      type: Object,
      required: true
    },
  },
  data() {
    return {
      isIndeterminate: false,
      checkAll: false,

      zIndex: PopupManager.nextZIndex(),
      form: {
        cc_users: [],
        user_id: [],
        next_node_id: "",
      },

      node: {},
      node2Users: new Map(),
      pickUsers: [],

      shareConfig: {},
      ccIsIndeterminate: false,
      ccCheckAll: false,
    };
  },
  methods: {
    handleCheckAllChange(val) {
      this.form.user_id = val ? this.pickUsers?.map(i => i.users.map(j => j.id))?.flat() : [];
      this.isIndeterminate = false;
    },
    handleCheckedUsersChange(value) {
      let checkedCount = value.length;
      let dataLength = this.pickUsers?.map(i => i.users.map(j => j.id))?.flat()?.length ?? 0;
      this.checkAll = checkedCount === dataLength
      this.isIndeterminate = checkedCount > 0 && checkedCount < dataLength;
    },
    handleCCCheckAllChange(val) {
      this.form.cc_users = val ? this.shareConfig?.cc_users?.map(i => i.users.map(j => j.id))?.flat() : [];
      this.ccIsIndeterminate = false;
    },
    handleCCCheckedUsersChange(value) {
      let checkedCount = value.length;
      let dataLength = this.shareConfig?.cc_users?.map(i => i.users.map(j => j.id))?.flat()?.length ?? 0;
      this.ccCheckAll = checkedCount === dataLength
      this.ccIsIndeterminate = checkedCount > 0 && checkedCount < dataLength;
    },

    async getPreShare() {
      try {
        const res = await preShare(this.result.id);
        this.shareConfig = res;
        this.form.cc_users = res.exists_users;
      } catch (err) {
        console.error(err)
      }
    },

    async getNextNode() {
      try {
        const res = await getNextNode({
          id: this.result.id
        })
        this.node = res.currentNode || {}
      } catch(err) {
        console.error(err)
      }
    },

    async getNextNodesUsers() {
      try {
        const nodeIds = this.node?.nextNodes?.map(node => node.id);
        this.form.next_node_id = nodeIds[0];
        const res = await Promise.all(nodeIds.map(nodeId => getNextNodeUsers({
          id: this.result.id,
          next_node_id: nodeId,
        },false)));

        res.forEach((group, index) => {
          this.node2Users.set(nodeIds[index], group.users)
        })
        this.pickUsers = this.node2Users.get(this.form.next_node_id)
      } catch (err) {
        console.error(err)
      }
    },

    async submit() {
      try {
        if(this.isLastNode) {
          await assign(this.result.id)
        } else {
          await assign(this.result.id, this.form)
        }
        this.$router.push("/flow/list/handled");
      } catch(err) {

      }
    }
  },
  computed: {
    title() {
      return this.config?.customModel?.name + '流转'
    },
    isLastNode() {
      return this.node?.category === 'end'
    },
    isJointlySign() {
      return this.node?.nextNodes?.find(i => i.id === this.form.next_node_id)?.is_jointly_sign
    }
  },
  watch: {
    async visible(newVal) {
      if(newVal) {
        this.zIndex = PopupManager.nextZIndex()

        await this.getNextNode()
        if(this.node && this.node.nextNodes && this.node.nextNodes?.length > 0 && !this.isLastNode) {
          await this.getNextNodesUsers()
          this.getPreShare()
        }
      }
    }
  },
  created() {}
};
</script>

<style scoped lang="scss">
.next-nodes,.users {
  display: flex;

  &__label {
    flex-basis: 100px;
    font-weight: 600;
    color: #666;
  }
  .group-name {
    font-weight: 600;
    font-size: 13px;
    color: #98a6ad;
    line-height: 2;
  }
}
.dialog-footer {
  display: flex;
  justify-content: center;
}
::v-deep .steps {
  display: flex;
  justify-content: center;
}
</style>
